CSS3 and a brief introduction to Google Maps API v3 Watercooler Session28 April 2010

Jeffrey Barke

CSS3: What is it?

A style sheet language used to describe the presentation semantics of a document written in a markup language.

CSS specifications are maintained by the World Wide Web Consortium (W3C).

• CSS level 1 was published in December 1996.• CSS level 2 was published in May 1998.• CSS level 3 is currently under development.

CSS level 3 has been in development for a long time!

CSS3: What is it? (cont’d)

CSS3 is modularized and will be composed of several separate recommendations. Progress report at http://www.w3.org/Style/CSS/current-work#table

• CSS Template Layout (positioning)• CSS Aural Style Sheets (audio)• CSS Backgrounds and Borders• CSS Basic User Interface (forms)• CSS Basic Box Model (layout)• CSS Extended Box Model (floats)• CSS Marquee (for mobile)• CSS Cascading and Inheritance• CSS Color• CSS Fonts

...

CSS3: A bit more terminology

Each level of CSS builds on the last and adds new features.

Profiles are a subset of a CSS level designed for a particular device or use interface (mobile devices, printers and television sets).

Back to practical web design

It’s about the browsers.

So, what the browser support? Well, that's complicated. Because it's not just a binary opposition of support or not.

Except, of course, there’s IE.• IE 8 and below have no native support for any of the CSS3 modules

(except for @font-face and a few of the CSS3 selectors).• The IE 9 pre-alpha looks very good, but it requires Vista SP 2 or

Windows 7 and Internet Explorer 8. Windows XP users are SOL.

CSS Compatibility and Internet Explorer

Test drive IE 9

How/when/why to use

It’s still in draft form and browser support is patchy, so what’s the use cases?

Performance!• Slim down the markup for smaller file size• Slim the DOM for faster parsing• Fewer HTTP requests

Less compelling, but the ability to do cool things without Flash and with less JavaScript.

Probably not for a large, complicated corporate website with a lot of IE traffic.

Ways to use: Pure CSS3 approach

Use as much CSS3 as possible (say for rounded corners)

Compliant browsers get the full experience

Non-compliant browsers “gracefully” degrade (square edges)

Advantages• Per the previous slide• Less development time (no cutting images)• Less maintenance time (no re-cutting images)

Disadvantages• Design looks different in different browsers. If a large percentage of

your traffic uses IE, this is probably not good. If your CEO does a little browsing on IE and doesn’t understand what happened to the design, this is probably not good.

Ways to use: CSS3 with fallback to images

Use as much CSS3 as possible (say for rounded corners)

Create browser-specific or fallback stylesheets that use background images per usual

Advantages• Design is consistent across browsers• Compliant browsers make fewer HTTP requests (though the HTML and

DOM will not be slimmer)

Disadvantages• More development time (CSS3 + standard approach)• More maintenance time (need to remember to change things in two

places)• May require CSS hacks and may not target all browsers correctly

Ways to use: My recommendation

If your traffic/user base justifies a pure CSS3 approach, I say use it. The advantages are real and it’s the future of web design.

However, if you’re forced to do the CSS3 with fallback to images approach, I would probably avoid using CSS3 altogether (especially if the site is large or complex).

I started out doing a project the hybrid way and ended up scrapping it for background images for all browsers—I didn’t see the advantages as outweighing the development costs. Plus, the markup would be handed off to a different team for implementation and maintenance, which means that team would need to know to change the CSS3 in one place and update the background images in another.

CSS3 Selectors

Probably most familiar from jQuery.

There’s an excellent article on them at 456 Berea St

E[att^=”val”]

E[att$=”val”]

E:last-child

E:checked

E:selection

What about the performance hit? Overrated:

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

CSS3 Selector browser support

Probably most familiar from jQuery.

Browser Version OS Results

Chrome 5.0 Mac 43/43/0/0

Firefox 3.0 Win XP 43/36/0/7

Firefox 3.6 Mac 43/43/0/0

IE 6.0 Win XP 43/10/1/32

IE 7.0 Win Vista 43/13/4/26

IE 8.0 Win 7 43/22/1/20

IE 9 preview Win 7 43/43/0/0

Opera 10.52 Mac 43/43/0/0

Safari 4.0 Mac 43/43/0/0

All the fun new CSS rules

