Drupalcon notes: CSS3: The Future is Now

Find the slides at: http://extras.jensimmons.com/drupalconsf2010/css3.pdf

  • What can CSS3 do? Basically, suck less than CSS2. Lots of text and background effects.
  • "progressive enhancement" - the idea of a site looking different in different browsers - you write out all the specifications in such a way that browsers that can't support them simply ignore them.
  • You can do some awful hacks in IE6 - look at http://css3please.com/ but consider stabbing yourself in the eye first
  • http://modernizr.com - ways to push different code to different browsers
  • What about everyone else?  Safari, Chrome, Opera, Firefox? iPhone? iPad? If it works in Safari, it mostly works in Chrome -- they're both WebKit browsers
  • Browser makers are each implementing things that not everyone has agreed to
     -- and this is ok!
  • example: -moz-border-radius: gives you rounded borders in some browsers, webkit-border-radius: get you others. There's also border-radius: which is the CSS3 version. Right now, do all three to cover the greatest number of browsers. Also as trivia: -khtml-border-radius: for Konqueror
  • The CSS Working Group is creating the spec for CSS3 over time in 'modules'
  • http://border-radius.com lets you play with border-radius ideas
  • http://css3generator.com for working out details visually
  • multiple columns, zomg.
  • CSS3 gradient generator tool: http://gradients.glrzad.com/
  • More gradients: http://westciv.com/
  • RGBA = red-green-blue-alpha - play with it at http://css3generator.com
  • http://fontsquirrel.com and http://typekit.com
  • Dan Cederholm's Handcrafted CSS is apparently a very good book
  • http://www.w3.org/styles/css/current-work to see where CSS3 modules stand right now
all tags: