SXSW 2009: CSS3: What’s Now, What’s New and What’s Not?

Sunday, March 15th, 2009 2:00 PM
David Baron, Mozilla
Sylvain Galineau, Program Manager for Microsoft
Hakon Wium Lie, Opera Software
Molly Holzschlag, President of Opera Software

1. Mozilla

CSS Modules (Just a few):

  • Selectors
  • Color
  • Media Queries
  • Backgrounds and Borders
  • Fonts
  • etc.

Selectors:

  • tr:nth-child(odd) {background: #FFA;} or tr:nth-child(even)
  • opacity: 0.5 can be represented as rgba(0,255,0,0.5)
  • border-image allows for stretching of border images no matter height/width.
  • text-shadow: 0 0 0.25em #000;
  • -moz-border-radius: 0.67em;
  • word-wrap: break;
  • font-size-adjust: 0.45; lets you change the way you’re specifying font sizes by the x-height of the characters. this attribute acts as a multiplier.
  • downloadable fonts can be achieved by @font-face { src: url(“GenBasR.ttf”); font-family: “Gentium Basic”; font-weight: normal; font-style: normal; }
  • width: calc(50% – 8px);
  • h1 { content: url(company-name.png); }

As a side note, Baron was using the browser “Minefield.” I’ve never heard of this browser, but I want to check it out sometime.
As a side note, the Galineau from Microsoft has a Firefox 3 sticker on his laptop. 🙂

2. Internet Explorer

Internet Explorer 8 is working on getting up to date with CSS 2.1, but has no plans to release a stable support for CSS 3.0 as Opera/Firefox is already supporting.

3. Opera

Selectors:

  • text-shadow
  • border-radius: 60px 0px / 0px 60px;
  • box-shadow: 0 0 20px 10px #000 inset;
  • box-shadow: 0 0 20px 10px #000 inset, 0 0 20px 10px #FFA; would do two shadows.
  • border-image
  • media-queries lets you change the CSS display based on the width/height of the content view area.

As a side note, the Galineau from Microsoft was grabbing his fast in nervousness while Wium Lie was going over Opera’s amazing new features. 🙂

4. Questions and Answers

Typically designers will float elements on a page to mimic page layouts. Although it works, it just doesn’t seem like a good solution. Johnathan Snook is a CSS layout issue author who touches on implimations for this issue.

Opera wrote a few custom selectors into their browser that lets them print as a book. They actually used this technology to print and publish an entire book two years ago. They worked with Yes Software who was doing something very similar to what they wanted.

Baron posted his examples online. You can access these from his website.

Posted in Board/Card Game, Geeky, SXSW 2009.

2 Comments

  1. It all seems like a big jumble of updates… do you think w3c or someone is going to give a decent stepping stone for web browsers to upgrade their code?
    except chrome, if I’m not mistaken, most popular browsers don’t fully handle CSS2.1… maybe make a standard to external updates for CSS coding and syntax? like an accessible DTD file for CSS code that will allow easier updates?

Leave a Reply

Your email address will not be published. Required fields are marked *