[wp-trac] [WordPress Trac] #24306: Twenty Thirteen: border-box box sizing will break many plugins

[WordPress Trac]

#24306: Twenty Thirteen: border-box box sizing will break many plugins
---------------------------+--------------------
 Reporter:  professor99    |       Owner:
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  3.6
Component:  Bundled Theme  |     Version:  trunk
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |
---------------------------+--------------------

Comment (by professor99):

 I did reply comprehensively last week but it seems my reply disappeared
 into the ether. So here goes again.

 Simplifying or making the CSS look tidier is not a good enough reason for
 this change. Obenland's earlier suggestion of using a block definition for
 border box sizing is one way of making it tidier though I prefer leaving
 it with the elements for clarity.

 As a plugin author box models are the bane of our existence and having to
 support both content and border box models for all themes by using
 javascript or weird CSS plus write CSS for both cases would definitively
 break the camel's back. As I have mentioned before I would definitely be
 for the border box model if this was the first release of WordPress but
 requiring plugin authors to support both models by using border-box sizing
 for this theme is badly thought out.

 The statement 'Yes, it could break some things visually, but users won't
 lose any content, so the severity is minimal' is incorrect. If any
 containing elements have the overflow property set to hidden the results
 could be catastrophic.

 Try this for example with border box sizing.

 <div style="width:100px;padding:40px;">
   <div style="overflow:hidden">
     <div style="width:80px;font-size:22px;">$100000</div>
   </div>
 </div>

 One workaround that could satisfy everybody is to use the universal
 selector to define border box sizing for most of the theme but set it back
 to content box sizing for widgets and content as follows.

 .widget, .widget * {
         -webkit-box-sizing: content-box;
         -moz-box-sizing:    content-box;
         box-sizing:         content-box;
 }

 .entry-content, .entry-content * {
         -webkit-box-sizing: content-box;
         -moz-box-sizing:    content-box;
         box-sizing:         content-box;
 }

--
Ticket URL: <http://core.trac.wordpress.org/ticket/24306#comment:21>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software