Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 481 lines (366 sloc) 15.072 kb
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
1
2 <!doctype html>
3 <!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
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">
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">
20
21 </head>
22
23
24 <body >
25 <div class="container">
26 <div class="content">
27 <header role="banner"> <h1><a href="/">Divya Manian</a></h1>
28
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>
30
31 </header>
32 <nav class="sitenav"><a href="/">Home</a>
33 <a href="/archives">Archives</a>
34 <a href="/about.html">About</a>
a4c458e Divya Manian Site updated at 2013-05-10 20:53:38 UTC
authored
35 </nav>
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
36
37
38
39
40
41
42
43
44 <article>
45 <nav class="article">
46
47 <a class="previous" href="/unplugged-2011.html" title="Unplugged 2011">&#x276C;</a>
48
49
50 <a class="next" href="/some-css-transition-hacks.html" title="Some CSS Transition hacks">&#x276D;</a>
51
52
53
54 </nav>
55 <header>
56
57
58
59
60
61
62
5310a1e Divya Manian Site updated at 2013-12-12 13:59:18 UTC
authored
63 <time datetime="2011-04-13T00:00:00+05:30" pubdate><span class='month'>Apr</span> <span class='day'>13</span> <span class='year'>2011</span></time>
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
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><em>Update:</em> <a href="http://the-echoplex.net">Pete</a> links to this <a href="https://github.com/peteboere/css-crush/blob/master/misc/initial-values.ini">list of initial values</a> he has compiled.</p>
395
396 <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>
397
398 </div>
399
400 <footer>
401 <p class="meta">This post was posted by
402
403
404 <a href="/about.html">Divya Manian</a>
405 on
406
407
408
409
410
411
5310a1e Divya Manian Site updated at 2013-12-12 13:59:18 UTC
authored
412 <time datetime="2011-04-13T00:00:00+05:30" pubdate><span class='month'>Apr</span> <span class='day'>13</span> <span class='year'>2011</span></time> in
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
413
414 <span class="categories">
415
416 <a class='category' href='/categories/web-development/'>Web Development</a>
417
418 </span>
419
420 . 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>.
421 </p>
422 </footer>
423 </article>
424
425 <section>
426 <h1>Comments</h1>
427 <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>
428 </div>
429 </section>
430
a4c458e Divya Manian Site updated at 2013-05-10 20:53:38 UTC
authored
431
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
432 </div>
433 </div>
434 <aside id="articles">
5310a1e Divya Manian Site updated at 2013-12-12 13:59:18 UTC
authored
435 <p><img class="avatar" src="http://a2.twimg.com/profile_images/1696865113/me_normal" height=48> <a href="http://twitter.com/divya">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
436 <h2>Posts on Web Development</h2>
a4c458e Divya Manian Site updated at 2013-05-10 20:53:38 UTC
authored
437 <ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><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 class="btn" href="/categories/web-development/">More</a></li></ul>
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
438 </aside>
439 <footer role="contentinfo"><p>
6c3ac34 Divya Manian Site updated at 2013-05-10 00:34:01 UTC
authored
440 Copy to your heart’s content 2013 - Divya Manian -
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
441 <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
442 </p>
443
444
445 </footer>
446
447
448 <script type="text/javascript">
449 var disqus_shortname = 'nimbublog';
450 var disqus_developer = 1;
451
452
453 var disqus_url = 'http://nimbupani.com/safe-css-defaults.html';
454 var disqus_identifier = 'http://nimbupani.com/safe-css-defaults.html';
455
456
457
458
459 (function () {
460 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
461 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
462 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
463 }());
464 </script>
465
466
467 <script src="/javascripts/octopress.js"></script>
468
469 <script>
470 var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
471 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
472 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
473 s.parentNode.insertBefore(g,s)}(document,'script'));
474 </script>
475
476
477
478
479 </body>
480 </html>
Something went wrong with that request. Please try again.