Advanced CSS Troubleshooting

Advanced CSS
Troubleshooting & Efficiency
or
How to Become a
Super CSS Detective
in 4 Easy Steps

Denise R. Jacobs
The Code Project
Boost Virtual Summit
May 25, 2011

Twitter Mysteries, Solved!

Who: @denisejacobs

Where: @thecodeproject #CPVTS

What: #cssts

2

Whodunnit? I did!

CSSDetectiveGuide.com

InterActWithWebStandards.com

3

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

• Can quickly and easily
identify and solve
problems when they
come up

4 http://www.flickr.com/photos/spotrick/4028499019/

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

5

The 4 Easy Steps

1) Lay the 2) Target your
foundation styles

3) Squash
4) Employ
browser
useful tools
bugs
6

1) Lay the Foundation

7 http://www.flickr.com/photos/pgoyette/2280685630/

Why?
A solid CSS foundation of best practices creates
an environment where preventing and detecting
problems is easier.

8

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

9

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

11

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

12

CSS Reset All-Star: Eric Meyer’s
Pro’s
– One of the most popular, well thought-out
– Neutralizes almost every element

Con’s
– Can be too far-reaching
– Extra work to establish the values for the
elements you want

13

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

14

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

15

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

16

Resource: DIY Resets

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

17

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

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

18

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

20

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

21

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

22

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

23

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

24

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

*conflicts with reduce, reuse, & recycle, however

25

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

26

Post-optimization :
#sidebar {
0;
margin: 10px 20px;
padding: .1em;
}

27

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

28

Example:
#sidebar {
background: #fff url(bg.png) repeat-x
0 0;
margin: 10px 20px;
padding: .1em;
}

29

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

30

Micro-Optimize: Length
Less is more:
(shorthand)

31

Example:
#sidebar {
0;
margin: 10px 20px;
padding: .1em;
}

32

Less is more:
(shorthand)

33

Example:
#sidebar {
background: #fff url(bg.png) repeat-x
0 0;
border: 1px solid red;
margin: 10px 20px;
padding: .1em;
}

34

Less is more:
(shorthand)

35

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

http://www.codebeautifier.com

36

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

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

Ergo:
Saves time!

38

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

39


40

Why get your nest in order?
Block-level elements inside inline elements as
well as improper closing and reopening of
elements can create major layout issues.

Validation often won’t help you find the culprit.

41

Macro-optimize: Get your nest in order
<body> <body>
<div id="pagewrap"> <div id="pagewrap">
<div id="header"> <div id="header">
<h1>Website Title</h1> <h1>Website Title</h1>
<ul id="navigation">
<li><a href="#">Home</a></li> <ul id="navigation">
<li><a href="#">About</a></li> <li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li> <li><a href="#">About</a></li>
</ul> <li><a href="#">Contact</a></li>
<div id="contentwrap"> </ul>
<div id="maincontent"> </div>
<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


43

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

CSS:
Helps both you and others know intentions and
specific information.

44

Macro-optimize: Annotate Your Markup
begin with

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


49

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

50

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

51

• Define defaults

52

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

53

• Define defaults

54

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

55

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

56

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

57

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

58

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

59

Macro-optimize: Recycle
• Combine classes

60

Class-combining
html html
<ul id="navmain"> <ul class="nav main">
<li><a <li><a
href="#">Contact</a></li> href="#">Contact</a></li>
</ul> </ul>

<ul id="navfoot"> <ul class="nav foot">
<li><a <li><a
href="#">Contact</a></li> href="#">Contact</a></li>
</ul> </ul>

css css
#navmain { .nav {(other styles);}
(other styles); .main {background-color:
green;}
background-color: green;}
.foot {background-color:
#navfoot { black;}
(other styles);
background-color: black;}

61

Resources: OOCSS
http://www.stubbornella.org/content/2009/02
/28/object-oriented-css-grids-on-github/

https://github.com/stubbornella/oocss

http://www.typesett.com/2010/01/object-
oriented-css-oocss-the-lowdown/

