Microsoft TechDays - CSS3 Presentation

Rachel Andrew
Rachel AndrewWriter, speaker, co-founder of Perch CMS. Google Developer Expert for Web Technologies at A List Apart
INTROD  UCTION
                      TO - CSS 3 -FOR
                       WEB DEVELOPERS


Monday, 23 May 2011
RACHEL ANDREW




Monday, 23 May 2011
RACHEL ANDREW
                      @rachelandrew
                      rachelandrew.co.uk
                      edg eofmyseat.com
                      grabaperch.com




Monday, 23 May 2011
C SS 3

Monday, 23 May 2011
CSS3 IS
                      THE NEXT VERSION OF CSS




Monday, 23 May 2011
CSS3 IS
                      MODULAR



Monday, 23 May 2011
SOME CSS3 MODULES
                      ARE MORE COMPLETE
                         THAN OTHERS




Monday, 23 May 2011
W3C MATURITY LEVELS
                      •Working Draft
                      •Candidate Recommendation
                      •Proposed Recommendation
                      •W3C Recommendation
                      http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels




Monday, 23 May 2011
CSS3 IS
                      SUPPORTED BY BROWSERS
                       Some browsers and some (parts of) modules.




Monday, 23 May 2011
VENDOR-SPECIFIC EXTENSIONS
                            Implementing early stage CSS3




Monday, 23 May 2011
border-radius




Monday, 23 May 2011
border-radius
                      .box {
                         -moz-border-radius: 10px;
                         -webkit-border-radius: 10px;
                         border-radius: 10px;
                       }




Monday, 23 May 2011
IN DEFENCE OF VENDOR-SPECIFIC
                               EXTENSIONS




Monday, 23 May 2011
IN DEFENCE OF VENDOR-SPECIFIC
                                         EXTENSIONS

                      •W3C Approved way to add extensions




Monday, 23 May 2011
IN DEFENCE OF VENDOR-SPECIFIC
                                           EXTENSIONS

                      •W3C Approved way to add extensions
                      •If a module changes browser doesn’t need to change and break older
                      code




Monday, 23 May 2011
IN DEFENCE OF VENDOR-SPECIFIC
                                            EXTENSIONS

                      •W3C Approved way to add extensions
                      •If a module changes browser doesn’t need to change and break older
                      code
                      •Use with care - and always include the real property



Monday, 23 May 2011
USING CSS3


Monday, 23 May 2011
USING CSS3
                      Selectors




Monday, 23 May 2011
SELECTORS MODULE

                         W3C Proposed Recommendation
                      http://www.w3.org/TR/css3-selectors/




Monday, 23 May 2011
THE PROBLEM WITH CSS2
                                    SELECTORS
                                          Not precise
                                        Led to “classitis”
                      If we can’t access mark-up it is hard to target things




Monday, 23 May 2011
CSS3 SELECTORS
                                 “Common sense” new selectors
                      target elements more precisely without adding classes




Monday, 23 May 2011
first-child
                      target an element when it is the first child of a parent element




Monday, 23 May 2011
first-child




Monday, 23 May 2011
first-child

                      div#wrapper p:first-child {
                      ! ! font-size: 1.5em;
                      }




Monday, 23 May 2011
first-child




Monday, 23 May 2011
last-child

                      target an element when it is the last child of a parent element




Monday, 23 May 2011
last-child




Monday, 23 May 2011
last-child

                      ul#navigation li:last-child {
                      ! ! border-bottom: none;
                      }




Monday, 23 May 2011
last-child




Monday, 23 May 2011
nth-child

                      select multiple elements according to their position in the document
                                                     tree




Monday, 23 May 2011
nth-child




Monday, 23 May 2011
nth-child

                      tr:nth-child(odd) td {
                      ! ! background-color: #f0e9c5;
                      }




Monday, 23 May 2011
NTH-CHILD




Monday, 23 May 2011
nth-child

                      tr:nth-child(2n+1) td {
                      ! ! background-color: #f0e9c5;
                      }


                               http://reference.sitepoint.com/css/understandingnthchildexpressions




Monday, 23 May 2011
Adjacent Sibling

                      div#wrapper h1 + p {
                      ! font-size: 1.5em;
                      }




Monday, 23 May 2011
Adjacent Sibling




Monday, 23 May 2011
Attribute Selectors

                      form input[type="text"] {

                      }
                      !
                      form input[type="submit"] {

                      }




Monday, 23 May 2011
ATTRIBUTE SELECTORS




