    
|
|
|
It's February 1st today, which I've decided to declare International box-sizing Awareness Day. In honor of, you guessed it, the most humble and undersung, yet awesome and useful CSS property: box-sizing.
The date corresponds to Paul Irish's post where he introduced the concept of using it on every single element on the page. We've talked about it around here a few times as well.
Here it is, in all it's glory:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}The default value for box-sizing is content-box, which is what we are overriding here. There is also a padding-box value but... kinda useless if you ask me. We'll get to what this means shortly.
Notice we're using the * selector to select all elements, as well as making pseudo elements use the same model, which otherwise wouldn't be selected by the * selector alone.
Here's the browser support situation. "-" = "this version and down". "+" = "this version and up".
*, *:before, *:after {
/* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
-webkit-box-sizing: border-box;
/* Firefox (desktop or Android) 28- */
-moz-box-sizing: border-box;
/* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
box-sizing: border-box;
}In the fairly near future we won't need any prefixes at all for it, but I like to just leave that kind of thing to Autoprefixer.
It makes working with boxes so super duper much nicer.
When you set the width of an element, that's the width that it is. If you set the width to 25%, it will take up 1/4 of the horizontal space available in its parent element. That's it.
That's not always the case. With the default box-sizing, as soon as an element has either padding or border applied, the actual rendered width is wider than the width you set.
Actual width = width + border-left + border-right + padding-left + padding-right
The math is bad enough, but when combined with percentages (or any mixed units, really) the result is impossible to do in your head and, more importantly, ends up being some useless number that you can't do anything with.
You might think of it this way: with box-sizing: border-box the padding and border press their way inside the box rather than expand the box. The result is a box the exact width you set it to be and can count on.
Columns is a particularly useful case, but this comes in useful all the time and becomes one of those things that just makes CSS development better.
Remember to read Paul's original post which covers some more ground like performance (don't worry about it), jQuery (don't worry about it), and third-party content (easy to fix).
Happy International box-sizing Awareness Day! Maybe next year we can get organized about it and all wear groovy square sunglasses or something.
International box-sizing Awareness Day is a post from CSS-Tricks
]]>|
|
|
|
|
|
|
|
Every week we feature a set of comics created exclusively for WDD.
The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.
These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.
So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.
Feel free to leave your comments and suggestions below as well as any related stories of your own…
Can you relate to these situations? Please share your funny stories and comments below…
| 890 Unique Handwritten Decorative Shapes – only $11! |  |
|
|
Congratulations to Ahmad! He has passed his proposal exam and formally become a PhD candidate. A brief summary of Ahmad's PhD research topic is as follows:
Healthcare is one of the largest growing burdens for the US economy. Effective and efficient home healthcare can help control healthcare costs and improve healthcare quality and increase patient independence. In the future, it will be almost unimaginable to consider home healthcare without the emerging home healthcare information technology including wireless sensor networks and robotics. Despite their potential for home healthcare, previous research on these technologies has largely focused on the technical implementation, technology improvement and clinical applications with very limited discussion of the larger socio-technical, cognitive, and contextual issues that are arguably equally important. Ahmad's PhD dissertation aims to bridge this knowledge gap by building a generic model that explains the adoption behavior for these emerging technologies in home healthcare.
]]>