SlideShare a Scribd company logo
1 of 138
Download to read offline
Advanced CSS
     Troubleshooting & Efficiency
or
How to Become a
Super CSS Detective
in 4 Easy Steps

Denise R. Jacobs
The Code Project
Boost Virtual Summit
May 25, 2011
Twitter Mysteries, Solved!

Who: @denisejacobs

Where: @thecodeproject #CPVTS

What: #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 when they
  come up

   4                       http://www.flickr.com/photos/spotrick/4028499019/
I can haz trubbleshootin?
Strong troubleshooting
skills are one of your
best allies in solving CSS
“mysteries”…and they
also make you feel
practically invicincible.




   5
The 4 Easy Steps

 1) Lay the        2) Target your
    foundation        styles

 3) Squash
                   4) Employ
    browser
                      useful tools
    bugs
  6
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 easier.




8
The Foundations
    1. Set a Baseline
    2. Micro-Optimize
    3. Macro-Optimize




9
Create a Baseline




10
Foundation 1: Create a Baseline
     1. The CSS Reset All-star
     2. DIY Resets
     3. CSS Reset Compendia




11
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 compatibility




12
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 want



13
Resource: Eric Meyer’s Reset
     Eric Meyer’s Reset:
       http://meyerweb.com/eric/tools/
       css/reset/




14
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 obvious




15
Top Properties to Reset
     •   Margin and padding
     •   Borders, especially on linked images
     •   Link text underlining
     •   Vertical alignment
     •   Font size and line-height




16
Resource: DIY Resets

     Article on DIY resets: http://bit.ly/1D4jSB




17
Resource: CSS Reset Compendia
     Killer Collection of CSS Resets
     http://tinyurl.com/5bdoj2

     More Killer CSS Resets
     http://tinyurl.com/n746dl




18
Micro-Optimize




19
Why Micro-Optimize?
     • Cuts down file size
     • Speeds up page load time
     • Encourages best practices




20
Foundation 2: Micro-Optimize
     1. Order: alpha
     2. Length: short
     3. Speed: fast




21
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.




22
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;
     }                     }


23
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
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, however


25
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;
     }




26
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;
     }




27
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 indenting




28
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;
     }




29
Shorthand: to remember
     •   Default values
     •   Shorthand property syntax
     •   Required property values
     •   Property value order




30
Micro-Optimize: Length
     Less is more:
     • Use shortest properties and values
       (shorthand)
     • Avoid duplicate properties
     • Condense values and units
     • Avoid multiple lines and indenting




31
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;
     }




32
Micro-Optimize: Length
     Less is more:
     • Use shortest properties and values
       (shorthand)
     • Avoid duplicate properties
     • Condense values and units
     • Avoid multiple lines and indenting




33
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;
     }




34
Micro-Optimize: Length
     Less is more:
     • Use shortest properties and values
       (shorthand)
     • Avoid duplicate properties
     • Condense values and units
     • Avoid multiple lines and indenting




35
Resource: CSS Optimizers
     http://www.cleancss.com

     http://www.codebeautifier.com




36
Macro-Optimize




37
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!


38
Foundation 3: Macro-Optimize
     1. Practice proper nesting
     2. Annotate with comments
     3. Reduce, reuse, recycle




39
Foundation 3: Macro-Optimize
     1. Practice proper nesting
     2. Annotate with comments
     3. Reduce, reuse, recycle




40
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.




41
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>




42
Foundation 3: Macro-Optimize
     1. Practice proper nesting
     2. Annotate with comments
     3. Reduce, reuse, recycle




43
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.



44
Macro-optimize: Annotate Your Markup
     begin with
     <!-- #id or .class name -->
     end with
     <!-- /end #id or .class name -->
     or, alternatively
     <!-- / #id or .class name -->




45
Macro-optimize: Annotate Your Markup
     Example:
     <div id="content">
       <div class="promo">
       ...
       </div><!-- /end .promo -->
     </div><!-- /end #content -->




46
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.


47
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 */
     }




48
Foundation 3: Macro-Optimize
     1. Practice proper nesting
     2. Annotate with comments
     3. Reduce, reuse, recycle




49
Why Reduce, Reuse, & Recycle?
     • Cuts down file size
     • Speeds up page load time
     • Encourages best practices




50
Macro-optimize: Reduce
     • Identify content patterns
     • Use classes instead of ids & elements
     • Define defaults




51
Macro-optimize: Reduce
     • Identify content patterns
     • Use classes instead of ids & elements
     • Define defaults




52
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>