Monday, 23 May 2011
Attribute Selectors
                      label[for="fContact"] {
                          ! float: none;
                          ! width: auto;
                      }

                      a[href   ^="mailto:"] {
                      ! !      padding-right: 20px;
                      ! !      background-image:url(email.png);
                      ! !      background-repeat: no-repeat;
                      ! !      background-position: right center;
                      }




Monday, 23 May 2011
BROWSER
                      SUPPORT
Monday, 23 May 2011
BROWSER SUPPORT




Monday, 23 May 2011
DOES IT MATTER?

Monday, 23 May 2011
THAT DEPENDS...

Monday, 23 May 2011
YES, IT MATTERS.

Monday, 23 May 2011
JAVASCRIPT

                      Plug the holes in browser support using JavaScript.




Monday, 23 May 2011
ROLL YOUR OWN

Monday, 23 May 2011
jQuery: first-child
                      div#wrapper p:first-child,
                      div#wrapper p.first {
                      ! ! font-size: 1.5em;
                      }




                      <script src="http://code.jquery.com/jquery-latest.js"></script>
                      <script>
                        $(document).ready(function(){
                      ! $("div#wrapper p:first-child").addClass("first");
                        });
                      </script>




Monday, 23 May 2011
jQuery: last-child
                      ul#navigation li:last-child, ul#navigation li.last {
                      ! ! border-bottom: none;
                      }




                      <script src="http://code.jquery.com/jquery-latest.js"></script>
                      <script>
                        $(document).ready(function(){
                      ! $("ul#navigation li:last-child").addClass("last");
                        });
                      </script>




Monday, 23 May 2011
jQuery: nth-child
                      tr:nth-child(odd) td, td.odd {
                      ! background-color: #f0e9c5;
                      }




                      <script src="http://code.jquery.com/jquery-latest.js"></script>
                      <script>
                        $(document).ready(function(){
                      ! $("tr:nth-child(odd) td").addClass("odd");
                        });
                      </script>




Monday, 23 May 2011
USE A “POLYFILL”
                      “A polyfill, or polyfiller, is a piece of code (or plugin) that provides the
                       technology that you, the developer, expect the browser to provide
                                natively. Flattening the API landscape if you will.”
                                        Remy Sharp - http://remysharp.com/2010/10/08/what-is-a-polyfill/




Monday, 23 May 2011
CSS3 POLYFILLS

                        http://ecsstender.org
                        http://selectivizr.com/




Monday, 23 May 2011
CAUTION REQUIRED

                      Remember some users may have an old browser AND no JavaScript




Monday, 23 May 2011
USING CSS3


Monday, 23 May 2011
USING CSS3
                      Color




Monday, 23 May 2011
COLOR MODULE

                               Working Draft
                      http://www.w3.org/TR/css3-color/




Monday, 23 May 2011
OPACITY

                      specify the opacity of an element




Monday, 23 May 2011
opacity




Monday, 23 May 2011
opacity
                      ul#gallery li {
                      ! ! opacity: 0.4;
                      }

                      ul#gallery li:hover {
                      ! ! opacity: 1;
                      }




Monday, 23 May 2011
RGBA

                      specify the opacity of a colour with ‘alpha’




Monday, 23 May 2011
RGBA




Monday, 23 May 2011
RGBA

                      div#feature .caption {
                          background-color: rgba(255,255,255,0.5);
                      }




Monday, 23 May 2011
24WAYS.ORG




Monday, 23 May 2011
BROWSER
                      SUPPORT?
Monday, 23 May 2011
USING CSS3


Monday, 23 May 2011
USING CSS3
                      Fonts




Monday, 23 May 2011
FONTS MODULE

                               Working Draft
                      http://www.w3.org/TR/css3-fonts/




Monday, 23 May 2011
@FONT-FACE

                      using a font other than one installed on your user’s computer




Monday, 23 May 2011
@font-face
                      @font-face {
                        !
                        font-family: KaffeesatzBold;
                        !
                        src: url(YanoneKaffeesatz-Bold.ttf);
                      }

                      h1 {
                      ! font-family: KaffeesatzBold, sans-serif;
                      ! font-weight: normal;
                      }




Monday, 23 May 2011
BROWSER COMPATIBILITY

                      We need to use different types of fonts for different browsers and
                                             operating systems




Monday, 23 May 2011
LICENSING ISSUES

                      Most commercial fonts have a license which prohibits them being
                                        uploaded to a webserver.




