HTML and CSS Reference
In-Depth Information
Browser-Specific Properties & Values
What are all those hyphens and letters on the
box-sizing
property?
As CSS3 was introduced, browsers gradually began to support different proper-
ties and values, including the
box-sizing
property, by way of vendor prefixes.
As parts of the CSS3 specification are finalized and new browser versions are re-
leased, these vendor prefixes become less and less relevant. As time goes on,
vendor prefixes are unlikely to be a problem; however, they still provide support
for some of the older browsers that leveraged them. We may run across them
from time to time, and we may even want to use them should we wish to support
older browsers.
Vendor prefixes may be seen on both properties and values, all depending on the
CSS specification. Here they are shown on the
box-sizing
property. Browser
vendors were free to chose when to use a prefix and when not to. Thus, some
properties and values require vendor prefixes for certain browser vendors but not
for others.
Moving forward, when a property or value needs a vendor prefix, the prefix will
only be used in the introduction of that property or value (in the interest of keep-
ing our code digestible and concise). Do not forget to add the necessary vendor
prefixes when you're actually writing the code.
For reference, the most common vendor prefixes are outlined here:
•
Mozilla Firefox:
-moz-
•
Microsoft Internet Explorer:
-ms-
•
Webkit (Google Chrome and Apple Safari):
-webkit-
Padding Box
The
padding-box
value alters the box model by including any
padding
property val-
ues within the
width
and
height
of an element. When using the
padding-box
value,
if an element has a width of
400
pixels and a
padding
of
20
pixels around every side,
the actual
width
will remain
400
pixels. As any
padding
values increase, the content
size within an element shrinks proportionately.
If we add a
border
or
margin
, those values will be added to the
width
or
height
properties to calculate the full box size. For example, if we add a
border
of
10
pixels and
Search WWH ::
Custom Search