Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 195 lines (103 sloc) 9.963 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>When to use Vendor-Specific Extensions | Divya Manian</title>
8 <meta name="author" content="Divya Manian">
9
10 <meta name="description" content="What are vendor-specific extensions? There are some CSS properties which are only supported by specific rendering engines, e.g. -webkit-box-shadow, - &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/when-to-use-vendor-specific-extensions.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="/a-decade-in-review.html" title="A Decade in Review">❬</a>
48
49
3cfee0e Site updated at 2012-01-18 02:27:49 UTC
Divya Manian authored
50 <a class="next" href="/book-reviews-for-jan-2010-part-1.html" title="Book Reviews for Jan 2010 – Part 1">❭</a>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
51
52
53
54 </nav>
55 <header>
56
57
58
59
60
61
62
63 <time datetime="2010-01-01T00:00:00-08:00" pubdate><span class='month'>Jan</span> <span class='day'>01</span> <span class='year'>2010</span></time>
64
65 <h1 class="entry-title"><a href="/when-to-use-vendor-specific-extensions.html">When to use Vendor-Specific Extensions</a></h1>
66
67
68
69
70 </header>
71 <div class="entry-content"><h3>What are vendor-specific extensions?</h3>
72
73
74 <p>There are some CSS properties which are only supported by specific rendering engines, e.g. <code>-webkit-box-shadow</code>, <code>-moz-border-radius</code>, or <code>-o-transition-property</code>. The post <a href="http://nimbupani.com/css-references-for-mainstream-browsers.html" title="CSS References for Mainstream Browsers | Nimbupani Designs">CSS references for Mainstream browsers</a> has links which list other vendor specific extensions. </p>
75
76
77
78
79 <p><a href="http://www.css3.info/vendor-specific-extensions-to-css3/">Some people</a> assert these properties exist for testing properties described in draft versions of a future standard, but many of these extensions exist to give special functionality available only on a specific rendering engines (e.g iphone web-apps, android web-apps, etc.) Many people, notoriously <a href="http://forabeautifulweb.com/blog/about/you8217re_living_in_a_fantasy_world/" title="You&#8217;re living in a fantasy world | For A Beautiful Web">Andy Clarke</a>, support using vendor-specific extensions as much as possible without mentioning the caveats.</p>
80
81
82
83
84 <h3>When should you use vendor-specific extensions? </h3>
85
86
87 <ul>
88 <li><p><strong>If your website is ONLY rendered on a specific browser</strong></p>
89 <p>This is not surprising as there are lots of websites that are nothing more than iphone webapps, or those that sell Mac products (or those that support only IE or Opera Mini.) If your website is one of those, use vendor specific extension by all means (while being mindful of the caveat mentioned below.)</p></li>
90 <li><p><strong>If you have access to your website continuously throughout its existence</strong></p>
91 <p>The disadvantage of using vendor-specific extensions is that they can be deprecated or their usage can change significantly on the whim of the vendor (I am using &#8220;whim&#8221; loosely). So, you need to be able to access the website you are using it on, continuously so that you can update it if that occurs.</p></li>
92 <li>
93 <p><strong>If it creates subtle enhancements in a browser without significant loss of usability/accessibility in other browsers.</strong></p>
94 <p>For example, <code>-border-radius</code> is a popular vendor-specific extension, and by not using it, there is not a significant loss to readers of your website. In contrast, <code>-multiple-column-width</code>, when not supported, will render your text in only one column which might hinder usability of the website on browsers that do not support that extension.</p>
95 </li>
96 <li><p><strong>If it is being discussed to be supported in future versions of CSS.</strong></p>
03d0b9c Site updated at 2011-12-14 05:31:45 UTC
Divya Manian authored
97 <p>Use vendor-specific extensions only if the property exists in a W3C Recommendation or a Working Draft as a supported property (though not necessary if your website needs to work on only one browser). </p></li>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
98 </ul>
99
100
101 <p></p>
102
103 <p>For graceful degradation, you can use <a href="http://www.modernizr.com/" title="Modernizr">Modernizr</a> which outputs a list of supported properties as multiple classes on the body element. You can then use these class selectors and declare vendor-specific extensions for them in your CSS file. </p>
104
105
106
107
108 <p>There is a <a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/0130.html" title="Feature queries from fantasai on 2009-12-09 (www-style@w3.org from December 2009)">debate on the W3C mailing list</a> on detecting support for a property without using JavaScript detection like Modernizr. But, I think it is a long way away from being included in any W3C Working Draft.</p>
109
110
111 <p></p>
112 </div>
113
114 <footer>
115 <p class="meta">This post was posted by
116
117
118 <a href="/about.html">Divya Manian</a>
119 on
120
121
122
123
124
125
126 <time datetime="2010-01-01T00:00:00-08:00" pubdate><span class='month'>Jan</span> <span class='day'>01</span> <span class='year'>2010</span></time> in
127
128 <span class="categories">
129
130 <a class='category' href='/categories/web-development/'>Web Development</a>
131
132 </span>
133
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
134 . If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2010-01-01-when-to-use-vendor-specific-extensions.md">please send a pull request</a>.
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
135 </p>
136 </footer>
137 </article>
138
139 <section>
140 <h1>Comments</h1>
141 <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>
142 </div>
143 </section>
144
145
146 </div>
147 </div>
148 <aside id="articles">
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
149 <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
150 <h2>Posts on Web Development</h2>
2cc1469 Site updated at 2012-01-23 12:45:44 UTC
Divya Manian authored
151 <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
152 </aside>
153 <footer role="contentinfo"><p>
3c9d77b Site updated at 2012-01-01 19:06:29 UTC
Divya Manian authored
154 Copy to your heart’s content 2012 - Divya Manian -
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
155 <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
156 </p>
157
158
159 </footer>
160
161
162 <script type="text/javascript">
163 var disqus_shortname = 'nimbublog';
164 var disqus_developer = 1;
165
166
167 var disqus_url = 'http://nimbupani.com/when-to-use-vendor-specific-extensions.html';
168 var disqus_identifier = 'http://nimbupani.com/when-to-use-vendor-specific-extensions.html';
169
170
171
172
173 (function () {
174 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
175 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
176 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
177 }());
178 </script>
179
180
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
181 <script src="/javascripts/octopress.js"></script>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
182
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
183 <script>
184 var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
185 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
186 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
187 s.parentNode.insertBefore(g,s)}(document,'script'));
188 </script>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
189
190
191
192
193 </body>
194 </html>
Something went wrong with that request. Please try again.