53
Macro-optimize: Reduce
     • Identify content patterns
     • Use classes instead of ids & elements
     • Define defaults




54
Define Defaults
     Not this:               But rather this:
     #maincontent h1 {...}   h1, .h1 {...}
     #maincontent #callout   h2, .h2 {...}
       h2 {...}




55
Macro-optimize: Reuse
     • Leverage the cascade and avoid specificity
     • Generify your classes




56
Leverage the Cascade
     Not this:             Instead this:
     html body .nav .hd    .nav .hd {...}
       {...}
     or
     .headerofheadsectio
        nofpage {...}




57
Macro-optimize: Reuse
     • Leverage the cascade and avoid specificity
     • Generify your classes




58
Class generi-fication
     not                 instead
     .sidebar {...}      .module {...}




59
Macro-optimize: Recycle
     • Combine classes




60
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;}



61
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/



62
2)        Target Your Styles




     63                        http://www.flickr.com/photos/bhenak/2664680892/
Why?
     Having a plan for targeting elements helps speed
     and efficiency – in both creating and fixing styles.




64
How to Hit the Mark
     1. Technique
     2. Selective Specificity
     3. Advanced Selectors




65
Technique




66
My Fave Targeting Technique

     outline: 1px solid red;


     Why?
     • outline does not add to dimensions of the
       element
     • Color names used only for troubleshooting



67
Resource: the outline property
     http://reference.sitepoint.com/css/outline/




68
Selective Specificity




69
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.




70
A little specificity review
     1. Weight rules
     2. Specificity best practices




71
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)


72
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 applied




73
Advanced Selectors




74
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.




75
Let’s peek at
     1.       CSS2 Selectors
          •    browser support


     2.       CSS3 Selectors
          •    browser support




76
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-child




77
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)



78
CSS2 Selector Support




79                       http://www.quirksmode.org/compatibility.html
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"]


80
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
           •   :indeterminate


81
CSS3 Selector Support




82                           http://www.findmebyip.com/litmus
CSS3 Selector Support




83               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-tester/




84
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
       selectors




85
Uses for advanced selectors
     • Great for progressive enhancement
     • Styling first, last or x-number of elements
     • Styling generated content




86
3)        Squash Browser Bugs




     87                  http://www.flickr.com/photos/slappytheseal/3687999392/
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.




88
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 bugs




89
Deal with IE6




90
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.




91
The IE6 Deathwatch




92              ie6countdown.com
Approaches for IE6
     Options:
     • Kick it to the curb
     • Display tolerant indifference
     • Show some love: be graceful in your
        degradation




93
Kicked: Go home IE6!




94                    http://www.flickr.com/photos/robotjohnny/3629069606/
Kicked: IE6, get stuffed.




95                           http://tumblr.9gag.com/post/285107173
Kicked: IE6, I just won’t support you.




         In modern browsers                   In IE6



96                            paulcarbo.net
Tolerance: IE6? Meh.




97                     http://www.flickr.com/photos/rickharris/430890004/
Tolerance: Serve stripped-down style




         In modern browsers                             In IE6



98                            makephotoshopfaster.com
Resource: Universal IE CSS




99       Universal IE6 stylesheet: http://code.google.com/p/universal-ie6-css/
Tolerance: Make a helpful suggestion




          In modern browsers                                      In IE6


100                 http://yaronschoen.com/blog/sudden_metanoia
Resource: BrowseSad.com




101               browsesad.com
Tolerance: Limit Your Support




102                http://gowalla.com
Show an old IE browser some love




103                     http://www.flickr.com/photos/brunkfordbraun/391876102/
Graceful IE6 Degradation
      • Serve IE6 targeted properties with conditional
        comments
         – display: inline
         – zoom: 1
      • Use the * html hack




104
Showin’ love, with grace




         In modern browsers               In IE6


105                           aposd.org
Targeting Other Browsers




106
Other browser hacks
      There are “hacks” to target styles to specific browsers,
        other than the IEs if you really want to use them…




107
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.html




108
Some IE7 & IE8 Bugs




109
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.




110
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.




111
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);
      }


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




113
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');
      }


114
A Webkit Bug




115
Get Your Webkit Bug On
      @font-face bold and italics “bug”

      The problem:
      Applying font-weight: bold or font-style: italic to
        @font-face'd text doesn’t work.




116
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.




117
@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;
      }


118
A Firefox Bug




119
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.



120
Firefox? Buggin’.
      The Outline Overflow Bug

      A solution:
      Use border instead and adjust the dimensions of
      the element.




121
An Opera Bug




