HTML and CSS Reference
In-Depth Information
Many of the visual e " ect properties of CSS3 that we've gone over have a
great bonus in addition to making your design look great: they can improve
e ! ciency, both in your development process and in the performance of the
pages themselves.
Any CSS3 property that keeps you from having to create and add extra
images is going to reduce the time it takes you to create new pages as well
as re-skin existing ones. Less images also mean less stu " for the server to
have to send out and less stu " for the users to download, both of which
increase page loading speed.
CSS3 properties that keep you from having to add extra div s or extra
classes can also reduce your development time as well as file size. We've
already gone over some great techniques that help with this, but there are a
few more worth mentioning.
The box-sizing Property
Aids in: e " ciency
In addition to the div -conserving properties we've already talked about, the
box-sizing property can also help limit your div use in certain situations.
In the traditional W3C box model of CSS 2.1, the value you declare for a
width or height controls the width or height of the content area only, and
then the padding and border are added onto it. (This is called the content-
box model.) If you've worked with CSS for a while, you're probably used to
the content-box box model and don't really think much about it. But, it can
lead you to add extra div s from time to time. For instance, if you want to set
a box's width and padding in di " erent units of measurement from each
other, like ems for the width and pixels for the padding, it's often easiest to
nest another div and apply the padding to this instead, to make sure you
know how much total space the box will take up. In small doses, nesting
Search WWH ::




Custom Search