Advanced CSS Troubleshooting

orHow to Become a Super CSS Detective in 4 Easy Steps

Denise R. JacobsThe Code Project

Boost Virtual SummitMay 25, 2011

Advanced CSS Advanced CSS Troubleshooting & EfficiencyTroubleshooting & Efficiency

2

Twitter Mysteries, Solved!

Who: @denisejacobs

Where: @thecodeproject #CPVTS

What: #cssts

3

Whodunnit? I did!

CSSDetectiveGuide.com

InterActWithWebStandards.com

4

CSS De-what?

• Preventive/defensive coding

– Focused & efficient

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

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.

6

The 4 Easy Steps

1) Lay the foundation

2) Target your styles

3) Squash browser bugs

4) Employ useful tools

7

Lay the Foundation1)

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.

9

The Foundations1. Set a Baseline

2. Micro-Optimize

3. Macro-Optimize

10

Create a Baseline

11

Foundation 1: Create a Baseline1. The CSS Reset All-star

2. DIY Resets

3. CSS Reset Compendia

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

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

14

Resource: Eric Meyer’s ResetEric Meyer’s Reset:

http://meyerweb.com/eric/tools/css/reset/

15

DIY Resets• You can determine exactly which elements

you want to reset

• May save on reestablishing properties

• You know exactly what is changed and why you changed it

• Problems will be that much more obvious

16

Top Properties to Reset• Margin and padding

• Borders, especially on linked images

• Link text underlining

• Vertical alignment

• Font size and line-height

17

Resource: DIY Resets

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

18

Resource: CSS Reset Compendia

Killer Collection of CSS Resets

http://tinyurl.com/5bdoj2

More Killer CSS Resets

http://tinyurl.com/n746dl

19

Micro-Optimize

20

Why Micro-Optimize?• Cuts down file size

• Speeds up page load time

• Encourages best practices

21

Foundation 2: Micro-Optimize1. Order: alpha

2. Length: short

3. Speed: fast

22

Micro-optimize: Alphabetize

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

23

Find “width” - which is easier?Example One:.login {margin-top: 5px;line-height: 1.5em;padding-left: 5px;float: right;list-style-type: none;

width: 80px;font-weight: bold;border-left: 1px solid #69824d;

}

Example Two:.login {border-left: 1px solid #69824d;

float: right;font-weight: bold;line-height: 1.5em;list-style-type: none;

margin-top: 5px;padding-left: 5px;width: 80px;}

24

Find “width” - which is easier?Example One:.login {margin-top: 5px;line-height: 1.5em;padding-left: 5px;float: right;list-style-type: none;

width: 80px;font-weight: bold;border-left: 1px solid #69824d;

}

Example Two:.login {border-left: 1px solid #69824d;

float: right;font-weight: bold;line-height: 1.5em;list-style-type: none;

margin-top: 5px;padding-left: 5px;width: 80px;}

25

Micro-optimize: SpeedUp 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

Micro-Optimization in ActionPre-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

Micro-Optimization in ActionPost-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

Micro-Optimize Your CSS: LengthLess is more:

• Use shortest properties and values (shorthand)

• Avoid duplicate properties

• Condense values and units

• Avoid multiple lines and indenting

29

Micro-Optimization in ActionExample:#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

Shorthand: to remember• Default values

• Shorthand property syntax

• Required property values

• Property value order

31

Micro-Optimize: LengthLess is more:

• Use shortest properties and values (shorthand)

• Avoid duplicate properties

• Condense values and units

• Avoid multiple lines and indenting

32

Micro-Optimization in ActionExample:#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

Micro-Optimize: LengthLess is more:

• Use shortest properties and values (shorthand)

• Avoid duplicate properties

• Condense values and units

• Avoid multiple lines and indenting

34

Micro-Optimization in ActionExample:#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

Micro-Optimize: LengthLess is more:

• Use shortest properties and values (shorthand)

• Avoid duplicate properties

• Condense values and units

• Avoid multiple lines and indenting

36

Resource: CSS Optimizers

http://www.cleancss.com

http://www.codebeautifier.com

37

Macro-Optimize

38

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

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

Ergo:Saves time!

39

Foundation 3: Macro-Optimize1. Practice proper nesting

2. Annotate with comments

3. Reduce, reuse, recycle

40

Foundation 3: Macro-Optimize1. Practice proper nesting

2. Annotate with comments

3. Reduce, reuse, recycle

41

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

Validation often won’t help you find the culprit.

42

Macro-optimize: Get your nest in order<body><div id="pagewrap"><div id="header"><h1>Website Title</h1><ul id="navigation"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul><div id="contentwrap"><div id="maincontent"><h2>Main Content Title</h2><p>Main content, which is so much more important than the secondary

content that it makes one teary with emotion.</p></div><div id="secondarycontent"><h3>Sidebar Title</h3><p>Sidebar content, which is not as important as the primary content