122
An Ode to Opera Bugs
      Hiding elements bug

      The problem:
      When hiding elements offscreen for image
      replacement, etc. em units are not recognized.




123
An Ode to Opera Bugs
      The solution:
      Use px instead of em

      Example:
      h2 {margin-left: -4999px;}




124
4)     Have the Proper Tools




 125                     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 easier.




126
Tools: Browser support charts
      http://www.findmebyip.com/litmus


      http://www.standardista.com/css3/css3-
        selector-browser-support




127
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_all



128
Tools: Validators
      HTML:
      http://validator.w3.org/

      CSS:
      http://jigsaw.w3.org/css-validator/




129
Tools: CSS Redundancy Checkers
      http://www.sitepoint.com/
        dustmeselectors/
      (Firefox extension)

      http://code.google.com/p/
        css-redundancy-checker/



130
Tools: CSS Compressors
      http://www.csscompressor.com

      http://www.cssdrive.com/index.php
        /main/csscompressoradvanced/




131
Recap
Taking all of these steps:
1. Lay the foundation
2. Target your styles
3. Squash browser bugs
4. Have the proper tools

Will yield:
1. Code that is easier to read and find problems in
2. Speed of use and in use
3. Finding solutions faster
  132
And you’ll become...




…one baaad CSS
detectin’ mutha!
 133
Resources



http://delicious.com/denisejacobs/
  csstroubleshoot/




 134
Want even more tips? Get the book!
                      The CSS Detective
                      Guide
                      CSSDetectiveGuide.com
                      twitter.com/cssdetective




  135
Web design, served up holistically
                         InterAct With
                         Web Standards:
                         A Holistic Approach to
                         Web Design

                         InterActWithWebStandards.com
                         twitter.com/waspinteract




  136
Thank You!

 denisejacobs.com

 denise@denisejacobs.com

 twitter.com/denisejacobs

 slideshare.net/denisejacobs


  137                          http://www.flickr.com/photos/aarronwalter/4629076165/
“It’s elementary, my dear Watson.”




 138

More Related Content

What's hot (20)

Html intro
Html introHtml intro
Html intro
 
Darwin web standards
Darwin web standardsDarwin web standards
Darwin web standards
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
 
Next Steps in Responsive Design
Next Steps in Responsive DesignNext Steps in Responsive Design
Next Steps in Responsive Design
 
Meta tag creation
Meta tag creationMeta tag creation
Meta tag creation
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
HTML News Packages Lesson
HTML News Packages LessonHTML News Packages Lesson
HTML News Packages Lesson
 
Jquery News Packages
Jquery News PackagesJquery News Packages
Jquery News Packages
 
Modular HTML & CSS Workshop
Modular HTML & CSS WorkshopModular HTML & CSS Workshop
Modular HTML & CSS Workshop
 
Semantic HTML5
Semantic HTML5Semantic HTML5
Semantic HTML5
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
Modular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopModular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo Workshop
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Layout with CSS
Layout with CSSLayout with CSS
Layout with CSS
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
Web 102 INtro to CSS
Web 102  INtro to CSSWeb 102  INtro to CSS
Web 102 INtro to CSS
 
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop
 

Viewers also liked

Corpus christi lorena diaz
Corpus christi lorena diazCorpus christi lorena diaz
Corpus christi lorena diazLore Diaz
 
Guía de intervención educativa para alumnos con discapacidad motriz
Guía de intervención educativa para alumnos con discapacidad motriz Guía de intervención educativa para alumnos con discapacidad motriz
Guía de intervención educativa para alumnos con discapacidad motriz Pepe Jara Cueva
 
Broken Experiences: Fixing UX One Pixel at a Time
Broken Experiences: Fixing UX One Pixel at a TimeBroken Experiences: Fixing UX One Pixel at a Time
Broken Experiences: Fixing UX One Pixel at a TimeGabi Moore
 
Optimizing the Web Channel
Optimizing the Web ChannelOptimizing the Web Channel
Optimizing the Web Channelstrategy.chef
 
Tanentel Medical System co. ltd.
Tanentel Medical System co. ltd.Tanentel Medical System co. ltd.
Tanentel Medical System co. ltd.Julie Sylvester
 
Guia del alumno_avanzado vaughan
Guia del alumno_avanzado vaughanGuia del alumno_avanzado vaughan
Guia del alumno_avanzado vaughanmetalo
 
Manuel Martinez
Manuel MartinezManuel Martinez
Manuel Martinezlavelada
 
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Denise Jacobs
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Denise Jacobs
 
