SlideShare a Scribd company logo
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

What's hot

LESS is More
LESS is MoreLESS is More
LESS is More
jsmith92
 
Drawing the Line with Browser Compatibility
Drawing the Line with Browser CompatibilityDrawing the Line with Browser Compatibility
Drawing the Line with Browser Compatibility
jsmith92
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
Thinkful
 
3 coding101 fewd_lesson3_your_first_website 20210105
3 coding101 fewd_lesson3_your_first_website 202101053 coding101 fewd_lesson3_your_first_website 20210105
3 coding101 fewd_lesson3_your_first_website 20210105
John Picasso
 

What's hot (20)

CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
 
Sass
SassSass
Sass
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
LESS is More
LESS is MoreLESS is More
LESS is More
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
 
Modular HTML & CSS Workshop
Modular HTML & CSS WorkshopModular HTML & CSS Workshop
Modular HTML & CSS Workshop
 
Drawing the Line with Browser Compatibility
Drawing the Line with Browser CompatibilityDrawing the Line with Browser Compatibility
Drawing the Line with Browser Compatibility
 
Modular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopModular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo Workshop
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
 
CSS3
CSS3CSS3
CSS3
 
Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBos
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Chapter4
Chapter4Chapter4
Chapter4
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
 
3 coding101 fewd_lesson3_your_first_website 20210105
3 coding101 fewd_lesson3_your_first_website 202101053 coding101 fewd_lesson3_your_first_website 20210105
3 coding101 fewd_lesson3_your_first_website 20210105
 
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for TeachersHTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
 

Viewers also liked

Microsoft Dynamics CRM - Delivering Customer Service Via Contact Center and t...
Microsoft Dynamics CRM - Delivering Customer Service Via Contact Center and t...Microsoft Dynamics CRM - Delivering Customer Service Via Contact Center and t...
Microsoft Dynamics CRM - Delivering Customer Service Via Contact Center and t...
Microsoft Private Cloud
 
15132 Wg 3 Sum Port
15132 Wg 3 Sum  Port15132 Wg 3 Sum  Port
15132 Wg 3 Sum Port
Myris Silva
 
Automatic dynamic depth focusing for ndt
Automatic dynamic depth focusing for ndtAutomatic dynamic depth focusing for ndt
Automatic dynamic depth focusing for ndt
Jose Miguel Moreno
 
Ldb Ri-scosse_Letizia Custodero - Guide for the ambitious social entrepreneur
Ldb Ri-scosse_Letizia Custodero - Guide for the ambitious social entrepreneurLdb Ri-scosse_Letizia Custodero - Guide for the ambitious social entrepreneur
Ldb Ri-scosse_Letizia Custodero - Guide for the ambitious social entrepreneur
laboratoridalbasso
 
Fincor Presentation
Fincor PresentationFincor Presentation
Fincor Presentation
Manuel Vara
 
Liderazgo Empresarial-Gastón Acurio
Liderazgo Empresarial-Gastón AcurioLiderazgo Empresarial-Gastón Acurio
Liderazgo Empresarial-Gastón Acurio
Mabel Granda
 
Combined declarations & exhibits in support of motion for expedited discovery
Combined declarations & exhibits in support of motion for expedited discoveryCombined declarations & exhibits in support of motion for expedited discovery
Combined declarations & exhibits in support of motion for expedited discovery
ticular - strategies for success
 
Mand a toolkit make vs buy
Mand a toolkit   make vs buyMand a toolkit   make vs buy
Mand a toolkit make vs buy
chrisdoran
 
KB Seminars: Revenue Opportunities: Online Classifieds & Directories; 04/13
KB Seminars: Revenue Opportunities: Online Classifieds & Directories; 04/13KB Seminars: Revenue Opportunities: Online Classifieds & Directories; 04/13
KB Seminars: Revenue Opportunities: Online Classifieds & Directories; 04/13
MDIF
 
Modelo Educativo Orionita
Modelo Educativo OrionitaModelo Educativo Orionita
Modelo Educativo Orionita
Claudia Demeter
 
NARRAR Y APRENDER HISTORIA DE JULIA SALAZAR SOTELO
NARRAR Y APRENDER HISTORIA DE JULIA SALAZAR SOTELONARRAR Y APRENDER HISTORIA DE JULIA SALAZAR SOTELO
NARRAR Y APRENDER HISTORIA DE JULIA SALAZAR SOTELO
esc26telesecundaria
 

Viewers also liked (20)

Microsoft Dynamics CRM - Delivering Customer Service Via Contact Center and t...
Microsoft Dynamics CRM - Delivering Customer Service Via Contact Center and t...Microsoft Dynamics CRM - Delivering Customer Service Via Contact Center and t...
Microsoft Dynamics CRM - Delivering Customer Service Via Contact Center and t...
 
