SlideShare a Scribd company logo
1 of 77
Download to read offline
Advanced CSS
Troubleshooting
                    or
  How to become a
Super CSS Detective
     in 4 Easy Steps



       Denise R. Jacobs
      CSS Summit 2010
Who, Me?



              CSSDetectiveGuide.com




           InterActWithWebStandards.com

 2
CSS De-what?
• Preventive/defensive
  coding
  – Focused & efficient


• Can quickly and
  easily solve
  problems when they
  come up

 3
I can haz trubbleshootin?
Strong
troubleshooting
skills are one of
your best allies in
solving CSS
“mysteries”…and
they also make you
feel like a badass.


 4
The 4 Easy Steps
1)   Lay the foundation
2)   Target your styles
3)   Squash browser bugs
4)   Clear float issues




 5
1)   Lay the Foundation




 6                 http://www.flickr.com/photos/pgoyette/2280685630/
Why?
    A solid CSS foundation creates an
    environment where preventing and
    detecting problems is easier.




7
How to lay it down
    1) Annotate & Optimize
      •   Markup
      •   CSS


    2) (Re)Set the Mood
      •   CSS reset review
      •   DIY



8
Annotate Your Markup
    begin with
    <!-- #id or .class name -->
    end with
    <!-- /end #id or .class name -->
    or, alternatively
    <!-- / #id or .class name -->




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




10
Why Annotate Your Markup?
     Helps you keep track of the element
     beginning and end, and helps you
     identify the pieces faster.




11
Annotate Your CSS: Macro-Optimize
     /* Comments are good, mmkay? */


     Notation is your friend. For:
     • Overriding styles
     • Creating stylesheet sections
     • Listing the color scheme
     • Resources and contact info.


12
Annotate Your CSS: Macro-Optimize
     /* made by you
        on some date */

     /* section of the stylesheet */
     p {
     border-color: #cf0;
     border-color-bottom: #ccc;
       /*this property overrides the
       previous one */
     }

13
Why Macro-Optimize?
     Solo:
     Helps you remember your intentions with
     extra properties when you come back to
     your code.

     With Folks:
     Helps your colleagues understand your
     intentions when working with your code.

     Ergo:
     Saves time!


14
Micro-Optimize Your CSS: Length
     Less is more:
     • Use shortest properties and values
     • Avoid duplicate properties
     • Use shorthand properties
     • Condense values and units
     • Avoid multiple lines and indenting




15
Micro-optimize Your CSS: Speed
     Up the efficiency:
     • ID selectors are speedier than
       element or universal
     • Drop element qualifiers
     • Ditch descendent selectors when
       and where you can




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




17
Micro-Optimization in Action
     Example:
     #sidebar {
     background: #fff url(bg.png)
       repeat-x 0 0;
     font: normal 1.33em/1.33 Georgia,
       serif;
     border: 1px solid red;
     margin: 10px 20px;
     padding: .1em;
     }

18
Reasons to 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




19
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


20                            http://meyerweb.com/eric/tools/css/reset/
Make Your Own Reset
     Why DIY?
     • 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

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




22
2)    Target Your Styles




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




24
How to Hit the Mark
     1) Technique
     2) Specificity
     3) Advanced Selectors




25
One Targeting Technique
     My favorite:
     outline: 1px solid red;


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

26
Specificity Rules!
     Using specificity, you can create selectors
     that will zero right in on your desired
     element(s), but you’ve got to do it by the
     rules.

     A little review:
     1. Weight rules
     2. Specificity tips and guidelines



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


28
Some Specificity Guidelines
     •   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




29
Targeting with Advanced Selectors
     The right selector will help you achieve
     targeting nirvana, so it’s important to
     know which selectors you can use
     now.

     Let’s peek at:
     • CSS2 Selectors
     • CSS3 Selectors
     • Their browser support

