Information and Insights from Sessions at SXSW in Austin, TX

Lie to Me: CSS3 Demystified by Haakon Wium Lie

Posted: March 13th, 2012 | Author: | Filed under: SXSW '12 | 1 Comment »

Tuesday, March 13 – 11:00AM -12:00PM
Håkon Wium Lie CTO Opera Software

CSS Timeline

  • 1994 – Cascading HTML style sheets
  • 1996 CSS1
  • 1998 CSS2
  • 2012 CSS3 Where is it??

HTML has a simple structure, universal semantics, media-independent. It doesn’t have any presentation until the image tag arrived. Somehow the image tag took away the true text. The answer to this was CSS.


  • border-radius
  • box-shadow

Example: The menu on is currently done with images – it could be done fully in CSS3. The problem is (and probably the reason Apple has not done it with CSS3) older browsers do not support this.

  • @font-face (this has existed since CSS2)

CSS3 Transitions

  • transition: 1s; transform: rotate(-360deg);


  • The acid 2 test was created to test browser compatibility with CSS. This put pressure on Microsoft to handle CSS correctly. In IE8, they finally did it.

Paging the Web

  • Opera Reader takes a long web page and gets rid of the scroll. It cuts it up into pages.
  • overflow: paged; is the tag that the Opera Reader recognizes.

Slides and Code Available