15132 Wg 3 Sum Port
15132 Wg 3 Sum  Port15132 Wg 3 Sum  Port
15132 Wg 3 Sum Port
 
A World of Energy
A World of EnergyA World of Energy
A World of Energy
 
Pharma Market 42
Pharma Market 42Pharma Market 42
Pharma Market 42
 
Automatic dynamic depth focusing for ndt
Automatic dynamic depth focusing for ndtAutomatic dynamic depth focusing for ndt
Automatic dynamic depth focusing for ndt
 
Ldb Ri-scosse_Letizia Custodero - Guide for the ambitious social entrepreneur
Ldb Ri-scosse_Letizia Custodero - Guide for the ambitious social entrepreneurLdb Ri-scosse_Letizia Custodero - Guide for the ambitious social entrepreneur
Ldb Ri-scosse_Letizia Custodero - Guide for the ambitious social entrepreneur
 
Fincor Presentation
Fincor PresentationFincor Presentation
Fincor Presentation
 
Curso continental de entrenadores de voleibol de playa - nivel 1
Curso continental de entrenadores de voleibol de playa - nivel 1Curso continental de entrenadores de voleibol de playa - nivel 1
Curso continental de entrenadores de voleibol de playa - nivel 1
 
Reseña ENSAYO SOBRE LA CEGUERA
Reseña ENSAYO SOBRE LA CEGUERAReseña ENSAYO SOBRE LA CEGUERA
Reseña ENSAYO SOBRE LA CEGUERA
 
Liderazgo Empresarial-Gastón Acurio
Liderazgo Empresarial-Gastón AcurioLiderazgo Empresarial-Gastón Acurio
Liderazgo Empresarial-Gastón Acurio
 
Quesos la-pardina
Quesos la-pardinaQuesos la-pardina
Quesos la-pardina
 
Alimentación y nutrición
Alimentación y nutriciónAlimentación y nutrición
Alimentación y nutrición
 
Combined declarations & exhibits in support of motion for expedited discovery
Combined declarations & exhibits in support of motion for expedited discoveryCombined declarations & exhibits in support of motion for expedited discovery
Combined declarations & exhibits in support of motion for expedited discovery
 
Mand a toolkit make vs buy
Mand a toolkit   make vs buyMand a toolkit   make vs buy
Mand a toolkit make vs buy
 
KB Seminars: Revenue Opportunities: Online Classifieds & Directories; 04/13
KB Seminars: Revenue Opportunities: Online Classifieds & Directories; 04/13KB Seminars: Revenue Opportunities: Online Classifieds & Directories; 04/13
KB Seminars: Revenue Opportunities: Online Classifieds & Directories; 04/13
 
Modelo Educativo Orionita
Modelo Educativo OrionitaModelo Educativo Orionita
Modelo Educativo Orionita
 
NARRAR Y APRENDER HISTORIA DE JULIA SALAZAR SOTELO
NARRAR Y APRENDER HISTORIA DE JULIA SALAZAR SOTELONARRAR Y APRENDER HISTORIA DE JULIA SALAZAR SOTELO
NARRAR Y APRENDER HISTORIA DE JULIA SALAZAR SOTELO
 
Hugo medina fisica 2
Hugo medina  fisica 2Hugo medina  fisica 2
Hugo medina fisica 2
 
mapa mental
mapa mentalmapa mental
mapa mental
 
The Productive Developer — Ilya Gelman
The Productive Developer — Ilya GelmanThe Productive Developer — Ilya Gelman
The Productive Developer — Ilya Gelman
 

Similar to The Future Of CSS

01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
crgwbr
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 

Similar to The Future Of CSS (20)

Standardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web StandardsStandardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web Standards
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
NewBCamp08: Intro to Web Standards
NewBCamp08: Intro to Web StandardsNewBCamp08: Intro to Web Standards
NewBCamp08: Intro to Web Standards
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
Style Your Site Part 1
Style Your Site Part 1Style Your Site Part 1
Style Your Site Part 1
 
Sass compass
Sass compassSass compass
Sass compass
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
 
Front end performance tip
Front end performance tipFront end performance tip
Front end performance tip
 
Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
 
CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web Developer
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 

More from Andy Budd

Redefining ux
Redefining uxRedefining ux
Redefining ux
Andy Budd
 
Digital Product Design
Digital Product DesignDigital Product Design
Digital Product Design
Andy Budd
 
Ignore UX At Your Peril
Ignore UX At Your PerilIgnore UX At Your Peril
Ignore UX At Your Peril
Andy Budd
 