(which is why it is in the sidebar)</p></div><div id="footer"><p>standard copyright and footer information</p></div></body>

<body><div id="pagewrap">

<div id="header"><h1>Website Title</h1>

<ul id="navigation"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul>

</div><!-- end #header -->

<div id="contentwrap"><div id="maincontent"><h2>Main Content Title</h2><p>Main content, which is so much more important than

the secondary content that it makes one teary with emotion.</p>

</div><!-- end #maincontent -->

<div id="secondarycontent"><h3>Sidebar Title</h3><p>Sidebar content, which is not as important as the

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

Foundation 3: Macro-Optimize1. Practice proper nesting

2. Annotate with comments

3. Reduce, reuse, recycle

44

Why Annotate Your Code?Markup:

Helps you keep track of the element beginning and end, and helps you identify the pieces faster.

CSS:

Helps both you and others know intentions and specific information.

45

Macro-optimize: Annotate Your Markup

begin with <!-- #id or .class name -->

end with <!-- /end #id or .class name -->or, alternatively

<!-- / #id or .class name -->

46

Macro-optimize: Annotate Your Markup

Example:<div id="content"><div class="promo">...</div><!-- /end .promo -->

</div><!-- /end #content -->

47

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

Notation is your friend. For:

• Overriding styles

• Creating stylesheet sections

• Listing the color scheme

• Resources and contact info.

48

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

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

}

49

Foundation 3: Macro-Optimize1. Practice proper nesting

2. Annotate with comments

3. Reduce, reuse, recycle

50

Why Reduce, Reuse, & Recycle?• Cuts down file size

• Speeds up page load time

• Encourages best practices

51

Macro-optimize: Reduce• Identify content patterns

• Use classes instead of ids & elements

• Define defaults

52

Macro-optimize: Reduce• Identify content patterns

• Use classes instead of ids & elements

• Define defaults

53

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

</ul>

<ul class="nav"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul>

54

Macro-optimize: Reduce• Identify content patterns

• Use classes instead of ids & elements

• Define defaults

55

Define DefaultsNot this:#maincontent h1 {...}#maincontent #callout

h2 {...}

But rather this:h1, .h1 {...}h2, .h2 {...}

56

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

• Generify your classes

57

Leverage the CascadeNot this:html body .nav .hd{...}

or .headerofheadsectionofpage {...}

Instead this:.nav .hd {...}

58

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

• Generify your classes

59

Class generi-ficationnot.sidebar {...}

instead.module {...}

60

Macro-optimize: Recycle• Combine classes

61

Class-combininghtml<ul id="navmain"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a

href="#">Contact</a></li></ul>

<ul id="navfoot"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a

href="#">Contact</a></li></ul>

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

html<ul class="nav main"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a

href="#">Contact</a></li></ul>

<ul class="nav foot"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a

href="#">Contact</a></li></ul>

css.nav {(other styles);}.main {background-color:

green;}.foot {background-color:

black;}

62

Resources: OOCSShttp://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

Target Your Styles2)

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

64

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

65

How to Hit the Mark1. Technique

2. Selective Specificity

3. Advanced Selectors

66

Technique

67

My Fave Targeting Technique

outline: 1px solid red;

Why?• outline does not add to dimensions of the

element

• Color names used only for troubleshooting

68

Resource: the outline property

http://reference.sitepoint.com/css/outline/

69

Selective Specificity

70

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

71

A little specificity review1. Weight rules

2. Specificity best practices

72

Super-Simplified SpecificityThe 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)

73

Specificity Best Practices• Don’t rely too heavily on specificity – leverage as

many reusable selectors as possible

• Use the cascade and source order so that you don’t have to get too specific

• Trust specificity over source order in terms of which style will win and get applied

74

Advanced Selectors

75

Getting AdvancedAdvanced 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.

76

Let’s peek at1. CSS2 Selectors

• browser support

2. CSS3 Selectors • browser support

77

CSS 2.1 Selectors• Universal *

• Child CombinatorE > F

• Adjacent/Sibling CombinatorE + F

• Attribute E[~attribute]

• At Rules– @font-face– @media– @page– @charset

• Pseudo elements– :before– :after

• State pseudo-classes– Dynamic

• :hover• :active• :focus

– Language• :lang

– Structural• :first-child

78

CSS2.1 Selectors & IE Support• Universal * (ie7/8 – yes)• Child: e > f (ie7/8 – yes)• Sibling/Adjacent: e + f (ie7 no, ie8 – yes)• Attribute: e[attribute] (ie7/8 – yes)• Pseudo elements (ie7/8 – no)

– ::before– ::after

• State pseudo-classes, v2.1– :first-child (ie7/8 – yes)– :hover (ie7/8 – yes)– :active (ie7/8 – yes)– :focus (ie7/8 – no)– :lang (ie7/8 – no)

79

CSS2 Selector Support

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

80

CSS3 Selectors• General sibling

E ~ F

• Attribute presence– a[attribute="value"]

