Your SlideShare is downloading. ×
0
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS3 and a brief introduction to Google Maps API v3

4,897

Published on

Presentation at a Time Inc. Watercooler Session on 28 April 2010.

Presentation at a Time Inc. Watercooler Session on 28 April 2010.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,897
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS3 and a brief introduction to Google Maps API v3 Watercooler Session 28 April 2010 Jeffrey Barke
  • 2. 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!
  • 3. 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
    • ...
  • 4. 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).
  • 5. 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
  • 6. 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.
  • 7. 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.
  • 8. 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
  • 9. 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.
  • 10. 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/
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. @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.
  • 16. @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
  • 17. @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
  • 18. 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?
    • ???
  • 19. 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…
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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).

×