Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Tree: 2cc1469154
Fetching contributors…

Cannot retrieve contributors at this time

195 lines (103 sloc) 9.73 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>When to use Vendor-Specific Extensions | Divya Manian</title>
<meta name="author" content="Divya Manian">
<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;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a> <a class="github" href="">Github</a></h2>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
<nav class="article">
<a class="previous" href="/a-decade-in-review.html" title="A Decade in Review">❬</a>
<a class="next" href="/book-reviews-for-jan-2010-part-1.html" title="Book Reviews for Jan 2010 – Part 1">❭</a>
<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>
<h1 class="entry-title"><a href="/when-to-use-vendor-specific-extensions.html">When to use Vendor-Specific Extensions</a></h1>
<div class="entry-content"><h3>What are vendor-specific extensions?</h3>
<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="" title="CSS References for Mainstream Browsers | Nimbupani Designs">CSS references for Mainstream browsers</a> has links which list other vendor specific extensions. </p>
<p><a href="">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="" 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>
<h3>When should you use vendor-specific extensions? </h3>
<li><p><strong>If your website is ONLY rendered on a specific browser</strong></p>
<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>
<li><p><strong>If you have access to your website continuously throughout its existence</strong></p>
<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>
<p><strong>If it creates subtle enhancements in a browser without significant loss of usability/accessibility in other browsers.</strong></p>
<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>
<li><p><strong>If it is being discussed to be supported in future versions of CSS.</strong></p>
<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>
<p>For graceful degradation, you can use <a href="" 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>
<p>There is a <a href="" title="Feature queries from fantasai on 2009-12-09 ( 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>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
<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
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
. If you would like to update this post, <a href="">please send a pull request</a>.
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<p><img class="avatar" src="/assets/divya.png" height=50> <a href="">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<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>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script src="/javascripts/octopress.js"></script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
Jump to Line
Something went wrong with that request. Please try again.