CSS3:    Ripe & Ready to Respond                                Denise Jacobs //1           ConvergeSE Conference // June ...
Sweet Tweets         Who I am:        @denisejacobs       This fine event:         @convergese    What I’m talkin’ ‘bout: ...
A little about me3   CSSDetectiveGuide.com & InterActWithWebStandards.com
Ripe?4
Responsive?5
The goal6
How???7
Start by…    1. Becoming Responsive      •   Shift your brain          •   Mobile first          •   Watch out      •   3 ...
…And end with    2. CSS3      •   Getting started          •   What’s new          •   Rules of the road          •   Help...
Becoming     Responsive10                http://mediaqueri.es/
Responsive Devices?11                 http://www.flickr.com/photos/ivyfield/4486938457/
Responsive Devices!12                 http://www.flickr.com/photos/ivyfield/4486938457/
Brain shift13
Mobile first14
Not this     Desktop stylesheet + media queries     = mobile site15
Instead this     Mobile stylesheet + media queries     = desktop site16
Watch out     • Switchy vs. responsive – keyhole effect     • Be aware of context – you’ll probably want       different c...
3 components18
Flexible grid19
Flexible & Fluid     • Size everything in ems or percentages     • Flexible: Ems for everything     • Fluid: Percentages f...
Various grids     • http://delicious.com/denisejacobs/grids21
Flexible images22
Flexible Images: Foreground     Width: 100%;     Max-width: 100%;23
Flexible Images: Background     Use background-position to selectively crop       your backgrounds     http://goo.gl/YLLC324
@media queries     @media queries are now being used as a      basis for responsive web design: web      interfaces that c...
How do they work?     Through media queries, the browser is served       different styles or stylesheets based on the     ...
Simple @media rule examples     @media print {        body { font-size: 10pt }      }      @media screen {        body { f...
Syntax: @media queries     Syntax:     @media [operand] <media type> [operand]       <(media feature: value)>     {     pr...
@media queries     Example:     /* Smartphones (portrait and landscape) -       ---------- */     @media only screen     a...
Hardboiled’s @media queries: Smartphone     /* Smartphones (portrait and landscape) ----------- */     @media only screen ...
Hardboiled’s @media queries: iPad     /* iPads (portrait and landscape) ----------- */     @media only screen     and (min...
Hardboiled’s @media queries: Other     /* Desktops and laptops ----------- */     @media only screen     and (min-width : ...
Plan the design(s)     • Need to plan out 3-4 iterations of a page       design for each resolution/device instead       o...
Calculate     • Need to know dimensions of page       elements to be able to calculate       proportional relationship34
The Golden Formula     target ÷ context = result35
@media queries: Browser compatibility     Yep                    Nope     •   IE 9               • IE 8, 7, 6     •   Oper...
Css3-mediaqueries.js       http://code.google.com/p/css3-mediaqueries-js/37
Responsive design inspiration     • Mediaqueri.es38
Resources: @media queries     • http://www.delicious.com/denisejacobs/       media-queries39
What’s New in        CSS340
What’s New in CSS3?     CSS3 is the third generation of the CSS       specification recommendations from the       W3C.   ...
CSS3 Modularity     CSS3 has been broken up into different       unique modules. This means is that, for       example, th...
CSS3 Modularity: Benefits     • Browser producers can now implement       CSS3 module by module     • Speeds up the browse...
The CSS3 Modules     • Template Layout               •   Values and Units     • Backgrounds and Borders       •   Web Font...
Resources: New in CSS3     http://www.w3.org/TR/tr-groups-all#       tr_Cascading_Style_Sheets__CSS__       Working_Group45
Colors in CSS3: RGB     • Regular RGB       rgb(x, x, x):       ex. rgb(255, 0, 0)     • RBG with alpha-opacity       rgba...
RGBA Color     Alpha opacity:     0.0 = 0% = no opacity     1.0 = 100% = full opacity47
Colors in CSS3: HSL     HSL stands for hue, saturation, and      luminosity (lightness)     • Regular HSL       hsl(x%, x%...
HSL Color Wheel     0º – Red     60º – Yellow     120º – Green     180º – Cyan     240º – Blue     300º – Magenta49
HSL Color Picker Tool       http://www.workwithcolor.com/hsl-color-picker-01.htm50
Getting Started with            CSS3:       The Rules of the            Road51               http://www.flickr.com/photos/...
CSS3 Browser     Compatibility52           http://www.flickr.com/photos/sfllaw/222795669/
The Scoop     • Many properties are browser-specific,       requiring vendor prefixes     • Plus there is a standard prope...
Code bloat in action     Ideally:                     Reality:     a.polaroid:active {          a.polaroid:active {     z-...
Doesn’t Validate55
None of the older IEs support CSS3     …as in “not any.”            6            7                                  856   ...
IE9 now supports CSS3                …But still not as fully as                  the other browsers                  yet.57
Resources: IE9 CSS3 support     http://msdn.microsoft.com/en-       us/ie/ff468705.aspx#_Web_standards_sup       port     ...
Tools you’ll need:     1.   CSS3 Property browser support charts     2.   CSS3 Selector browser support charts     3.   CS...
CSS3 Property browser support charts     http://www.findmebyip.com/       litmus60
CSS3 Selector browser support charts     http://www.standardista.com/css3/       css3-selector-browser-support61
The CSS3 Specifications     The CSS3 Specifications are THE resource for       finding out exactly is the intented behavio...
Cross-browser testers     http://tredosoft.com/Multiple_IE     http://crossbrowsertesting.com/     (paid)     http://brows...
CSS3 & Cross-     browser Coding64           http://www.flickr.com/photos/scfiasco/4490322916/
The Goal: Code that works       in all most browsers65
How do we achieve this?66                  http://www.flickr.com/photos/barretthall/205175534/
Steps to get as close as possible     1. Leverage source order     2. Filter it     3. Let tools do all of the work67
Leverage source order     • Place default properties first     • Place browser-specific properties ahead of       standard...
A Proper Stack     .gradient {     color: #fff;69
A Proper Stack     .gradient {     color: #fff;     background: #aaaaaa url(gradient_slice.jpg) 0 0       x-repeat; /*fall...
A Proper Stack     .gradient {     color: #fff;     background: #aaaaaa url(gradient_slice.jpg) 0 0       x-repeat; /*fall...
A Proper Stack     .gradient {     color: #fff;     background: #aaaaaa url(gradient_slice.jpg) 0 0       x-repeat; /*fall...
A Proper Stack     .gradient {     color: #fff;     background: #aaaaaa url(gradient_slice.jpg) 0 0       x-repeat; /*fall...
A Proper Stack     .gradient {     color: #fff;     background: #aaaaaa url(gradient_slice.jpg) 0 0       x-repeat; /*fall...
Apply a Filter     • If you must have the effect in IE lt 8, such as alpha       opacity, gradient, shadow, transitions et...
Filters: {Caveat Coder}     • IE filters work, but are essentially hacks       – IE filters are proprietary and thus not p...
Resources: IE Filters     Microsoft Visual Filters and Transitions Reference     http://msdn.microsoft.com/en-us/library/ ...
Let the tools do the work     • We’ll talk about those next!78
CSS3 Tools79        http://www.flickr.com/photos/johnsnape/4258191545/
Useful CSS3 Tools     1.   CSS3 Generators     2.   Helper Scripts     3.   Browser Feature Detection     4.   Templates80
CSS3 Generators81            http://www.flickr.com/photos/latca/841730130/
CSS3Please.com82
CSS3Generator.com83
CSS3-Maker.com84
CSS3 Tools at WestCiv85         http://westciv.com/tools/
More CSS3 Generators     http://border-radius.com     http://www.css3maker.com     http://www.colorzilla.com/       gradie...
Helper Scripts87          http://www.flickr.com/photos/keystricken/386106987/
Get a helping hand…     These scripts help IE lt 8 behave like CSS3-     compliant browsers. However, support of     CSS3 ...
ie-7.js (includes IE8 and IE9)89            http://code.google.com/p/ie7-js/
CSS3Pie.com90
CSS Sandpaper91   http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
Browser Feature        Detection92          http://www.flickr.com/photos/johnsnape/4258191545/
Modernizr.com93
What does Modernizr do?     Modernizr detects which CSS3 (and HTML5)     properties are supported by the browser,     and ...
How to use Modernizr     http://www.alistapart.com/articles/taking-       advantage-of-html5-and-css3-with-       moderniz...
Templates96       http://www.flickr.com/photos/jazzmasterson/275796175/
HTML5Boilerplate.com     Paul Irish’s HTML5 template file     http://html5boilerplate.com/97
CSS3 Properties!98
Webfonts99
@font-face100                http://lostworldsfairs.com/moon/
@font-face      • Note:        – Actually part of the CSS2.1 specification.        – Therefore, the IEs do support it!    ...
@font-face      @font-face {      font-family: Graublau Web;      src: local(Graublau),        url(GraublauWeb.woff)      ...
@font-face bug: IE lt 8      @font-face super bullet-proofing      The problem:      @font-face doesn’t work, even with th...
@font-face bug: Webkit      @font-face bold and italics “bug”      The problem:      Applying font-weight:bold or font-   ...
Solution: IE proof @font-face                + faux variations      Example:      @font-face {      font-family: MyFontFam...
FontSquirrel.com106    http://www.fontsquirrel.com/fontface/generator
Webfont Services107       http://www.typekit.com
Webfont Services      Instead of generating the webfonts yourself,        you can pay a service where the webfonts        ...
Webfont Services      http://www.typotheque      http://www.webtype.com         .com/webfonts                             ...
Resources: @font-face      • http://www.delicious.com/denisejacobs/        font-face110
New Visual Effects          in CSS3111
New Visual Effects in CSS3      •   border-radius      •   opacity      •   rgba color      •   box-shadow      •   text-s...
border-radius113                   http://oh-hai.biz
border-radius      • Tips & issues         – Different syntax for mozilla, webkit, and           opera browsers      • Bro...
border-radius      Syntax comparison breakdown:      • -moz allows multiple values for each position      • -webkit indivi...
border-radius      #contentcolumn {      -moz-border-radius: 20px 20px 0 0;      -webkit-border-top-left-radius: 20px;    ...
Border-radius.com117
Tools: border-radius      http://border-radius.com      http://css3please.com      http://css3generator.com      http://ww...
border-radius Resources      http://www.delicious.com/denisejacobs/        border-radius119
opacity120             http://rustinjessen.com/weblog/833
opacity      • Tips & issues         – Do not use on elements that would cover           important content      • Browser ...
opacity      #feature-meta {      background:none repeat scroll 0 0        #3C4C55;      opacity:0.85;      }      Overrid...
Full solution: opacity      .opacity {      background-color: #3C4C55;      color: #fff;      opacity: 0.5;      -ms-filte...
Opacity Resources      http://www.delicious.com/denisejacobs/        opacity124
rgba125          http://aarronwalter.com/designer/
rgba      • Tips & issues         – More granular control of the color           opacity of a particular element than     ...
Cross-browser: rgba      • Place after regular rgb color property to        override in modern browsers; older        brow...
Full solution: rgba      .rgba {      background-color: #ff0000;        /* fallback color in hexidecimal. */      backgrou...
box-shadow129                http://badassideas.com/work/
box-shadow      • Tips & issues         – Different syntax for mozilla, webkit, and           opera browsers      • Browse...
box-shadow      .portfolio {      -moz-box-shadow: 0 5px 20px        rgba(0,0,0,0.6);      -webkit-box-shadow: 0 5px 20px ...
Full solution: box-shadow      .boxshadow {      -moz-box-shadow: 3px 3px 10px #333;      -webkit-box-shadow: 3px 3px 10px...
Tools: box-shadow      http://css3please.com      http://css3generator.com      http://www.css3maker.com      http://westc...
Resources: box-shadow      http://www.delicious.com/denisejacobs/        box-shadow134
text-shadow135                 http://www.bountybev.com
text-shadow      • Tips & issues         – Can help accentuate text and improve           readability and visual importanc...
Full solution: text-shadow      .textshadow h2 {      text-shadow:1px 1px 2px        rgba(48,80,82,0.8);      -ms-filter: ...
Tools: text-shadow      http://css3please.com      http://css3generator.com      http://www.css3maker.com      http://west...
Resources: text-shadow      http://www.delicious.com/denisejacobs/        text-shadow139
gradient140              http://raymondjay.com/
gradient      • Tips & issues         – Very different syntax for mozilla and           webkit browsers      • Browser Sup...
gradient      #mainnav li a {      background-color: #f7f6f4;      background-image: url(bg_navitems.gif);      background...
gradient: Full solution      .gradient {      color: #fff;      background: #aaaaaa url(gradient_slice.jpg) 0 0        x-r...
Colorzilla gradient tool144       http://www.colorzilla.com/gradient-editor/
Tools: gradient      http://www.colorzilla.com/gradient-editor/      http://www.westciv.com/tools/gradients/      http://c...
Resources: gradient      http://www.delicious.com/denisejacobs/        gradient146
Advanced Visual       Effects in CSS3147
CSS3 for Advanced Visual                  Presentation      1.   border-image      2.   multiple background images      3....
border-image149                  http://www.spoongraphics.com/blog/
border-image      Borders can now be created using images        and sections thereof for enhanced visual        design.  ...
border-image      div.note div.border {      -moz-border-image:      url(/playground/awesome-overlays/border-      image.p...
Border-image.com152
Resources: border-image      http://www.delicious.com/denisejacobs/        border-image153
Multiple backgrounds154                    http://www.lostworldsfairs.com
Multiple backgrounds      • Tips & issues:         – The backgrounds are shown according to the           order listed, wi...
Multiple backgrounds      body {      background-color: #5ABBCF;      background: #5ABBCF url(../images/bokeh1.png) no-   ...
Resources: multiple backgrounds      http://www.delicious.com/denisejacobs/        multiplebackgrounds157
background-size158       http://www.alistapart.com/articles/supersize-that-background-please/
background-size      You can set the size of a background image and        make sure it covers the entire background of a ...
background-size: values      contain      Contain always fits the entire image within your        viewport, leaving opaque...
background-size      Example:      body { background: #000        url(myBackground_1280x960.jpg) center        center fixe...
Resources: background-size      • http://www.delicious.com/denisejacobs/        backgroundsize      • http://www.alistapar...
Multiple text columns163                           http://www.yaili.com
Multiple text columns      You can have one div containing a number of        paragraphs which can be displayed in columns...
Multiple text columns      Example:      div.three-col {      -webkit-column-count: 3;      -webkit-column-gap: 15px;     ...
Resources: multiple columns      http://www.delicious.com/denisejacobs/        multiplecolumns166
2d      Transformations         with CSS3167
transform (2d)168            http://www.zurb.com/playground/css3-polaroids/
transform      • Tips & issues         – Mozilla, Webkit, and Opera vendor           prefixes; no standard yet.      • Bro...
2D Transformations      Different kinds of transforms:         • rotate         • scale         • skew         • translate...
transform/rotate: Syntax                    breakdown      The generic syntax for transform is      <-prefix->transform: t...
transform: rotate      #photos img {      -webkit-transform: rotate(-2deg);      -moz-transform: rotate(-2deg);      -o-tr...
transform/rotate: full solution      .rotate {      -moz-transform: rotate(-5deg);      -webkit-transform: rotate(-5deg); ...
transform: multiple      You can apply multiple transform properties to one element.      Example:      .enlargen:hover { ...
Tools: transform      http://westciv.com/tools/transforms/      http://css3generator.com      http://css3please.com175
Resources: 2D transforms      http://www.delicious.com/denisejacobs/        transform176
Animation with          CSS3177
Animation      1. transitions      2. animation (the webkits only)      A Tip:      Be subtle – it’s more effective178
transition179                http://timvandamme.com/
transition      You can create subtle transitions between        hover states on elements. The transitions        smooth o...
transition      Example:      #id_of_element {      -webkit-transition: all 1s ease-in-out;      -moz-transition: all 1s e...
Animation182               http://www.css3exp.com/moon/
Animation      You can create subtle animations in the        browser!      • Tips & issues:        – Plan out the animati...
Animation      div {      animation-name: diagonal-slide;      animation-duration: 5s;      animation-iteration-count: 10;...
Resources: Animation      http://www.delicious.com/denisejacobs/        animation185
CSS3 Selectors186          http://www.flickr.com/photos/jamiecampbell/446301597/
Getting Advanced      Advanced selectors are a good way to      specifically target styles for modern      browsers.      ...
Let’s peek at      1.       CSS2 Selectors           •    browser support      2.       CSS3 Selectors           •    brow...
189
Advanced Selectors: Usage Tips      • All of the CSS2 selectors are supported by the        modern browsers, and almost al...
CSS 2.1 Selectors      • Universal *                   • Pseudo elements                                          – :befor...
CSS2.1 Selectors & IE Support      • Universal *                            (ie7/8 – yes)      • Child: e > f             ...
CSS2 Selector Support193                http://www.quirksmode.org/compatibility.html
CSS3 Selectors      • General sibling            • Pseudo-elements*        E~F                                   *all pseu...
Combinator Selectors: Child      • A child selector targets an element that is a child        of another element.      • A...
Combinator Selectors:                   Sibling/Adjacent      A sibling selector (also known as adjacent) selects        a...
Combinator Selectors: Attribute      An attribute selector targets a selector with a       particular attribute.      Synt...
Resources: CSS2 Selectors      • http://www.bostonwebstudio.com/        presentation/intro-css2.1-css3/demo/198
CSS3 Selectors (cont’d)      • Pseudo-classes          – Structural        – Target                   •   :nth-child(n)   ...
CSS3 Selector Support200                  http://www.findmebyip.com/litmus
CSS3 Selectors      Advanced selectors give us the power to       target elements that are not part of the       document ...
CSS3 Selector Specification      • General sibling            • Pseudo-classes        E~F                           – Targ...
CSS3 Selectors      – Structural        • :nth-child(n)        • :nth-last-child(n)        • :nth-of-type(n)        • :nth...
Uses for advanced selectors      • Great for progressive enhancement      • Styling first, last or x-number of elements204
Combinator Selectors: General Sibling      A general sibling selector (also known as adjacent)        selects an element t...
Combinator Selectors: Attribute presence      selector[attribute="value"] targets a selector with a        particular attr...
Combinator Selectors: Attribute presence      selector [attribute|="value"] targets an element with an         attribute t...
Combinator Selectors: Attribute substrings      selector [attribute^="value"] targets an element        with an attribute ...
Combinator Selectors: Attribute substrings      selector [attribute*="value"] targets an element        with an attribute ...
CSS3 Pseudo-         classes210
Pseudo-class: Target      :target targets the target of a url on a page –         most often used for fragment identifiers...
Pseudo-class: Negation      :not targets all elements that are not        indicated. A very useful pseudo-class.      Exam...
Pseudo-classes: State      •   :enabled      •   :disabled      •   :checked      •   :indeterminate213
Pseudo-elements: State      The :enabled and :disabled pseudo-classes allow          developers to specify the appearance ...
The :checked pseudo-class      The :checked pseudo-class allows developers        to specify the appearance of checked rad...
Pseudo-classes: Structural      • Structural        – :root        – :nth-child(n)        – :nth-last-child(n)        – :n...
The :root pseudo-class      The :root pseudo-class targets the        document’s root element. In HTML, the        root el...
The :nth-child() pseudo-class      The :nth-child() pseudo-class targets an        element that has a certain number of   ...
The :nth-child() pseudo-class      The keywords odd and even can be used to match child        elements whose index is odd...
The :nth-last-child() pseudo-class      The :nth-last-child() pseudo-class works just like the        :nth-child() pseudo-...
The :nth-of-type() pseudo-class      The :nth-of-type() pseudo-class works exactly        like the :nth-child() pseudo-cla...
The :nth-last-of-type() pseudo-                      class      The :nth-last-of-type() pseudo-class targets an        ele...
The :last-child pseudo-class      The :last-child pseudo-class targets an        element that is the last child of its par...
The :first-of-type pseudo-class      The :first-of-type pseudo-class targets an        element that is the first sibling o...
The :last-of-type pseudo-class      The :last-of-type pseudo-class targets an        element that is the last sibling of i...
The :only-of-type pseudo-class      The :only-of-type pseudo-class targets an        element whose parent element has no  ...
The :only-child pseudo-class      The :only-child pseudo-class targets an        element whose parent element has no      ...
Tools: CSS3 Selectors      • http://www.quirksmode.org/        compatibility.html      • http://www.evotech.net/blog/2009/...
Resources: CSS3 Selectors      • http://www.delicious.com/denisejacobs/se        lectors+css3      • http://inspectelement...
CSS3 Selector Support          http://www.findmebyip.com/litmus230
Nth child selector tester            http://leaverou.me/demos/nth.html231
CSS3 Selector Helper Script               http://www.selectivizr.com232
Tools: CSS3 Selectors      • http://www.quirksmode.org/        compatibility.html      • http://www.findmebyip.com/litmus233
Resources: CSS3 Selectors      • http://www.delicious.com/denisejacobs/        selectors+css3      • http://inspectelement...
The End?235        http://www.flickr.com/photos/ilike/3707503212/
Today236
Tomorrow237
This is just the beginning!      My Delicious links are HUGE compendia of all       things related to CSS3, updated as I f...
Books are not for      the old-fashioned…239       http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Libra...
CSS3, hot off the presses!             The Book of CSS3240          by Peter Gasston
Project-based CSS3            Stunning CSS3241        by Zoe Mikely Gillenwater
CSS3 Condensed and Explained             CSS3 For Web Designers242                by Dan Cederholm
CSS3 and Media Queries          Hardboiled Web Design243           by Andy Clarke
Responsive Design and solid CSS                  Handcrafted CSS244         by Dan Cederholm with Ethan Marcotte
Flexible Layouts        Flexible Web Design245      by Zoe Mickley Gillenwater
Timeless CSS Solutions              CSS Mastery246            by Andy Budd, et al
Proactive coding & graceful degradation             CssDetectiveGuide.com247
Hope you don’t need this:248
Thank You!      denisejacobs.com denise@denisejacobs.comtwitter.com/denisejacobs slideshare.net/denisejacobs249
Upcoming SlideShare
Loading in …5
×

CSS3: Ripe and Ready to Respond

21,474 views

Published on

CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now.

Published in: Technology
3 Comments
20 Likes
Statistics
Notes
No Downloads
Views
Total views
21,474
On SlideShare
0
From Embeds
0
Number of Embeds
5,825
Actions
Shares
0
Downloads
282
Comments
3
Likes
20
Embeds 0
No embeds

No notes for slide

CSS3: Ripe and Ready to Respond

  1. CSS3: Ripe & Ready to Respond Denise Jacobs //1 ConvergeSE Conference // June 24, 2011
  2. Sweet Tweets Who I am: @denisejacobs This fine event: @convergese What I’m talkin’ ‘bout: #css3rr2
  3. A little about me3 CSSDetectiveGuide.com & InterActWithWebStandards.com
  4. Ripe?4
  5. Responsive?5
  6. The goal6
  7. How???7
  8. Start by… 1. Becoming Responsive • Shift your brain • Mobile first • Watch out • 3 components • Flexible grid • Flexible images • Media queries • Planning • 3 or 4-in-one • Crunch the numbers8
  9. …And end with 2. CSS3 • Getting started • What’s new • Rules of the road • Helping tools and scripts • Properties • Standard effects • Advanced effects • Selectors 3. Resources9
  10. Becoming Responsive10 http://mediaqueri.es/
  11. Responsive Devices?11 http://www.flickr.com/photos/ivyfield/4486938457/
  12. Responsive Devices!12 http://www.flickr.com/photos/ivyfield/4486938457/
  13. Brain shift13
  14. Mobile first14
  15. Not this Desktop stylesheet + media queries = mobile site15
  16. Instead this Mobile stylesheet + media queries = desktop site16
  17. Watch out • Switchy vs. responsive – keyhole effect • Be aware of context – you’ll probably want different content for different devices17
  18. 3 components18
  19. Flexible grid19
  20. Flexible & Fluid • Size everything in ems or percentages • Flexible: Ems for everything • Fluid: Percentages for width, ems for height20
  21. Various grids • http://delicious.com/denisejacobs/grids21
  22. Flexible images22
  23. Flexible Images: Foreground Width: 100%; Max-width: 100%;23
  24. Flexible Images: Background Use background-position to selectively crop your backgrounds http://goo.gl/YLLC324
  25. @media queries @media queries are now being used as a basis for responsive web design: web interfaces that change with the size (and orientation) of the device.25
  26. How do they work? Through media queries, the browser is served different styles or stylesheets based on the dimensions and the device. The @media construct allows style sheet rules for various media in the same style sheet. An @media rule specifies the target media types (separated by commas) of a set of statements (delimited by curly braces).26
  27. Simple @media rule examples @media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } }27
  28. Syntax: @media queries Syntax: @media [operand] <media type> [operand] <(media feature: value)> { properties }28
  29. @media queries Example: /* Smartphones (portrait and landscape) - ---------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }29
  30. Hardboiled’s @media queries: Smartphone /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ }30 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
  31. Hardboiled’s @media queries: iPad /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ }31 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
  32. Hardboiled’s @media queries: Other /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }32 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
  33. Plan the design(s) • Need to plan out 3-4 iterations of a page design for each resolution/device instead of just one33
  34. Calculate • Need to know dimensions of page elements to be able to calculate proportional relationship34
  35. The Golden Formula target ÷ context = result35
  36. @media queries: Browser compatibility Yep Nope • IE 9 • IE 8, 7, 6 • Opera 9.5+ • Safari 2 • Opera Mobile • Firefox 1, 2 • Safari 3+ • Firefox 3.5+ • Chrome36
  37. Css3-mediaqueries.js http://code.google.com/p/css3-mediaqueries-js/37
  38. Responsive design inspiration • Mediaqueri.es38
  39. Resources: @media queries • http://www.delicious.com/denisejacobs/ media-queries39
  40. What’s New in CSS340
  41. What’s New in CSS3? CSS3 is the third generation of the CSS specification recommendations from the W3C. In CSS3 there are new selectors, pseudo- elements and classes, properties, and values specifically created to answer the needs and solve the problems of modern web design and development.41
  42. CSS3 Modularity CSS3 has been broken up into different unique modules. This means is that, for example, the particular CSS properties and values for layout is grouped into one specific module.42
  43. CSS3 Modularity: Benefits • Browser producers can now implement CSS3 module by module • Speeds up the browser implementation process • Encourages innovation43
  44. The CSS3 Modules • Template Layout • Values and Units • Backgrounds and Borders • Web Fonts • Ruby • Behavioral Extensions to CSS • Basic User Interface • Line Layout • Basic Box Model • Flexible Box Layout • Grid Positioning • Image Values • Speech • 2D Transformations • Marquee • Multi-column Layout • Style Attribute Syntax • 3D Transformations • Cascading and Inheritance • Namespaces • Color • Transitions • Fonts • Animations • Text • View Module • Generated Content for Paged • Media Queries Media • Paged Media • Generated and Replaced • Selectors Content44
  45. Resources: New in CSS3 http://www.w3.org/TR/tr-groups-all# tr_Cascading_Style_Sheets__CSS__ Working_Group45
  46. Colors in CSS3: RGB • Regular RGB rgb(x, x, x): ex. rgb(255, 0, 0) • RBG with alpha-opacity rgba(x, x, x, y): An RGB value ex. rgba(255, 0, 0, 0.2)46
  47. RGBA Color Alpha opacity: 0.0 = 0% = no opacity 1.0 = 100% = full opacity47
  48. Colors in CSS3: HSL HSL stands for hue, saturation, and luminosity (lightness) • Regular HSL hsl(x%, x%, x%): ex. hsl(0, 100%, 50%) • HSL with alpha-opacity hsla(x%, x%, x%, y): ex. hsla(0, 100%, 50%, 0.5)48
  49. HSL Color Wheel 0º – Red 60º – Yellow 120º – Green 180º – Cyan 240º – Blue 300º – Magenta49
  50. HSL Color Picker Tool http://www.workwithcolor.com/hsl-color-picker-01.htm50
  51. Getting Started with CSS3: The Rules of the Road51 http://www.flickr.com/photos/ilike/3707503212/
  52. CSS3 Browser Compatibility52 http://www.flickr.com/photos/sfllaw/222795669/
  53. The Scoop • Many properties are browser-specific, requiring vendor prefixes • Plus there is a standard property • There are syntax differences between browser-specific properties and the standard property • All of this causes an increase in the amount of CSS53
  54. Code bloat in action Ideally: Reality: a.polaroid:active { a.polaroid:active { z-index: 999; z-index: 999; border-color: #6A6A6A; border-color: #6A6A6A; box-shadow: 15px 15px 20px -webkit-box-shadow: 15px rgba(0,0, 0, 0.4); 15px 20px rgba(0,0, 0, transform: rotate(0deg) 0.4); scale(1.05); -moz-box-shadow: 15px 15px } 20px rgba(0,0, 0, 0.4); box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.05); -moz-transform: rotate(0deg) scale(1.05); transform: rotate(0deg) scale(1.05); }54
  55. Doesn’t Validate55
  56. None of the older IEs support CSS3 …as in “not any.” 6 7 856 http://www.flickr.com/photos/johnsnape/4258191545/
  57. IE9 now supports CSS3 …But still not as fully as the other browsers yet.57
  58. Resources: IE9 CSS3 support http://msdn.microsoft.com/en- us/ie/ff468705.aspx#_Web_standards_sup port http://msdn.microsoft.com/en- us/library/cc351024%28v=vs.85%29.aspx http://www.impressivewebs.com/css3- support-ie9/58
  59. Tools you’ll need: 1. CSS3 Property browser support charts 2. CSS3 Selector browser support charts 3. CSS3 Specifications 4. All browsers to test in and/or cross-browser testers59
  60. CSS3 Property browser support charts http://www.findmebyip.com/ litmus60
  61. CSS3 Selector browser support charts http://www.standardista.com/css3/ css3-selector-browser-support61
  62. The CSS3 Specifications The CSS3 Specifications are THE resource for finding out exactly is the intented behavior and use of any given property. http://www.w3.org/standards/techs/ css#w3c_all62
  63. Cross-browser testers http://tredosoft.com/Multiple_IE http://crossbrowsertesting.com/ (paid) http://browsershots.org/ (free)63
  64. CSS3 & Cross- browser Coding64 http://www.flickr.com/photos/scfiasco/4490322916/
  65. The Goal: Code that works in all most browsers65
  66. How do we achieve this?66 http://www.flickr.com/photos/barretthall/205175534/
  67. Steps to get as close as possible 1. Leverage source order 2. Filter it 3. Let tools do all of the work67
  68. Leverage source order • Place default properties first • Place browser-specific properties ahead of standard properties • The standard properties will override the vendor’s when the standard is established.68
  69. A Proper Stack .gradient { color: #fff;69
  70. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/70
  71. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */71
  72. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */72
  73. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr=#07407c, EndColorStr=#aaaaaa)"; /* filter for IE8 (& IE9) */73
  74. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr=#07407c, EndColorStr=#aaaaaa)"; /* filter for IE8 (& IE9) */ filter: progid:DXImageTransform.Microsoft.gradient(star tColorStr=#07407c, EndColorStr=#aaaaaa); } /* filter for IE7 and lower */74
  75. Apply a Filter • If you must have the effect in IE lt 8, such as alpha opacity, gradient, shadow, transitions etc. you could use a proprietary IE filter. • The -ms-filter attribute is an extension to CSS. This syntax will allow other CSS parsers to skip the value of this unknown property completely and safely. It also avoids future name clashes with other CSS parsers. • In IE 8 mode, filters must be prefixed with "-ms-" and the PROGID must be in single or double quotes to make sure IE 8 renders the filters properly.75
  76. Filters: {Caveat Coder} • IE filters work, but are essentially hacks – IE filters are proprietary and thus not part of any standard specification, and never will be76
  77. Resources: IE Filters Microsoft Visual Filters and Transitions Reference http://msdn.microsoft.com/en-us/library/ ms532853%28v=VS.85%29.aspx77
  78. Let the tools do the work • We’ll talk about those next!78
  79. CSS3 Tools79 http://www.flickr.com/photos/johnsnape/4258191545/
  80. Useful CSS3 Tools 1. CSS3 Generators 2. Helper Scripts 3. Browser Feature Detection 4. Templates80
  81. CSS3 Generators81 http://www.flickr.com/photos/latca/841730130/
  82. CSS3Please.com82
  83. CSS3Generator.com83
  84. CSS3-Maker.com84
  85. CSS3 Tools at WestCiv85 http://westciv.com/tools/
  86. More CSS3 Generators http://border-radius.com http://www.css3maker.com http://www.colorzilla.com/ gradient-editor/ http://csscorners.com86 http://border-image.com
  87. Helper Scripts87 http://www.flickr.com/photos/keystricken/386106987/
  88. Get a helping hand… These scripts help IE lt 8 behave like CSS3- compliant browsers. However, support of CSS3 properties varies between scripts.88
  89. ie-7.js (includes IE8 and IE9)89 http://code.google.com/p/ie7-js/
  90. CSS3Pie.com90
  91. CSS Sandpaper91 http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
  92. Browser Feature Detection92 http://www.flickr.com/photos/johnsnape/4258191545/
  93. Modernizr.com93
  94. What does Modernizr do? Modernizr detects which CSS3 (and HTML5) properties are supported by the browser, and appends classes to the <html> tag, which then allows you to create styles to target specific properties to individual browsers. It is a premier progressive enhancement tool!94
  95. How to use Modernizr http://www.alistapart.com/articles/taking- advantage-of-html5-and-css3-with- modernizr/ http://webdesignernotebook.com/css/ how-to-use-modernizr http://www.ericlightbody.com/2010/ modernizr-your-tool-for-html5-and-css3- functionality/95
  96. Templates96 http://www.flickr.com/photos/jazzmasterson/275796175/
  97. HTML5Boilerplate.com Paul Irish’s HTML5 template file http://html5boilerplate.com/97
  98. CSS3 Properties!98
  99. Webfonts99
  100. @font-face100 http://lostworldsfairs.com/moon/
  101. @font-face • Note: – Actually part of the CSS2.1 specification. – Therefore, the IEs do support it! • Tips & issues – When you decide to use a font as a webfont, you have to be sure that the EULA supports it. – One way to avoid that is to use ONLY fonts that are listed as approved webfonts. • Browser Support – IE lt 8 require fonts to be in EOT format – IE9 now supports WOFF101
  102. @font-face @font-face { font-family: Graublau Web; src: local(Graublau), url(GraublauWeb.woff) format(woff), url(GraublauWeb.ttf) format(truetype); url(GraublauWeb.eot), format(eot); }102
  103. @font-face bug: IE lt 8 @font-face super bullet-proofing The problem: @font-face doesn’t work, even with the proper normal syntax. What gives?103
  104. @font-face bug: Webkit @font-face bold and italics “bug” The problem: Applying font-weight:bold or font- style: italic to @font-faced text doesn’t work.104
  105. Solution: IE proof @font-face + faux variations Example: @font-face { font-family: MyFontFamily; src: url(myfont-webfont.eot?#iefix‘) format(embedded-opentype), url(myfont-webfont.woff) format(woff), url(myfont- webfont.ttf)format(truetype), url(myfont-webfont.svg#svgFontName) format(svg); font-weight:normal; font-style:normal; font-variant:normal; }105
  106. FontSquirrel.com106 http://www.fontsquirrel.com/fontface/generator
  107. Webfont Services107 http://www.typekit.com
  108. Webfont Services Instead of generating the webfonts yourself, you can pay a service where the webfonts are hosted elsewhere, and you link to them and use the fonts on their server.108
  109. Webfont Services http://www.typotheque http://www.webtype.com .com/webfonts http://www.fontslive.com http://typekit.com http://www.extensis.com/en http://fontdeck.com /WebINK/ http://kernest.com http://webfonts.fonts.com http://www.ascenderfonts http://webfonts.info/wiki/in .com/webfonts/ dex.php?title=Category:W ebfont_Services109
  110. Resources: @font-face • http://www.delicious.com/denisejacobs/ font-face110
  111. New Visual Effects in CSS3111
  112. New Visual Effects in CSS3 • border-radius • opacity • rgba color • box-shadow • text-shadow • gradient112
  113. border-radius113 http://oh-hai.biz
  114. border-radius • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does114
  115. border-radius Syntax comparison breakdown: • -moz allows multiple values for each position • -webkit individual values115 • Standard is like mozilla
  116. border-radius #contentcolumn { -moz-border-radius: 20px 20px 0 0; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; border-radius: 20px 20px 0 0; }116
  117. Border-radius.com117
  118. Tools: border-radius http://border-radius.com http://css3please.com http://css3generator.com http://www.css3maker.com118
  119. border-radius Resources http://www.delicious.com/denisejacobs/ border-radius119
  120. opacity120 http://rustinjessen.com/weblog/833
  121. opacity • Tips & issues – Do not use on elements that would cover important content • Browser Support – IE lt 8 does not support – There is a filter: opacity121
  122. opacity #feature-meta { background:none repeat scroll 0 0 #3C4C55; opacity:0.85; } Override for children elements div.opacity * {opacity: 1.0;}122
  123. Full solution: opacity .opacity { background-color: #3C4C55; color: #fff; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha (opacity=20)"; /* IE8 only */ filter: progid:DXImageTransform.Microsoft.Alpha (opacity=20); /* IE6, IE7, and IE8 */ filter: alpha(opacity=20); }123
  124. Opacity Resources http://www.delicious.com/denisejacobs/ opacity124
  125. rgba125 http://aarronwalter.com/designer/
  126. rgba • Tips & issues – More granular control of the color opacity of a particular element than opacity • Browser Support – IE lt 8 does not support, IE9 does – There is an IE filter that will give transparency with a color.126
  127. Cross-browser: rgba • Place after regular rgb color property to override in modern browsers; older browsers will ignore it • IE lt 8 bug: use the property background instead of background-color for the regular color127
  128. Full solution: rgba .rgba { background-color: #ff0000; /* fallback color in hexidecimal. */ background-color: transparent; /* transparent is key for the filter to work in IE8. best done through conditional comments */ background-color: rgba(255, 0, 0, 0.3); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr=#4CFF0000, endColorstr=#4CFF0000)"; /* filter for IE8 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#4CFF0000, endColorstr=#4CFF0000); /* filter for older IEs */ }128
  129. box-shadow129 http://badassideas.com/work/
  130. box-shadow • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does – There is a filter for IE: shadow (actually there are 2: shadow and dropshadow, but shadow is said to be better)130
  131. box-shadow .portfolio { -moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6); box-shadow: 0 5px 20px rgba(0,0,0,0.6); }131
  132. Full solution: box-shadow .boxshadow { -moz-box-shadow: 3px 3px 10px #333; -webkit-box-shadow: 3px 3px 10px #333; box-shadow: 3px 3px 10px #333; /*standard*/ -ms-filter: "progid:DXImageTransform.Microsoft.Shad ow(Strength=4, Direction=135, Color=#333333)"; /* For IE 8 */ filter: progid:DXImageTransform.Microsoft.Shado w(Strength=4, Direction=135, Color=#333333); /* For IE 5.5 - 7 */ }132
  133. Tools: box-shadow http://css3please.com http://css3generator.com http://www.css3maker.com http://westciv.com/tools/ box-properties/index.html133
  134. Resources: box-shadow http://www.delicious.com/denisejacobs/ box-shadow134
  135. text-shadow135 http://www.bountybev.com
  136. text-shadow • Tips & issues – Can help accentuate text and improve readability and visual importance • Browser Support – IE lt 8 does not support, nor does IE9 :/ – could use the IE filter: shadow136
  137. Full solution: text-shadow .textshadow h2 { text-shadow:1px 1px 2px rgba(48,80,82,0.8); -ms-filter: "progid:DXImageTransform.Microsoft.Shad ow(Strength=2, Direction=135, Color=#305052)"; /* For IE 8+ */ filter: progid:DXImageTransform.Microsoft.Shado w(Strength=2, Direction=135, Color=#305052); /* For IE 5.5 - 7 */ }137
  138. Tools: text-shadow http://css3please.com http://css3generator.com http://www.css3maker.com http://westciv.com/tools/text-properties/138
  139. Resources: text-shadow http://www.delicious.com/denisejacobs/ text-shadow139
  140. gradient140 http://raymondjay.com/
  141. gradient • Tips & issues – Very different syntax for mozilla and webkit browsers • Browser Support – IE does not support, so will still need a fallback image for those browsers141
  142. gradient #mainnav li a { background-color: #f7f6f4; background-image: url(bg_navitems.gif); background-image: -moz-linear-gradient(100% 100% 90deg, #ccc9ba, #ffffff); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ccc9ba)); }142
  143. gradient: Full solution .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*background color matches one of the stop colors. The gradient_slice.jpg is 1px wide */ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr=#07407c, EndColorStr=#aaaaaa)"; /* IE8+ */ filter: progid:DXImageTransform.Microsoft.gradient(star tColorStr=#07407c, EndColorStr=#aaaaaa); /* IE7- */ }143
  144. Colorzilla gradient tool144 http://www.colorzilla.com/gradient-editor/
  145. Tools: gradient http://www.colorzilla.com/gradient-editor/ http://www.westciv.com/tools/gradients/ http://css3please.com http://css3generator.com145
  146. Resources: gradient http://www.delicious.com/denisejacobs/ gradient146
  147. Advanced Visual Effects in CSS3147
  148. CSS3 for Advanced Visual Presentation 1. border-image 2. multiple background images 3. background-size 4. multiple text columns148
  149. border-image149 http://www.spoongraphics.com/blog/
  150. border-image Borders can now be created using images and sections thereof for enhanced visual design. • Tips & issues – Documentation on best use is sparse – No adequate fall-back techniques for graceful degradation – Vendor prefixes for Mozilla and webkit • Browser support150 – The IEs do not support
  151. border-image div.note div.border { -moz-border-image: url(/playground/awesome-overlays/border- image.png) 5 5 5 5 stretch; -webkit-border-image: url(/playground/awesome-overlays/border- image.png) 5 5 5 5 stretch; border-image: url(/playground/awesome- overlays/border-image.png) 5 5 5 5 stretch; }151
  152. Border-image.com152
  153. Resources: border-image http://www.delicious.com/denisejacobs/ border-image153
  154. Multiple backgrounds154 http://www.lostworldsfairs.com
  155. Multiple backgrounds • Tips & issues: – The backgrounds are shown according to the order listed, with the first background image listed is the one “on top” and the rest stack underneath it. – Can use CSS3 gradients (which are like background images) in conjunction with multiple background images. • Browser support: – IE lt 8 does not support, but IE9 does155
  156. Multiple backgrounds body { background-color: #5ABBCF; background: #5ABBCF url(../images/bokeh1.png) no- repeat; /* fallback image */ background: url(../images/bokeh4.png) no-repeat, url(../images/bokeh3.png) no-repeat 10% 0, url(../images/bokeh2.png) no-repeat 20% 0, url(../images/bokeh1.png) no-repeat, url(../images/glow.png) no-repeat 90% 0, -moz-linear-gradient(0% 90% 90deg,#5ABBCF, #95E0EF); background: url(../images/bokeh4.png) no-repeat, url(../images/bokeh3.png) no-repeat 10% 0, url(../images/bokeh2.png) no-repeat 20% 0, url(../images/bokeh1.png) no-repeat, url(../images/glow.png) no-repeat 90% 0, -webkit-gradient(linear, 0% 0%, 0% 90%, from(#95E0EF), to(#5ABBCF)); }156
  157. Resources: multiple backgrounds http://www.delicious.com/denisejacobs/ multiplebackgrounds157
  158. background-size158 http://www.alistapart.com/articles/supersize-that-background-please/
  159. background-size You can set the size of a background image and make sure it covers the entire background of a page, no matter what the size. • Tips & Issues: – Vendor prefixes for mozilla, webkit, and opera • Browser support: – IE lt 8 does not support, but IE9 does159
  160. background-size: values contain Contain always fits the entire image within your viewport, leaving opaque borders on either the top-bottom or the left-right whenever the ratio of the background image and browser window are not the same. cover Cover always fills the browser window. You can control how your image is aligned within the viewport by using the background-position property.160
  161. background-size Example: body { background: #000 url(myBackground_1280x960.jpg) center center fixed no-repeat; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; }161
  162. Resources: background-size • http://www.delicious.com/denisejacobs/ backgroundsize • http://www.alistapart.com/articles/ supersize-that-background-please/ • http://www.w3.org/TR/css3- background/#the-background-size162
  163. Multiple text columns163 http://www.yaili.com
  164. Multiple text columns You can have one div containing a number of paragraphs which can be displayed in columns, with no float or height manipulations. • Tips & Issues: – Some of the properties are not widely supported, and many of the related (like dividers, breakers, etc.) haven’t been implemented or aren’t supported yet either.164
  165. Multiple text columns Example: div.three-col { -webkit-column-count: 3; -webkit-column-gap: 15px; -moz-column-count: 3; -moz-column-gap: 15px; column-count: 3; column-gap: 15px; }165
  166. Resources: multiple columns http://www.delicious.com/denisejacobs/ multiplecolumns166
  167. 2d Transformations with CSS3167
  168. transform (2d)168 http://www.zurb.com/playground/css3-polaroids/
  169. transform • Tips & issues – Mozilla, Webkit, and Opera vendor prefixes; no standard yet. • Browser Support – IE lt 8 does not support, but IE9 does169
  170. 2D Transformations Different kinds of transforms: • rotate • scale • skew • translate • matrix170
  171. transform/rotate: Syntax breakdown The generic syntax for transform is <-prefix->transform: type(<value>) type(<value>) type(<value>) type(<value>); For rotate specifically, here is the syntax: <-prefix->transform: rotate(<value>) Positive values will rotate the object clockwise to the right, and negative values will rotate the171 element counter-clockwise to the left.
  172. transform: rotate #photos img { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); }172
  173. transform/rotate: full solution .rotate { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizing Method=auto expand, M11=0.9961946980917455, M12=0.08715574274765817, M21=- 0.08715574274765817, M22=0.9961946980917455); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0 .9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455, sizingMethod=auto expand)"; zoom: 1; }173
  174. transform: multiple You can apply multiple transform properties to one element. Example: .enlargen:hover { -webkit-transform: translate(-50%, -50%) scale(2) rotate(0); -moz-transform: translate(-50%, -50%) scale(2) rotate(0); -o-transform: translate(-50%, -50%) scale(2) rotate(0); transform: translate(-50%, -50%) scale(2) rotate(0); }174
  175. Tools: transform http://westciv.com/tools/transforms/ http://css3generator.com http://css3please.com175
  176. Resources: 2D transforms http://www.delicious.com/denisejacobs/ transform176
  177. Animation with CSS3177
  178. Animation 1. transitions 2. animation (the webkits only) A Tip: Be subtle – it’s more effective178
  179. transition179 http://timvandamme.com/
  180. transition You can create subtle transitions between hover states on elements. The transitions smooth out visual jumps. • Tips & issues – Be sure to put the transition effect on the correct element180
  181. transition Example: #id_of_element { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }181
  182. Animation182 http://www.css3exp.com/moon/
  183. Animation You can create subtle animations in the browser! • Tips & issues: – Plan out the animation sequence ahead of time – Be aware of style order in the CSS183
  184. Animation div { animation-name: diagonal-slide; animation-duration: 5s; animation-iteration-count: 10; } @keyframes diagonal-slide { from { left: 0; top: 0; } to { left: 100px; top: 100px; } }184
  185. Resources: Animation http://www.delicious.com/denisejacobs/ animation185
  186. CSS3 Selectors186 http://www.flickr.com/photos/jamiecampbell/446301597/
  187. Getting Advanced Advanced selectors are a good way to specifically target styles for modern browsers. The right selector will help you achieve targeting nirvana, so it’s important to know which selectors you can use now.187
  188. Let’s peek at 1. CSS2 Selectors • browser support 2. CSS3 Selectors • browser support188
  189. 189
  190. Advanced Selectors: Usage Tips • All of the CSS2 selectors are supported by the modern browsers, and almost all of the CSS3 ones are, so use them! • It’s easy to target styles away from the IEs, but target them to the IEs with simpler combinator selectors190
  191. CSS 2.1 Selectors • Universal * • Pseudo elements – :before • Child Combinator – :after E>F • State pseudo-classes • Adjacent/Sibling Combinator – Dynamic E+F • :hover • :active • Attribute E[~attribute] • :focus • At Rules – Language – @font-face • :lang – @media – @page – Structural – @charset • :first-child191
  192. CSS2.1 Selectors & IE Support • Universal * (ie7/8 – yes) • Child: e > f (ie7/8 – yes) • Sibling/Adjacent: e + f (ie7 no, ie8 – yes) • Attribute: e[attribute] (ie7/8 – yes) • Pseudo elements (ie7/8 – no) – ::before – ::after • State pseudo-classes, v2.1 – :first-child (ie7/8 – yes) – :hover (ie7/8 – yes) – :active (ie7/8 – yes) – :focus (ie7/8 – no) – :lang (ie7/8 – no)192
  193. CSS2 Selector Support193 http://www.quirksmode.org/compatibility.html
  194. CSS3 Selectors • General sibling • Pseudo-elements* E~F *all pseudo-elements indicated with :: in CSS3 • Attribute presence – a[attribute="value"] – a[attribute~="value"] – a[attribute|="value"] • Attribute substrings – a[attribute^="value"] – a[attribute$="value"] – a[attribute*="value"]194
  195. Combinator Selectors: Child • A child selector targets an element that is a child of another element. • A child is a direct descendant of an element in the document tree (as opposed to a more distant descendant). Syntax: parent selector > descendant selector E > F Example: p > strong {font-family: Tahoma,195
  196. Combinator Selectors: Sibling/Adjacent A sibling selector (also known as adjacent) selects an element that is next to another element in the document tree. Syntax: sibling selector + sibling selector {property: value; } E + F Example: p + ol {font-family: Georgia,196 serif;}
  197. Combinator Selectors: Attribute An attribute selector targets a selector with a particular attribute. Syntax: selector[attribute] Example: • a[title] {font-variant: italic;}197
  198. Resources: CSS2 Selectors • http://www.bostonwebstudio.com/ presentation/intro-css2.1-css3/demo/198
  199. CSS3 Selectors (cont’d) • Pseudo-classes – Structural – Target • :nth-child(n) • :nth-last-child(n) • :target • :nth-of-type(n) • :nth-last-of-type(n) – Negation • :last-child • :not(s) • :first-of-type • :last-of-type – State • :only-child • :enabled • :only-of-type • :disabled • :empty • :checked • :indeterminate199
  200. CSS3 Selector Support200 http://www.findmebyip.com/litmus
  201. CSS3 Selectors Advanced selectors give us the power to target elements that are not part of the document tree and/or those that are generated dynamically. • Tips & issues – There are a lot of options to choose from! – Great to use for progressive enhancement – Need to be aware of changes to specificity201
  202. CSS3 Selector Specification • General sibling • Pseudo-classes E~F – Target • :target • Attribute substrings – a[attribute^="value"] – Negation – a[attribute$="value"] • :not(s) – a[attribute*="value"] – State • Pseudo-elements • :enabled no new ones, all pseudo- • :disabled elements in CSS3 indicated with :: • :checked • :indeterminate202
  203. CSS3 Selectors – Structural • :nth-child(n) • :nth-last-child(n) • :nth-of-type(n) • :nth-last-of-type(n) • :last-child • :first-of-type • :last-of-type • :only-child • :only-of-type • :empty • :root203
  204. Uses for advanced selectors • Great for progressive enhancement • Styling first, last or x-number of elements204
  205. Combinator Selectors: General Sibling A general sibling selector (also known as adjacent) selects an element that shares the same parent as another element in the document tree. Syntax: sibling selector ~ sibling selector {property: value; } E ~ F Example: p ~ dd {font-family: Georgia,205 serif;}
  206. Combinator Selectors: Attribute presence selector[attribute="value"] targets a selector with a particular attribute and specific value. Example: img[src=“catchathief.jpg”] {border: 1px solid #999; } selector [attribute~="value"] targets a selector with a particular attribute and value where the value is one of multiple values separated by a space. Example img[alt~="CSI"] {border: 1px #ff8000 solid;}206
  207. Combinator Selectors: Attribute presence selector [attribute|="value"] targets an element with an attribute that contains values separated by a hypen in a list. Example: img[title|="large"] { border: 1px solid #000; }207
  208. Combinator Selectors: Attribute substrings selector [attribute^="value"] targets an element with an attribute that begins with a prefix of “value”. Example: img[title^=“th_"] { border: 1px solid #000; } selector [attribute$="value"] targets an element with an attribute which ends with a suffix of “value.” Example: img[title$=“png"] { border: 1px208 solid #000; }
  209. Combinator Selectors: Attribute substrings selector [attribute*="value"] targets an element with an attribute that contains “value” as any part of a value string. Example: img[title*="large"] { border: 1px solid #000; }209
  210. CSS3 Pseudo- classes210
  211. Pseudo-class: Target :target targets the target of a url on a page – most often used for fragment identifiers. Example: div.window:target { opacity: 1; z-index: 7; }211
  212. Pseudo-class: Negation :not targets all elements that are not indicated. A very useful pseudo-class. Example: *:not(img) {text-align: left;} (This would match all elements except images.)212
  213. Pseudo-classes: State • :enabled • :disabled • :checked • :indeterminate213
  214. Pseudo-elements: State The :enabled and :disabled pseudo-classes allow developers to specify the appearance of user interface elements (form controls) that are enabled or disabled, provided that the browser allows styling of form controls. Example: input[type="text"]:enabled { background:#ffc; } input[type="text"]:disabled { background:#ddd; }214
  215. The :checked pseudo-class The :checked pseudo-class allows developers to specify the appearance of checked radio and checkbox elements. Again, this is provided that the browser allows styling of form controls. Example: input:checked {border:1px solid #090;}215
  216. Pseudo-classes: Structural • Structural – :root – :nth-child(n) – :nth-last-child(n) – :nth-of-type(n) – :nth-last-of-type(n) – :last-child – :first-of-type – :last-of-type – :only-child – :only-of-type216
  217. The :root pseudo-class The :root pseudo-class targets the document’s root element. In HTML, the root element is always the HTML element. :root actually has a higher specificity than html. Example: :root { background:#ff0; }217
  218. The :nth-child() pseudo-class The :nth-child() pseudo-class targets an element that has a certain number of siblings before it in the document tree. This argument, which is placed within the parentheses, can be a number, a keyword, or a formula. A number x matches the x-th child. Example: • p:nth-child(3) { color:#f00;218 }
  219. The :nth-child() pseudo-class The keywords odd and even can be used to match child elements whose index is odd or even. The index of an element’s first child is 1, so this rule will match any p element that is the first, third, fifth, and so on, child of its parent element. Example: p:nth-child(odd) { color:#f00; } The formula an + b can be used to create more complex repeating patterns. In the formula, a represents a cycle size, n is a counter starting at 0, and b represents an offset value. All values are integers. Example: p:nth-child(3n+1) { color:#f00; }219
  220. The :nth-last-child() pseudo-class The :nth-last-child() pseudo-class works just like the :nth-child() pseudo-class, except that it targets an element that has a certain number of siblings after it in the document tree. In other words, it starts counting from the last child instead of the first, and counts backwards. Example: tr:nth-last-child(2) { background:#ff0; }220
  221. The :nth-of-type() pseudo-class The :nth-of-type() pseudo-class works exactly like the :nth-child() pseudo-class, but only counts those elements that are of the same type as the element the rule is applied to. Example: p:nth-of-type(3) { background:#ff0; }221
  222. The :nth-last-of-type() pseudo- class The :nth-last-of-type() pseudo-class targets an element that has a certain number of siblings of the same element type after it in the document tree. Just like the :nth-last-child() pseudo-class, it starts counting from the last child instead of the first, and counts backwards. Example: p:nth-last-of- type(2){background:#ff0;}222
  223. The :last-child pseudo-class The :last-child pseudo-class targets an element that is the last child of its parent element. It is the same as :nth-last-child(1). Example: p:last-child {background:#ff0;}223
  224. The :first-of-type pseudo-class The :first-of-type pseudo-class targets an element that is the first sibling of its type. it is the same as :nth-of-type(1). Example: p:first-of-type { background:#ff0; }224
  225. The :last-of-type pseudo-class The :last-of-type pseudo-class targets an element that is the last sibling of its type. it is the same as :nth-last-of-type(1). Example p:last-of- type{background:#ff0;}225
  226. The :only-of-type pseudo-class The :only-of-type pseudo-class targets an element whose parent element has no other children of the same element type. It is the same (but with a lower specificity) as :first-of-type:last-of-type or :nth-of- type(1):nth-last-of-type(1). Example: p:only-of- type{background:#ff0;}226
  227. The :only-child pseudo-class The :only-child pseudo-class targets an element whose parent element has no other element children. It is the same (but with a lower specificity) as :first-child:last-child or :nth-child(1):nth- last-child(1). Example: p:only-child {background:#ff0;}227
  228. Tools: CSS3 Selectors • http://www.quirksmode.org/ compatibility.html • http://www.evotech.net/blog/2009/02/css -browser-support/ • http://www.findmebyip.com/litmus228
  229. Resources: CSS3 Selectors • http://www.delicious.com/denisejacobs/se lectors+css3 • http://inspectelement.com/tutorials/a- look-at-some-of-the-new-selectors- introduced-in-css3/ • http://24ways.org/2009/cleaner-code- with-css3-selectors229
  230. CSS3 Selector Support http://www.findmebyip.com/litmus230
  231. Nth child selector tester http://leaverou.me/demos/nth.html231
  232. CSS3 Selector Helper Script http://www.selectivizr.com232
  233. Tools: CSS3 Selectors • http://www.quirksmode.org/ compatibility.html • http://www.findmebyip.com/litmus233
  234. Resources: CSS3 Selectors • http://www.delicious.com/denisejacobs/ selectors+css3 • http://inspectelement.com/tutorials/a- look-at-some-of-the-new-selectors- introduced-in-css3/ • http://24ways.org/2009/ cleaner-code-with-css3-selectors234
  235. The End?235 http://www.flickr.com/photos/ilike/3707503212/
  236. Today236
  237. Tomorrow237
  238. This is just the beginning! My Delicious links are HUGE compendia of all things related to CSS3, updated as I find new articles, resources and tools! http://delicious.com/denisejacobs/css3 http://delicious.com/denisejacobs/ css3training238
  239. Books are not for the old-fashioned…239 http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Library_1900.jpg
  240. CSS3, hot off the presses! The Book of CSS3240 by Peter Gasston
  241. Project-based CSS3 Stunning CSS3241 by Zoe Mikely Gillenwater
  242. CSS3 Condensed and Explained CSS3 For Web Designers242 by Dan Cederholm
  243. CSS3 and Media Queries Hardboiled Web Design243 by Andy Clarke
  244. Responsive Design and solid CSS Handcrafted CSS244 by Dan Cederholm with Ethan Marcotte
  245. Flexible Layouts Flexible Web Design245 by Zoe Mickley Gillenwater
  246. Timeless CSS Solutions CSS Mastery246 by Andy Budd, et al
  247. Proactive coding & graceful degradation CssDetectiveGuide.com247
  248. Hope you don’t need this:248
  249. Thank You! denisejacobs.com denise@denisejacobs.comtwitter.com/denisejacobs slideshare.net/denisejacobs249

×