Milieuproblematiek
MilieuproblematiekMilieuproblematiek
Milieuproblematieks0203506
 
The Creativity (R)Evolution - UX Week 2014
The Creativity (R)Evolution -  UX Week 2014The Creativity (R)Evolution -  UX Week 2014
The Creativity (R)Evolution - UX Week 2014Denise Jacobs
 
2012 03-27 developers e-commercedag presentatie2 drupal
2012 03-27 developers e-commercedag presentatie2 drupal2012 03-27 developers e-commercedag presentatie2 drupal
2012 03-27 developers e-commercedag presentatie2 drupalCombell NV
 
The Calm Creativity (R)Evolution
The Calm Creativity (R)EvolutionThe Calm Creativity (R)Evolution
The Calm Creativity (R)EvolutionDenise Jacobs
 
Blogs & Content Marketing
Blogs & Content MarketingBlogs & Content Marketing
Blogs & Content MarketingTom Williams
 
The Sankofa of CSS3: Moving forward while looking back
The Sankofa of CSS3: Moving forward while looking backThe Sankofa of CSS3: Moving forward while looking back
The Sankofa of CSS3: Moving forward while looking backDenise Jacobs
 
AMA Using Blogging As A Weapon
AMA  Using Blogging As A WeaponAMA  Using Blogging As A Weapon
AMA Using Blogging As A WeaponTom Williams
 
10 Course Outline Final Student
10 Course Outline Final Student10 Course Outline Final Student
10 Course Outline Final Studentcysps08
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondDenise Jacobs
 

Viewers also liked (20)

Corpus christi lorena diaz
Corpus christi lorena diazCorpus christi lorena diaz
Corpus christi lorena diaz
 
Guía de intervención educativa para alumnos con discapacidad motriz
Guía de intervención educativa para alumnos con discapacidad motriz Guía de intervención educativa para alumnos con discapacidad motriz
Guía de intervención educativa para alumnos con discapacidad motriz
 
Broken Experiences: Fixing UX One Pixel at a Time
Broken Experiences: Fixing UX One Pixel at a TimeBroken Experiences: Fixing UX One Pixel at a Time
Broken Experiences: Fixing UX One Pixel at a Time
 
Optimizing the Web Channel
Optimizing the Web ChannelOptimizing the Web Channel
Optimizing the Web Channel
 
Tanentel Medical System co. ltd.
Tanentel Medical System co. ltd.Tanentel Medical System co. ltd.
Tanentel Medical System co. ltd.
 
El futuro del periodismo - Evoca
El futuro del periodismo - EvocaEl futuro del periodismo - Evoca
El futuro del periodismo - Evoca
 
Guia del alumno_avanzado vaughan
Guia del alumno_avanzado vaughanGuia del alumno_avanzado vaughan
Guia del alumno_avanzado vaughan
 
Manuel Martinez
Manuel MartinezManuel Martinez
Manuel Martinez
 
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
Milieuproblematiek
MilieuproblematiekMilieuproblematiek
Milieuproblematiek
 
The Creativity (R)Evolution - UX Week 2014
The Creativity (R)Evolution -  UX Week 2014The Creativity (R)Evolution -  UX Week 2014
The Creativity (R)Evolution - UX Week 2014
 
A Piece Of Sky
A Piece Of SkyA Piece Of Sky
A Piece Of Sky
 
2012 03-27 developers e-commercedag presentatie2 drupal
2012 03-27 developers e-commercedag presentatie2 drupal2012 03-27 developers e-commercedag presentatie2 drupal
2012 03-27 developers e-commercedag presentatie2 drupal
 
The Calm Creativity (R)Evolution
The Calm Creativity (R)EvolutionThe Calm Creativity (R)Evolution
The Calm Creativity (R)Evolution
 
Blogs & Content Marketing
Blogs & Content MarketingBlogs & Content Marketing
Blogs & Content Marketing
 
The Sankofa of CSS3: Moving forward while looking back
The Sankofa of CSS3: Moving forward while looking backThe Sankofa of CSS3: Moving forward while looking back
The Sankofa of CSS3: Moving forward while looking back
 
AMA Using Blogging As A Weapon
AMA  Using Blogging As A WeaponAMA  Using Blogging As A Weapon
AMA Using Blogging As A Weapon
 
10 Course Outline Final Student
10 Course Outline Final Student10 Course Outline Final Student
10 Course Outline Final Student
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
 

Similar to Advanced CSS Troubleshooting

Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSZoe Gillenwater
 
Css for Development
Css for DevelopmentCss for Development
Css for Developmenttsengsite
 