Architecting Human Behaviour
Architecting Human BehaviourArchitecting Human Behaviour
Architecting Human Behaviour
Andy Budd
 

More from Andy Budd (20)

I for one welcome our new robot overlords
I for one welcome our new robot overlordsI for one welcome our new robot overlords
I for one welcome our new robot overlords
 
The Good, the Bad and the Ugly of Conversational Interfaces
The Good, the Bad and the Ugly of Conversational InterfacesThe Good, the Bad and the Ugly of Conversational Interfaces
The Good, the Bad and the Ugly of Conversational Interfaces
 
Desiging for competitive advantage
Desiging for competitive advantageDesiging for competitive advantage
Desiging for competitive advantage
 
The ux of user experience
The ux of user experienceThe ux of user experience
The ux of user experience
 
The ux of architecture
The ux of architectureThe ux of architecture
The ux of architecture
 
Redefining ux
Redefining uxRedefining ux
Redefining ux
 
The ux of user experience
The ux of user experienceThe ux of user experience
The ux of user experience
 
Design for Start-Ups
Design for Start-UpsDesign for Start-Ups
Design for Start-Ups
 
Ux professionalism
Ux professionalismUx professionalism
Ux professionalism
 
Digital Product Design
Digital Product DesignDigital Product Design
Digital Product Design
 
Product management
Product managementProduct management
Product management
 
Ignore UX At Your Peril
Ignore UX At Your PerilIgnore UX At Your Peril
Ignore UX At Your Peril
 
Persuasive Design: Encouraging Your Users To Do What You Want Them To!
Persuasive Design:  Encouraging Your Users To Do What You Want Them To!Persuasive Design:  Encouraging Your Users To Do What You Want Them To!
Persuasive Design: Encouraging Your Users To Do What You Want Them To!
 
Seductive Design
Seductive DesignSeductive Design
Seductive Design
 
Guerilla Usability Testing — @media 2009
Guerilla Usability Testing — @media 2009Guerilla Usability Testing — @media 2009
Guerilla Usability Testing — @media 2009
 
Publishing 2.0
Publishing 2.0Publishing 2.0
Publishing 2.0
 
Usability Testing
Usability TestingUsability Testing
Usability Testing
 
Designing The User Experience Curve 2.0
Designing The User Experience Curve 2.0Designing The User Experience Curve 2.0
Designing The User Experience Curve 2.0
 
Architecting Human Behaviour
Architecting Human BehaviourArchitecting Human Behaviour
Architecting Human Behaviour
 
Designing the User Experience Curve
Designing the User Experience CurveDesigning the User Experience Curve
Designing the User Experience Curve
 

Recently uploaded

A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...
A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...
A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...
prakheeshc
 
Presentation4 (2) survey responses clearly labelled
Presentation4 (2) survey responses clearly labelledPresentation4 (2) survey responses clearly labelled
Presentation4 (2) survey responses clearly labelled
CaitlinCummins3
 
Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.
Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.
Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.
daisycvs
 
Obat Aborsi Pasuruan 0851\7696\3835 Jual Obat Cytotec Di Pasuruan
Obat Aborsi Pasuruan 0851\7696\3835 Jual Obat Cytotec Di PasuruanObat Aborsi Pasuruan 0851\7696\3835 Jual Obat Cytotec Di Pasuruan
Obat Aborsi Pasuruan 0851\7696\3835 Jual Obat Cytotec Di Pasuruan
Obat Aborsi Jakarta Wa 085176963835 Apotek Jual Obat Cytotec Di Jakarta
 
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
AS
 
Future of Trade 2024 - Decoupled and Reconfigured - Snapshot Report
Future of Trade 2024 - Decoupled and Reconfigured - Snapshot ReportFuture of Trade 2024 - Decoupled and Reconfigured - Snapshot Report
Future of Trade 2024 - Decoupled and Reconfigured - Snapshot Report
Dubai Multi Commodity Centre
 
Creating an Income Statement with Forecasts: A Simple Guide and Free Excel Te...
Creating an Income Statement with Forecasts: A Simple Guide and Free Excel Te...Creating an Income Statement with Forecasts: A Simple Guide and Free Excel Te...
Creating an Income Statement with Forecasts: A Simple Guide and Free Excel Te...
Aurelien Domont, MBA
 

Recently uploaded (20)

Exploring-Pipe-Flanges-Applications-Types-and-Benefits.pptx
Exploring-Pipe-Flanges-Applications-Types-and-Benefits.pptxExploring-Pipe-Flanges-Applications-Types-and-Benefits.pptx
Exploring-Pipe-Flanges-Applications-Types-and-Benefits.pptx
 