62

2) Target Your Styles

63 http://www.flickr.com/photos/bhenak/2664680892/

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

64

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

65

My Fave Targeting Technique

outline: 1px solid red;

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

67

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

68

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

70

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

71

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

72

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

73

Getting Advanced
Advanced selectors are a good way to
specifically target styles for modern browsers.

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

75

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

2. CSS3 Selectors
• browser support

76

CSS 2.1 Selectors
• Universal * • Pseudo elements
– :before
• Child Combinator – :after
E>F
• State pseudo-classes
• Adjacent/Sibling Combinator – Dynamic
E+F • :hover
• :active
• Attribute E[~attribute] • :focus

• At Rules – Language
– @font-face • :lang
– @media
– @page – Structural
– @charset • :first-child

77

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

78

CSS2 Selector Support

79 http://www.quirksmode.org/compatibility.html

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

• Attribute substrings
– a[attribute^="value"]
– a[attribute$="value"]
– a[attribute*="value"]

80

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

81


82 http://www.findmebyip.com/litmus


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

Resources: nth-child testers
http://leaverou.me/demos/nth.html

http://css-tricks.com/examples/
nth-child-tester/

84

Advanced Selectors: Usage Tips
• All of the CSS2 selectors are supported by the
modern browsers, and almost all of the CSS3 ones
are, so use them!

• It’s easy to target styles away from the IEs, but
target them to the IEs with simpler combinator
selectors

85

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

86

3) Squash Browser Bugs

87 http://www.flickr.com/photos/slappytheseal/3687999392/

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

88

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

89

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

91

The IE6 Deathwatch

92 ie6countdown.com

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

93

Kicked: Go home IE6!

94 http://www.flickr.com/photos/robotjohnny/3629069606/

Kicked: IE6, get stuffed.

95 http://tumblr.9gag.com/post/285107173

Kicked: IE6, I just won’t support you.

In modern browsers In IE6

96 paulcarbo.net

Tolerance: IE6? Meh.

97 http://www.flickr.com/photos/rickharris/430890004/

Tolerance: Serve stripped-down style


98 makephotoshopfaster.com

Resource: Universal IE CSS

99 Universal IE6 stylesheet: http://code.google.com/p/universal-ie6-css/

Tolerance: Make a helpful suggestion


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

Resource: BrowseSad.com

101 browsesad.com

Tolerance: Limit Your Support

102 http://gowalla.com

Show an old IE browser some love

103 http://www.flickr.com/photos/brunkfordbraun/391876102/

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

104

Showin’ love, with grace


105 aposd.org

Targeting Other Browsers

106

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

107

Resource: Hacks for Other Browsers
http://paulirish.com/2009/
browser-specific-css-hacks/

http://htmlcsstutorials.blogspot.com/2009/06/
web-browser-hacks-css-hacks-ie-firefox.html

108

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

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

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

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

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

116

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

117

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

118

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 Ode to Opera Bugs
Hiding elements bug

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

123

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

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

124

4) Have the Proper Tools

125 http://www.flickr.com/photos/ebarney/3348965637/

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

126

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

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

127

Tools: CSS Specifications
The CSS3 Specifications are THE resource
for finding out the exact intended
behavior and use of any given property.

http://www.w3.org/standards/
techs/css#w3c_all

128

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

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

129

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

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

130

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

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

131

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

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

And you’ll become...

…one baaad CSS
detectin’ mutha!
133

Resources

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

134

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

135

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

InterActWithWebStandards.com
twitter.com/waspinteract

136

Thank You!

denisejacobs.com

denise@denisejacobs.com

twitter.com/denisejacobs

slideshare.net/denisejacobs

137 http://www.flickr.com/photos/aarronwalter/4629076165/

“It’s elementary, my dear Watson.”

138

Advanced CSS Troubleshooting

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Advanced CSS Troubleshooting (20)

More from Denise Jacobs (20)

Recently uploaded (20)

Advanced CSS Troubleshooting

Editor's Notes