Getting the most out of Radiant
Getting the most out of RadiantGetting the most out of Radiant
Getting the most out of Radiantjomz83
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)François Massart
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
Beginner & Intermediate Guide to HTML5/CSS3 In DrupalBeginner & Intermediate Guide to HTML5/CSS3 In Drupal
Beginner & Intermediate Guide to HTML5/CSS3 In DrupalMediacurrent
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developersHernan Mammana
 
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressDesign Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressJesse James Arnold
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Thinkful
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
Code & Design your first website 4/18
Code & Design your first website 4/18Code & Design your first website 4/18
Code & Design your first website 4/18TJ Stalcup
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4imdurgesh
 
Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl
Source Ordered Templates - - Joomla!Days NL 2009 #jd09nlSource Ordered Templates - - Joomla!Days NL 2009 #jd09nl
Source Ordered Templates - - Joomla!Days NL 2009 #jd09nlJoomla!Days Netherlands
 
Performance optimization - Basics
Performance optimization - BasicsPerformance optimization - Basics
Performance optimization - BasicsFilip Mares
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)Christopher Schmitt
 

Similar to Advanced CSS Troubleshooting (20)

Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
 
HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
 
Getting the most out of Radiant
Getting the most out of RadiantGetting the most out of Radiant
Getting the most out of Radiant
 
Css
CssCss
Css
 
Lecture 2 - HTML Basics
Lecture 2 - HTML BasicsLecture 2 - HTML Basics
Lecture 2 - HTML Basics
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
Beginner & Intermediate Guide to HTML5/CSS3 In DrupalBeginner & Intermediate Guide to HTML5/CSS3 In Drupal
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressDesign Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPress
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Code & Design your first website 4/18
Code & Design your first website 4/18Code & Design your first website 4/18
Code & Design your first website 4/18
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4
 
Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl
Source Ordered Templates - - Joomla!Days NL 2009 #jd09nlSource Ordered Templates - - Joomla!Days NL 2009 #jd09nl
Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl
 
Performance optimization - Basics
Performance optimization - BasicsPerformance optimization - Basics
Performance optimization - Basics
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
 
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
 

More from Denise Jacobs

Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...Denise Jacobs
 
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...Denise Jacobs
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...Denise Jacobs
 
How to Have Difficult Conversations With Confidence - MTP Digital 2020
How to Have Difficult Conversations With Confidence -  MTP Digital 2020How to Have Difficult Conversations With Confidence -  MTP Digital 2020
How to Have Difficult Conversations With Confidence - MTP Digital 2020Denise Jacobs
 
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202
Overcome Self-Doubt to Amplify Your Impact and Create a Better World  - GSLA 202Overcome Self-Doubt to Amplify Your Impact and Create a Better World  - GSLA 202
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202Denise Jacobs
 
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...Denise Jacobs
 
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...Denise Jacobs
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...Denise Jacobs
 
Banish Your Inner Critic – Stanford HCI Group 2020
Banish Your Inner Critic – Stanford HCI Group 2020Banish Your Inner Critic – Stanford HCI Group 2020
Banish Your Inner Critic – Stanford HCI Group 2020Denise Jacobs
 
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...Denise Jacobs
 
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020Denise Jacobs
 
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...Denise Jacobs
 
Co-Create: Creating Better Together - Clarity Conference 2019
Co-Create: Creating Better Together - Clarity Conference 2019Co-Create: Creating Better Together - Clarity Conference 2019
Co-Create: Creating Better Together - Clarity Conference 2019Denise Jacobs
 
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019Denise Jacobs
 
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019Denise Jacobs
 
Banish Your Inner Critic: Hack Your Productivity and Elevate Performance
Banish Your Inner Critic: Hack Your Productivity and Elevate PerformanceBanish Your Inner Critic: Hack Your Productivity and Elevate Performance
Banish Your Inner Critic: Hack Your Productivity and Elevate PerformanceDenise Jacobs
 
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018
Banish Your Inner Critic v2.0: Swipe Left!  - Adobe Max 2018Banish Your Inner Critic v2.0: Swipe Left!  - Adobe Max 2018
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018Denise Jacobs
 
The Creativity (R)Evolution – CMX Summit 2018
The Creativity (R)Evolution – CMX Summit 2018The Creativity (R)Evolution – CMX Summit 2018
The Creativity (R)Evolution – CMX Summit 2018Denise Jacobs
 
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018Denise Jacobs
 
Co-Create: Creating Better Together - DevCamp Brazil 2018
Co-Create: Creating Better Together - DevCamp Brazil 2018Co-Create: Creating Better Together - DevCamp Brazil 2018
Co-Create: Creating Better Together - DevCamp Brazil 2018Denise Jacobs
 