30
Advanced CSS2 Selectors
     •   Universal                  (ie7/8 – yes)
     •   Child                      (ie7/8 – yes)
     •   Sibling/Adjacent           (ie7 no, ie8 – yes)
     •   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)



31
CSS2 Selector Support




32                     http://www.quirksmode.org/compatibility.html
Advanced CSS3 Selectors
     • General sibling
     • Attribute substrings
     • State pseudo-classes, v3.0
       –:enabled
       –:disabled
       –:checked
       –:selection
     • Target pseudo-classes
     • Negation pseudo-class

33
Advanced CSS3 Selectors, contd.
     • Structural pseudo classes
        – :root
        – :nth-child(n)
        – :nth-last-child(n)
        – :nth-of-type(n)
        – :nth-last-of-type(n)
        – :last-child
        – :first-of-type
        – :last-of-type
        – :only-child
        – :only-of-type
        – :empty


34
CSS3 Selector Support




35                       http://www.findmebyip.com/litmus
Advanced Selectors: Some 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
     • There are “hacks” to target styles to
       specific browsers, other than the IEs


36
3)    Squash Browser Bugs




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

     Approaches:
     • Kick it to the curb
     • Display tolerant indifference
     • Show some love: be graceful in your
     degradation

38
IE6: Go home!




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




40                       http://tumblr.9gag.com/post/285107173
IE6? I just won’t support that.




41
IE6? Meh.




42               http://www.flickr.com/photos/untitled13/83391194/
Serve Up Some Stripped-Down Style
     Universal IE6
       stylesheet
     (philosophy)
     (example)




                 Universal IE6 stylesheet: http://code.google.com/p/universal-ie6-css/
43                                                              http://browsesad.com
Limit Your Support




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




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




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

     The Line-up:
     1) IE7 & IE8
     2) Firefox
     3) The Webkits
     4) Opera


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



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



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


50
IE7 & IE8 are both buggin’
     @font-face super bullet-proofing

     The problem:
     @font-face doesn’t work, even with the
     proper normal syntax. What gives?




51
@font-face bullet-proofing, #1
     @font-face {
     font-family: 'Graublau Web';
     src: url('GraublauWeb.eot');
     src: local('☺'),
       url('GraublauWeb.woff')
       format('woff'),
       url('GraublauWeb.ttf')
       format('truetype');
     }



52
@font-face bullet-proofing, #2
     @font-face {
     font-family: 'Graublau Web';
     src: url('GraublauWeb.eot');
     }

     @font-face {
     font-family: 'Graublau Web';
     src: local('☺'), url('GraublauWeb.woff')
       format('woff'), url('GraublauWeb.ttf')
       format('truetype');
     }



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




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




55
Get your @font-face + faux variations
     Example:
     @font-face {
     font-family: 'Graublau Web';
     src: url('GraublauWeb.eot');
     src: local('☺'), url('GraublauWeb.woff')
       format('woff'), url('GraublauWeb.ttf')
       format('truetype');
     font-weight:normal;
     font-style:normal;
     font-variant:normal;
     }


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


57
Firefox? Buggin’.
     The Outline Overflow Bug

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




58
An Ode to Opera Bugs
     Hiding elements bug

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




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

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




60
4)    Clear Float Issues




 61                  http://www.flickr.com/photos/elisfanclub/1132147711/
Clear Float Issues
     1) Problems with overflow: hidden
     2) Problems with Clearfix
     3) Solutions and Alternatives




62
Floats: overflow: hidden Issues
     Although this is almost everyone’s favorite
     float-clearing technique, there can be
     problems with:
     • Hiding content with no scrollbars when
     browser window is smaller than container
     • Interference with margins, borders,
     outlines, and absolutely-positioned PNGs
     • Application of CSS3 properties, such as
     box-shadow, text-shadow & transform


63
overflow: hidden Issues
     Example:
     div.container {
     border: 1px solid #000000;
     overflow: hidden;
     }