Monday, 23 May 2011
FONTS WITH FONT SQUIRREL

                            http://www.fontsquirrel.com




Monday, 23 May 2011
FONT SQUIRREL




Monday, 23 May 2011
FONT SQUIRREL
                      @font-face {
                      ! font-family: 'YanoneKaffeesatzBold';
                      ! ! src: url('yanonekaffeesatz-bold-webfont.eot');
                      ! ! src: local('☺'), url('yanonekaffeesatz-bold-webfont.woff') format
                      ('woff'), url('yanonekaffeesatz-bold-webfont.ttf') format('truetype'), url
                      ('yanonekaffeesatz-bold-webfont.svg#webfontUcEp3Pt5') format('svg');
                      ! font-weight: normal;
                      ! font-style: normal;
                      }




Monday, 23 May 2011
HOSTED FONT SERVICES
                            http://www.typekit.com
                             http://fontdeck.com/
                          http://webfonts.fonts.com/




Monday, 23 May 2011
EDGEOFMYSEAT.COM




Monday, 23 May 2011
USING CSS3


Monday, 23 May 2011
USING CSS3
                      Backgrounds &
                      Borders




Monday, 23 May 2011
BACKGROUNDS & BORDERS
                                   MODULE

                             W3C Candidate Recommendation
                         http://www.w3.org/TR/css3-background/




Monday, 23 May 2011
MULTIPLE BACKGROUNDS

                      Apply more than one background image to an element




Monday, 23 May 2011
backgrounds
                      blockquote {
                      ! ! background: url(quote-left.gif) top left
                      no-repeat,
                      ! ! url(quote-right.gif) bottom right no-
                      repeat;
                      ! }




Monday, 23 May 2011
backgrounds




Monday, 23 May 2011
BORDER-RADIUS

                       Yes! CSS rounded corners




Monday, 23 May 2011
border-radius
                      .box1   {
                      ! !      background-color: #a18c83;
                      ! !      border: 3px solid #6d4d6b;
                      ! !      -moz-border-radius: 15px;
                      ! !      -webkit-border-radius: 15px;
                                border-radius: 15px;
                      !   !    color: #fff;
                      !   !    padding: 10px;
                      !   !    margin: 0 0 20px 0;
                      !   }
                      !
                      !   .box2 {
                      !   ! border: 5px solid #6d4d6b;
                      !   ! -moz-border-radius-topleft: 50px;
                      !   ! -webkit-border-top-left-radius: 50px;
                              border-top-left-radius: 50px;
                      !   ! padding: 10px 5px 5px 20px;
                      !   }



Monday, 23 May 2011
border-radius




Monday, 23 May 2011
BOX-SHADOW

                      drop shadows without images




Monday, 23 May 2011
box-shadow
                      .box1   {
                      ! !      background-color: #333;
                      ! !      -moz-border-radius: 15px;
                      ! !      -webkit-border-radius: 15px;
                                border-radius: 15px;
                              -moz-box-shadow: 10px 10px 5px #666;
                              -webkit-box-shadow: 10px 10px 5px #666;
                              box-shadow: 10px 10px 5px #666;
                      !   !    color: #fff;
                      !   !    padding: 10px;
                      !   !    margin: 0 0 20px 0;
                      !   }




Monday, 23 May 2011
box-shadow




Monday, 23 May 2011
BROWSER
                      SUPPORT
Monday, 23 May 2011
CSS3 POLYFILLS

                         http://css3pie.com/




Monday, 23 May 2011
USING CSS3


Monday, 23 May 2011
USING CSS3
                      CSS Media Queries




Monday, 23 May 2011
MEDIA QUERIES

                           W3C Candidate Recommendation
                      http://www.w3.org/TR/css3-mediaqueries/




Monday, 23 May 2011
MEDIA QUERIES
                      target browser characteristics, for example screen resolution, width
                                                   and height




Monday, 23 May 2011
Media Queries
                      div#wrapper {
                      !   width: 780px;
                      !   margin-left: auto;
                      !   margin-right: auto;
                      }
                      !
                      div#header {
                      !   background-image: url(media-queries-browser.jpg);
                      !   height: 349px;
                      !   position: relative;
                      }
                      !
                      #content {
                      !   float: left;
                      !   width: 540px;
                      }
                      !
                      #navigation {
                      !   float:right;
                      !   width: 200px;
                      }




Monday, 23 May 2011
Media Queries