– a[attribute~="value"]

– a[attribute|="value"]

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

– a[attribute$="value"]

– a[attribute*="value"]

• Pseudo-elements*

*all pseudo-elements indicated with :: in CSS3

81

CSS3 Selectors (cont’d)• Pseudo-classes

– Target• :target

– Negation• :not(s)

– State• :enabled

• :disabled

• :checked

• :indeterminate

– Structural• :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

82

CSS3 Selector Support

http://www.findmebyip.com/litmus

83

CSS3 Selector Support

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

84

Resources: nth-child testers

http://leaverou.me/demos/nth.html

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

85

Advanced Selectors: Usage Tips• All of the CSS2 selectors are supported by the

modern browsers, and almost all of the CSS3 ones are, so use them!

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

86

Uses for advanced selectors• Great for progressive enhancement

• Styling first, last or x-number of elements

• Styling generated content

87

Squash Browser Bugs3)

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

88

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

89

Achieving Cross-browser Compatibility

1. Decide on your approach to deal with IE6

2. Target other browsers

3. Know IE 7 & IE 8 bugs

4. Know Firefox bugs

5. Know Webkit bugs

6. Know Opera bugs

90

Deal with IE6

91

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

92

The IE6 Deathwatch

ie6countdown.com

93

Approaches for IE6Options:

• Kick it to the curb

• Display tolerant indifference

• Show some love: be graceful in your degradation

94

Kicked: Go home IE6!

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

95

Kicked: IE6, get stuffed.

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

96

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

In IE6In modern browsers

paulcarbo.net

97

Tolerance: IE6? Meh.

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

98

Tolerance: Serve stripped-down style

makephotoshopfaster.com

In IE6In modern browsers

99

Resource: Universal IE CSS

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

100

Tolerance: Make a helpful suggestion

http://yaronschoen.com/blog/sudden_metanoia

In IE6In modern browsers

101

Resource: BrowseSad.com

browsesad.com

102

Tolerance: Limit Your Support

http://gowalla.com

103

Show an old IE browser some love

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

104

Graceful IE6 Degradation• Serve IE6 targeted properties with conditional

comments– display: inline– zoom: 1

• Use the * html hack

105

Showin’ love, with grace

aposd.org

In IE6In modern browsers

106

Targeting Other Browsers

107

Other browser hacksThere are “hacks” to target styles to specific browsers,

other than the IEs if you really want to use them…

108

Resource: Hacks for Other Browsershttp://paulirish.com/2009/

browser-specific-css-hacks/

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

109

Some IE7 & IE8 Bugs

110

IE7 is color buggin’color and background-color with rgba

The problem:

An rgba color is correctly set to override the rgbfor the IEs , but the rgb color doesn’t show up at all.

111

IE7 is color buggin’The solution:Use the shorthand property backgroundinstead of background-color

OR

Use a hexidecimal color instead of rgb, and then continue the override with rgba.

112

IE7 is color buggin’Example:div {

background: rgb(200, 54, 54); /* fallback color */

background: rgba(200, 54, 54, 0.5);}OR

div {background-color: #fd7e7e;background-color: rgba(255,0,0,0.5);

}

113

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

The problem:

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

114

Solution: IE7 & IE8 font issuesExample:@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');}

115

A Webkit Bug

116

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

The problem:

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

117

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

118

@font-face + faux variationsExample:@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;}

119

A Firefox Bug

120

Firefox? Buggin’.The Outline Overflow Bug

The problem:

Firefox will draw an outline around the content of an element that has overflowed its boundaries rather than around the element’s actual set dimensions.

121

Firefox? Buggin’.The Outline Overflow Bug

A solution:

Use border instead and adjust the dimensions of the element.

122

An Opera Bug

123

An Ode to Opera BugsHiding elements bug

The problem:

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

124

An Ode to Opera BugsThe solution:Use px instead of em

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

125

Have the Proper Tools4)

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

126

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

127

Tools: Browser support charts

http://www.findmebyip.com/litmus

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

128

Tools: CSS SpecificationsThe 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

129

Tools: ValidatorsHTML:

http://validator.w3.org/

CSS:

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

130

Tools: CSS Redundancy Checkershttp://www.sitepoint.com/

dustmeselectors/

(Firefox extension)

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

131

Tools: CSS Compressorshttp://www.csscompressor.com

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

132

RecapTaking 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

133

And you’ll become...

…one baaad CSS detectin’ mutha!

134

Resources

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

135

The CSS Detective Guide

CSSDetectiveGuide.comtwitter.com/cssdetective

Want even more tips? Get the book!

136

InterAct With Web Standards:A Holistic Approach to Web Design

InterActWithWebStandards.comtwitter.com/waspinteract

Web design, served up holistically

137

Thank You!

denisejacobs.com

denise@denisejacobs.com

twitter.com/denisejacobs

slideshare.net/denisejacobs

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

138

“It’s elementary, my dear Watson.”