64
overflow: hidden Alternative

     Example:
     div.container {
     border: 1px solid #000000;
     overflow: auto;
         /* hidden & scroll also work*/
     width: 100%;
         /* some width or height required */
     }



65
Clearfix Issues
     Be aware of support:
     • Neither IE6 nor IE7 support the :after pseudo-
       class

     Be mindful of the generated content:
     • Sometimes the generated period can be a
       problem

     Remember where to put it:
     • Apply .clearfix to the element containing the
       floats, so that the cleared content is generated
       after it


66
The Top Clearfix
     Example:
     .clearfix:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
          }
     .clearfix { display: inline-block; }
     /* ie for mac hack removed for readability */


67
Clearing Floats Alternatives
     FnE still a viable option:
     • Contains and clears

     Potential issue:
     • Watch for how it affects the rest of
       the page layout and structure




68
Future Hope For Page Layouts
     CSS3 and HTML5 FTW!
     • CSS3: flexible box-model, columns
     and box-sizing
     • HTML5: <head>,<section>, and
     <footer>




69
Recap
Taking all of these steps:
1. Lay the foundation
2. Target your styles
3. Squash browser bugs
4. Clear float issues

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




…one baaad CSS
detectin’ mutha!
 71
Questions?...Answers?




 72                     http://www.flickr.com/photos/
Resources



http://delicious.com/denisejacobs/
  CSSsummit2010/




 73                       http://www.flickr.com/photos/aarronwalter/4629076165/
Shameless Self-Promotion #1

                   The CSS
                   Detective Guide
                   CSSDetectiveGuide.com
                   twitter.com/cssdetective

                   Get 35% off at
                   PeachPit.com with the
                   discount code
                   “DETECTIVE”


 74
Shameless Self-Promotion #2

                   InterAct With
                   Web Standards:
                   A Holistic Approach
                   to Web Design
                   InterActWithWebStandards.com
                   twitter.com/waspinteract

                   Get 35% off at PeachPit.com
                   with the discount code
                   “INTERACT”


 75
Thank You!

denisejacobs.com

denise@denisejacobs.com

twitter.com/denisejacobs

slideshare.net/denisejacobs




 76                           http://www.flickr.com/photos/aarronwalter/4629076165/
And that’s a wrap!




 77

More Related Content

What's hot

Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSLi-Wei Lu
 
Quality Development with CSS3
Quality Development with CSS3Quality Development with CSS3
Quality Development with CSS3Shay Howe
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
Web design training , Web Design Training In Kolkata
Web design training , Web Design Training In KolkataWeb design training , Web Design Training In Kolkata
Web design training , Web Design Training In KolkataW3webschool
 
Best SEO Training Institute in North Delhi
Best SEO Training Institute in North DelhiBest SEO Training Institute in North Delhi
Best SEO Training Institute in North DelhiJessica Smith
 
Css week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandourCss week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandourOsama Ghandour Geris
 
Starting WordPress Theme Review
Starting WordPress Theme ReviewStarting WordPress Theme Review
Starting WordPress Theme ReviewCatch Themes
 
Css week11 2020 2021 for g10 by eng.osama ghandour
Css week11 2020 2021 for g10 by eng.osama ghandourCss week11 2020 2021 for g10 by eng.osama ghandour
Css week11 2020 2021 for g10 by eng.osama ghandourOsama Ghandour Geris
 
New design patterns
New design patternsNew design patterns
New design patternsmekirby
 

What's hot (12)

Css 3
Css 3Css 3
Css 3
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
 
Quality Development with CSS3
Quality Development with CSS3Quality Development with CSS3
Quality Development with CSS3
 
Css
CssCss
Css
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Web design training , Web Design Training In Kolkata
Web design training , Web Design Training In KolkataWeb design training , Web Design Training In Kolkata
Web design training , Web Design Training In Kolkata
 
CSS
CSSCSS
CSS
 