Monday, 23 May 2011
Media Queries
                      @media screen and (max-device-width: 480px) {
                      !   !    div#wrapper {
                      !   !    !   width: 400px;
                      !   !    }
                      !
                      !   !    div#header {
                      !   !    !   background-image: url(media-queries-phone.jpg);
                      !   !    !   height: 93px;
                      !   !    !   position: relative;
                      !   !    }
                      !   !
                      !   !    div#header h1 {
                      !   !    !   font-size: 140%;
                      !   !    }
                      !   !
                      !   !    #content {
                      !   !    !   float: none;
                      !   !    !   width: 100%;
                      !   !    }
                      !
                      !   !    #navigation {
                      !   !    !   float:none;
                      !   !    !   width: auto;
                      !   !    }
                      !   }


Monday, 23 May 2011
Media Queries




Monday, 23 May 2011
Media Queries

                      <link media="screen and (max-device-width:
                      480px)" href="small.css" type= "text/css"
                      rel="stylesheet" />




Monday, 23 May 2011
MEDIAQUERI.ES




Monday, 23 May 2011
RESPONSIVE DESIGN

                      http://www.alistapart.com/articles/responsive-web-design/




Monday, 23 May 2011
MOBILE
                      BROWSER
                      SUPPORT
Monday, 23 May 2011
YES!

Monday, 23 May 2011
YES!
                      Unless you are targeting Windows Phone 7




Monday, 23 May 2011
PROVIDING CSS TO WINDOWS
                               PHONE 7

                           http://adactio.com/journal/4494/




Monday, 23 May 2011
DESKTOP
                      BROWSER
                      SUPPORT
Monday, 23 May 2011
MEDIA QUERY SUPPORT




Monday, 23 May 2011
MEDIA QUERIES POLYFILLS

                       http://code.google.com/p/css3-mediaqueries-js/
                            https://github.com/scottjehl/Respond




Monday, 23 May 2011
THAN K YOU!




                      Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/
                                  Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/


Monday, 23 May 2011
THAN K YOU!
                                                @ rachelandrew
                                                http://wp.me/PorPc-cf



                      Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/
                                  Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/


Monday, 23 May 2011
1 of 109

Recommended

Structure Web Content by
Structure Web ContentStructure Web Content
Structure Web ContentNicole Ryan
3.7K views30 slides
Laying Out Elements with CSS by
Laying Out Elements with CSSLaying Out Elements with CSS
Laying Out Elements with CSSNicole Ryan
2.9K views40 slides
Getting Started with CSS by
Getting Started with CSSGetting Started with CSS
Getting Started with CSSNicole Ryan
2.9K views30 slides
Tutorial: Html5 And Css3 Site by
Tutorial: Html5 And Css3 SiteTutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 SiteAdam Stewart
2.1K views20 slides
CSS3 - is everything we used to do wrong? by
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? Russ Weakley
58.9K views167 slides
Everything You know about CSS is Wrong by
Everything You know about CSS is WrongEverything You know about CSS is Wrong
Everything You know about CSS is Wrongchandleryu
1.4K views60 slides

More Related Content

Viewers also liked

ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส by
ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียสตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส
ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียสSamit Koyom
780 views14 slides
Formatting text with CSS by
Formatting text with CSSFormatting text with CSS
Formatting text with CSSNicole Ryan
2.9K views36 slides
The Future State of Layout by
The Future State of LayoutThe Future State of Layout
The Future State of LayoutStephen Hay
3.2K views88 slides
Css floats by
Css floatsCss floats
Css floatsWebtech Learning
1.1K views8 slides
CSS: a rapidly changing world by
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing worldRuss Weakley
9.2K views130 slides
CSS3: A practical introduction (FT2010 talk) by
CSS3: A practical introduction (FT2010 talk)CSS3: A practical introduction (FT2010 talk)
CSS3: A practical introduction (FT2010 talk)Lea Verou
15.1K views141 slides

