SlideShare a Scribd company logo

The Future Of CSS

•
•
Andy Budd
Andy Budd

This document summarizes Andy Budd's presentation on the future of CSS. It provides a brief history of CSS, outlines how CSS3 modules are organized, and identifies some priority areas for the CSS working group. It then demonstrates several interesting CSS3 features that can be used now, such as attribute selectors, rounded corners, drop shadows, and multi-column layout. Budd concludes by discussing the potential for CSS2.2 and layout modules in CSS3.

1 of 45
Download to read offline
The Future of CSS with Andy Budd of Clearleft Clearleft.com
Happy Naked CSS Day! Clearleft.com
Quick History • First CSS proposal by Hakon Lie in Oct 94 • W3C established and CSS workshop run in 95 • CSS1 becomes a recommendation in Dec 96 • CSS working group established in 97 • CSS2 becomes a recommendation in May 98 • Drafts of first 3 CSS3 modules published in June 99 Clearleft.com
How CSS3 is Organised • Advanced layout • Generated and • Ruby • Aural Style Sheets Replaced Content • Scoping • Backgrounds and • Hyperlink Presentation • Speech Borders • Line Layout • Syntax • Basic User Interfaces • Lists • Tables • Box Model • Maths • Text • Cascading and • Multi Column Layout • Text Layout Inheritance • Namespaces • Values and Units • Color • Object Model • Web Fonts • Fonts • Paged Media • Generated Content for • Positioning Paged Media • Presentation Levels • Reader Media Types Clearleft.com
Say Hello to the CSS Working Group Clearleft.com
CSS Working Group • Adobe Systems Inc. • International Webmasters • Antenna House, Inc. Association / HTML Writers Guild • AOL LLC • Microsoft Corporation • Apple, Inc. • Mozilla Foundation • Disruptive Innovations • Openwave Systems Inc. • Google, Inc. • Opera Software • HP • Sun Microsystems, Inc. • IBM Corporation • Universidad de Oviedo • Indus Net Technologies • W3C Invited Experts • INNOVIMAX • W3C/ERCIM Clearleft.com
Current State • Ruby - CR • Selectors - LC • Media Queries - CR • Fonts - LC • Color - CR • Pages Media - LC • User Interface - CR • Print Profile - LC • TV Profile - CR • Web Fonts - LC Clearleft.com
Why is it Taking so Long? • Problems when testing • Backwards compatibility • Problems with browser implementation • Giving priority to the wrong areas • Getting bogged down with trivial/irrelevant issues • Companies with political/business motivations • Little input from authors/designers Clearleft.com
Current Priority • CSS2.1 (finishing touches) • Multi-columns • Paged Media • Generated Content for Paged Media • Advanced Layout • Selectors • Text and Text Layout • Grid Positioning Clearleft.com
My Priority • CSS2.1 • Selectors • Backgrounds and Borders • Advanced Layout • Multi-columns • Values Clearleft.com
CSS3 You Can Use Now Clearleft.com
CSS3 Attribute Selectors a[href^=quot;mailto:quot;] { background-image: url(email.gif); } a[href$=quot;.pdfquot;] { background-image: url(pdf.gif); } Clearleft.com
Styling External Links a[href^=quot;http:quot;] { background: url(images/externalLink.gif) no-repeat right top; padding-right: 10px; } a[href^=quot;http://www.yoursite.comquot;], a[href^=quot;http:yoursite.comquot;] { background-image: none; padding-right: 0; } Clearleft.com
The Result Clearleft.com
Interesting CSS3 Selectors ::selection { background: yellow;} /* makes selected text yellow */ #menu a:after { content:quot; 00BBquot;;} /* adds a “»” symbol after every link in the menu */ .comment:target { background: yellow;} /* makes the comment div yellow when targeted */ Clearleft.com
:target Example Clearleft.com
Interesting CSS3 Selectors input:enabled { background: #999;} /* makes enabled inputs dark grey */ input:disabled { background: #ccc;} /* makes disabled inputs light grey */ input:checked { background: #39c;} /* makes checked inputs blue */ Clearleft.com
Interesting CSS3 Selectors #menu li:last-child { border-bottom: none;} /* removes the bottom border on the last li */ tr:nth-child(odd) { color:blue;} /* makes every other table row blue */ Clearleft.com
Rounded Corner Boxes <div class=quot;boxquot;> <div class=quot;box-outerquot;> <div class=quot;box-innerquot;> <h2>Headline</h2> <p>Content<p> </div> </div> </div> Clearleft.com
Old School Way .box { width: 20em; background: #effce7 url(images/bottom-left.gif) no- repeat left bottom; } .box-outer { background: url(images/bottom-right.gif) no-repeat right bottom; padding-bottom: 5%; } Clearleft.com
Old School Way .box-inner { background: url(images/top-left.gif) no-repeat left top; } .box h2 { background: url(images/top-right.gif) no-repeat right top; padding-top: 5%; } Clearleft.com
The CSS3 Way <div class=quot;boxquot;> <h2>Headline</h2> <p>Content<p> </div> Clearleft.com
Using Multiple Background Images .box { background-image: url(top-left.gif), url(top- right.gif), url(bottom-left.gif), url(bottom- right.gif); background-repeat: no-repeat, no-repeat, no- repeat, no-repeat; background-position: top left, top right, bottom left, bottom right; } Clearleft.com
The Results Clearleft.com
Using Border Image .box { -webkit-border-image: url(images/corners.gif) 25% 25% 25% 25% / 25px round round; } Clearleft.com
The Results Clearleft.com
Using Border Radius .box { -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; } Clearleft.com
The Results Clearleft.com
CSS3 Text Shadow h1 { text-shadow: 4px 4px 5px #999; } Clearleft.com
The Results Clearleft.com
Drop Shadows Clearleft.com
CSS3 Box Shadow .box { -webkit-box-shadow: 4px 4px 8px #444; -moz-box-shadow: 4px 4px 8px #444; box-shadow: 4px 4px 8px #444; } Clearleft.com
The Results Clearleft.com
CSS3 Opacity .alert { background-color: #000; opacity: 0.8; filter: alpha(opacity=50); /*proprietary IE code*/ } Clearleft.com
The Results Clearleft.com
CSS3 Multi-column Layout #content { -moz-column-count: 2; -moz-column-gap: 2em; -webkit-column-count: 2; -webkit-column-gap: 2em; column-count: 2; column-gap: 2em; } Clearleft.com
The Results Clearleft.com
Things to Come Clearleft.com
Calculations #mainContent { width: calc(100% - 200px) } Clearleft.com
CSS3 Layout body { display: quot;aaaquot; quot;bcdquot;; quot;eeequot;; } #header { position: a; } #nav { position: b; } #mainContent { position: c; } #secondaryContent { position: d; } #footer { position: e; } Clearleft.com
The Marquee is Back! #newsTicker { white-space: wrap; overflow: hidden; marquee: scroll; } Clearleft.com
So Where Are We? Clearleft.com
CSS2.2 Anyone? • Some really interesting things in CSS3 • Many of them are fairly niche, with little demand • Many browsers already support the more interesting features of CSS3 • Why not have an intermediary step covering the stuff people want? Clearleft.com
Thank You Download slides at www.andybudd.com/css3/ andy@clearleft.com Clearleft.com www.cssmastery.com
Clearleft.com Questions?

More Related Content

The Future Of CSS

  • 1. The Future of CSS with Andy Budd of Clearleft Clearleft.com
  • 2. Happy Naked CSS Day! Clearleft.com
  • 3. Quick History • First CSS proposal by Hakon Lie in Oct 94 • W3C established and CSS workshop run in 95 • CSS1 becomes a recommendation in Dec 96 • CSS working group established in 97 • CSS2 becomes a recommendation in May 98 • Drafts of first 3 CSS3 modules published in June 99 Clearleft.com
  • 4. How CSS3 is Organised • Advanced layout • Generated and • Ruby • Aural Style Sheets Replaced Content • Scoping • Backgrounds and • Hyperlink Presentation • Speech Borders • Line Layout • Syntax • Basic User Interfaces • Lists • Tables • Box Model • Maths • Text • Cascading and • Multi Column Layout • Text Layout Inheritance • Namespaces • Values and Units • Color • Object Model • Web Fonts • Fonts • Paged Media • Generated Content for • Positioning Paged Media • Presentation Levels • Reader Media Types Clearleft.com
  • 5. Say Hello to the CSS Working Group Clearleft.com
  • 6. CSS Working Group • Adobe Systems Inc. • International Webmasters • Antenna House, Inc. Association / HTML Writers Guild • AOL LLC • Microsoft Corporation • Apple, Inc. • Mozilla Foundation • Disruptive Innovations • Openwave Systems Inc. • Google, Inc. • Opera Software • HP • Sun Microsystems, Inc. • IBM Corporation • Universidad de Oviedo • Indus Net Technologies • W3C Invited Experts • INNOVIMAX • W3C/ERCIM Clearleft.com
  • 7. Current State • Ruby - CR • Selectors - LC • Media Queries - CR • Fonts - LC • Color - CR • Pages Media - LC • User Interface - CR • Print Profile - LC • TV Profile - CR • Web Fonts - LC Clearleft.com
  • 8. Why is it Taking so Long? • Problems when testing • Backwards compatibility • Problems with browser implementation • Giving priority to the wrong areas • Getting bogged down with trivial/irrelevant issues • Companies with political/business motivations • Little input from authors/designers Clearleft.com
  • 9. Current Priority • CSS2.1 (finishing touches) • Multi-columns • Paged Media • Generated Content for Paged Media • Advanced Layout • Selectors • Text and Text Layout • Grid Positioning Clearleft.com
  • 10. My Priority • CSS2.1 • Selectors • Backgrounds and Borders • Advanced Layout • Multi-columns • Values Clearleft.com
  • 11. CSS3 You Can Use Now Clearleft.com
  • 12. CSS3 Attribute Selectors a[href^=quot;mailto:quot;] { background-image: url(email.gif); } a[href$=quot;.pdfquot;] { background-image: url(pdf.gif); } Clearleft.com
  • 13. Styling External Links a[href^=quot;http:quot;] { background: url(images/externalLink.gif) no-repeat right top; padding-right: 10px; } a[href^=quot;http://www.yoursite.comquot;], a[href^=quot;http:yoursite.comquot;] { background-image: none; padding-right: 0; } Clearleft.com
  • 15. Interesting CSS3 Selectors ::selection { background: yellow;} /* makes selected text yellow */ #menu a:after { content:quot; 00BBquot;;} /* adds a “»” symbol after every link in the menu */ .comment:target { background: yellow;} /* makes the comment div yellow when targeted */ Clearleft.com
  • 17. Interesting CSS3 Selectors input:enabled { background: #999;} /* makes enabled inputs dark grey */ input:disabled { background: #ccc;} /* makes disabled inputs light grey */ input:checked { background: #39c;} /* makes checked inputs blue */ Clearleft.com
  • 18. Interesting CSS3 Selectors #menu li:last-child { border-bottom: none;} /* removes the bottom border on the last li */ tr:nth-child(odd) { color:blue;} /* makes every other table row blue */ Clearleft.com
  • 19. Rounded Corner Boxes <div class=quot;boxquot;> <div class=quot;box-outerquot;> <div class=quot;box-innerquot;> <h2>Headline</h2> <p>Content<p> </div> </div> </div> Clearleft.com
  • 20. Old School Way .box { width: 20em; background: #effce7 url(images/bottom-left.gif) no- repeat left bottom; } .box-outer { background: url(images/bottom-right.gif) no-repeat right bottom; padding-bottom: 5%; } Clearleft.com
  • 21. Old School Way .box-inner { background: url(images/top-left.gif) no-repeat left top; } .box h2 { background: url(images/top-right.gif) no-repeat right top; padding-top: 5%; } Clearleft.com
  • 22. The CSS3 Way <div class=quot;boxquot;> <h2>Headline</h2> <p>Content<p> </div> Clearleft.com
  • 23. Using Multiple Background Images .box { background-image: url(top-left.gif), url(top- right.gif), url(bottom-left.gif), url(bottom- right.gif); background-repeat: no-repeat, no-repeat, no- repeat, no-repeat; background-position: top left, top right, bottom left, bottom right; } Clearleft.com
  • 25. Using Border Image .box { -webkit-border-image: url(images/corners.gif) 25% 25% 25% 25% / 25px round round; } Clearleft.com
  • 27. Using Border Radius .box { -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; } Clearleft.com
  • 29. CSS3 Text Shadow h1 { text-shadow: 4px 4px 5px #999; } Clearleft.com
  • 32. CSS3 Box Shadow .box { -webkit-box-shadow: 4px 4px 8px #444; -moz-box-shadow: 4px 4px 8px #444; box-shadow: 4px 4px 8px #444; } Clearleft.com
  • 34. CSS3 Opacity .alert { background-color: #000; opacity: 0.8; filter: alpha(opacity=50); /*proprietary IE code*/ } Clearleft.com
  • 36. CSS3 Multi-column Layout #content { -moz-column-count: 2; -moz-column-gap: 2em; -webkit-column-count: 2; -webkit-column-gap: 2em; column-count: 2; column-gap: 2em; } Clearleft.com
  • 39. Calculations #mainContent { width: calc(100% - 200px) } Clearleft.com
  • 40. CSS3 Layout body { display: quot;aaaquot; quot;bcdquot;; quot;eeequot;; } #header { position: a; } #nav { position: b; } #mainContent { position: c; } #secondaryContent { position: d; } #footer { position: e; } Clearleft.com
  • 41. The Marquee is Back! #newsTicker { white-space: wrap; overflow: hidden; marquee: scroll; } Clearleft.com
  • 42. So Where Are We? Clearleft.com
  • 43. CSS2.2 Anyone? • Some really interesting things in CSS3 • Many of them are fairly niche, with little demand • Many browsers already support the more interesting features of CSS3 • Why not have an intermediary step covering the stuff people want? Clearleft.com
  • 44. Thank You Download slides at www.andybudd.com/css3/ andy@clearleft.com Clearleft.com www.cssmastery.com
  • 45. Clearleft.com Questions?