Best SEO Training Institute in North Delhi
Best SEO Training Institute in North DelhiBest SEO Training Institute in North Delhi
Best SEO Training Institute in North Delhi
 
Css week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandourCss week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandour
 
Starting WordPress Theme Review
Starting WordPress Theme ReviewStarting WordPress Theme Review
Starting WordPress Theme Review
 
Css week11 2020 2021 for g10 by eng.osama ghandour
Css week11 2020 2021 for g10 by eng.osama ghandourCss week11 2020 2021 for g10 by eng.osama ghandour
Css week11 2020 2021 for g10 by eng.osama ghandour
 
New design patterns
New design patternsNew design patterns
New design patterns
 

Viewers also liked

Milieuproblematiek
MilieuproblematiekMilieuproblematiek
Milieuproblematieks0203506
 
10 Course Outline Final Student
10 Course Outline Final Student10 Course Outline Final Student
10 Course Outline Final Studentcysps08
 
Infinite Possibilities - Giant Conference 2015
Infinite Possibilities - Giant Conference 2015Infinite Possibilities - Giant Conference 2015
Infinite Possibilities - Giant Conference 2015Denise Jacobs
 
University Slideshow
University SlideshowUniversity Slideshow
University Slideshowguestca3ad7
 
Technology And Education
Technology And EducationTechnology And Education
Technology And Educationcoppusc
 
CARLOS POLO
CARLOS POLOCARLOS POLO
CARLOS POLOlavelada
 
Webquest
WebquestWebquest
Webquesttrevas
 
Hop on for a quick tour of the streets of Australia
Hop on for a quick tour of the streets of AustraliaHop on for a quick tour of the streets of Australia
Hop on for a quick tour of the streets of AustraliaAdam Coutts
 
matter states
matter statesmatter states
matter statesmatter
 
Thing Tutorial
Thing TutorialThing Tutorial
Thing TutorialWarren60
 
Creativity (R)Evolution - ThatConference 2013
Creativity (R)Evolution - ThatConference 2013Creativity (R)Evolution - ThatConference 2013
Creativity (R)Evolution - ThatConference 2013Denise Jacobs
 
Presentacion Mikelgarrido
Presentacion MikelgarridoPresentacion Mikelgarrido
Presentacion Mikelgarridolavelada
 
Web 2.0 for Foundations, Higher Ed, and Non-profits - TODCon 2008
Web 2.0 for Foundations, Higher Ed, and Non-profits - TODCon 2008Web 2.0 for Foundations, Higher Ed, and Non-profits - TODCon 2008
Web 2.0 for Foundations, Higher Ed, and Non-profits - TODCon 2008Denise Jacobs
 
Castanyada08
Castanyada08Castanyada08
Castanyada08rachely
 
Dare to dream – small
Dare to dream – smallDare to dream – small
Dare to dream – smallAbeezar Tyebji
 
White Space Creativity
White Space CreativityWhite Space Creativity
White Space CreativityDenise Jacobs
 
The Creativity (R)Evolution - Future of Web Design NYC 2014
The Creativity (R)Evolution - Future of Web Design NYC 2014The Creativity (R)Evolution - Future of Web Design NYC 2014
The Creativity (R)Evolution - Future of Web Design NYC 2014Denise Jacobs
 
IÑAKI VAZQUEZ
IÑAKI VAZQUEZIÑAKI VAZQUEZ
IÑAKI VAZQUEZlavelada
 
It's Business Time: Givin' User Experience Love with CSS3
It's Business Time: Givin' User Experience Love with CSS3It's Business Time: Givin' User Experience Love with CSS3
It's Business Time: Givin' User Experience Love with CSS3Denise Jacobs
 

Viewers also liked (20)

Milieuproblematiek
MilieuproblematiekMilieuproblematiek
Milieuproblematiek
 
10 Course Outline Final Student
10 Course Outline Final Student10 Course Outline Final Student
10 Course Outline Final Student
 
