CSS3 and a brief introduction to Google Maps API v3

CSS3 and a brief introduction to Google Maps API v3 Watercooler Session 28 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).

CSS3 and a brief introduction to Google Maps API v3

Recommended

More Related Content

What's hot (18)

Similar to CSS3 and a brief introduction to Google Maps API v3 (20)

Recently uploaded (20)

CSS3 and a brief introduction to Google Maps API v3