Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dying kittens and vendor-prefixes dramas

Dying kittens and vendor-prefixes dramas

Brisbane Web Design Metting, February 2012

Elle Meredith

February 28, 2012
Tweet

More Decks by Elle Meredith

Other Decks in Programming

Transcript

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

    http://www.w3.org/2005/10/Process-20051014/intro
  2. W3C process Revision cycles and reviews 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 W3C recommendation status More info: http://www.w3.org/2005/10/Process-20051014/intro
  4. 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
  5. Advantages •Namespacing browser interpretation and implementation •Prevention of buggy behaviour

    •Flexibility to continue making changes •Try new properties sooner and provide feedback •Future compatibility
  6. Optimal ordering -moz-border-radius: 20px; /* Firefox */ -webkit-border-radius: 20px; /*

    Safari 4 and earlier */ border-radius: 20px; /* Opera, Chrome, Safari 5, IE 9 */
  7. 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
  8. “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)
  9. Browser stats Jan 2012 Opera Safari Chrome Firefox IE 1.92%

    6.62% 28.4% 24.78% 37.45% Source: http://gs.statcounter.com/
  10. Experimental properties are often implemented in the webkit engine first…

    and often you may find sites using the -webkit prefixes alone
  11. 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
  12. •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
  13. •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
  14. “…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
  15. “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/)
  16. “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)
  17. 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/
  18. Books • CSS3 for Web Designers by Dan Cederholm •

    Stunning CSS3, A Project-Based Guide to the Latest in CSS by Zoe Mickley Gillenwater
  19. 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/
  20. Thank you Elle Meredith, Feb 2012, Brisbane Web Design Download

    from: https://github.com/elle/vendor-prefixes Typefaces used: Latin Modern Sans and Kontrapunkt