Infinite Possibilities - Giant Conference 2015
Infinite Possibilities - Giant Conference 2015Infinite Possibilities - Giant Conference 2015
Infinite Possibilities - Giant Conference 2015
 
1st Fam Gath
1st Fam Gath1st Fam Gath
1st Fam Gath
 
University Slideshow
University SlideshowUniversity Slideshow
University Slideshow
 
Technology And Education
Technology And EducationTechnology And Education
Technology And Education
 
CARLOS POLO
CARLOS POLOCARLOS POLO
CARLOS POLO
 
Webquest
WebquestWebquest
Webquest
 
Hop on for a quick tour of the streets of Australia
Hop on for a quick tour of the streets of AustraliaHop on for a quick tour of the streets of Australia
Hop on for a quick tour of the streets of Australia
 
matter states
matter statesmatter states
matter states
 
Thing Tutorial
Thing TutorialThing Tutorial
Thing Tutorial
 
Creativity (R)Evolution - ThatConference 2013
Creativity (R)Evolution - ThatConference 2013Creativity (R)Evolution - ThatConference 2013
Creativity (R)Evolution - ThatConference 2013
 
Presentacion Mikelgarrido
Presentacion MikelgarridoPresentacion Mikelgarrido
Presentacion Mikelgarrido
 
Web 2.0 for Foundations, Higher Ed, and Non-profits - TODCon 2008
Web 2.0 for Foundations, Higher Ed, and Non-profits - TODCon 2008Web 2.0 for Foundations, Higher Ed, and Non-profits - TODCon 2008
Web 2.0 for Foundations, Higher Ed, and Non-profits - TODCon 2008
 
Castanyada08
Castanyada08Castanyada08
Castanyada08
 
Dare to dream – small
Dare to dream – smallDare to dream – small
Dare to dream – small
 
White Space Creativity
White Space CreativityWhite Space Creativity
White Space Creativity
 
The Creativity (R)Evolution - Future of Web Design NYC 2014
The Creativity (R)Evolution - Future of Web Design NYC 2014The Creativity (R)Evolution - Future of Web Design NYC 2014
The Creativity (R)Evolution - Future of Web Design NYC 2014
 
IÑAKI VAZQUEZ
IÑAKI VAZQUEZIÑAKI VAZQUEZ
IÑAKI VAZQUEZ
 
It's Business Time: Givin' User Experience Love with CSS3
It's Business Time: Givin' User Experience Love with CSS3It's Business Time: Givin' User Experience Love with CSS3
It's Business Time: Givin' User Experience Love with CSS3
 

Similar to Advanced CSS Troubleshooting

Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3Denise Jacobs
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and ReadyDenise Jacobs
 
CSS workshop @ OutSystems
CSS workshop @ OutSystemsCSS workshop @ OutSystems
CSS workshop @ OutSystemsRuben Goncalves
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Mediacurrent
 
Html and CSS 101 - hipages Group Friday talk
Html and CSS 101 - hipages Group Friday talkHtml and CSS 101 - hipages Group Friday talk
Html and CSS 101 - hipages Group Friday talkhipages
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSZoe Gillenwater
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyDenise Jacobs
 
Sitting in the Driver's Seat
Sitting in the Driver's SeatSitting in the Driver's Seat
Sitting in the Driver's SeatJack Moffett
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)Chris Mills
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Adrian Roselli
 
How to Use Selenium, Successfully
How to Use Selenium, SuccessfullyHow to Use Selenium, Successfully
How to Use Selenium, SuccessfullySauce Labs
 
Polyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better AgilityPolyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better Agilityelliando dias
 
What is the next step for a front end beginner
What is the next step for a front end beginnerWhat is the next step for a front end beginner
What is the next step for a front end beginnerHsuan Fu Lien
 

Similar to Advanced CSS Troubleshooting (20)

Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
 
