Advanced CSS Troubleshooting

Advanced CSS Troubleshooting & EfficiencyorHow to Become aSuper CSS Detectivein 4 Easy StepsDenise R. JacobsThe Code ProjectBoost Virtual SummitMay 25, 2011

Twitter Mysteries, Solved!Who: @denisejacobsWhere: @thecodeproject #CPVTSWhat: #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 troubleshootingskills are one of yourbest allies in solving CSS“mysteries”…and theyalso make you feelpractically 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-Optimize9

Create a Baseline10

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

Why Reset? By deliberately establishing an element’s properties, you can: • Better control the elements on the page • More quickly determine the source of problems when they arise • Ensure better cross-browser compatibility12

CSS Reset All-Star: Eric Meyer’s Pro’s – One of the most popular, well thought-out – Neutralizes almost every element Con’s – Can be too far-reaching – Extra work to establish the values for the elements you want13

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 obvious15

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

Resource: DIY Resets Article on DIY resets: http://bit.ly/1D4jSB17

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

Micro-Optimize19

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

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

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, however25

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 indenting28

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 order30

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

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

Resource: CSS Optimizers http://www.cleancss.com http://www.codebeautifier.com36

Macro-Optimize37

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, recycle39

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> <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> </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> </div> <div id="footer"> <p>standard copyright and footer information</p> </div> </div> </body>42

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  end with  or, alternatively 45

Macro-optimize: Annotate Your Markup Example: <div id="content"> <div class="promo"> ... </div> </div>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

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

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

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

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 classes56

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 classes58

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

Macro-optimize: Recycle • Combine classes60

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 Selectors65

Technique66

My Fave Targeting Technique outline: 1px solid red; Why? • outline does not add to dimensions of the element • Color names used only for troubleshooting67

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

Selective Specificity69

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 practices71

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 applied73

Advanced Selectors74

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 support76

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

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 Support79 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 • :indeterminate81

CSS3 Selector Support82 http://www.findmebyip.com/litmus

CSS3 Selector Support83 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 selectors85

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

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 bugs89

Deal with IE690

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 Deathwatch92 ie6countdown.com

Approaches for IE6 Options: • Kick it to the curb • Display tolerant indifference • Show some love: be graceful in your degradation93

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 IE696 paulcarbo.net

Tolerance: IE6? Meh.97 http://www.flickr.com/photos/rickharris/430890004/

Tolerance: Serve stripped-down style In modern browsers In IE698 makephotoshopfaster.com

Resource: Universal IE CSS99 Universal IE6 stylesheet: http://code.google.com/p/universal-ie6-css/

Tolerance: Make a helpful suggestion In modern browsers In IE6100 http://yaronschoen.com/blog/sudden_metanoia

Resource: BrowseSad.com101 browsesad.com

Tolerance: Limit Your Support102 http://gowalla.com

Show an old IE browser some love103 http://www.flickr.com/photos/brunkfordbraun/391876102/

Graceful IE6 Degradation • Serve IE6 targeted properties with conditional comments – display: inline – zoom: 1 • Use the * html hack104

Showin’ love, with grace In modern browsers In IE6105 aposd.org

Targeting Other Browsers106

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

Some IE7 & IE8 Bugs109

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 Bug115

Get Your Webkit Bug On @font-face bold and italics “bug” The problem: Applying font-weight: bold or font-style: italic to @font-faced text doesn’t work.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 Bug119

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 Bug122

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

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_all128

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

RecapTaking all of these steps:1. Lay the foundation2. Target your styles3. Squash browser bugs4. Have the proper toolsWill yield:1. Code that is easier to read and find problems in2. Speed of use and in use3. Finding solutions faster 132

And you’ll become...…one baaad CSSdetectin’ mutha! 133

Resourceshttp://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

Advanced CSS Troubleshooting

by Denise Jacobs on Jun 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Advanced CSS Troubleshooting — Presentation Transcript