HTML and CSS Reference
In-Depth Information
A common predicament in the advertising industry involves the fact that many clients want to use the latest
and greatest features available, but they don't understand what goes into developing them nor why it takes so long
to accomplish something that seems to them rather simple. In the simple gradient example, it takes four times the
amount of code it would if standardization were in place. More bytes are also eaten up to download from the server,
as our code is now four times as large. Plus when an updates needs to be made, we now have to make it in five
different places for the same effect. It gets exhausting quickly as your code grows.
This topic is raising some big concerns throughout the industry; there was even a discussion in April 2012, where
the W3C and Opera questioned whether to add webkit prefixes as a standard. Essentially, Opera would adopt Webkit
commands into its browser engine to adapt to the laziness of most programmers omitting their specific prefix. This,
in my opinion, goes against everything that the W3C stands for—and in the CSS realm, that should be creating a
vendor-agnostic standard to eliminate the need for any and all prefixes, thus creating true browser interoperability.
Going with Webkit as a standard and having other browser manufacturers adopt it is not creating a standard at all; it's
creating conformity to what's popular and is used most commonly due to developer laziness. A good article on this
topic can be found at http://www.sitepoint.com/opera-css3-webkit-prefix .
Going Prefixless
The general consensus among developers seems to be that the way to head is having no prefixes at all. The ability
to use these new features by calling upon them without any vendor specificity is something that needs and should
happen across browsers as they become standardized in the open web. Some of the new features in the CSS3 spec
are currently pretty much finalized and at a “candidate recommendation” level within the adoption process. This
means some of these require no prefixes at all, since browsers are starting to support them prefix-less. Some of these
properties are outlined in Table 5-2 .
Table 5-2. CSS Prefixless Properties
Property
Use
Border-radius
Used for rounding borders of DOM objects.
Box-shadow
Used for adding shadow effect to DOM objects.
Colors (RGBA)
Allows colors to be defined via RGB along with an alpha (transparency) setting.
Colors (HSLA)
Allows colors to be defined in HSL (hue, saturation, and lightness) or HSLA format
(hue, saturation, lightness, and alpha).
Media queries
Serve styles to a browser depending on media type (print, screen, etc.) and media
condition (screen size, portrait, landscape, etc.).
Multiple backgrounds
Allows multiple background images to be placed on a single element.
Opacity
Allows application of a transparency setting to an element and all of its children.
It truly comes down to the very emerging features that need prefixes. However, the Web, as you know, moves
very quickly; so keep checking up on the features that can be put to use today. There are also some pretty nice tools
on web sites that any developer or designer can use to take the guesswork out of writing CSS3. One such tool is Prefix
Free ( http://leaverou.github.com/prefixfree ) . Prefix Free is a JavaScript file to be included in your document
that adds the current browser's prefix to any CSS code but applies it only when it's required. Minimal code bloat! Its
small file size (it comes in at only 8 kilobytes minified) makes it especially great for advertising. However, it has some
limitations, so be sure to read up on at the site before implementing it in a production campaign. Another useful tool
is Prefixr ( http://prefixr.com ). You paste in your CSS syntax, and with the press of a button, WHALAA! It allows you
to update your CSS to include all the vendor prefixes you may require for cross browser deployment.
 
 
Search WWH ::




Custom Search