Cascading Into ss3
Download as PPT, PDF0 likes490 views
The document summarizes a presentation about CSS3. It provides an overview of CSS and its evolution, from CSS1 to CSS2 to CSS3. It describes some of the new features in CSS3, such as animations and transitions, and how CSS3 specifications are broken into modules with varying levels of completion. It also discusses using jQuery plugins to implement CSS3 features for browsers that do not yet support them natively.
Cascading Into ss3
- 1.
- 2. Welcome to thefinal presentation of the day in the developer track, all about CSS3! My name is Nathaniel Bagnell, and I’m an interactive developer at Digiflare, an interactive agency based in Toronto, Ontario My hope is that this presentation will grow your knowledge in CSS and get you excited about CSS3
- 3. Quick CSS PrimerMilestones in CSS CSS3 In Depth Quick jQuery Primer Demos and Examples Closing Statements
- 4. CSS stands forCascading Style Sheets CSS is used to apply styling to mark-up elements With presentation separate from content, the pages become more flexible
- 5. The CSS1 specificationbecame a W3C Recommendation in December 1996 In the year 2000, Internet Explorer 5.0 for Mac was the first browser to fully support the CSS1 specification CSS1 brought fourth primitive design attributes such as controlling fonts, colouring, aligning of text and elements, margins, borders, and padding
- 6. The CSS2 specificationbecame a W3C recommendation in May 1998 CSS2 brought fourth improved printing abilities, Aural CSS (to assist visually disabled users by applying style sheets to oral presentations), and position attributes
- 7. CSS 2.1 builtupon CSS2; with its main goal being to correct a few errors found in CSS2 CSS 2.1 reflected and focused on features that were widely implemented for both HTML and XML. CSS 2.1 is intended to replace CSS2
- 8. CSS3 brings fortha lot of exciting new features, in a different approach than previous iterations. Let’s examine CSS3 in depth…
- 9. CSS3 contains vastarray of new and improved capabilities, most which go beyond just simple aesthetics. New changes have been implemented across almost every aspect of webpage styling, from fonts to media queries to animations and transitions Instead of having one monolithic release, CSS3 features have been broken down into modules.
- 10. CSS3 is beingreleased in modules, instead of one comprehensive release W3C can bring modules up to the Recommendation Level (REC) at different times, based on their priority Browser developers can implement CSS3 piece by piece, this helps speed up the overall implementation process
- 11. Some technologies andbrowsers do not need to support the full CSS3 specification. 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. Developers have the option of creating tailored subsets of CSS3 by selecting which modules they want to fully support.
- 12. CSS3’s module’s statusvaries significantly. No module has yet to reach Recommendation (REC) Status 14% of modules are at Candidate Recommendation (CR) Status. 7% of modules are at the Last Call (LC) Status 63% of modules are still at Working Draft (WD) Status 16% of module’s specification track is not yet defined
- 13. *Current support, maychange 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. We will usejQuery and several plug-ins to replicate CSS3 features that may not be supported in some of your target audience. jQuery is a JavaScript library that allows you to quickly develop JavaScript based solutions It has great cross browser support including IE6+, FF2+, Safari 3+, and Opera 9+. So, let’s get in to some demos!
- 15.
- 16. CSS3 will bringfourth a wealth of features that will make web development easier and more efficient I estimate it will be three to four years until you can safely use CSS3 without extensive fall-backs. Until then, use alternatives such as the jQuery examples shown here to have a consistent user experience, or have the site degrade gracefully Don’t wait for CSS3 to become a full recommendation, at the least, experiment with CSS3 today in subtle ways, i.e. text-shadows
- 17. Thank you foryour attendance, I hope you’ve enjoyed this session and the Make Web Not War 2010 conference. 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! Have a safe ride back home!
Editor's Notes
- #3 Talk about my passion and things, and how we’re a SharePoint / web company.
- #6 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.
- #7 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.
- #8 CSS 2.1 is intended to replace CSS, despite it only ever being as high as a Candidate Recommendation with the W3C.
- #11 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.
- #14 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.
- #15 Say ‘So, since we saw compatibility isn’t all there just yet, how can we do these things today? JQuery…