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.
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Advanced CSS Troubleshooting
1. 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
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
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. 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
16. Top Properties to Reset
• Margin and padding
• Borders, especially on linked images
• Link text underlining
• Vertical alignment
• Font size and line-height
16
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.
22
25. 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
28. 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
30. Shorthand: to remember
• Default values
• Shorthand property syntax
• Required property values
• Property value order
30
31. Micro-Optimize: Length
Less is more:
• Use shortest properties and values
(shorthand)
• Avoid duplicate properties
• Condense values and units
• Avoid multiple lines and indenting
31
33. Micro-Optimize: Length
Less is more:
• Use shortest properties and values
(shorthand)
• Avoid duplicate properties
• Condense values and units
• Avoid multiple lines and indenting
33
35. Micro-Optimize: Length
Less is more:
• Use shortest properties and values
(shorthand)
• Avoid duplicate properties
• Condense values and units
• Avoid multiple lines and indenting
35
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!
38
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.
41
42. 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>
42
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.
44
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 -->
45
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.
47
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 */
}
48
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
67
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.
70
72. 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
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
73
75. 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
76. Let’s peek at
1. CSS2 Selectors
• browser support
2. CSS3 Selectors
• browser support
76
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 combinator
selectors
85
86. Uses for advanced selectors
• Great for progressive enhancement
• Styling first, last or x-number of elements
• Styling generated content
86
88. 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
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
89
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.
91
110. 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
111. 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
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);
}
112
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?
113
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.
116
117. 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
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.
120
121. Firefox? Buggin’.
The Outline Overflow Bug
A solution:
Use border instead and adjust the dimensions of
the element.
121
123. An Ode to Opera Bugs
Hiding elements bug
The problem:
When hiding elements offscreen for image
replacement, etc. em units are not recognized.
123
124. An Ode to Opera Bugs
The solution:
Use px instead of em
Example:
h2 {margin-left: -4999px;}
124
125. 4) Have the Proper Tools
125 http://www.flickr.com/photos/ebarney/3348965637/
126. Tools rock
Having a strong arsenal of tools helps with
workflow, removes guesswork, and makes
life a ton easier.
126
127. Tools: Browser support charts
http://www.findmebyip.com/litmus
http://www.standardista.com/css3/css3-
selector-browser-support
127
128. 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
132. 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
135. Want even more tips? Get the book!
The CSS Detective
Guide
CSSDetectiveGuide.com
twitter.com/cssdetective
135
136. Web design, served up holistically
InterAct With
Web Standards:
A Holistic Approach to
Web Design
InterActWithWebStandards.com
twitter.com/waspinteract
136