The Future Of CSS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

The Future Of CSS

on

  • 11,816 views

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

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

Statistics

Views

Total Views
11,816
Views on SlideShare
10,684
Embed Views
1,132

Actions

Likes
34
Downloads
13,791
Comments
0

14 Embeds 1,132

http://blog.macronimous.com 957
http://portal.ou.nl 83
http://www.techgig.com 33
http://studienet.ou.nl 19
http://www.slideshare.net 12
http://www.3kits.com 6
http://translate.googleusercontent.com 6
http://www.whitepixel.pl 4
http://www.linkedin.com 3
https://www.linkedin.com 3
http://3kits.com 2
http://static.slideshare.net 2
http://www.techgig.timesjobs.com 1
http://127.0.1.1 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The Future Of CSS Presentation Transcript

  • 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
  • 14. The Result 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
  • 16. :target Example 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
  • 24. The Results Clearleft.com
  • 25. Using Border Image .box { -webkit-border-image: url(images/corners.gif) 25% 25% 25% 25% / 25px round round; } Clearleft.com
  • 26. The Results Clearleft.com
  • 27. Using Border Radius .box { -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; } Clearleft.com
  • 28. The Results Clearleft.com
  • 29. CSS3 Text Shadow h1 { text-shadow: 4px 4px 5px #999; } Clearleft.com
  • 30. The Results Clearleft.com
  • 31. Drop Shadows 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
  • 33. The Results Clearleft.com
  • 34. CSS3 Opacity .alert { background-color: #000; opacity: 0.8; filter: alpha(opacity=50); /*proprietary IE code*/ } Clearleft.com
  • 35. The Results 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
  • 37. The Results Clearleft.com
  • 38. Things to Come 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?