• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The Future Of CSS
 

The Future Of CSS

on

  • 11,601 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,601
Views on SlideShare
10,471
Embed Views
1,130

Actions

Likes
34
Downloads
13,790
Comments
0

14 Embeds 1,130

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
http://static.slideshare.net 2
http://3kits.com 2
http://www.techgig.timesjobs.com 1
http://127.0.1.1 1
https://www.linkedin.com 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 The Future Of CSS Presentation Transcript

    • 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?