Dying kittens and vendor-prefixes dramas

Brisbane Web Design Metting, February 2012

Transcript

1. Dying kittens & vendor prefixes dramas Elle Meredith
2. W3C process Working groups create specs and guidelines More info: http://www.w3.org/2005/10/Process-20051014/intro
3. W3C process Revision cycles and reviews Working groups create specs and guidelines More info: http://www.w3.org/2005/10/Process-20051014/intro
4. 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
5. Drafts of first 3 CSS3 modules were published in June 99
6. What are vendor prefixes and why do they exist?
7. Basically… •Experimental property •Not yet at candidate recommendation status
8. -webkit-border-radius
9. -webkit-border-radius dash prefixed keyword flagging it as wip
10. 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
11. Advantages •Namespacing browser interpretation and implementation •Prevention of buggy behaviour •Flexibility to continue making changes •Try new properties sooner and provide feedback •Future compatibility
12. Rounded corners div { !webkit!border!radius: 5px; !moz-border!radius: 5px; !ms-border!radius: 5px; !o-border!radius: 5px; border!radius: 5px; }
13. Optimal ordering -moz-border-radius: 20px; /* Firefox */ -webkit-border-radius: 20px; /* Safari 4 and earlier */ border-radius: 20px; /* Opera, Chrome, Safari 5, IE 9 */
14. 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
15. “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)
16. So why are we talking about vendor prefixes today?
17. Browser stats Jan 2012 Opera Safari Chrome Firefox IE 1.92% 6.62% 28.4% 24.78% 37.45% Source: http://gs.statcounter.com/
18. Experimental properties are often implemented in the webkit engine first… and often you may find sites using the -webkit prefixes alone
19. div { !webkit!border!radius: 5px; !moz-border!radius: 5px; !ms-border!radius: 5px; !o-border!radius: 5px; border!radius: 5px; }
20. div { !webkit!border!radius: 5px; border!radius: 5px; }
21. 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
22. In a nutshell: Non-webkit browsers will support the -webkit prefix.
23. Causes? or more importantly, What now?
24. •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
25. •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
26. “…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
27. •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
28. “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/)
29. Available tools
30. http://sass-lang.com
31. http://lesscss.org
32. http://css-tricks.com/musings-on-preprocessing/
33. http://ecsstender.org
34. http://css3please.com
35. http://leaverou.github.com/prefixfree
36. http://prefixr.com
37. What do I usually do?
38. http://css3generator.com
39. “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)
40. 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/
41. Books • CSS3 for Web Designers by Dan Cederholm • Stunning CSS3, A Project-Based Guide to the Latest in CSS by Zoe Mickley Gillenwater
42. 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/
43. Thank you Elle Meredith, Feb 2012, Brisbane Web Design Download from: https://github.com/elle/vendor-prefixes Typefaces used: Latin Modern Sans and Kontrapunkt