More from Denise Jacobs (20)

Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
 
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
 
How to Have Difficult Conversations With Confidence - MTP Digital 2020
How to Have Difficult Conversations With Confidence -  MTP Digital 2020How to Have Difficult Conversations With Confidence -  MTP Digital 2020
How to Have Difficult Conversations With Confidence - MTP Digital 2020
 
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202
Overcome Self-Doubt to Amplify Your Impact and Create a Better World  - GSLA 202Overcome Self-Doubt to Amplify Your Impact and Create a Better World  - GSLA 202
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202
 
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
 
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
 
Banish Your Inner Critic – Stanford HCI Group 2020
Banish Your Inner Critic – Stanford HCI Group 2020Banish Your Inner Critic – Stanford HCI Group 2020
Banish Your Inner Critic – Stanford HCI Group 2020
 
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
 
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
 
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
 
Co-Create: Creating Better Together - Clarity Conference 2019
Co-Create: Creating Better Together - Clarity Conference 2019Co-Create: Creating Better Together - Clarity Conference 2019
Co-Create: Creating Better Together - Clarity Conference 2019
 
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
 
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
 
Banish Your Inner Critic: Hack Your Productivity and Elevate Performance
Banish Your Inner Critic: Hack Your Productivity and Elevate PerformanceBanish Your Inner Critic: Hack Your Productivity and Elevate Performance
Banish Your Inner Critic: Hack Your Productivity and Elevate Performance
 
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018
Banish Your Inner Critic v2.0: Swipe Left!  - Adobe Max 2018Banish Your Inner Critic v2.0: Swipe Left!  - Adobe Max 2018
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018
 
The Creativity (R)Evolution – CMX Summit 2018
The Creativity (R)Evolution – CMX Summit 2018The Creativity (R)Evolution – CMX Summit 2018
The Creativity (R)Evolution – CMX Summit 2018
 
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
 
Co-Create: Creating Better Together - DevCamp Brazil 2018
Co-Create: Creating Better Together - DevCamp Brazil 2018Co-Create: Creating Better Together - DevCamp Brazil 2018
Co-Create: Creating Better Together - DevCamp Brazil 2018
 

Recently uploaded

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 

Recently uploaded (20)

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 

