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

1. Advanced CSS
Troubleshooting & Efficiency
or
How to Become a
Super CSS Detective
in 4 Easy Steps
Denise R. Jacobs
The Code Project
Rich Web Experience 2011
2 December 2011

2. Twitter Mysteries, Solved!
Who: @denisejacobs
Where: #rwx2011 @NoFluff
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

10. Create a Baseline
10

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. Resource: HTML5 Reset
http://html5doctor.com/html-5-reset-
stylesheet/
15

16. DIY Resets
• You can determine exactly which elements
you want to reset
• May save on reestablishing properties
• You know exactly what is changed and why
you changed it
• Problems will be that much more obvious
16

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

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

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

20. Micro-Optimize
20

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

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

23. Micro-optimize: Alphabetize
Putting your CSS declarations in alphabetical
order is a great way to set the stage for clean
code and fewer problems. Why? Because your
style declarations will be that much easier to
target and locate.
23

24. Find “width” - which is easier?
Example One: Example Two:
.login { .login {
margin-top: 5px; border-left: 1px
line-height: 1.5em; solid #69824d;
padding-left: 5px; float: right;
float: right; font-weight: bold;
list-style-type: line-height: 1.5em;
none; list-style-type:
width: 80px; none;
font-weight: bold; margin-top: 5px;
border-left: 1px padding-left: 5px;
solid #69824d; width: 80px;
} }
24

25. Find “width” - which is easier?
Example One: Example Two:
.login { .login {
margin-top: 5px; border-left: 1px
line-height: 1.5em; solid #69824d;
padding-left: 5px; float: right;
float: right; font-weight: bold;
list-style-type: line-height: 1.5em;
none; list-style-type:
width: 80px; none;
font-weight: bold; margin-top: 5px;
border-left: 1px padding-left: 5px;
solid #69824d; width: 80px;
} }
25

26. Micro-optimize: Speed
Up the efficiency:
• ID selectors are speedier than element or
universal*
• Drop element qualifiers
• Ditch descendent selectors when and where
you can
*conflicts with reduce, reuse, & recycle, however
26

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

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

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

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

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

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
32

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

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

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

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

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

38. Macro-Optimize
38

39. Why Macro-Optimize?
Solo:
Helps you remember your intentions when you come
back to your code.
With others:
Helps your colleagues understand your intentions when
working with your code.
Ergo:
Saves time!
39

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

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

42. Why get your nest in order?
Block-level elements inside inline elements as
well as improper closing and reopening of
elements can create major layout issues.
Validation often won’t help you find the culprit.
42

43. Macro-optimize: Get your nest in order
<body> <body>
<div id="pagewrap"> <div id="pagewrap">
<div id="header"> <div id="header">
<h1>Website Title</h1> <h1>Website Title</h1>
<ul id="navigation">
<li><a href="#">Home</a></li> <ul id="navigation">
<li><a href="#">About</a></li> <li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li> <li><a href="#">About</a></li>
</ul> <li><a href="#">Contact</a></li>
<div id="contentwrap"> </ul>
<div id="maincontent"> </div><!-- end #header -->
<h2>Main Content Title</h2>
<p>Main content, which is so much more important than the secondary <div id="contentwrap">
content that it makes one teary with emotion.</p> <div id="maincontent">
</div> <h2>Main Content Title</h2>
<div id="secondarycontent"> <p>Main content, which is so much more important than
<h3>Sidebar Title</h3> the secondary content that it makes one teary with
<p>Sidebar content, which is not as important as the primary content emotion.</p>
(which is why it is in the sidebar)</p> </div><!-- end #maincontent -->
</div>
<div id="footer"> <div id="secondarycontent">
<p>standard copyright and footer information</p> <h3>Sidebar Title</h3>
</div> <p>Sidebar content, which is not as important as the
</body> primary content (which is why it is in the sidebar)</p>
</div><!-- end #secondarycontent -->
</div><!-- end #cotentwrap -->
<div id="footer">
<p>standard copyright and footer information</p>
</div><!-- end #footer -->
</div><!-- end #pagewrap -->
</body>
43

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

45. Why Annotate Your Code?
Markup:
Helps you keep track of the element beginning
and end, and helps you identify the pieces faster.
CSS:
Helps both you and others know intentions and
specific information.
45

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

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

48. Macro-optimize: Annotate Your CSS
/* Comments are good, mmkay? */
Notation is your friend. For:
• Overriding styles
• Creating stylesheet sections
• Listing the color scheme
• Resources and contact info.
48

49. Macro-optimize: Annotate Your CSS
/* made by you on some date */
/* section of the stylesheet */
p {
border-color: #cf0;
border-color-bottom: #ccc;
/*this property overrides the previous
one */
}
49

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

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

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

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

54. Classes, not IDs
<ul id="navmain"> <ul class="nav">
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="#">About</a></li> <li><a href="#">About</a></li>
<li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li>
</ul>
</ul>
54

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

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

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

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

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

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

61. Macro-optimize: Recycle
• Combine classes
61