CSS workshop @ OutSystems
CSS workshop @ OutSystemsCSS workshop @ OutSystems
CSS workshop @ OutSystems
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
 
Html and CSS 101 - hipages Group Friday talk
Html and CSS 101 - hipages Group Friday talkHtml and CSS 101 - hipages Group Friday talk
Html and CSS 101 - hipages Group Friday talk
 
Dangerous CSS
Dangerous CSSDangerous CSS
Dangerous CSS
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
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 CSS
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
 
Sitting in the Driver's Seat
Sitting in the Driver's SeatSitting in the Driver's Seat
Sitting in the Driver's Seat
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
 
Http _css-tricks
Http  _css-tricksHttp  _css-tricks
Http _css-tricks
 
Component-first Applications
Component-first ApplicationsComponent-first Applications
Component-first Applications
 
How to Use Selenium, Successfully
How to Use Selenium, SuccessfullyHow to Use Selenium, Successfully
How to Use Selenium, Successfully
 
Polyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better AgilityPolyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better Agility
 
Psd 2 Drupal
Psd 2 DrupalPsd 2 Drupal
Psd 2 Drupal
 
What is the next step for a front end beginner
What is the next step for a front end beginnerWhat is the next step for a front end beginner
What is the next step for a front end beginner
 

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

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
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
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
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
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
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
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
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
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
 
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
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
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
 

Recently uploaded (20)

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
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
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...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
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
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
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
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
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
 
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
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 

