Categories
SXSW '12

Lie to Me: CSS3 Demystified by Haakon Wium Lie

Tuesday, March 13 – 11:00AM -12:00PMHå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. […]

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.

CSS3

  • border-radius
  • box-shadow

Example: The menu on Apple.com 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);

Testing

  • 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