Cascading Into ss3


Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Talk about my passion and things, and how we’re a SharePoint / web company.
  • Give a quick verbal introduction to the W3C Status Levels after the first point. Generally, the document maturity process is as follows: It first starts off as a Working Draft (WD), where the W3C publishes the draft for review by the community, W3C Member, the public, and other technical organizations. After WD, it falls in the Recommendation Track. In this process, the first level is Candidate Recommendation (CR). A CR is a document the W3C believes has been widely reviewed and satisfies the Working Group’s technical requirements. W3C Publishes a CR to get information on implementation experience. If it passes the CR level, it becomes a Proposed Recommendation (PR). A PR is a mature technical report that has been widely reviewed for technical soundness and implement-ability. W3C sends the report to the W3C Advisory Committee for final endorsement. Lastly, the specification becomes a W3C Recommendation (REC). This is a specification that has received the endorsement of the W3C members and the director. W3C Recommends the wide deployment of its Recommendations, though it’s safe to implement something of a PR maturity level so as long as your target audience browsers support it’s features.
  • Remember to note: CSS2 even brought fourth font downloading, though it was removed in CSS 2.1, however, though being implemented again in CSS3’s Font Module.
  • CSS 2.1 is intended to replace CSS, despite it only ever being as high as a Candidate Recommendation with the W3C.
  • At this time, no module has reached Recommendation status, only W3C Candidate Recommendation (CR). It’s important to note though that a W3C Candidate Recommendation , which means the specification has been widely reviewed and W3C recommends that it be implemented.
  • Don’t say IE is last place, say it nicely. Chrome is ahead of the pack but IE is catching up IE 9, which looks quite promising.
  • Say ‘So, since we saw compatibility isn’t all there just yet, how can we do these things today? JQuery…
  • Cascading Into ss3

    1. 1. Nathaniel Bagnell, Digiflare
    2. 2. <ul><li>Welcome to the final presentation of the day in the developer track, all about CSS3! </li></ul><ul><li>My name is Nathaniel Bagnell, and I’m an interactive developer at Digiflare, an interactive agency based in Toronto, Ontario </li></ul><ul><li>My hope is that this presentation will grow your knowledge in CSS and get you excited about CSS3 </li></ul>
    3. 3. <ul><li>Quick CSS Primer </li></ul><ul><li>Milestones in CSS </li></ul><ul><li>CSS3 In Depth </li></ul><ul><li>Quick jQuery Primer </li></ul><ul><li>Demos and Examples </li></ul><ul><li>Closing Statements </li></ul>
    4. 4. <ul><li>CSS stands for Cascading Style Sheets </li></ul><ul><li>CSS is used to apply styling to mark-up elements </li></ul><ul><li>With presentation separate from content, the pages become more flexible </li></ul>
    5. 5. <ul><li>The CSS1 specification became a W3C Recommendation in December 1996 </li></ul><ul><li>In the year 2000, Internet Explorer 5.0 for Mac was the first browser to fully support the CSS1 specification </li></ul><ul><li>CSS1 brought fourth primitive design attributes such as controlling fonts, colouring, aligning of text and elements, margins, borders, and padding </li></ul>
    6. 6. <ul><li>The CSS2 specification became a W3C recommendation in May 1998 </li></ul><ul><li>CSS2 brought fourth improved printing abilities, Aural CSS (to assist visually disabled users by applying style sheets to oral presentations), and position attributes </li></ul>
    7. 7. <ul><li>CSS 2.1 built upon CSS2; with its main goal being to correct a few errors found in CSS2 </li></ul><ul><li>CSS 2.1 reflected and focused on features that were widely implemented for both HTML and XML. </li></ul><ul><li>CSS 2.1 is intended to replace CSS2 </li></ul>
    8. 8. <ul><li>CSS3 brings forth a lot of exciting new features, in a different approach than previous iterations. </li></ul><ul><li>Let’s examine CSS3 in depth… </li></ul>
    9. 9. <ul><li>CSS3 contains vast array of new and improved capabilities, most which go beyond just simple aesthetics. </li></ul><ul><li>New changes have been implemented across almost every aspect of webpage styling, from fonts to media queries to animations and transitions </li></ul><ul><li>Instead of having one monolithic release, CSS3 features have been broken down into modules. </li></ul>
    10. 10. <ul><li>CSS3 is being released in modules, instead of one comprehensive release </li></ul><ul><li>W3C can bring modules up to the Recommendation Level (REC) at different times, based on their priority </li></ul><ul><li>Browser developers can implement CSS3 piece by piece, this helps speed up the overall implementation process </li></ul>
    11. 11. <ul><li>Some technologies and browsers do not need to support the full CSS3 specification. </li></ul><ul><li>Text-reader only browsers do not need to wait and support background and borders to be CSS3 compatible, just as a visual-only browser does not need to support aural properties. </li></ul><ul><li>Developers have the option of creating tailored subsets of CSS3 by selecting which modules they want to fully support. </li></ul>
    12. 12. <ul><li>CSS3’s module’s status varies significantly. </li></ul><ul><li>No module has yet to reach Recommendation (REC) Status </li></ul><ul><li>14% of modules are at Candidate Recommendation (CR) Status. </li></ul><ul><li>7% of modules are at the Last Call (LC) Status </li></ul><ul><li>63% of modules are still at Working Draft (WD) Status </li></ul><ul><li>16% of module’s specification track is not yet defined </li></ul>
    13. 13. *Current support, may change when development is complete ** Potentially estimated support, may change when development is complete So, how can we do CSS3 stuff now, and have all users experience it?... I.E. (5) Firefox (3) Chrome (1) Opera (4) Safari (2) V6.0: 4% V3.0: 29% V2.0: 79% V9.6: 34% V3.1: 50% V7.0: 4% V3.5: 65% V3.0: 79% V10.1: 41% V3.2: 78% V8.0: 10% V3.6: 71% V4.0: 87% V10.5: 71% V4.0: 87% V9.0: 38%* V4.0: 81%* V5.0: 87% V10.x: 71%** V4.x: 93%** Average: 14.0% Average: 61.5% Average: 83.0% Average: 54.3% Average: 77%
    14. 14. <ul><li>We will use jQuery and several plug-ins to replicate CSS3 features that may not be supported in some of your target audience. </li></ul><ul><li>jQuery is a JavaScript library that allows you to quickly develop JavaScript based solutions </li></ul><ul><li>It has great cross browser support including IE6+, FF2+, Safari 3+, and Opera 9+. So, let’s get in to some demos! </li></ul>
    15. 15. <ul><li>Launch Examples </li></ul>
    16. 16. <ul><li>CSS3 will bring fourth a wealth of features that will make web development easier and more efficient </li></ul><ul><li>I estimate it will be three to four years until you can safely use CSS3 without extensive fall-backs. </li></ul><ul><li>Until then, use alternatives such as the jQuery examples shown here to have a consistent user experience, or have the site degrade gracefully </li></ul><ul><li>Don’t wait for CSS3 to become a full recommendation, at the least, experiment with CSS3 today in subtle ways, i.e. text-shadows </li></ul>
    17. 17. <ul><li>Thank you for your attendance, I hope you’ve enjoyed this session and the Make Web Not War 2010 conference. </li></ul><ul><li>To view the demos shown here, and more info on specific plugins used, visit my Twitter: @ nathaniel401 as I will be tweeting a URL soon! </li></ul><ul><li>Have a safe ride back home! </li></ul>