Dying kittens and vendor-prefixes dramas

Dying kittens and vendor-prefixes dramas

Brisbane Web Design Metting, February 2012


Elle Meredith

February 28, 2012


  1. Dying kittens & vendor prefixes dramas Elle Meredith

  2. W3C process Working groups create specs and guidelines More info:

  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

  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