Advanced CSS Troubleshooting

  • 1. Advanced CSS Troubleshooting or How to become a Super CSS Detective in 4 Easy Steps Denise R. Jacobs CSS Summit 2010
  • 2. Who, Me? CSSDetectiveGuide.com InterActWithWebStandards.com 2
  • 3. CSS De-what? • Preventive/defensive coding – Focused & efficient • Can quickly and easily solve problems when they come up 3
  • 4. I can haz trubbleshootin? Strong troubleshooting skills are one of your best allies in solving CSS “mysteries”…and they also make you feel like a badass. 4
  • 5. The 4 Easy Steps 1) Lay the foundation 2) Target your styles 3) Squash browser bugs 4) Clear float issues 5
  • 6. 1) Lay the Foundation 6 http://www.flickr.com/photos/pgoyette/2280685630/
  • 7. Why? A solid CSS foundation creates an environment where preventing and detecting problems is easier. 7
  • 8. How to lay it down 1) Annotate & Optimize • Markup • CSS 2) (Re)Set the Mood • CSS reset review • DIY 8
  • 9. Annotate Your Markup begin with <!-- #id or .class name --> end with <!-- /end #id or .class name --> or, alternatively <!-- / #id or .class name --> 9
  • 10. Annotate Your Markup Example: <div id="content"> <div class="promo"> ... </div><!-- /end .promo --> </div><!-- /end #content --> 10
  • 11. Why Annotate Your Markup? Helps you keep track of the element beginning and end, and helps you identify the pieces faster. 11
  • 12. Annotate Your CSS: Macro-Optimize /* Comments are good, mmkay? */ Notation is your friend. For: • Overriding styles • Creating stylesheet sections • Listing the color scheme • Resources and contact info. 12
  • 13. Annotate Your CSS: Macro-Optimize /* made by you on some date */ /* section of the stylesheet */ p { border-color: #cf0; border-color-bottom: #ccc; /*this property overrides the previous one */ } 13
  • 14. Why Macro-Optimize? Solo: Helps you remember your intentions with extra properties when you come back to your code. With Folks: Helps your colleagues understand your intentions when working with your code. Ergo: Saves time! 14
  • 15. Micro-Optimize Your CSS: Length Less is more: • Use shortest properties and values • Avoid duplicate properties • Use shorthand properties • Condense values and units • Avoid multiple lines and indenting 15
  • 16. Micro-optimize Your CSS: Speed Up the efficiency: • ID selectors are speedier than element or universal • Drop element qualifiers • Ditch descendent selectors when and where you can 16
  • 17. Why Micro-Optimize? • Cuts down file size • Speeds up page load time • Encourages best practices 17
  • 18. Micro-Optimization in Action Example: #sidebar { background: #fff url(bg.png) repeat-x 0 0; font: normal 1.33em/1.33 Georgia, serif; border: 1px solid red; margin: 10px 20px; padding: .1em; } 18
  • 19. Reasons to 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 19
  • 20. 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 20 http://meyerweb.com/eric/tools/css/reset/
  • 21. Make Your Own Reset Why DIY? • 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 21
  • 22. Top Properties to Reset • Margin and padding • Borders, especially on linked images • Link text underlining • Vertical alignment • Font size and line-height 22
  • 23. 2) Target Your Styles 23 http://www.flickr.com/photos/blip/139087426/
  • 24. Why? Having a plan for targeting elements helps speed and efficiency – in both creating and fixing styles. 24
  • 25. How to Hit the Mark 1) Technique 2) Specificity 3) Advanced Selectors 25
  • 26. One Targeting Technique My favorite: outline: 1px solid red; Why? • outline does not add to dimensions of the element • Color names used only for troubleshooting 26
  • 27. Specificity Rules! Using specificity, you can create selectors that will zero right in on your desired element(s), but you’ve got to do it by the rules. A little review: 1. Weight rules 2. Specificity tips and guidelines 27
  • 28. 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) 28
  • 29. Some Specificity Guidelines • 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 29
  • 30. Targeting with Advanced Selectors The right selector will help you achieve targeting nirvana, so it’s important to know which selectors you can use now. Let’s peek at: • CSS2 Selectors • CSS3 Selectors • Their browser support 30
  • 31. Advanced CSS2 Selectors • Universal (ie7/8 – yes) • Child (ie7/8 – yes) • Sibling/Adjacent (ie7 no, ie8 – yes) • 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) 31
  • 32. CSS2 Selector Support 32 http://www.quirksmode.org/compatibility.html
  • 33. Advanced CSS3 Selectors • General sibling • Attribute substrings • State pseudo-classes, v3.0 –:enabled –:disabled –:checked –:selection • Target pseudo-classes • Negation pseudo-class 33
  • 34. Advanced CSS3 Selectors, contd. • Structural pseudo classes – :root – :nth-child(n) – :nth-last-child(n) – :nth-of-type(n) – :nth-last-of-type(n) – :last-child – :first-of-type – :last-of-type – :only-child – :only-of-type – :empty 34
  • 35. CSS3 Selector Support 35 http://www.findmebyip.com/litmus
  • 36. Advanced Selectors: Some 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 • There are “hacks” to target styles to specific browsers, other than the IEs 36
  • 37. 3) Squash Browser Bugs 37 http://www.flickr.com/photos/slappytheseal/3687999392/
  • 38. 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. Approaches: • Kick it to the curb • Display tolerant indifference • Show some love: be graceful in your degradation 38
  • 39. IE6: Go home! 39 http://www.flickr.com/photos/robotjohnny/3629069606/
  • 40. IE6, get stuffed. 40 http://tumblr.9gag.com/post/285107173
  • 41. IE6? I just won’t support that. 41
  • 42. IE6? Meh. 42 http://www.flickr.com/photos/untitled13/83391194/
  • 43. Serve Up Some Stripped-Down Style Universal IE6 stylesheet (philosophy) (example) Universal IE6 stylesheet: http://code.google.com/p/universal-ie6-css/ 43 http://browsesad.com
  • 44. Limit Your Support 44 http://gowalla.com
  • 45. Show an old IE browser some love 45 http://www.flickr.com/photos/brunkfordbraun/391876102/
  • 46. Graceful IE6 Degradation • Serve IE6 targeted properties served by conditional comments – display: inline – zoom: 1 • Use the * html hack 46
  • 47. 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. The Line-up: 1) IE7 & IE8 2) Firefox 3) The Webkits 4) Opera 47
  • 48. 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. 48
  • 49. 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. 49
  • 50. 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); } 50
  • 51. IE7 & IE8 are both buggin’ @font-face super bullet-proofing The problem: @font-face doesn’t work, even with the proper normal syntax. What gives? 51
  • 52. @font-face bullet-proofing, #1 @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); } 52
  • 53. @font-face bullet-proofing, #2 @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); } @font-face { font-family: 'Graublau Web'; src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); } 53
  • 54. 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. 54
  • 55. 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. 55
  • 56. Get your @font-face + faux variations Example: @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); font-weight:normal; font-style:normal; font-variant:normal; } 56
  • 57. 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. 57
  • 58. Firefox? Buggin’. The Outline Overflow Bug A solution: Use border instead and adjust the dimensions of the element. 58
  • 59. An Ode to Opera Bugs Hiding elements bug The problem: When hiding elements offscreen for image replacement, etc. em units are not recognized. 59
  • 60. An Ode to Opera Bugs The solution: Use px instead of em Example: h2 {margin-left: -4999px ;} 60
  • 61. 4) Clear Float Issues 61 http://www.flickr.com/photos/elisfanclub/1132147711/
  • 62. Clear Float Issues 1) Problems with overflow: hidden 2) Problems with Clearfix 3) Solutions and Alternatives 62
  • 63. Floats: overflow: hidden Issues Although this is almost everyone’s favorite float-clearing technique, there can be problems with: • Hiding content with no scrollbars when browser window is smaller than container • Interference with margins, borders, outlines, and absolutely-positioned PNGs • Application of CSS3 properties, such as box-shadow, text-shadow & transform 63
  • 64. overflow: hidden Issues Example: div.container { border: 1px solid #000000; overflow: hidden; } 64
  • 65. overflow: hidden Alternative Example: div.container { border: 1px solid #000000; overflow: auto; /* hidden & scroll also work*/ width: 100%; /* some width or height required */ } 65
  • 66. Clearfix Issues Be aware of support: • Neither IE6 nor IE7 support the :after pseudo- class Be mindful of the generated content: • Sometimes the generated period can be a problem Remember where to put it: • Apply .clearfix to the element containing the floats, so that the cleared content is generated after it 66
  • 67. The Top Clearfix Example: .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* ie for mac hack removed for readability */ 67
  • 68. Clearing Floats Alternatives FnE still a viable option: • Contains and clears Potential issue: • Watch for how it affects the rest of the page layout and structure 68
  • 69. Future Hope For Page Layouts CSS3 and HTML5 FTW! • CSS3: flexible box-model, columns and box-sizing • HTML5: <head>,<section>, and <footer> 69
  • 70. Recap Taking all of these steps: 1. Lay the foundation 2. Target your styles 3. Squash browser bugs 4. Clear float issues Will yield: 1. Code that is easier to read and find problems in 2. Speed of use and in use 3. Finding solutions faster 70
  • 71. And you’ll become… …one baaad CSS detectin’ mutha! 71
  • 72. Questions?...Answers? 72 http://www.flickr.com/photos/
  • 73. Resources http://delicious.com/denisejacobs/ CSSsummit2010/ 73 http://www.flickr.com/photos/aarronwalter/4629076165/
  • 74. Shameless Self-Promotion #1 The CSS Detective Guide CSSDetectiveGuide.com twitter.com/cssdetective Get 35% off at PeachPit.com with the discount code “DETECTIVE” 74
  • 75. Shameless Self-Promotion #2 InterAct With Web Standards: A Holistic Approach to Web Design InterActWithWebStandards.com twitter.com/waspinteract Get 35% off at PeachPit.com with the discount code “INTERACT” 75
  • 77. And that’s a wrap! 77