HTML and CSS Reference
In-Depth Information
Like HTML5, CSS3 is still a work in progress. It isn't a single specification; CSS3 consists of numerous
standalone modules, each progressing separately and at a difference pace. Some parts of CSS3 are
practically complete and already well supported by current browsers. Other parts are fairly well defined,
but have only been implemented as experimental features in a few browsers, so they should be used with
some care and caution. Some parts of the CSS3 specification are still in their early draft stages and have
yet to be implemented by any browsers, making it impossible to use them on the Web right now, but they'll
become available in the near future.
You can turn to the W3C website ( w3.org/standards/techs/css ) or to CSS3 Info
( css3.info/modules/ ) to keep tabs on the current status of each module as they move through the
standardization process. The Mozilla Developer Network has comprehensive, community-managed
documentation for just about every CSS property you can imagine
( https://developer.mozilla.org/en/CSS/CSS_Reference ) to help you better understand how CSS
works in both theory and in practice. Sites like Can I Use ( caniuse.com ) and CSS3 Click Chart
( css3clickchart.com ) offer at-a-glance guides so you can keep up with browser support.
Even in its unfinished and somewhat uncertain state, you can safely use many CSS3 features in your web
projects right now, although often with some caveats to consider. Practice progressive enhancement and
add CSS3 features wisely and responsibly, providing fallbacks for older browsers where sensible.
What you've already seen in this chapter is a working example of progressive enhancement in action.
We're using tried-and-true CSS techniques to lay out and design Power Outfitters in a way that should
work even in less capable browsers and devices, making the content functional and accessible to all
(within reason). Now we'll add even more layers of enhanced presentation, improving the site in the latest
and greatest browsers that can support these newer methods.
Vendor Prefixes
As the CSS specification continues to take shape, browser makers are busily trying to keep abreast of new
developments and implementing not-yet-finished features of CSS3. The CSS language includes a built-in
mechanism to allow such experimentation by rendering engines: the vendor prefix . Any experimental
property, value, or selector in CSS that is only supported in one given rendering engine—meaning it's a
proprietary, not-yet-standardized feature—should carry a coded prefix unique to that rendering engine.
In simpler language, experimental features are specially marked so only one rendering engine can
understand them. Other browsers should ignore those unrecognized properties and continue parsing the
style sheet as normal.
To offer one example, CSS3 introduces the ability to add a shadow effect behind (or within) an element
with the new box-shadow property. For some time the exact syntax of a box-shadow value was still being
decided, and browsers were figuring out how to render those shadows on screen. During this period of
development and experimentation, browsers implemented preliminary support for box-shadow by adding a
vendor-specific prefix to the property name:
-moz-box-shadow for Mozilla Firefox (and other browsers that use Mozilla's rendering engine).
 
Search WWH ::




Custom Search