Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 479 lines (365 sloc) 14.693 kb
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
1
2 <!doctype html>
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
3 <!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <title>Safe CSS Defaults | Divya Manian</title>
8 <meta name="author" content="Divya Manian">
9
10 <meta name="description" content="You know those nights when you race towards a deadline, banging out the CSS as fast as you can, there comes a moment when you pause…wondering what &hellip;">
11
12
13 <meta name="viewport" content="width=device-width, initial-scale=1">
14
15
16 <link rel="canonical" href="http://nimbupani.github.com/safe-css-defaults.html">
17 <link href="/stylesheets/screen.css" rel="stylesheet">
8f21f85 Site updated at 2011-12-11 02:10:56 UTC
Divya Manian authored
18 <link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
19 <link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
20
21 </head>
22
23
cd5e6a9 Site updated at 2011-12-24 06:16:39 UTC
Divya Manian authored
24 <body >
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
25 <div class="container">
26 <div class="content">
27 <header role="banner"> <h1><a href="/">Divya Manian</a></h1>
28
69c30f5 Site updated at 2011-12-11 14:45:02 UTC
Divya Manian authored
29 <h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
30
31 </header>
9d25e1e Site updated at 2011-12-11 01:21:19 UTC
Divya Manian authored
32 <nav class="sitenav"><a href="/">Home</a>
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
33 <a href="/archives">Archives</a>
34 <a href="/about.html">About</a>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
35 </nav>
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
36
37
38
39
40
41
42
43
44 <article>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
45 <nav class="article">
46
47 <a class="previous" href="/unplugged-2011.html" title="Unplugged 2011">❬</a>
48
49
50 <a class="next" href="/some-css-transition-hacks.html" title="Some CSS Transition hacks">❭</a>
51
52
53
54 </nav>
55 <header>
56
57
58
59
60
61
62
63 <time datetime="2011-04-13T00:00:00-07:00" pubdate><span class='month'>Apr</span> <span class='day'>13</span> <span class='year'>2011</span></time>
64
65 <h1 class="entry-title"><a href="/safe-css-defaults.html">Safe CSS Defaults</a></h1>
66
67
68
69
70 </header>
71 <div class="entry-content"><p>You know those nights when you race towards a deadline, banging out the CSS as fast as you can, there comes a moment when you pause…wondering what keyword would get rid of that z-index on that anchor, then you make the best guess you can, and type:</p>
72
73
74
75
76 <pre><code>z-index: none;</code></pre>
77
78
79
80
81 <p>Then go on in life, as it “renders” like you wanted it, it works, no big deal. </p>
82
83
84
85
86 <p>But it is. Specifying incorrect values might inject behaviour that you did not expect. It is quite possible that the currently incorrect value might be, in the future, used for a valid value which would distort the design you so carefully did (and how often do we revisit a client’s website to update? :).</p>
87
88
89
90
91 <h3>Initial Values</h3>
92
93
94 <p>The spec defines a value that will be the <em>initial</em> value for a property when it is not declared in any stylesheets - either the user agent stylesheet (look at <a href="http://www.iecss.com/">iecss.com</a> for stylesheets of IE, <a href="http://www.iecss.com/opera-10.51.css">Opera</a>, <a href="http://www.iecss.com/firefox-3.6.3.css">Firefox</a>, <a href="http://www.iecss.com/webkit-r61376.css">Webkit</a>) or the ones you write.</p>
95
96
97
98
99 <p>Now, user agents assign values to CSS properties too. For example, when you do not declare margins on <code>h1</code>, the user agents have an initial value for margins. IE sets this to be <code>14pt</code>, Firefox, Opera sets this to <code>0.67em</code>, etc. This is not defined by the specifications and there is no keyword to obtain the values set by user agents.</p>
100
101
102
103
104 <p>Initial values are different from inherited values. All properties accept a keyword <code>inherit</code>. When you use the keyword <code>inherit</code> on a property, the browser applies the value that it finds on its parent element. On <code>html</code> element if you use the value <code>inherit</code>, it applies the initial value. </p>
105
106
107
108
109 <h3>Good News!</h3>
110
111
112 <p><a href="http://leaverou.me">Lea Verou</a> alerted me to the CSS3 keyword <a href="http://www.w3.org/TR/css3-values/#keywords"><code>initial</code> which will set the CSS3 property to the initial value as defined in the spec</a>. Sadly, the only browsers that supports this seems to be <a href="http://jsfiddle.net/nimbu/CgRAZ/10/show/">Firefox</a> (with a <code>-moz-</code> prefix) and Webkit&#8217;s Safari and Chrome (yay!).</p>
113
114
115
116
117 <p>So until full support lands on all browsers for this amazing keyword and we don&#8217;t have to support browsers that do not recognize that keyword, here are some of the ways you can reset some CSS properties to their initial values:</p>
118
119
120
121
122 <table>
123 <thead>
124 <tr>
125 <th>
126 Property
127 </th>
128 <th>
129 Value
130 </th>
131 </tr>
132 </thead>
133 <tbody>
134 <tr>
135 <td>
136 <a href="http://www.w3.org/TR/css3-background/#background">background</a>
137 </td>
138 <td>
139 transparent (<code>transparent</code> stands for <a href="http://www.w3.org/TR/css3-color/#transparent-def">rgba(0, 0, 0, 0)</a>) or <code>none</code> or <code>0 0</code>
140 </td>
141 </tr>
142 <tr>
143 <td>
144 <a href="http://www.w3.org/TR/css3-background/#ltborder-widthgt">border</a>
145 </td>
146 <td>
147 none or 0
148 </td>
149 </tr>
150 <tr>
151 <td>
152 <a href="http://www.w3.org/TR/css3-background/#border-image-source">border-image</a>
153 </td>
154 <td>
155 none
156 </td>
157 </tr>
158 <tr>
159 <td>
160 <a href="http://www.w3.org/TR/css3-background/#the-border-radius">border-radius</a>
161 </td>
162 <td>
163 0
164 </td>
165 </tr>
166 <tr>
167 <td>
168 <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">box-shadow</a>
169 </td>
170 <td>
171 none
172 </td>
173 </tr>
174 <tr>
175 <td>
176 <a href="http://www.w3.org/TR/css3-box/#clear">clear</a>
177 </td>
178 <td>
179 none
180 </td>
181 </tr>
182 <tr>
183 <td>
184 <a href="http://www.w3.org/TR/css3-color/#foreground">color</a>
185 </td>
186 <td>
187 No value, so best option is to use <code>inherit</code> to cascade from a parent element&#8217;s color value.
188 </td>
189 </tr>
190 <tr>
191 <td>
192 <a href="http://www.w3.org/TR/css3-content/#content">content</a>
193 </td>
194 <td>
195 normal
196 </td>
197 </tr>
198 <tr>
199 <td>
200 <a href="http://www.w3.org/TR/css3-box/#display">display</a>
201 </td>
202 <td>
203 inline
204 </td>
205 </tr>
206 <tr>
207 <td>
208 <a href="http://www.w3.org/TR/css3-box/#the-lsquo1">float</a>
209 </td>
210 <td>
211 none
212 </td>
213 </tr>
214 <tr>
215 <td>
216 <a href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324/#descdef-font-style">font</a>
217 </td>
218 <td>
219 normal
220 </td>
221 </tr>
222 <tr>
223 <td>
224 <a href="http://www.w3.org/TR/css3-box/#height">height</a>
225 </td>
226 <td>
227 auto
228 </td>
229 </tr>
230 <tr>
231 <td>
232 <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#letter-spacing0">letter-spacing</a>
233 </td>
234 <td>
235 normal
236 </td>
237 </tr>
238 <tr>
239 <td>
240 <a href="http://www.w3.org/TR/css3-linebox/#InlineBoxHeight">line-height</a>
241 </td>
242 <td>
243 normal
244 </td>
245 </tr>
246 <tr>
247 <td>
248 <a href="http://www.w3.org/TR/css3-box/#max-width">max-width</a>
249 </td>
250 <td>
251 none
252 </td>
253 </tr>
254 <tr>
255 <td>
256 <a href="http://www.w3.org/TR/css3-box/#max-width">max-height</a>
257 </td>
258 <td>
259 none
260 </td>
261 </tr>
262 <tr>
263 <td>
264 <a href="http://www.w3.org/TR/css3-box/#min-height">min-width</a>
265 </td>
266 <td>
267 0
268 </td>
269 </tr>
270 <tr>
271 <td>
272 <a href="http://www.w3.org/TR/css3-box/#min-height">min-height</a>
273 </td>
274 <td>
275 0
276 </td>
277 </tr>
278 <tr>
279 <td>
280 <a href="http://www.w3.org/TR/css3-color/#opacity">opacity</a>
281 </td>
282 <td>
283 1
284 </td>
285 </tr>
286 <tr>
287 <td>
288 <a href="http://www.w3.org/TR/css3-box/#overflow0">overflow</a>
289 </td>
290 <td>
291 visible
292 </td>
293 </tr>
294 <tr>
295 <td>
296 <a href="http://www.w3.org/TR/2006/WD-css3-page-20061010/#page-break-inside">page-break-inside</a>
297 </td>
298 <td>
299 auto
300 </td>
301 </tr>
302 <tr>
303 <td>
304 <a href="http://www.w3.org/TR/CSS2/visuren.html#propdef-position">position</a>
305 </td>
306 <td>
307 static (not <code>relative</code>)
308 </td>
309 </tr>
310 <tr>
311 <td>
312 <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#text-shadow">text-shadow</a>
313 </td>
314 <td>
315 none
316 </td>
317 </tr>
318 <tr>
319 <td>
320 <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#text-transform">text-transform</a>
321 </td>
322 <td>
323 none
324 </td>
325 </tr>
326 <tr>
327 <td>
328 <a href="http://www.w3.org/TR/css3-2d-transforms/#transform-property">transform</a>
329 </td>
330 <td>
331 none
332 </td>
333 </tr>
334 <tr>
335 <td>
336 <a href="http://www.w3.org/TR/css3-transitions/#the-transition-property-property-">transition</a>
337 </td>
338 <td>
339 none
340 </td>
341 </tr>
342 <tr>
343 <td>
344 <a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">vertical-align</a>
345 </td>
346 <td>
347 baseline
348 </td>
349 </tr>
350 <tr>
351 <td>
352 <a href="http://www.w3.org/TR/css3-box/#visibility">visibility</a>
353 </td>
354 <td>
355 visible
356 </td>
357 </tr>
358 <tr>
359 <td>
360 <a href="http://www.w3.org/TR/CSS2/text.html#white-space-prop">white-space</a>
361 </td>
362 <td>
363 normal
364 </td>
365 </tr>
366 <tr>
367 <td>
368 <a href="http://www.w3.org/TR/css3-box/#width">width</a>
369 </td>
370 <td>
371 auto
372 </td>
373 </tr>
374 <tr>
375 <td>
376 <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#word-spacing0">word-spacing</a>
377 </td>
378 <td>
379 normal
380 </td>
381 </tr>
382 <tr>
383 <td>
384 <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">z-index</a>
385 </td>
386 <td>
387 auto (not <code>none</code> or <code>0</code>)
388 </td>
389 </tr>
390 </tbody>
391 </table>
392
393
394 <p><small>Thanks to <a href="http://css-tricks.com">Chris Coyier</a>, <a href="http://www.xanthir.com/blog/">Tab Atkins</a>, <a href="http://leaverou.me">Lea Verou</a>, and <a href="http://nicolasgallagher.com">Nicolas Gallagher</a> for feedback on this post!</small></p>
395
396 </div>
397
398 <footer>
399 <p class="meta">This post was posted by
400
401
402 <a href="/about.html">Divya Manian</a>
403 on
404
405
406
407
408
409
410 <time datetime="2011-04-13T00:00:00-07:00" pubdate><span class='month'>Apr</span> <span class='day'>13</span> <span class='year'>2011</span></time> in
411
412 <span class="categories">
413
414 <a class='category' href='/categories/web-development/'>Web Development</a>
415
416 </span>
417
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
418 . If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2011-04-13-safe-css-defaults.md">please send a pull request</a>.
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
419 </p>
420 </footer>
421 </article>
422
423 <section>
424 <h1>Comments</h1>
425 <div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
426 </div>
427 </section>
428
429
430 </div>
431 </div>
432 <aside id="articles">
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
433 <p><img class="avatar" src="/assets/divya.png" height=50> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
434 <h2>Posts on Web Development</h2>
2cc1469 Site updated at 2012-01-23 12:45:44 UTC
Divya Manian authored
435 <ul><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
436 </aside>
437 <footer role="contentinfo"><p>
3c9d77b Site updated at 2012-01-01 19:06:29 UTC
Divya Manian authored
438 Copy to your heart’s content 2012 - Divya Manian -
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
439 <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
440 </p>
441
442
443 </footer>
444
445
446 <script type="text/javascript">
447 var disqus_shortname = 'nimbublog';
448 var disqus_developer = 1;
449
450
451 var disqus_url = 'http://nimbupani.com/safe-css-defaults.html';
452 var disqus_identifier = 'http://nimbupani.com/safe-css-defaults.html';
453
454
455
456
457 (function () {
458 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
459 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
460 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
461 }());
462 </script>
463
464
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
465 <script src="/javascripts/octopress.js"></script>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
466
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
467 <script>
468 var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
469 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
470 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
471 s.parentNode.insertBefore(g,s)}(document,'script'));
472 </script>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
473
474
475
476
477 </body>
478 </html>
Something went wrong with that request. Please try again.