View
2.146
Download
0
Embed Size (px)
DESCRIPTION
Good CSS troubleshooting skills are important to decrease your workload and help you work better with others. Tips for clean code and targeting, as well as solutions to modern browser bugs are covered.
Citation preview
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
twitter.com/denisejacobs
slideshare.net/denisejacobs
http://www.flickr.com/photos/aarronwalter/4629076165/
138
“It’s elementary, my dear Watson.”