Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Anybody that remembers dealing with Internet Explorer 5 and the box model hack has a no desire to go back to those days. For those of you that weren't around for that little party, essentially Internet Explorer 5 passed element widths differently than the box model recommendation in CSS2. Instead of adding the element's width to the padding and the border to calculate the element's total width, Internet Explorer 5 would modify the element's content so that the total width, borders, padding, and all, would match up to the defined value and as you can imagine, that caused many, many layouts to break.
However, was it really all that bad? Are there times when you need an alternate way to calculate width? Actually, sometimes yeah, you do, and in CS3 we are given the box-sizing property in order to help us do just that. Let's take a look by opening up the box_ sizing.htm. A very simple structure here. We simply have 2 div tags, so if I scroll down the code we can see that we have two div tags inside of a wrapper element. Now currently the wrapper element is set to have a width of 900 pixels and box one and box two are set to have a width of 400 pixels and padding of 25.
Now I'm no math whiz, but if I have a left padding of 25 and a right padding of 25 and a width of 40, that's going me a total element width of 450 pixels and 450+450=900. So if I view this in my browser, these elements are occupying all of the available space and they are butting right up against each other. So what if somebody, one of my supervisors or someone says, "I can't tell the difference, put a border around these elements so I know who's who." Okay, fair enough.
So if I go back in my CSS and for first one just say okay, give it a border of 1 pixel solid #333, that's sort of a dark gray. We'll do the same thing for the second one. Border of one pixel solid #333. Now I am guessing that some of you guys already know what's going to happen here. If I save this and test it, boom! The layout breaks. Now why does the layout break? Well, I have added more width to the total width of these elements. Not much. One pixel on this side, one pixel on that side, so 4 pixels of extra width in total, but it's enough to break the layout and that happens a lot.
So we have to spend a lot of our time as designers calculating these total widths, making sure that we don't have one pixel's worth of padding here, or one pixel's worth of a border here that's going to cause our layouts to break. It's especially a problem when you're dealing with flexible layouts. Let me show you what I mean. Let's say we go up to our wrapper and make our wrapper 80% and then we go back down to our div tags and we take out this defined width of 400 pixels and change that to 40%.
Now again, 40% + 40% gives us 80% of the available space in our wrapper. That should leave us with 20% of the available space left over for our gutter between the two of them. One is floated to the left and one is floated to the right. If I save this and preview this in my browser, I get exactly that. So here the layouts are working just fine, but it is a flexible layout. What happens if my screen size changes or views this on a smaller screen? At a certain point it breaks and it breaks because of the element's content, the padding and the borders, they just simply can't fit within the space anymore, so we get column break.
Again, that's a direct result to the fact that this element isn't allowed to scale down, pass that available content. It's all in how content width is being defined. Okay, so CSS3 gives us a new property called box-sizing, and box-sizing has two possible keywords that you can use.=, border-box and content-box, and let's talk about those by actually doing them. So I am going to go to my number one selector here, the first element, and we are going ahead and use the box-sizing property. So -moz, so we are still need to use prefixes for the time being on these, box-sizing and I'm going to do border-box.
Now I'll talk about what this means in just a moment. Let's go ahead and get the rest of the selector written as well, so let's do webkit-box-sizing:border-box and then we will do the same thing, just regular old box-sizing, border-box, and then we will do the same thing. Just regular old box sizing, border box here as well. I am going to copy this and paste it into my second one. I'll save that. Right, so what does box-sizing do for us and what does border-box in particular do? Well, box-sizing essentially tells the browser that the way that you've been calculating the width of these elements, let's change that up a bit.
Now content-box is sort of the old way to do it. It's a standard way of calculating width and you won't see any change if you use content-box. Essentially it's saying, the total width is a calculation of the content width, the padding and the borders. Border-box on the other hand says wait a second, keep the padding and keep the border widths as well, but you are going to flex that content width so that the overall width is whatever the specified width is, in this case 40%. So again, if we save this and test it, you can see now that we really do have a flexible layout and as these elements get smaller, the content width is losing ground so that 40% can remain.
Now eventually, we have some overflow happening within Chrome, but it's trying to respect that content as much as it can, so we don't get column breaking. Now let's try the same thing in Firefox and we get a very similar result. We just don't have that same problem that we had earlier that was caused by how those element widths are being calculated. Now what's nice about this is it doesn't really matter what your padding and your border is. It's going to reduce the content width in order to make the widths fit.
So if I increase my padding, let's say I increase the padding to 50 pixels on both of those, the behavior is still going to be the same. So as I save this and preview this in Chrome, notice that even though the padding is much higher, the width is still restricted to that 40%. Now that's causing the content itself to break and it's leaving it much less room, but in the end the layout is being preserved, and in many cases that's a little but more important than the actual content width itself, and of course, that's a value call that you make. Which is great, because the box-sizing property gives us the ability to make that call.
I don't want to give Internet Explorer 5 too much credit, but to be honest, it's actually really nice to see that we have that ability now. That the box-sizing property. It's just giving us another option in how to calculate those element width. And it certainly makes creating flexible layouts a lot easier to style, because we don't have to do all those precise calculations, especially when percentages are involved. As you can see, box-sizing is well supported even by Internet Explorer, although vendor prefixes are for the moment still required in all the browsers, except for Opera.
So box-sizing is definitely something that you can take advantage of now. I don't see the implementation changing too much over the course of it becoming a proposed recommendation. Just be sure to use this vendor prefixes on box-sizing and I think it's something that can really help you when you're creating your layouts, especially when creating flexible layouts.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.