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 re...
How CSS3 is Organised
• Advanced layout         • Generated and            • Ruby
• Aural Style Sheets      Replaced Conte...
Say Hello to the
                CSS Working Group




Clearleft.com
CSS Working Group
• Adobe Systems Inc.       • International Webmasters
• Antenna House, Inc.      Association / HTML Writ...
Current State
• Ruby - CR             • Selectors - LC
• Media Queries - CR    • Fonts - LC
• Color - CR            • Page...
Why is it Taking so Long?
• Problems when testing
• Backwards compatibility
• Problems with browser implementation
• Givin...
Current Priority
• CSS2.1 (finishing touches)
• Multi-columns
• Paged Media
• Generated Content for Paged Media
• Advanced ...
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;] {
 ...
Styling External Links

a[href^=quot;http:quot;] {
  background: url(images/externalLink.gif) no-repeat
  right top;
  pad...
The Result




Clearleft.com
Interesting CSS3 Selectors

   ::selection { background: yellow;} /* makes
   selected text yellow */


   #menu a:after {...
:target Example




Clearleft.com
Interesting CSS3 Selectors

   input:enabled { background: #999;} /* makes
   enabled inputs dark grey */


   input:disab...
Interesting CSS3 Selectors


   #menu li:last-child { border-bottom: none;} /*
   removes the bottom border on the last li...
Rounded Corner Boxes

<div class=quot;boxquot;>
 <div class=quot;box-outerquot;>
    <div class=quot;box-innerquot;>
     ...
Old School Way
.box {
    width: 20em;
    background: #effce7 url(images/bottom-left.gif) no-
    repeat left bottom;
}

...
Old School Way
.box-inner {
    background: url(images/top-left.gif) no-repeat left
    top;
}


.box h2 {
    background:...
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....
The Results




Clearleft.com
Using Border Image


.box {
    -webkit-border-image: url(images/corners.gif)
      25% 25% 25% 25% / 25px round round;
}
...
The Results




Clearleft.com
Using Border Radius

.box {
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}




Cle...
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: 4...
The Results




Clearleft.com
CSS3 Opacity


.alert {
    background-color: #000;
    opacity: 0.8;
    filter: alpha(opacity=50); /*proprietary IE code...
The Results




Clearleft.com
CSS3 Multi-column Layout

#content {
    -moz-column-count: 2;
    -moz-column-gap: 2em;
    -webkit-column-count: 2;
    ...
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; ...
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 browser...
Thank You
       Download slides at www.andybudd.com/css3/




                     andy@clearleft.com
Clearleft.com      ...
Clearleft.com   Questions?
Upcoming SlideShare
Loading in...5
×

The Future Of CSS

8,507

Published on

A talk on the future of CSS from the 2007 Highland Fling

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

No Downloads
Views
Total Views
8,507
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
13,796
Comments
0
Likes
34
Embeds 0
No embeds

No notes for slide

The Future Of CSS

  1. 1. The Future of CSS with Andy Budd of Clearleft Clearleft.com
  2. 2. Happy Naked CSS Day! Clearleft.com
  3. 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. 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. 5. Say Hello to the CSS Working Group Clearleft.com
  6. 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. 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. 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. 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. 10. My Priority • CSS2.1 • Selectors • Backgrounds and Borders • Advanced Layout • Multi-columns • Values Clearleft.com
  11. 11. CSS3 You Can Use Now Clearleft.com
  12. 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. 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
  14. 14. The Result Clearleft.com
  15. 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
  16. 16. :target Example Clearleft.com
  17. 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. 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. 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. 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. 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. 22. The CSS3 Way <div class=quot;boxquot;> <h2>Headline</h2> <p>Content<p> </div> Clearleft.com
  23. 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
  24. 24. The Results Clearleft.com
  25. 25. Using Border Image .box { -webkit-border-image: url(images/corners.gif) 25% 25% 25% 25% / 25px round round; } Clearleft.com
  26. 26. The Results Clearleft.com
  27. 27. Using Border Radius .box { -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; } Clearleft.com
  28. 28. The Results Clearleft.com
  29. 29. CSS3 Text Shadow h1 { text-shadow: 4px 4px 5px #999; } Clearleft.com
  30. 30. The Results Clearleft.com
  31. 31. Drop Shadows Clearleft.com
  32. 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
  33. 33. The Results Clearleft.com
  34. 34. CSS3 Opacity .alert { background-color: #000; opacity: 0.8; filter: alpha(opacity=50); /*proprietary IE code*/ } Clearleft.com
  35. 35. The Results Clearleft.com
  36. 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
  37. 37. The Results Clearleft.com
  38. 38. Things to Come Clearleft.com
  39. 39. Calculations #mainContent { width: calc(100% - 200px) } Clearleft.com
  40. 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. 41. The Marquee is Back! #newsTicker { white-space: wrap; overflow: hidden; marquee: scroll; } Clearleft.com
  42. 42. So Where Are We? Clearleft.com
  43. 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. 44. Thank You Download slides at www.andybudd.com/css3/ andy@clearleft.com Clearleft.com www.cssmastery.com
  45. 45. Clearleft.com Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×