Advanced CSS Troubleshooting

  • 1. Advanced CSS Troubleshooting & Efficiency or How to Become a Super CSS Detective in 4 Easy Steps Denise R. Jacobs The Code Project Boost Virtual Summit May 25, 2011
  • 2. Twitter Mysteries, Solved! Who: @denisejacobs Where: @thecodeproject #CPVTS What: #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 troubleshooting skills are one of your best allies in solving CSS “mysteries”…and they also make you feel practically 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-Optimize 9
  • 11. Foundation 1: Create a Baseline 1. The CSS Reset All-star 2. DIY Resets 3. CSS Reset Compendia 11
  • 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 compatibility 12
  • 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 want 13
  • 14. Resource: Eric Meyer’s Reset Eric Meyer’s Reset: http://meyerweb.com/eric/tools/ css/reset/ 14
  • 15. 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 obvious 15
  • 16. Top Properties to Reset • Margin and padding • Borders, especially on linked images • Link text underlining • Vertical alignment • Font size and line-height 16
  • 17. Resource: DIY Resets Article on DIY resets: http://bit.ly/1D4jSB 17
  • 18. Resource: CSS Reset Compendia Killer Collection of CSS Resets http://tinyurl.com/5bdoj2 More Killer CSS Resets http://tinyurl.com/n746dl 18
  • 20. Why Micro-Optimize? • Cuts down file size • Speeds up page load time • Encourages best practices 20
  • 21. Foundation 2: Micro-Optimize 1. Order: alpha 2. Length: short 3. Speed: fast 21
  • 22. 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. 22
  • 23. 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; } } 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. 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, however 25
  • 26. 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; } 26
  • 27. 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; } 27
  • 28. 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 indenting 28
  • 29. 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; } 29
  • 30. Shorthand: to remember • Default values • Shorthand property syntax • Required property values • Property value order 30
  • 31. Micro-Optimize: Length Less is more: • Use shortest properties and values (shorthand) • Avoid duplicate properties • Condense values and units • Avoid multiple lines and indenting 31
  • 32. 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; } 32
  • 33. Micro-Optimize: Length Less is more: • Use shortest properties and values (shorthand) • Avoid duplicate properties • Condense values and units • Avoid multiple lines and indenting 33
  • 34. 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; } 34
  • 35. Micro-Optimize: Length Less is more: • Use shortest properties and values (shorthand) • Avoid duplicate properties • Condense values and units • Avoid multiple lines and indenting 35
  • 36. Resource: CSS Optimizers http://www.cleancss.com http://www.codebeautifier.com 36
  • 38. 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! 38
  • 39. Foundation 3: Macro-Optimize 1. Practice proper nesting 2. Annotate with comments 3. Reduce, reuse, recycle 39
  • 40. Foundation 3: Macro-Optimize 1. Practice proper nesting 2. Annotate with comments 3. Reduce, reuse, recycle 40
  • 41. 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. 41
  • 42. 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> 42
  • 43. Foundation 3: Macro-Optimize 1. Practice proper nesting 2. Annotate with comments 3. Reduce, reuse, recycle 43
  • 44. 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. 44
  • 45. Macro-optimize: Annotate Your Markup begin with <!-- #id or .class name --> end with <!-- /end #id or .class name --> or, alternatively <!-- / #id or .class name --> 45
  • 46. Macro-optimize: Annotate Your Markup Example: <div id="content"> <div class="promo"> ... </div><!-- /end .promo --> </div><!-- /end #content --> 46
  • 47. 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. 47
  • 48. 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 */ } 48
  • 49. Foundation 3: Macro-Optimize 1. Practice proper nesting 2. Annotate with comments 3. Reduce, reuse, recycle 49
  • 50. Why Reduce, Reuse, & Recycle? • Cuts down file size • Speeds up page load time • Encourages best practices 50
  • 51. Macro-optimize: Reduce • Identify content patterns • Use classes instead of ids & elements • Define defaults 51
  • 52. Macro-optimize: Reduce • Identify content patterns • Use classes instead of ids & elements • Define defaults 52
  • 53. 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> 53
  • 54. Macro-optimize: Reduce • Identify content patterns • Use classes instead of ids & elements • Define defaults 54
  • 55. Define Defaults Not this: But rather this: #maincontent h1 {...} h1, .h1 {...} #maincontent #callout h2, .h2 {...} h2 {...} 55
  • 56. Macro-optimize: Reuse • Leverage the cascade and avoid specificity • Generify your classes 56
  • 57. Leverage the Cascade Not this: Instead this: html body .nav .hd .nav .hd {...} {...} or .headerofheadsectio nofpage {...} 57
  • 58. Macro-optimize: Reuse • Leverage the cascade and avoid specificity • Generify your classes 58
  • 59. Class generi-fication not instead .sidebar {...} .module {...} 59
  • 60. Macro-optimize: Recycle • Combine classes 60
  • 61. 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;} 61
  • 62. 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/ 62
  • 63. 2) Target Your Styles 63 http://www.flickr.com/photos/bhenak/2664680892/
  • 64. Why? Having a plan for targeting elements helps speed and efficiency – in both creating and fixing styles. 64
  • 65. How to Hit the Mark 1. Technique 2. Selective Specificity 3. Advanced Selectors 65
  • 67. My Fave Targeting Technique outline: 1px solid red; Why? • outline does not add to dimensions of the element • Color names used only for troubleshooting 67
  • 68. Resource: the outline property http://reference.sitepoint.com/css/outline/ 68
  • 70. 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. 70
  • 71. A little specificity review 1. Weight rules 2. Specificity best practices 71
  • 72. 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) 72
  • 73. 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 applied 73
  • 75. 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. 75
  • 76. Let’s peek at 1. CSS2 Selectors • browser support 2. CSS3 Selectors • browser support 76
  • 77. 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-child 77
  • 78. 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) 78
  • 79. CSS2 Selector Support 79 http://www.quirksmode.org/compatibility.html
  • 80. 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"] 80
  • 81. 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 • :indeterminate 81
  • 82. CSS3 Selector Support 82 http://www.findmebyip.com/litmus
  • 83. CSS3 Selector Support 83 http://www.standardista.com/css3/css3-selector-browser-support
  • 84. Resources: nth-child testers http://leaverou.me/demos/nth.html http://css-tricks.com/examples/ nth-child-tester/ 84
  • 85. 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 selectors 85
  • 86. Uses for advanced selectors • Great for progressive enhancement • Styling first, last or x-number of elements • Styling generated content 86
  • 87. 3) Squash Browser Bugs 87 http://www.flickr.com/photos/slappytheseal/3687999392/
  • 88. 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. 88
  • 89. 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 bugs 89
  • 91. 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. 91
  • 92. The IE6 Deathwatch 92 ie6countdown.com
  • 93. Approaches for IE6 Options: • Kick it to the curb • Display tolerant indifference • Show some love: be graceful in your degradation 93
  • 94. Kicked: Go home IE6! 94 http://www.flickr.com/photos/robotjohnny/3629069606/
  • 95. Kicked: IE6, get stuffed. 95 http://tumblr.9gag.com/post/285107173
  • 96. Kicked: IE6, I just won’t support you. In modern browsers In IE6 96 paulcarbo.net
  • 97. Tolerance: IE6? Meh. 97 http://www.flickr.com/photos/rickharris/430890004/
  • 98. Tolerance: Serve stripped-down style In modern browsers In IE6 98 makephotoshopfaster.com
  • 99. Resource: Universal IE CSS 99 Universal IE6 stylesheet: http://code.google.com/p/universal-ie6-css/
  • 100. Tolerance: Make a helpful suggestion In modern browsers In IE6 100 http://yaronschoen.com/blog/sudden_metanoia
  • 101. Resource: BrowseSad.com 101 browsesad.com
  • 102. Tolerance: Limit Your Support 102 http://gowalla.com
  • 103. Show an old IE browser some love 103 http://www.flickr.com/photos/brunkfordbraun/391876102/
  • 104. Graceful IE6 Degradation • Serve IE6 targeted properties with conditional comments – display: inline – zoom: 1 • Use the * html hack 104
  • 105. Showin’ love, with grace In modern browsers In IE6 105 aposd.org
  • 107. Other browser hacks There are “hacks” to target styles to specific browsers, other than the IEs if you really want to use them… 107
  • 108. 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.html 108
  • 109. Some IE7 & IE8 Bugs 109
  • 110. 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. 110
  • 111. 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. 111
  • 112. 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); } 112
  • 113. 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? 113
  • 114. 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'); } 114
  • 116. Get Your Webkit Bug On @font-face bold and italics “bug” The problem: Applying font-weight: bold or font-style: italic to @font-face'd text doesn’t work. 116
  • 117. 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. 117
  • 118. @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; } 118
  • 120. 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. 120
  • 121. Firefox? Buggin’. The Outline Overflow Bug A solution: Use border instead and adjust the dimensions of the element. 121
  • 123. An Ode to Opera Bugs Hiding elements bug The problem: When hiding elements offscreen for image replacement, etc. em units are not recognized. 123
  • 124. An Ode to Opera Bugs The solution: Use px instead of em Example: h2 {margin-left: -4999px;} 124
  • 125. 4) Have the Proper Tools 125 http://www.flickr.com/photos/ebarney/3348965637/
  • 126. Tools rock Having a strong arsenal of tools helps with workflow, removes guesswork, and makes life a ton easier. 126
  • 127. Tools: Browser support charts http://www.findmebyip.com/litmus http://www.standardista.com/css3/css3- selector-browser-support 127
  • 128. 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_all 128
  • 129. Tools: Validators HTML: http://validator.w3.org/ CSS: http://jigsaw.w3.org/css-validator/ 129
  • 130. Tools: CSS Redundancy Checkers http://www.sitepoint.com/ dustmeselectors/ (Firefox extension) http://code.google.com/p/ css-redundancy-checker/ 130
  • 131. Tools: CSS Compressors http://www.csscompressor.com http://www.cssdrive.com/index.php /main/csscompressoradvanced/ 131
  • 132. Recap Taking all of these steps: 1. Lay the foundation 2. Target your styles 3. Squash browser bugs 4. Have the proper tools Will yield: 1. Code that is easier to read and find problems in 2. Speed of use and in use 3. Finding solutions faster 132
  • 133. And you’ll become... …one baaad CSS detectin’ mutha! 133
  • 135. Want even more tips? Get the book! The CSS Detective Guide CSSDetectiveGuide.com twitter.com/cssdetective 135
  • 136. Web design, served up holistically InterAct With Web Standards: A Holistic Approach to Web Design InterActWithWebStandards.com twitter.com/waspinteract 136
  • 137. Thank You! denisejacobs.com denise@denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs 137 http://www.flickr.com/photos/aarronwalter/4629076165/
  • 138. “It’s elementary, my dear Watson.” 138

Editor's Notes

  1. Add slide with an example with screenshots. Take from the Dell partners page.
  2. Break this slide into two slides and give examples.
  3. Add slide with screenshots in both browsers – working and not working
  4. Add slide with screenshots in both browsers – working and not working
  5. Add screenshot example slide