Viewers also liked(15)

ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส by Samit Koyom
ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียสตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส
ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส
Samit Koyom780 views
Formatting text with CSS by Nicole Ryan
Formatting text with CSSFormatting text with CSS
Formatting text with CSS
Nicole Ryan2.9K views
The Future State of Layout by Stephen Hay
The Future State of LayoutThe Future State of Layout
The Future State of Layout
Stephen Hay3.2K views
CSS: a rapidly changing world by Russ Weakley
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing world
Russ Weakley9.2K views
CSS3: A practical introduction (FT2010 talk) by Lea Verou
CSS3: A practical introduction (FT2010 talk)CSS3: A practical introduction (FT2010 talk)
CSS3: A practical introduction (FT2010 talk)
Lea Verou15.1K views
CSS Layouting #4 : Float by Sandhika Galih
CSS Layouting #4 : FloatCSS Layouting #4 : Float
CSS Layouting #4 : Float
Sandhika Galih11.7K views
CSS3 secrets: 10 things you might not know about CSS3 by Lea Verou
CSS3 secrets: 10 things you might not know about CSS3CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3
Lea Verou17K views
Conoce HTML5 y CSS3 by Marta Armada
Conoce HTML5 y CSS3Conoce HTML5 y CSS3
Conoce HTML5 y CSS3
Marta Armada11.2K views
Getting Started with HTML5 in Tech Com (STC 2012) by Peter Lubbers
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
Peter Lubbers45.4K views
HTML5 y CSS3: como sacarles partido hoy by FRONTDAYS
HTML5 y CSS3: como sacarles partido hoyHTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoy
FRONTDAYS6.8K views

More from Rachel Andrew

All Day Hey! Unlocking The Power of CSS Grid Layout by
All Day Hey! Unlocking The Power of CSS Grid LayoutAll Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutRachel Andrew
2.2K views113 slides
SmashingConf SF: Unlocking the Power of CSS Grid Layout by
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutRachel Andrew
2.3K views113 slides
Unlocking the Power of CSS Grid Layout by
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutRachel Andrew
2K views113 slides
The Creative New World of CSS by
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSSRachel Andrew
2K views144 slides
Into the Weeds of CSS Layout by
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS LayoutRachel Andrew
1.5K views93 slides
Solving Layout Problems with CSS Grid & Friends - DevFest17 by
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Rachel Andrew
2.1K views96 slides

More from Rachel Andrew(20)

All Day Hey! Unlocking The Power of CSS Grid Layout by Rachel Andrew
All Day Hey! Unlocking The Power of CSS Grid LayoutAll Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid Layout
Rachel Andrew2.2K views
SmashingConf SF: Unlocking the Power of CSS Grid Layout by Rachel Andrew
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
Rachel Andrew2.3K views
Unlocking the Power of CSS Grid Layout by Rachel Andrew
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
Rachel Andrew2K views
The Creative New World of CSS by Rachel Andrew
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
Rachel Andrew2K views
Into the Weeds of CSS Layout by Rachel Andrew
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS Layout
Rachel Andrew1.5K views
Solving Layout Problems with CSS Grid & Friends - DevFest17 by Rachel Andrew
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
Rachel Andrew2.1K views
View Source London: Solving Layout Problems with CSS Grid & Friends by Rachel Andrew
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
Rachel Andrew1K views
DevFest Nantes - Start Using CSS Grid Layout today by Rachel Andrew
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout today
Rachel Andrew1.1K views
Start Using CSS Grid Layout Today - RuhrJS by Rachel Andrew
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
Rachel Andrew990 views
404.ie: Solving Layout Problems with CSS Grid & Friends by Rachel Andrew
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends
Rachel Andrew909 views
Solving Layout Problems with CSS Grid & Friends - WEBU17 by Rachel Andrew
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
Rachel Andrew902 views
Laying out the future with grid & flexbox - Smashing Conf Freiburg by Rachel Andrew
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Rachel Andrew2.4K views
Solving Layout Problems with CSS Grid & Friends - NordicJS by Rachel Andrew
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
Rachel Andrew2.7K views
Google Developers Experts Summit 2017 - CSS Layout by Rachel Andrew
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout
Rachel Andrew1.4K views
Web Summer Camp Keynote by Rachel Andrew
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp Keynote
Rachel Andrew1.9K views
New CSS Layout Meets the Real World by Rachel Andrew
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real World
Rachel Andrew864 views
An Event Apart DC - New CSS Layout meets the Real World by Rachel Andrew
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real World
Rachel Andrew408 views
Perch, Patterns and Old Browsers by Rachel Andrew
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
Rachel Andrew1.8K views
Evergreen websites for Evergreen browsers by Rachel Andrew
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
Rachel Andrew1.5K views

Recently uploaded