Borders, backgrounds, colors, columns, etc.

No new code examples, because there are a ton out there:• Style Master CSS Editor• CSS3.info CSS3 preview• CSS3 Generator

RGBA and HSLA

Alpha-transparency possible for both.

I’m not a designer, but according to Molly Holzschlag, HSL is better:• Not CRT specific• Easier, more intuitive to work with• Working with a set of colors allows for easy palette creation• Reduces errors• Reduces dependency on charts and other value lookup tools

Works in Firefox, Webkit and Opera

Notes from Molly’s presentation

HSL chart

Transforms and transitions

NSFW! The sexy stuff, however browser support is the worst here.

Transforms are presently supported in Safari 4, Chrome Firefox 3.5. and Opera 10.5

Transitions are supported in Safari 4, Chrome and Opera 10.5. Opera 10.5 pre alphas crash animating these transforms, and so this is not enabled at present for Opera.

Lightsaber

3D rotating cube

CSS3 JavaScript alternatives

CSS3 accordion

CSS Coke can

47 Amazing CSS3 Animation Demos

@font-face

Web typography is a huge issue, but the good news is that all browsers support it. However, the font format supported is another thing.

IE: .eot

Other browsers: .ttf or .otf

@font-face browser support

@font-face {

font-family: 'Graublau Web';

src: url('GraublauWeb.eot');

src: local('Graublau Web Regular'), local('Graublau Web'), url('GraublauWeb.otf') format('opentype');

}

Licensing is another issue altogether.

@font-face licensing

A nice overview of font embedding on the web (EOT, sIFR, font linking):

http://www.fontembedding.com/fonts-and-the-web/

Ascender study of free/shareware fonts:

http://www.ascendercorp.com/news/web-fonts-study/

Out of the 4572 fonts tested, 4385 fonts (95.9%) failed one or more of the six tests that were performed

More useful links:• Web fonts licensing overview• List of fonts available for embedding• List of commercial foundries that permit embedding

@font-face

Enter Typekit!

Advantages• They have clout when it comes to type foundries• Handle the font format issues for you

Problems:• Not free (I’m cheap!)• JavaScript-based

The future

When will CSS3 be published as a recommendation?• Some modules are stable and have been implemented• Some may be dropped, but it’s hoped that they rest will be

implemented 4-5 years

Will there be a CSS4?• Maybe, but no definite plans

When will IE 9 be released?• Hopefully in 2011

When will IE 6 finally die?• ???

Tools, links, etc.

Info, news, tutorials• CSS3.info

Toolkits, CSS Generators• CSS Generator• CSS3 Please! The Cross-Browser CSS3 Rule Generator• Modernizr

Tests, browser compatibility tables• CSS Compatibility and Internet Explorer• CSS3 Selectors Test• HTML5 Readiness• QuirksMode: CSS compatibility tables• When Can I Use…

Tools, links, etc. (cont’d)

Demos, interactive demos• 3D rotating cube• 47 Amazing CSS3 Animation Demos• CSS3.info CSS3 preview• CSS3 Generator• Style Master CSS Editor

And a very brief into to Google Maps API v3

Things to love about the new API• Smaller (faster?) for mobile platforms• No more API key!• No more GUnload! (Everyone hates to clean-up)

Things to note about the new API

• It’s marked beta (does that mean anything from Google?)• Smaller feature set

Things that are ambiguous about the new API• API style (I prefer it)

Bottom line: I would use this in production depending on the feature set required and target audience

Some early thoughts on v3

In the Google Maps JavaScript API v3 group, John Coryat writes:

From my understanding, v3 isn't a direct replacement for v2 but instead is a complete re-write from scratch. V3 on the other hand, being a complete re-write, has very few features at this point but is extremely efficient, fast loading, modular and potentially much more extensible.

I would recommend that any developer who is considering using v3 think of it as a "mobile only" API

Some early thoughts on v3

Google's response:

We wanted to get this in your hands as soon as possible, so we've intentionally released it early, and with a basic set of features. We're releasing it in Labs because it's not fully baked yet; we want to get your feedback on the new design and what you'd like to see in future revisions now that we have a chance for a fresh start.

I would urge you to not think of this as a "mobile only" API. While mobile browsers are a new focus for us, the API is fully supported on desktop browsers (including the addition of Chrome).