W3C process Revision cycles and reviews Working groups create specs and guidelines W3C recommendation status More info: http://www.w3.org/2005/10/Process-20051014/intro
Most widely-used vendors and their associated prefixes: Prefix Rendering Engine Browsers -khtml- KHTML Konqueror -ms- Trident Internet Explorer -moz- Mozilla Firefox, Camino, Flock -o- Presto Opera, Opera Mobile, Opera Mini, Nintendo Wii -webkit- Webkit Safari, Safari on iOS, Chrome, Android Source: Stunning CSS3, A Project-Based Guide to the Latest in CSS by Zoe Mickley Gillenwater, page 25
Advantages •Namespacing browser interpretation and implementation •Prevention of buggy behaviour •Flexibility to continue making changes •Try new properties sooner and provide feedback •Future compatibility
Problems with prefixes •Repetitious lines of CSS might be annoying •Stylesheets with vendor prefixes do not validate •Experimental properties not part of the CSS3 specs
“In terms of repetition and annoyance, yes, the two are very much alike. But they’re fundamentally di!erent in this way: Pre"xes give us control of our hacking destiny. In the past, we had to invent a bunch of parser exploits just to get inconsistent implementations to act the same once we found out they were inconsistent. It was a wholly reactive approach. Pre"xes are a proactive approach. —Eric Meyer ” Source: Prefix or Posthack by Eric Meyer (http://alistapart.com/articles/prefix-or-posthack)
The issue was raised and discussed in a W3C meeting on February 7, 2012: “Web standards activists are teaching people to use webkit. You will see presentations from all the web standards advocates advocating people to use webkit prefixes. “Our job is to solve interoperability. “At this point we’re trying to figure out which and how many webkit prefix properties to actually implement support for in Mozilla. “If we don’t support webkit prefixes, we are locking ourselves out of parts of the mobile web.” Source: http://lists.w3.org/Archives/Public/www-style/2012Feb/0313.html
•W3C should be quicker and more prudent with its forward decisions •Browser vendors should work towards improved support for CSS3 specs instead of implementing another browser’s proprietary features •Apple, Google and experimental (non-CSS3 specs) properties
•Fix the code, otherwise your site is contributing to the problem •If using experimental properties, specify in a comment: /* warning: non-standard */ •Implement progressive enhancement and accept the differences between browsers
“…don’t fret over vendor pre"xes. Use them knowing you’re a part of a process that allows you to get work done today, and paves the way toward a future when pre"xes can be dropped. —Dan Cederholm ” Source: CSS3 for Web Designers by Dan Cederholm, page 13
•Online Petition by the Web Standards Project: http://www.change.org/petitions/ microsoft-mozilla-opera-dont- make-webkit-prefixes-a-de-facto- standard •Become involved
“Public service announcement: Every time you call a proprietary feature ‘CSS3,’ a kitten dies. —Lea Verou ” Source: Every Time You Call a Proprietary Feature “CSS3,” a Kitten!Dies by Lea Verou (http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/)
“So the next time you "nd yourself grumbling about declaring the same thing four times, once for each browser, remember that the pain is temporary. It’s a little like a vaccine—the shot hurts now, true, but it’s really not that bad in comparison to the disease it prevents. —Eric Meyer ” Source: Prefix or Posthack by Eric Meyer (http://alistapart.com/articles/prefix-or-posthack)
Resources Compatibility references for support of HTML5, CSS3… • http://www.findmebyip.com/litmus • http://caniuse.com • http://css3clickchart.com Adding CSS3 support to CSSEdit including vendor prefixes: • http://fordinteractive.com/2009/11/adding-css3-support- to-cssedit/ • http://gigaom.com/apple/enable-css3-support-for-cssedit/
Articles • Call for action on Vendor Prefixes by Rachel Andrew http:// www.webstandards.org/2012/02/09/call-for-action-on-vendor-prefixes/ • Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies by Lea Verou http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3- a-kitten-dies • Now vendor prefixes have become a problem, want to help fix it? by Christian Heilmann http://christianheilmann.com/2012/02/09/now-vendor-prefixes-have- become-a-problem-want-to-help-fix-it/ • Prefix or Posthack by Eric Meyer http://www.alistapart.com/articles/prefix-or-posthack • Stop Forking with CSS3 by Aaron Gustafson http:/alistapart.com/articles/stop-forking-with-css3 • The Impending CSS Vendor Prefix Catastrophe by Craig Buckler http:// www.sitepoint.com/w3c-css-webkit-prefix-crisis/ • This Must Not Happen by Aaron Gustafson http://blog.easy-designs.net/archives/ 2012/02/09/this-must-not-happen/
Thank you Elle Meredith, Feb 2012, Brisbane Web Design Download from: https://github.com/elle/vendor-prefixes Typefaces used: Latin Modern Sans and Kontrapunkt
aemeredith
yatasunshine
shohata
taowata
ogom
jmatsu
tomokusaba
adammc331
tapompom
ogiwarat
kin29
subomi
hirodragon112
sachag
jacobian
eileencodes
hursman
danielanewman
maggiecrowley
colly
dougneiner
notwaldorf
aarron
lara
philhawksworth