drawing back the curtains on css implementation

[ SXSW Bios ] #sxcss

  • @mollydotcom
  • @fantasai
  • @tabatkins
  • @davidbaron
  • @sgalineau

Brief

In this session, representatives from major browser vendors including Chrome, Microsoft, Opera and the W3C will pull back the curtain revealing some of the challenges with implementation and interoperability. The goal is to have designers and developers get a glimpse into how CSS has struggled and finally gained its footing as the presentation layer in everything we do for the Web.

Feedback

cc blog posts about css spec the working group: @csswg

Worst Mistakes

  • “width property to pertain to the content box instead of the border box. should have used width to include padding/margin.”
  • “layout: css first created as a document language, not an application language. float is for typography not for layout, but web devs did their best. “starting from i want to layout a document instead of i want to layout a web page”
  • things being made more complicated than they needed to be by imprecise definition. “margin collapsing was originally described as “all adjoining margins collapse.”
  • “floats: why use them instead of positioning?” missing pieces: css substition (variables) declared/reusable property sets.

Layout

Layout managers almost uniformly suck. Flex Box, Grid, Position, Regions. Systems that work on print don’t always work in web because CSS has to deal with fallback scenarios and multiple devices. What are the different use cases for layout? A system for each use case or one system for all use cases?

What’s next?

  • DragonFly from Opera (at Opera booth).
  • Border radius loses prefix. IE9 has elliptical borders, dashes, dots, double lines.
  • Multiple SVG backgrounds. Can isolate parts of SVG documents and layer together (view box SVG element).
  • Typography. Text shadow
  • CSS Transforms
  • Grid alignment
  • Flexible Box Layout
  • Downloadable Fonts (choosing font styles). Ligatures. Numeral styles.
  • WOFF File Formats
  • Transitions
  • Animations (webkit)
  • Image Values and Replace Content