virtual reality.pptx by
virtual reality.pptxvirtual reality.pptx
virtual reality.pptxG036GaikwadSnehal
11 views15 slides
Empathic Computing: Delivering the Potential of the Metaverse by
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the MetaverseMark Billinghurst
478 views80 slides
PRODUCT PRESENTATION.pptx by
PRODUCT PRESENTATION.pptxPRODUCT PRESENTATION.pptx
PRODUCT PRESENTATION.pptxangelicacueva6
14 views1 slide
Zero to Automated in Under a Year by
Zero to Automated in Under a YearZero to Automated in Under a Year
Zero to Automated in Under a YearNetwork Automation Forum
15 views23 slides
Mini-Track: Challenges to Network Automation Adoption by
Mini-Track: Challenges to Network Automation AdoptionMini-Track: Challenges to Network Automation Adoption
Mini-Track: Challenges to Network Automation AdoptionNetwork Automation Forum
12 views27 slides
Scaling Knowledge Graph Architectures with AI by
Scaling Knowledge Graph Architectures with AIScaling Knowledge Graph Architectures with AI
Scaling Knowledge Graph Architectures with AIEnterprise Knowledge
30 views15 slides

Recently uploaded(20)

Empathic Computing: Delivering the Potential of the Metaverse by Mark Billinghurst
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the Metaverse
Mark Billinghurst478 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10248 views
Special_edition_innovator_2023.pdf by WillDavies22
Special_edition_innovator_2023.pdfSpecial_edition_innovator_2023.pdf
Special_edition_innovator_2023.pdf
WillDavies2217 views
Five Things You SHOULD Know About Postman by Postman
Five Things You SHOULD Know About PostmanFive Things You SHOULD Know About Postman
Five Things You SHOULD Know About Postman
Postman33 views
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by Dr. Jimmy Schwarzkopf
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf
Transcript: The Details of Description Techniques tips and tangents on altern... by BookNet Canada
Transcript: The Details of Description Techniques tips and tangents on altern...Transcript: The Details of Description Techniques tips and tangents on altern...
Transcript: The Details of Description Techniques tips and tangents on altern...
BookNet Canada136 views
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker37 views
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
Voice Logger - Telephony Integration Solution at Aegis by Nirmal Sharma
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at Aegis
Nirmal Sharma39 views