62. Class-combining
html html
<ul id="navmain"> <ul class="nav main">
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="#">About</a></li> <li><a href="#">About</a></li>
<li><a <li><a
href="#">Contact</a></li> href="#">Contact</a></li>
</ul> </ul>
<ul id="navfoot"> <ul class="nav foot">
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="#">About</a></li> <li><a href="#">About</a></li>
<li><a <li><a
href="#">Contact</a></li> href="#">Contact</a></li>
</ul> </ul>
css css
#navmain { .nav {(other styles);}
(other styles); .main {background-color:
green;}
background-color: green;}
.foot {background-color:
#navfoot { black;}
(other styles);
background-color: black;}
62

63. Resources: OOCSS
http://www.stubbornella.org/content/2009/02
/28/object-oriented-css-grids-on-github/
https://github.com/stubbornella/oocss
http://www.typesett.com/2010/01/object-
oriented-css-oocss-the-lowdown/
63

64. 2) Target Your Styles
64 http://www.flickr.com/photos/bhenak/2664680892/

65. Why?
Having a plan for targeting elements helps speed
and efficiency – in both creating and fixing styles.
65

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

67. Technique
67

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

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

70. Indent trial changes
http://coding.smashingmagazine.com/200
8/05/02/improving-code-readability-
with-css-styleguides/
70

71. Selective Specificity
71

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

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

74. Super-Simplified Specificity
The more specific the selector is, the higher the
specificity
#id: can only be one on the page
= high specificity (100)
.class: can be multiple, but not everywhere
= medium specificity (10)
element: lots on the page
= low specificity (1)
* : everything on the page
= no specificity (0)
74

75. Specificity Best Practices
• Don’t rely too heavily on specificity – leverage as
many reusable selectors as possible
• Use the cascade and source order so that you
don’t have to get too specific
• Trust specificity over source order in terms of
which style will win and get applied
75

76. Advanced Selectors
76

77. Getting Advanced
Advanced selectors are a good way to
specifically target styles for modern browsers.
The right selector will help you achieve targeting
nirvana, so it’s important to know which
selectors you can use now.
77

78. Let’s peek at
1. CSS2 Selectors
• browser support
2. CSS3 Selectors
• browser support
78

79. CSS 2.1 Selectors
• Universal * • Pseudo elements
– :before
• Child Combinator – :after
E>F
• State pseudo-classes
• Adjacent/Sibling Combinator – Dynamic
E+F • :hover
• :active
• Attribute E[~attribute] • :focus
• At Rules – Language
– @font-face • :lang
– @media
– @page – Structural
– @charset • :first-child
79

80. CSS2.1 Selectors & IE Support
• Universal * (ie7/8 – yes)
• Child: e > f (ie7/8 – yes)
• Sibling/Adjacent: e + f (ie7 no, ie8 – yes)
• Attribute: e[attribute] (ie7/8 – yes)
• Pseudo elements (ie7/8 – no)
– ::before
– ::after
• State pseudo-classes, v2.1
– :first-child (ie7/8 – yes)
– :hover (ie7/8 – yes)
– :active (ie7/8 – yes)
– :focus (ie7/8 – no)
– :lang (ie7/8 – no)
80

81. CSS2 Selector Support
81 http://www.quirksmode.org/compatibility.html

82. CSS3 Selectors
• General sibling • Pseudo-elements*
E~F
*all pseudo-elements indicated with
:: in CSS3
• Attribute presence
– a[attribute="value"]
– a[attribute~="value"]
– a[attribute|="value"]
• Attribute substrings
– a[attribute^="value"]
– a[attribute$="value"]
– a[attribute*="value"]
82

83. CSS3 Selectors (cont’d)
• Pseudo-classes – Structural
– Target • :nth-child(n)
• :nth-last-child(n)
• :target
• :nth-of-type(n)
• :nth-last-of-type(n)
– Negation
• :last-child
• :not(s)
• :first-of-type
• :last-of-type
– State • :only-child
• :enabled • :only-of-type
• :disabled • :empty
• :checked
• :indeterminate
83

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

85. CSS3 Selector Support
85 http://www.standardista.com/css3/css3-selector-browser-support

86. Resources: nth-child testers
http://leaverou.me/demos/nth.html
http://css-tricks.com/examples/
nth-child-tester/
86

87. Advanced Selectors: Usage Tips
• All of the CSS2 selectors are supported by the
modern browsers, and almost all of the CSS3 ones
are, so use them!
• It’s easy to target styles away from the IEs, but
target them to the IEs with simpler combinator
selectors
87

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

89. 3) Squash Browser Bugs
89 http://www.flickr.com/photos/slappytheseal/3687999392/

90. Gettin’ Buggy With It
Despite your best efforts towards clean,
efficient, optimized code, browsers will always
have issues that throw a wrench in the works.
90

91. Achieving Cross-browser Compatibility
1. Decide on your approach to deal with IE6
2. Target other browsers
3. Know IE 7 & IE 8 bugs
4. Know Firefox bugs
5. Know Webkit bugs
6. Know Opera bugs
91

