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.
CNIC Information System with Pakdata Cf In Pakistan
Advanced CSS Troubleshooting & Efficiency
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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