First Time Home Buyer's Guide - KM Realty Group LLC
First Time Home Buyer's Guide - KM Realty Group LLCFirst Time Home Buyer's Guide - KM Realty Group LLC
First Time Home Buyer's Guide - KM Realty Group LLC
 
A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...
A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...
A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...
 
Global Internal Audit Standards 2024.pdf
Global Internal Audit Standards 2024.pdfGlobal Internal Audit Standards 2024.pdf
Global Internal Audit Standards 2024.pdf
 
Presentation4 (2) survey responses clearly labelled
Presentation4 (2) survey responses clearly labelledPresentation4 (2) survey responses clearly labelled
Presentation4 (2) survey responses clearly labelled
 
Progress Report - UKG Analyst Summit 2024 - A lot to do - Good Progress1-1.pdf
Progress Report - UKG Analyst Summit 2024 - A lot to do - Good Progress1-1.pdfProgress Report - UKG Analyst Summit 2024 - A lot to do - Good Progress1-1.pdf
Progress Report - UKG Analyst Summit 2024 - A lot to do - Good Progress1-1.pdf
 
Elevate Your Online Presence with SEO Services
Elevate Your Online Presence with SEO ServicesElevate Your Online Presence with SEO Services
Elevate Your Online Presence with SEO Services
 
South Africa's 10 Most Influential CIOs to Watch.pdf
South Africa's 10 Most Influential CIOs to Watch.pdfSouth Africa's 10 Most Influential CIOs to Watch.pdf
South Africa's 10 Most Influential CIOs to Watch.pdf
 
Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.
Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.
Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.
 
How to refresh to be fit for the future world
How to refresh to be fit for the future worldHow to refresh to be fit for the future world
How to refresh to be fit for the future world
 
Understanding Financial Accounting 3rd Canadian Edition by Christopher D. Bur...
Understanding Financial Accounting 3rd Canadian Edition by Christopher D. Bur...Understanding Financial Accounting 3rd Canadian Edition by Christopher D. Bur...
Understanding Financial Accounting 3rd Canadian Edition by Christopher D. Bur...
 
The Art of Decision-Making: Navigating Complexity and Uncertainty
The Art of Decision-Making: Navigating Complexity and UncertaintyThe Art of Decision-Making: Navigating Complexity and Uncertainty
The Art of Decision-Making: Navigating Complexity and Uncertainty
 
Obat Aborsi Pasuruan 0851\7696\3835 Jual Obat Cytotec Di Pasuruan
Obat Aborsi Pasuruan 0851\7696\3835 Jual Obat Cytotec Di PasuruanObat Aborsi Pasuruan 0851\7696\3835 Jual Obat Cytotec Di Pasuruan
Obat Aborsi Pasuruan 0851\7696\3835 Jual Obat Cytotec Di Pasuruan
 
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
 
Future of Trade 2024 - Decoupled and Reconfigured - Snapshot Report
Future of Trade 2024 - Decoupled and Reconfigured - Snapshot ReportFuture of Trade 2024 - Decoupled and Reconfigured - Snapshot Report
Future of Trade 2024 - Decoupled and Reconfigured - Snapshot Report
 
Most Visionary Leaders in Cloud Revolution, Shaping Tech’s Next Era - 2024 (2...
Most Visionary Leaders in Cloud Revolution, Shaping Tech’s Next Era - 2024 (2...Most Visionary Leaders in Cloud Revolution, Shaping Tech’s Next Era - 2024 (2...
Most Visionary Leaders in Cloud Revolution, Shaping Tech’s Next Era - 2024 (2...
 
Toyota Kata Coaching for Agile Teams & Transformations
Toyota Kata Coaching for Agile Teams & TransformationsToyota Kata Coaching for Agile Teams & Transformations
Toyota Kata Coaching for Agile Teams & Transformations
 
WAM Corporate Presentation May 2024_w.pdf
WAM Corporate Presentation May 2024_w.pdfWAM Corporate Presentation May 2024_w.pdf
WAM Corporate Presentation May 2024_w.pdf
 
Home Furnishings Ecommerce Platform Short Pitch 2024
Home Furnishings Ecommerce Platform Short Pitch 2024Home Furnishings Ecommerce Platform Short Pitch 2024
Home Furnishings Ecommerce Platform Short Pitch 2024
 
Creating an Income Statement with Forecasts: A Simple Guide and Free Excel Te...
Creating an Income Statement with Forecasts: A Simple Guide and Free Excel Te...Creating an Income Statement with Forecasts: A Simple Guide and Free Excel Te...
Creating an Income Statement with Forecasts: A Simple Guide and Free Excel Te...
 

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?