Microsoft TechDays - CSS3 Presentation

  • 1. INTROD UCTION TO - CSS 3 -FOR WEB DEVELOPERS Monday, 23 May 2011
  • 3. RACHEL ANDREW @rachelandrew rachelandrew.co.uk edg eofmyseat.com grabaperch.com Monday, 23 May 2011
  • 4. C SS 3 Monday, 23 May 2011
  • 5. CSS3 IS THE NEXT VERSION OF CSS Monday, 23 May 2011
  • 6. CSS3 IS MODULAR Monday, 23 May 2011
  • 7. SOME CSS3 MODULES ARE MORE COMPLETE THAN OTHERS Monday, 23 May 2011
  • 8. W3C MATURITY LEVELS •Working Draft •Candidate Recommendation •Proposed Recommendation •W3C Recommendation http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels Monday, 23 May 2011
  • 9. CSS3 IS SUPPORTED BY BROWSERS Some browsers and some (parts of) modules. Monday, 23 May 2011
  • 10. VENDOR-SPECIFIC EXTENSIONS Implementing early stage CSS3 Monday, 23 May 2011
  • 12. border-radius .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } Monday, 23 May 2011
  • 13. IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS Monday, 23 May 2011
  • 14. IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add extensions Monday, 23 May 2011
  • 15. IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add extensions •If a module changes browser doesn’t need to change and break older code Monday, 23 May 2011
  • 16. IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add extensions •If a module changes browser doesn’t need to change and break older code •Use with care - and always include the real property Monday, 23 May 2011
  • 18. USING CSS3 Selectors Monday, 23 May 2011
  • 19. SELECTORS MODULE W3C Proposed Recommendation http://www.w3.org/TR/css3-selectors/ Monday, 23 May 2011
  • 20. THE PROBLEM WITH CSS2 SELECTORS Not precise Led to “classitis” If we can’t access mark-up it is hard to target things Monday, 23 May 2011
  • 21. CSS3 SELECTORS “Common sense” new selectors target elements more precisely without adding classes Monday, 23 May 2011
  • 22. first-child target an element when it is the first child of a parent element Monday, 23 May 2011
  • 24. first-child div#wrapper p:first-child { ! ! font-size: 1.5em; } Monday, 23 May 2011
  • 26. last-child target an element when it is the last child of a parent element Monday, 23 May 2011
  • 28. last-child ul#navigation li:last-child { ! ! border-bottom: none; } Monday, 23 May 2011
  • 30. nth-child select multiple elements according to their position in the document tree Monday, 23 May 2011
  • 32. nth-child tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } Monday, 23 May 2011
  • 34. nth-child tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } http://reference.sitepoint.com/css/understandingnthchildexpressions Monday, 23 May 2011
  • 35. Adjacent Sibling div#wrapper h1 + p { ! font-size: 1.5em; } Monday, 23 May 2011
  • 37. Attribute Selectors form input[type="text"] { } ! form input[type="submit"] { } Monday, 23 May 2011
  • 39. Attribute Selectors label[for="fContact"] { ! float: none; ! width: auto; } a[href ^="mailto:"] { ! ! padding-right: 20px; ! ! background-image:url(email.png); ! ! background-repeat: no-repeat; ! ! background-position: right center; } Monday, 23 May 2011
  • 40. BROWSER SUPPORT Monday, 23 May 2011
  • 42. DOES IT MATTER? Monday, 23 May 2011
  • 45. JAVASCRIPT Plug the holes in browser support using JavaScript. Monday, 23 May 2011
  • 46. ROLL YOUR OWN Monday, 23 May 2011
  • 47. jQuery: first-child div#wrapper p:first-child, div#wrapper p.first { ! ! font-size: 1.5em; } <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ ! $("div#wrapper p:first-child").addClass("first"); }); </script> Monday, 23 May 2011
  • 48. jQuery: last-child ul#navigation li:last-child, ul#navigation li.last { ! ! border-bottom: none; } <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ ! $("ul#navigation li:last-child").addClass("last"); }); </script> Monday, 23 May 2011
  • 49. jQuery: nth-child tr:nth-child(odd) td, td.odd { ! background-color: #f0e9c5; } <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ ! $("tr:nth-child(odd) td").addClass("odd"); }); </script> Monday, 23 May 2011
  • 50. USE A “POLYFILL” “A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.” Remy Sharp - http://remysharp.com/2010/10/08/what-is-a-polyfill/ Monday, 23 May 2011
  • 51. CSS3 POLYFILLS http://ecsstender.org http://selectivizr.com/ Monday, 23 May 2011
  • 52. CAUTION REQUIRED Remember some users may have an old browser AND no JavaScript Monday, 23 May 2011
  • 54. USING CSS3 Color Monday, 23 May 2011
  • 55. COLOR MODULE Working Draft http://www.w3.org/TR/css3-color/ Monday, 23 May 2011
  • 56. OPACITY specify the opacity of an element Monday, 23 May 2011
  • 58. opacity ul#gallery li { ! ! opacity: 0.4; } ul#gallery li:hover { ! ! opacity: 1; } Monday, 23 May 2011
  • 59. RGBA specify the opacity of a colour with ‘alpha’ Monday, 23 May 2011
  • 61. RGBA div#feature .caption { background-color: rgba(255,255,255,0.5); } Monday, 23 May 2011
  • 63. BROWSER SUPPORT? Monday, 23 May 2011
  • 65. USING CSS3 Fonts Monday, 23 May 2011
  • 66. FONTS MODULE Working Draft http://www.w3.org/TR/css3-fonts/ Monday, 23 May 2011
  • 67. @FONT-FACE using a font other than one installed on your user’s computer Monday, 23 May 2011
  • 68. @font-face @font-face { ! font-family: KaffeesatzBold; ! src: url(YanoneKaffeesatz-Bold.ttf); } h1 { ! font-family: KaffeesatzBold, sans-serif; ! font-weight: normal; } Monday, 23 May 2011
  • 69. BROWSER COMPATIBILITY We need to use different types of fonts for different browsers and operating systems Monday, 23 May 2011
  • 70. LICENSING ISSUES Most commercial fonts have a license which prohibits them being uploaded to a webserver. Monday, 23 May 2011
  • 71. FONTS WITH FONT SQUIRREL http://www.fontsquirrel.com Monday, 23 May 2011
  • 73. FONT SQUIRREL @font-face { ! font-family: 'YanoneKaffeesatzBold'; ! ! src: url('yanonekaffeesatz-bold-webfont.eot'); ! ! src: local('☺'), url('yanonekaffeesatz-bold-webfont.woff') format ('woff'), url('yanonekaffeesatz-bold-webfont.ttf') format('truetype'), url ('yanonekaffeesatz-bold-webfont.svg#webfontUcEp3Pt5') format('svg'); ! font-weight: normal; ! font-style: normal; } Monday, 23 May 2011
  • 74. HOSTED FONT SERVICES http://www.typekit.com http://fontdeck.com/ http://webfonts.fonts.com/ Monday, 23 May 2011
  • 77. USING CSS3 Backgrounds & Borders Monday, 23 May 2011
  • 78. BACKGROUNDS & BORDERS MODULE W3C Candidate Recommendation http://www.w3.org/TR/css3-background/ Monday, 23 May 2011
  • 79. MULTIPLE BACKGROUNDS Apply more than one background image to an element Monday, 23 May 2011
  • 80. backgrounds blockquote { ! ! background: url(quote-left.gif) top left no-repeat, ! ! url(quote-right.gif) bottom right no- repeat; ! } Monday, 23 May 2011
  • 82. BORDER-RADIUS Yes! CSS rounded corners Monday, 23 May 2011
  • 83. border-radius .box1 { ! ! background-color: #a18c83; ! ! border: 3px solid #6d4d6b; ! ! -moz-border-radius: 15px; ! ! -webkit-border-radius: 15px; border-radius: 15px; ! ! color: #fff; ! ! padding: 10px; ! ! margin: 0 0 20px 0; ! } ! ! .box2 { ! ! border: 5px solid #6d4d6b; ! ! -moz-border-radius-topleft: 50px; ! ! -webkit-border-top-left-radius: 50px; border-top-left-radius: 50px; ! ! padding: 10px 5px 5px 20px; ! } Monday, 23 May 2011
  • 85. BOX-SHADOW drop shadows without images Monday, 23 May 2011
  • 86. box-shadow .box1 { ! ! background-color: #333; ! ! -moz-border-radius: 15px; ! ! -webkit-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 10px 10px 5px #666; -webkit-box-shadow: 10px 10px 5px #666; box-shadow: 10px 10px 5px #666; ! ! color: #fff; ! ! padding: 10px; ! ! margin: 0 0 20px 0; ! } Monday, 23 May 2011
  • 88. BROWSER SUPPORT Monday, 23 May 2011
  • 89. CSS3 POLYFILLS http://css3pie.com/ Monday, 23 May 2011
  • 91. USING CSS3 CSS Media Queries Monday, 23 May 2011
  • 92. MEDIA QUERIES W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/ Monday, 23 May 2011
  • 93. MEDIA QUERIES target browser characteristics, for example screen resolution, width and height Monday, 23 May 2011
  • 94. Media Queries div#wrapper { ! width: 780px; ! margin-left: auto; ! margin-right: auto; } ! div#header { ! background-image: url(media-queries-browser.jpg); ! height: 349px; ! position: relative; } ! #content { ! float: left; ! width: 540px; } ! #navigation { ! float:right; ! width: 200px; } Monday, 23 May 2011
  • 96. Media Queries @media screen and (max-device-width: 480px) { ! ! div#wrapper { ! ! ! width: 400px; ! ! } ! ! ! div#header { ! ! ! background-image: url(media-queries-phone.jpg); ! ! ! height: 93px; ! ! ! position: relative; ! ! } ! ! ! ! div#header h1 { ! ! ! font-size: 140%; ! ! } ! ! ! ! #content { ! ! ! float: none; ! ! ! width: 100%; ! ! } ! ! ! #navigation { ! ! ! float:none; ! ! ! width: auto; ! ! } ! } Monday, 23 May 2011
  • 98. Media Queries <link media="screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet" /> Monday, 23 May 2011
  • 100. RESPONSIVE DESIGN http://www.alistapart.com/articles/responsive-web-design/ Monday, 23 May 2011
  • 101. MOBILE BROWSER SUPPORT Monday, 23 May 2011
  • 103. YES! Unless you are targeting Windows Phone 7 Monday, 23 May 2011
  • 104. PROVIDING CSS TO WINDOWS PHONE 7 http://adactio.com/journal/4494/ Monday, 23 May 2011
  • 105. DESKTOP BROWSER SUPPORT Monday, 23 May 2011
  • 107. MEDIA QUERIES POLYFILLS http://code.google.com/p/css3-mediaqueries-js/ https://github.com/scottjehl/Respond Monday, 23 May 2011
  • 108. THAN K YOU! Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/ Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/ Monday, 23 May 2011
  • 109. THAN K YOU! @ rachelandrew http://wp.me/PorPc-cf Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/ Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/ Monday, 23 May 2011