92. Deal with IE6
92

93. Dealing with IE6 (Still? Yes, still.)
Whether it’s by force or by choice, you need to
know how you are going to deal with IE6 until it’s
completely gone.
93

94. The IE6 Deathwatch
94 ie6countdown.com

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

96. Kicked: Go home IE6!
96 http://www.flickr.com/photos/robotjohnny/3629069606/

97. Kicked: IE6, get stuffed.
97 http://tumblr.9gag.com/post/285107173

98. Kicked: IE6, I just won’t support you.
In modern browsers In IE6
98 paulcarbo.net

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

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

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

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

103. Resource: BrowseSad.com
103 browsesad.com

104. Tolerance: Limit Your Support
104 http://gowalla.com

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

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

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

108. Admit it, you like the challenge
108 http://desandro.com/articles/i-like-ie6-because/

109. Targeting Other Browsers
109

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

111. Resource: Hacks for Other Browsers
http://paulirish.com/2009/
browser-specific-css-hacks/
http://htmlcsstutorials.blogspot.com/2009/06/
web-browser-hacks-css-hacks-ie-firefox.html
111

112. Some IE7 & IE8 Bugs
112

113. IE7 is color buggin’
color and background-color with rgba
The problem:
An rgba color is correctly set to override the rgb
for the IEs , but the rgb color doesn’t show up at
all.
113

114. IE7 is color buggin’
The solution:
Use the shorthand property background
instead of background-color
OR
Use a hexidecimal color instead of rgb, and then
continue the override with rgba.
114

115. IE7 is color buggin’
Example:
div {
background: rgb(200, 54, 54);
/* fallback color */
background: rgba(200, 54, 54, 0.5);
}
OR
div {
background-color: #fd7e7e;
background-color: rgba(255,0,0,0.5);
}
115

116. IE7 & IE8 are both font buggin’
@font-face super bullet-proofing
The problem:
@font-face doesn’t work, even with the proper
normal syntax. What gives?
116

117. Solution: IE7 & IE8 font issues
Example:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix‘)
format('embedded-opentype'),
url('myfont-webfont.woff')
format('woff'),
url('myfont-
webfont.ttf')format('truetype'),
url('myfont-webfont.svg#svgFontName')
format('svg');
}
117

118. A Webkit Bug
118

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

120. Get Your Webkit Bug On
The solution:
Add the value normal to font weight, style,
and variant in the @font-face declaration to set
a baseline.
120

121. @font-face + faux variations
Example:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix‘)
format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-
webfont.ttf')format('truetype'),
url('myfont-webfont.svg#svgFontName')
format('svg');
font-weight:normal;
font-style:normal;
font-variant:normal;
}
121

122. A Firefox Bug
122

123. Firefox? Buggin’.
The Outline Overflow Bug
The problem:
Firefox will draw an outline around the content
of an element that has overflowed its boundaries
rather than around the element’s actual set
dimensions.
123

124. Firefox? Buggin’.
The Outline Overflow Bug
A solution:
Use border instead and adjust the dimensions of
the element.
124

125. An Opera Bug
125

126. An Ode to Opera Bugs
Hiding elements bug
The problem:
When hiding elements offscreen for image
replacement, etc. em units are not recognized.
126

127. An Ode to Opera Bugs
The solution:
Use px instead of em
Example:
h2 {margin-left: -4999px;}
127

128. 4) Have the Proper Tools
128 http://www.flickr.com/photos/ebarney/3348965637/

129. Tools rock
Having a strong arsenal of tools helps with
workflow, removes guesswork, and makes
life a ton easier.
129

130. Tools: Browser support charts
http://www.findmebyip.com/litmus
http://www.standardista.com/css3/css3-
selector-browser-support
130

131. Tools: CSS Specifications
The CSS3 Specifications are THE resource
for finding out the exact intended
behavior and use of any given property.
http://www.w3.org/standards/
techs/css#w3c_all
131

132. Tools: Validators
HTML:
http://validator.w3.org/
CSS:
http://jigsaw.w3.org/css-validator/
132

133. Tools: CSS Redundancy Checkers
http://www.sitepoint.com/
dustmeselectors/
(Firefox extension)
http://code.google.com/p/
css-redundancy-checker/
133

134. Tools: CSS Compressors
http://www.csscompressor.com
http://www.cssdrive.com/index.php
/main/csscompressoradvanced/
134

135. HTML5 Boilerplate
http://html5boilerplate.com
135

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

137. And you’ll become...
…one baaad CSS
detectin’ mutha!
137

138. Resources
http://delicious.com/denisejacobs/
csstroubleshooting/
138

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

140. Web design, served up holistically
InterAct With
Web Standards:
A Holistic Approach to
Web Design
InterActWithWebStandards.com
twitter.com/waspinteract
140

141. Thank You!
denisejacobs.com
denise@denisejacobs.com
twitter.com/denisejacobs
slideshare.net/denisejacobs
141 http://www.flickr.com/photos/aarronwalter/4629076165/

142. “It’s elementary, my dear Watson.”
142