Advanced CSS     Troubleshooting & EfficiencyorHow to Become aSuper CSS Detectivein 4 Easy StepsDenise R. JacobsThe Code P...
Twitter Mysteries, Solved!Who: @denisejacobsWhere: #rwx2011 @NoFluffWhat: #cssts  2
Whodunnit? I did!                       CSSDetectiveGuide.com                    InterActWithWebStandards.com  3
CSS De-what?• Preventive/defensive  coding   – Focused & efficient• Can quickly and easily  identify and solve  problems w...
I can haz trubbleshootin?Strong troubleshootingskills are one of yourbest allies in solving CSS“mysteries”…and theyalso ma...
The 4 Easy Steps 1) Lay the        2) Target your    foundation        styles 3) Squash                   4) Employ    bro...
1)       Lay the Foundation     7                        http://www.flickr.com/photos/pgoyette/2280685630/
Why?    A solid CSS foundation of best practices creates    an environment where preventing and detecting    problems is e...
The Foundations    1. Set a Baseline    2. Micro-Optimize    3. Macro-Optimize9
Create a Baseline10
Foundation 1: Create a Baseline     1. The CSS Reset All-star     2. DIY Resets     3. CSS Reset Compendia11
Why Reset?     By deliberately establishing an element’s     properties, you can:     • Better control the elements on the...
CSS Reset All-Star: Eric Meyer’s     Pro’s        – One of the most popular, well thought-out        – Neutralizes almost ...
Resource: Eric Meyer’s Reset     Eric Meyer’s Reset:       http://meyerweb.com/eric/tools/       css/reset/14
Resource: HTML5 Reset     http://html5doctor.com/html-5-reset-       stylesheet/15
DIY Resets     • You can determine exactly which elements       you want to reset     • May save on reestablishing propert...
Top Properties to Reset     •   Margin and padding     •   Borders, especially on linked images     •   Link text underlin...
Resource: DIY Resets     Article on DIY resets: http://bit.ly/1D4jSB18
Resource: CSS Reset Compendia     Killer Collection of CSS Resets     http://tinyurl.com/5bdoj2     More Killer CSS Resets...
Micro-Optimize20
Why Micro-Optimize?     • Cuts down file size     • Speeds up page load time     • Encourages best practices21
Foundation 2: Micro-Optimize     1. Order: alpha     2. Length: short     3. Speed: fast22
Micro-optimize: Alphabetize     Putting your CSS declarations in alphabetical       order is a great way to set the stage ...
Find “width” - which is easier?     Example One:          Example Two:     .login {              .login {     margin-top: ...
Find “width” - which is easier?     Example One:          Example Two:     .login {              .login {     margin-top: ...
Micro-optimize: Speed     Up the efficiency:     • ID selectors are speedier than element or       universal*     • Drop e...
Micro-Optimization in Action     Pre-optimization:     #wrapper div#sidebar {     background: #fff url(bg.png)       repea...
Micro-Optimization in Action     Post-optimization :     #sidebar {     background: #fff url(bg.png) repeat-x 0       0;  ...
Micro-Optimize Your CSS: Length     Less is more:     • Use shortest properties and values       (shorthand)     • Avoid d...
Micro-Optimization in Action     Example:     #sidebar {     background: #fff url(bg.png) repeat-x       0 0;     border: ...
Shorthand: to remember     •   Default values     •   Shorthand property syntax     •   Required property values     •   P...
Micro-Optimize: Length     Less is more:     • Use shortest properties and values       (shorthand)     • Avoid duplicate ...
Micro-Optimization in Action     Example:     #sidebar {     background: #fff url(bg.png) repeat-x 0       0;     border: ...
Micro-Optimize: Length     Less is more:     • Use shortest properties and values       (shorthand)     • Avoid duplicate ...
Micro-Optimization in Action     Example:     #sidebar {     background: #fff url(bg.png) repeat-x       0 0;     border: ...
Micro-Optimize: Length     Less is more:     • Use shortest properties and values       (shorthand)     • Avoid duplicate ...
Resource: CSS Optimizers     http://www.cleancss.com     http://www.codebeautifier.com37
Macro-Optimize38
Why Macro-Optimize?     Solo:     Helps you remember your intentions when you come     back to your code.     With others:...
Foundation 3: Macro-Optimize     1. Practice proper nesting     2. Annotate with comments     3. Reduce, reuse, recycle40
Foundation 3: Macro-Optimize     1. Practice proper nesting     2. Annotate with comments     3. Reduce, reuse, recycle41
Why get your nest in order?     Block-level elements inside inline elements as     well as improper closing and reopening ...
Macro-optimize: Get your nest in order     <body>                                                                 <body>  ...
Foundation 3: Macro-Optimize     1. Practice proper nesting     2. Annotate with comments     3. Reduce, reuse, recycle44
Why Annotate Your Code?     Markup:     Helps you keep track of the element beginning     and end, and helps you identify ...
Macro-optimize: Annotate Your Markup     begin with     <!-- #id or .class name -->     end with     <!-- /end #id or .cla...
Macro-optimize: Annotate Your Markup     Example:     <div id="content">       <div class="promo">       ...       </div><...
Macro-optimize: Annotate Your CSS     /* Comments are good, mmkay? */     Notation is your friend. For:     • Overriding s...
Macro-optimize: Annotate Your CSS     /* made by you on some date */     /* section of the stylesheet */     p {     borde...
Foundation 3: Macro-Optimize     1. Practice proper nesting     2. Annotate with comments     3. Reduce, reuse, recycle50
Why Reduce, Reuse, & Recycle?     • Cuts down file size     • Speeds up page load time     • Encourages best practices51
Macro-optimize: Reduce     • Identify content patterns     • Use classes instead of ids & elements     • Define defaults52
Macro-optimize: Reduce     • Identify content patterns     • Use classes instead of ids & elements     • Define defaults53
Classes, not IDs     <ul id="navmain">                  <ul class="nav">     <li><a href="#">Home</a></li>      <li><a hre...
Macro-optimize: Reduce     • Identify content patterns     • Use classes instead of ids & elements     • Define defaults55
Define Defaults     Not this:               But rather this:     #maincontent h1 {...}   h1, .h1 {...}     #maincontent #c...
Macro-optimize: Reuse     • Leverage the cascade and avoid specificity     • Generify your classes57
Leverage the Cascade     Not this:             Instead this:     html body .nav .hd    .nav .hd {...}       {...}     or  ...
Macro-optimize: Reuse     • Leverage the cascade and avoid specificity     • Generify your classes59
Class generi-fication     not                 instead     .sidebar {...}      .module {...}60
Macro-optimize: Recycle     • Combine classes61
Class-combining     html                             html     <ul id="navmain">                <ul class="nav main">     <...
Resources: OOCSS     http://www.stubbornella.org/content/2009/02       /28/object-oriented-css-grids-on-github/     https:...
2)        Target Your Styles     64                        http://www.flickr.com/photos/bhenak/2664680892/
Why?     Having a plan for targeting elements helps speed     and efficiency – in both creating and fixing styles.65
How to Hit the Mark     1. Technique     2. Selective Specificity     3. Advanced Selectors66
Technique67
My Fave Targeting Technique     outline: 1px solid red;     Why?     • outline does not add to dimensions of the       ele...
Resource: the outline property     http://reference.sitepoint.com/css/outline/69
Indent trial changes     http://coding.smashingmagazine.com/200       8/05/02/improving-code-readability-       with-css-s...
Selective Specificity71
Specificity Rules!     Using selective specificity, you can create     selectors that will zero in on your desired     ele...
A little specificity review     1. Weight rules     2. Specificity best practices73
Super-Simplified Specificity     The more specific the selector is, the higher the       specificity     #id: can only be ...
Specificity Best Practices     •   Don’t rely too heavily on specificity – leverage as         many reusable selectors as ...
Advanced Selectors76
Getting Advanced     Advanced selectors are a good way to     specifically target styles for modern browsers.     The righ...
Let’s peek at     1.       CSS2 Selectors          •    browser support     2.       CSS3 Selectors          •    browser ...
CSS 2.1 Selectors     • Universal *                   • Pseudo elements                                         – :before ...
CSS2.1 Selectors & IE Support     • Universal *                  (ie7/8 – yes)     • Child: e > f                 (ie7/8 –...
CSS2 Selector Support81                       http://www.quirksmode.org/compatibility.html
CSS3 Selectors     • General sibling             • Pseudo-elements*       E~F                                   *all pseud...
CSS3 Selectors (cont’d)     • Pseudo-classes           – Structural        – Target                   •   :nth-child(n)   ...
CSS3 Selector Support84                           http://www.findmebyip.com/litmus
CSS3 Selector Support85               http://www.standardista.com/css3/css3-selector-browser-support
Resources: nth-child testers     http://leaverou.me/demos/nth.html     http://css-tricks.com/examples/       nth-child-tes...
Advanced Selectors: Usage Tips     • All of the CSS2 selectors are supported by the       modern browsers, and almost all ...
Uses for advanced selectors     • Great for progressive enhancement     • Styling first, last or x-number of elements     ...
3)        Squash Browser Bugs     89                  http://www.flickr.com/photos/slappytheseal/3687999392/
Gettin’ Buggy With It     Despite your best efforts towards clean,     efficient, optimized code, browsers will always    ...
Achieving Cross-browser Compatibility     1.   Decide on your approach to deal with IE6     2.   Target other browsers    ...
Deal with IE692
Dealing with IE6 (Still? Yes, still.)     Whether it’s by force or by choice, you need to     know how you are going to de...
The IE6 Deathwatch94              ie6countdown.com
Approaches for IE6     Options:     • Kick it to the curb     • Display tolerant indifference     • Show some love: be gra...
Kicked: Go home IE6!96                    http://www.flickr.com/photos/robotjohnny/3629069606/
Kicked: IE6, get stuffed.97                           http://tumblr.9gag.com/post/285107173
Kicked: IE6, I just won’t support you.         In modern browsers                   In IE698                            pa...
Tolerance: IE6? Meh.99                     http://www.flickr.com/photos/rickharris/430890004/
Tolerance: Serve stripped-down style          In modern browsers                             In IE6100                    ...
Resource: Universal IE CSS101       Universal IE6 stylesheet: http://code.google.com/p/universal-ie6-css/
Tolerance: Make a helpful suggestion          In modern browsers                                      In IE6102           ...
Resource: BrowseSad.com103               browsesad.com
Tolerance: Limit Your Support104                http://gowalla.com
Show an old IE browser some love105                     http://www.flickr.com/photos/brunkfordbraun/391876102/
Graceful IE6 Degradation      • Serve IE6 targeted properties with conditional        comments         – display: inline  ...
Showin’ love, with grace         In modern browsers               In IE6107                           aposd.org
Admit it, you like the challenge108                     http://desandro.com/articles/i-like-ie6-because/
Targeting Other Browsers109
Other browser hacks      There are “hacks” to target styles to specific browsers,        other than the IEs if you really ...
Resource: Hacks for Other Browsers      http://paulirish.com/2009/        browser-specific-css-hacks/      http://htmlcsst...
Some IE7 & IE8 Bugs112
IE7 is color buggin’      color and background-color with rgba      The problem:      An rgba color is correctly set to ov...
IE7 is color buggin’      The solution:      Use the shorthand property background      instead of background-color      O...
IE7 is color buggin’      Example:      div {          background: rgb(200, 54, 54);            /* fallback color */      ...
IE7 & IE8 are both font buggin’      @font-face super bullet-proofing      The problem:      @font-face doesn’t work, even...
Solution: IE7 & IE8 font issues      Example:      @font-face {      font-family: MyFontFamily;      src: url(myfont-webfo...
A Webkit Bug118
Get Your Webkit Bug On      @font-face bold and italics “bug”      The problem:      Applying font-weight: bold or font-st...
Get Your Webkit Bug On      The solution:      Add the value normal to font weight, style,      and variant in the @font-f...
@font-face + faux variations      Example:      @font-face {      font-family: MyFontFamily;      src: url(myfont-webfont....
A Firefox Bug122
Firefox? Buggin’.      The Outline Overflow Bug      The problem:      Firefox will draw an outline around the content    ...
Firefox? Buggin’.      The Outline Overflow Bug      A solution:      Use border instead and adjust the dimensions of     ...
An Opera Bug125
An Ode to Opera Bugs      Hiding elements bug      The problem:      When hiding elements offscreen for image      replace...
An Ode to Opera Bugs      The solution:      Use px instead of em      Example:      h2 {margin-left: -4999px;}127
4)     Have the Proper Tools 128                     http://www.flickr.com/photos/ebarney/3348965637/
Tools rock      Having a strong arsenal of tools helps with      workflow, removes guesswork, and makes      life a ton ea...
Tools: Browser support charts      http://www.findmebyip.com/litmus      http://www.standardista.com/css3/css3-        sel...
Tools: CSS Specifications      The CSS3 Specifications are THE resource       for finding out the exact intended       beh...
Tools: Validators      HTML:      http://validator.w3.org/      CSS:      http://jigsaw.w3.org/css-validator/132
Tools: CSS Redundancy Checkers      http://www.sitepoint.com/        dustmeselectors/      (Firefox extension)      http:/...
Tools: CSS Compressors      http://www.csscompressor.com      http://www.cssdrive.com/index.php        /main/csscompressor...
HTML5 Boilerplate      http://html5boilerplate.com135
RecapTaking all of these steps:1. Lay the foundation2. Target your styles3. Squash browser bugs4. Have the proper toolsWil...
And you’ll become...…one baaad CSSdetectin’ mutha!  137
Resourceshttp://delicious.com/denisejacobs/  csstroubleshooting/ 138
Want even more tips? Get the book!                      The CSS Detective                      Guide                      ...
Web design, served up holistically                         InterAct With                         Web Standards:           ...
Thank You! denisejacobs.com denise@denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs  141             ...
“It’s elementary, my dear Watson.” 142
Upcoming SlideShare
Loading in …5
×

Advanced CSS Troubleshooting & Efficiency

2,622
-1

Published on

Good CSS troubleshooting skills are important to decrease your workload and help you work better with others. Tips for clean code and targetting, as well as solutions to modern browser bugs are covered. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,622
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Advanced CSS Troubleshooting & Efficiency

  1. Advanced CSS Troubleshooting & EfficiencyorHow to Become aSuper CSS Detectivein 4 Easy StepsDenise R. JacobsThe Code ProjectRich Web Experience 20112 December 2011
  2. Twitter Mysteries, Solved!Who: @denisejacobsWhere: #rwx2011 @NoFluffWhat: #cssts 2
  3. Whodunnit? I did! CSSDetectiveGuide.com InterActWithWebStandards.com 3
  4. CSS De-what?• Preventive/defensive coding – Focused & efficient• Can quickly and easily identify and solve problems when they come up 4 http://www.flickr.com/photos/spotrick/4028499019/
  5. I can haz trubbleshootin?Strong troubleshootingskills are one of yourbest allies in solving CSS“mysteries”…and theyalso make you feelpractically invicincible. 5
  6. The 4 Easy Steps 1) Lay the 2) Target your foundation styles 3) Squash 4) Employ browser useful tools bugs 6
  7. 1) Lay the Foundation 7 http://www.flickr.com/photos/pgoyette/2280685630/
  8. Why? A solid CSS foundation of best practices creates an environment where preventing and detecting problems is easier.8
  9. The Foundations 1. Set a Baseline 2. Micro-Optimize 3. Macro-Optimize9
  10. Create a Baseline10
  11. Foundation 1: Create a Baseline 1. The CSS Reset All-star 2. DIY Resets 3. CSS Reset Compendia11
  12. Why Reset? By deliberately establishing an element’s properties, you can: • Better control the elements on the page • More quickly determine the source of problems when they arise • Ensure better cross-browser compatibility12
  13. CSS Reset All-Star: Eric Meyer’s Pro’s – One of the most popular, well thought-out – Neutralizes almost every element Con’s – Can be too far-reaching – Extra work to establish the values for the elements you want13
  14. Resource: Eric Meyer’s Reset Eric Meyer’s Reset: http://meyerweb.com/eric/tools/ css/reset/14
  15. Resource: HTML5 Reset http://html5doctor.com/html-5-reset- stylesheet/15
  16. DIY Resets • You can determine exactly which elements you want to reset • May save on reestablishing properties • You know exactly what is changed and why you changed it • Problems will be that much more obvious16
  17. Top Properties to Reset • Margin and padding • Borders, especially on linked images • Link text underlining • Vertical alignment • Font size and line-height17
  18. Resource: DIY Resets Article on DIY resets: http://bit.ly/1D4jSB18
  19. Resource: CSS Reset Compendia Killer Collection of CSS Resets http://tinyurl.com/5bdoj2 More Killer CSS Resets http://tinyurl.com/n746dl19
  20. Micro-Optimize20
  21. Why Micro-Optimize? • Cuts down file size • Speeds up page load time • Encourages best practices21
  22. Foundation 2: Micro-Optimize 1. Order: alpha 2. Length: short 3. Speed: fast22
  23. Micro-optimize: Alphabetize Putting your CSS declarations in alphabetical order is a great way to set the stage for clean code and fewer problems. Why? Because your style declarations will be that much easier to target and locate.23
  24. Find “width” - which is easier? Example One: Example Two: .login { .login { margin-top: 5px; border-left: 1px line-height: 1.5em; solid #69824d; padding-left: 5px; float: right; float: right; font-weight: bold; list-style-type: line-height: 1.5em; none; list-style-type: width: 80px; none; font-weight: bold; margin-top: 5px; border-left: 1px padding-left: 5px; solid #69824d; width: 80px; } }24
  25. Find “width” - which is easier? Example One: Example Two: .login { .login { margin-top: 5px; border-left: 1px line-height: 1.5em; solid #69824d; padding-left: 5px; float: right; float: right; font-weight: bold; list-style-type: line-height: 1.5em; none; list-style-type: width: 80px; none; font-weight: bold; margin-top: 5px; border-left: 1px padding-left: 5px; solid #69824d; width: 80px; } }25
  26. Micro-optimize: Speed Up the efficiency: • ID selectors are speedier than element or universal* • Drop element qualifiers • Ditch descendent selectors when and where you can *conflicts with reduce, reuse, & recycle, however26
  27. Micro-Optimization in Action Pre-optimization: #wrapper div#sidebar { background: #fff url(bg.png) repeat-x 0 0; border: 1px solid #ff0; font: normal 1.33em/1.33 Georgia, serif; margin: 10px 20px; padding: .1em; }27
  28. Micro-Optimization in Action Post-optimization : #sidebar { background: #fff url(bg.png) repeat-x 0 0; border: 1px solid #ff0; font: normal 1.33em/1.33 Georgia, serif; margin: 10px 20px; padding: .1em; }28
  29. Micro-Optimize Your CSS: Length Less is more: • Use shortest properties and values (shorthand) • Avoid duplicate properties • Condense values and units • Avoid multiple lines and indenting29
  30. Micro-Optimization in Action Example: #sidebar { background: #fff url(bg.png) repeat-x 0 0; border: 1px solid #ff0; font: normal 1.33em/1.33 Georgia, serif; margin: 10px 20px; padding: .1em; }30
  31. Shorthand: to remember • Default values • Shorthand property syntax • Required property values • Property value order31
  32. Micro-Optimize: Length Less is more: • Use shortest properties and values (shorthand) • Avoid duplicate properties • Condense values and units • Avoid multiple lines and indenting32
  33. Micro-Optimization in Action Example: #sidebar { background: #fff url(bg.png) repeat-x 0 0; border: 1px solid #ff0; font: normal 1.33em/1.33 Georgia, serif; margin: 10px 20px; padding: .1em; }33
  34. Micro-Optimize: Length Less is more: • Use shortest properties and values (shorthand) • Avoid duplicate properties • Condense values and units • Avoid multiple lines and indenting34
  35. Micro-Optimization in Action Example: #sidebar { background: #fff url(bg.png) repeat-x 0 0; border: 1px solid red; font: normal 1.33em/1.33 Georgia, serif; margin: 10px 20px; padding: .1em; }35
  36. Micro-Optimize: Length Less is more: • Use shortest properties and values (shorthand) • Avoid duplicate properties • Condense values and units • Avoid multiple lines and indenting36
  37. Resource: CSS Optimizers http://www.cleancss.com http://www.codebeautifier.com37
  38. Macro-Optimize38
  39. Why Macro-Optimize? Solo: Helps you remember your intentions when you come back to your code. With others: Helps your colleagues understand your intentions when working with your code. Ergo: Saves time!39
  40. Foundation 3: Macro-Optimize 1. Practice proper nesting 2. Annotate with comments 3. Reduce, reuse, recycle40
  41. Foundation 3: Macro-Optimize 1. Practice proper nesting 2. Annotate with comments 3. Reduce, reuse, recycle41
  42. Why get your nest in order? Block-level elements inside inline elements as well as improper closing and reopening of elements can create major layout issues. Validation often won’t help you find the culprit.42
  43. Macro-optimize: Get your nest in order <body> <body> <div id="pagewrap"> <div id="pagewrap"> <div id="header"> <div id="header"> <h1>Website Title</h1> <h1>Website Title</h1> <ul id="navigation"> <li><a href="#">Home</a></li> <ul id="navigation"> <li><a href="#">About</a></li> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> <li><a href="#">Contact</a></li> <div id="contentwrap"> </ul> <div id="maincontent"> </div><!-- end #header --> <h2>Main Content Title</h2> <p>Main content, which is so much more important than the secondary <div id="contentwrap"> content that it makes one teary with emotion.</p> <div id="maincontent"> </div> <h2>Main Content Title</h2> <div id="secondarycontent"> <p>Main content, which is so much more important than <h3>Sidebar Title</h3> the secondary content that it makes one teary with <p>Sidebar content, which is not as important as the primary content emotion.</p> (which is why it is in the sidebar)</p> </div><!-- end #maincontent --> </div> <div id="footer"> <div id="secondarycontent"> <p>standard copyright and footer information</p> <h3>Sidebar Title</h3> </div> <p>Sidebar content, which is not as important as the </body> primary content (which is why it is in the sidebar)</p> </div><!-- end #secondarycontent --> </div><!-- end #cotentwrap --> <div id="footer"> <p>standard copyright and footer information</p> </div><!-- end #footer --> </div><!-- end #pagewrap --> </body>43
  44. Foundation 3: Macro-Optimize 1. Practice proper nesting 2. Annotate with comments 3. Reduce, reuse, recycle44
  45. Why Annotate Your Code? Markup: Helps you keep track of the element beginning and end, and helps you identify the pieces faster. CSS: Helps both you and others know intentions and specific information.45
  46. Macro-optimize: Annotate Your Markup begin with <!-- #id or .class name --> end with <!-- /end #id or .class name --> or, alternatively <!-- / #id or .class name -->46
  47. Macro-optimize: Annotate Your Markup Example: <div id="content"> <div class="promo"> ... </div><!-- /end .promo --> </div><!-- /end #content -->47
  48. Macro-optimize: Annotate Your CSS /* Comments are good, mmkay? */ Notation is your friend. For: • Overriding styles • Creating stylesheet sections • Listing the color scheme • Resources and contact info.48
  49. Macro-optimize: Annotate Your CSS /* made by you on some date */ /* section of the stylesheet */ p { border-color: #cf0; border-color-bottom: #ccc; /*this property overrides the previous one */ }49
  50. Foundation 3: Macro-Optimize 1. Practice proper nesting 2. Annotate with comments 3. Reduce, reuse, recycle50
  51. Why Reduce, Reuse, & Recycle? • Cuts down file size • Speeds up page load time • Encourages best practices51
  52. Macro-optimize: Reduce • Identify content patterns • Use classes instead of ids & elements • Define defaults52
  53. Macro-optimize: Reduce • Identify content patterns • Use classes instead of ids & elements • Define defaults53
  54. Classes, not IDs <ul id="navmain"> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li> </ul> </ul>54
  55. Macro-optimize: Reduce • Identify content patterns • Use classes instead of ids & elements • Define defaults55
  56. Define Defaults Not this: But rather this: #maincontent h1 {...} h1, .h1 {...} #maincontent #callout h2, .h2 {...} h2 {...}56
  57. Macro-optimize: Reuse • Leverage the cascade and avoid specificity • Generify your classes57
  58. Leverage the Cascade Not this: Instead this: html body .nav .hd .nav .hd {...} {...} or .headerofheadsectio nofpage {...}58
  59. Macro-optimize: Reuse • Leverage the cascade and avoid specificity • Generify your classes59
  60. Class generi-fication not instead .sidebar {...} .module {...}60
  61. Macro-optimize: Recycle • Combine classes61
  62. Class-combining html html <ul id="navmain"> <ul class="nav main"> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">About</a></li> <li><a <li><a href="#">Contact</a></li> href="#">Contact</a></li> </ul> </ul> <ul id="navfoot"> <ul class="nav foot"> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">About</a></li> <li><a <li><a href="#">Contact</a></li> href="#">Contact</a></li> </ul> </ul> css css #navmain { .nav {(other styles);} (other styles); .main {background-color: green;} background-color: green;} .foot {background-color: #navfoot { black;} (other styles); background-color: black;}62
  63. Resources: OOCSS http://www.stubbornella.org/content/2009/02 /28/object-oriented-css-grids-on-github/ https://github.com/stubbornella/oocss http://www.typesett.com/2010/01/object- oriented-css-oocss-the-lowdown/63
  64. 2) Target Your Styles 64 http://www.flickr.com/photos/bhenak/2664680892/
  65. Why? Having a plan for targeting elements helps speed and efficiency – in both creating and fixing styles.65
  66. How to Hit the Mark 1. Technique 2. Selective Specificity 3. Advanced Selectors66
  67. Technique67
  68. My Fave Targeting Technique outline: 1px solid red; Why? • outline does not add to dimensions of the element • Color names used only for troubleshooting68
  69. Resource: the outline property http://reference.sitepoint.com/css/outline/69
  70. Indent trial changes http://coding.smashingmagazine.com/200 8/05/02/improving-code-readability- with-css-styleguides/70
  71. Selective Specificity71
  72. Specificity Rules! Using selective specificity, you can create selectors that will zero in on your desired element(s), but you’ve got to do it by the rules.72
  73. A little specificity review 1. Weight rules 2. Specificity best practices73
  74. Super-Simplified Specificity The more specific the selector is, the higher the specificity #id: can only be one on the page = high specificity (100) .class: can be multiple, but not everywhere = medium specificity (10) element: lots on the page = low specificity (1) * : everything on the page = no specificity (0)74
  75. Specificity Best Practices • Don’t rely too heavily on specificity – leverage as many reusable selectors as possible • Use the cascade and source order so that you don’t have to get too specific • Trust specificity over source order in terms of which style will win and get applied75
  76. Advanced Selectors76
  77. 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.77
  78. Let’s peek at 1. CSS2 Selectors • browser support 2. CSS3 Selectors • browser support78
  79. 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-child79
  80. 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)80
  81. CSS2 Selector Support81 http://www.quirksmode.org/compatibility.html
  82. 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"]82
  83. 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 • :indeterminate83
  84. CSS3 Selector Support84 http://www.findmebyip.com/litmus
  85. CSS3 Selector Support85 http://www.standardista.com/css3/css3-selector-browser-support
  86. Resources: nth-child testers http://leaverou.me/demos/nth.html http://css-tricks.com/examples/ nth-child-tester/86
  87. 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 selectors87
  88. Uses for advanced selectors • Great for progressive enhancement • Styling first, last or x-number of elements • Styling generated content88
  89. 3) Squash Browser Bugs 89 http://www.flickr.com/photos/slappytheseal/3687999392/
  90. Gettin’ Buggy With It Despite your best efforts towards clean, efficient, optimized code, browsers will always have issues that throw a wrench in the works.90
  91. Achieving Cross-browser Compatibility 1. Decide on your approach to deal with IE6 2. Target other browsers 3. Know IE 7 & IE 8 bugs 4. Know Firefox bugs 5. Know Webkit bugs 6. Know Opera bugs91
  92. Deal with IE692
  93. Dealing with IE6 (Still? Yes, still.) Whether it’s by force or by choice, you need to know how you are going to deal with IE6 until it’s completely gone.93
  94. The IE6 Deathwatch94 ie6countdown.com
  95. Approaches for IE6 Options: • Kick it to the curb • Display tolerant indifference • Show some love: be graceful in your degradation95
  96. Kicked: Go home IE6!96 http://www.flickr.com/photos/robotjohnny/3629069606/
  97. Kicked: IE6, get stuffed.97 http://tumblr.9gag.com/post/285107173
  98. Kicked: IE6, I just won’t support you. In modern browsers In IE698 paulcarbo.net
  99. Tolerance: IE6? Meh.99 http://www.flickr.com/photos/rickharris/430890004/
  100. Tolerance: Serve stripped-down style In modern browsers In IE6100 makephotoshopfaster.com
  101. Resource: Universal IE CSS101 Universal IE6 stylesheet: http://code.google.com/p/universal-ie6-css/
  102. Tolerance: Make a helpful suggestion In modern browsers In IE6102 http://yaronschoen.com/blog/sudden_metanoia
  103. Resource: BrowseSad.com103 browsesad.com
  104. Tolerance: Limit Your Support104 http://gowalla.com
  105. Show an old IE browser some love105 http://www.flickr.com/photos/brunkfordbraun/391876102/
  106. Graceful IE6 Degradation • Serve IE6 targeted properties with conditional comments – display: inline – zoom: 1 • Use the * html hack106
  107. Showin’ love, with grace In modern browsers In IE6107 aposd.org
  108. Admit it, you like the challenge108 http://desandro.com/articles/i-like-ie6-because/
  109. Targeting Other Browsers109
  110. Other browser hacks There are “hacks” to target styles to specific browsers, other than the IEs if you really want to use them…110
  111. Resource: Hacks for Other Browsers http://paulirish.com/2009/ browser-specific-css-hacks/ http://htmlcsstutorials.blogspot.com/2009/06/ web-browser-hacks-css-hacks-ie-firefox.html111
  112. Some IE7 & IE8 Bugs112
  113. IE7 is color buggin’ color and background-color with rgba The problem: An rgba color is correctly set to override the rgb for the IEs , but the rgb color doesn’t show up at all.113
  114. IE7 is color buggin’ The solution: Use the shorthand property background instead of background-color OR Use a hexidecimal color instead of rgb, and then continue the override with rgba.114
  115. IE7 is color buggin’ Example: div { background: rgb(200, 54, 54); /* fallback color */ background: rgba(200, 54, 54, 0.5); } OR div { background-color: #fd7e7e; background-color: rgba(255,0,0,0.5); }115
  116. IE7 & IE8 are both font buggin’ @font-face super bullet-proofing The problem: @font-face doesn’t work, even with the proper normal syntax. What gives?116
  117. Solution: IE7 & IE8 font issues 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); }117
  118. A Webkit Bug118
  119. Get Your Webkit Bug On @font-face bold and italics “bug” The problem: Applying font-weight: bold or font-style: italic to @font-faced text doesn’t work.119
  120. Get Your Webkit Bug On The solution: Add the value normal to font weight, style, and variant in the @font-face declaration to set a baseline.120
  121. @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; }121
  122. A Firefox Bug122
  123. Firefox? Buggin’. The Outline Overflow Bug The problem: Firefox will draw an outline around the content of an element that has overflowed its boundaries rather than around the element’s actual set dimensions.123
  124. Firefox? Buggin’. The Outline Overflow Bug A solution: Use border instead and adjust the dimensions of the element.124
  125. An Opera Bug125
  126. An Ode to Opera Bugs Hiding elements bug The problem: When hiding elements offscreen for image replacement, etc. em units are not recognized.126
  127. An Ode to Opera Bugs The solution: Use px instead of em Example: h2 {margin-left: -4999px;}127
  128. 4) Have the Proper Tools 128 http://www.flickr.com/photos/ebarney/3348965637/
  129. Tools rock Having a strong arsenal of tools helps with workflow, removes guesswork, and makes life a ton easier.129
  130. Tools: Browser support charts http://www.findmebyip.com/litmus http://www.standardista.com/css3/css3- selector-browser-support130
  131. Tools: CSS Specifications The CSS3 Specifications are THE resource for finding out the exact intended behavior and use of any given property. http://www.w3.org/standards/ techs/css#w3c_all131
  132. Tools: Validators HTML: http://validator.w3.org/ CSS: http://jigsaw.w3.org/css-validator/132
  133. Tools: CSS Redundancy Checkers http://www.sitepoint.com/ dustmeselectors/ (Firefox extension) http://code.google.com/p/ css-redundancy-checker/133
  134. Tools: CSS Compressors http://www.csscompressor.com http://www.cssdrive.com/index.php /main/csscompressoradvanced/134
  135. HTML5 Boilerplate http://html5boilerplate.com135
  136. RecapTaking all of these steps:1. Lay the foundation2. Target your styles3. Squash browser bugs4. Have the proper toolsWill yield:1. Code that is easier to read and find problems in2. Speed of use and in use3. Finding solutions faster 136
  137. And you’ll become...…one baaad CSSdetectin’ mutha! 137
  138. Resourceshttp://delicious.com/denisejacobs/ csstroubleshooting/ 138
  139. Want even more tips? Get the book! The CSS Detective Guide CSSDetectiveGuide.com twitter.com/cssdetective 139
  140. Web design, served up holistically InterAct With Web Standards: A Holistic Approach to Web Design InterActWithWebStandards.com twitter.com/waspinteract 140
  141. Thank You! denisejacobs.com denise@denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs 141 http://www.flickr.com/photos/aarronwalter/4629076165/
  142. “It’s elementary, my dear Watson.” 142
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×