Update docs and demos to include updated browser gradient support: -w…

…ebkit-linear-gradient, -o-linear-gradient, -ms-linear-gradient
Sophrinix · Jul 2, 2011 · 7b143ad · 7b143ad
1 parent fbc9bcf
commit 7b143ad
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/demos/basic.html b/demos/basic.html
@@ -34,7 +34,10 @@
             -moz-box-shadow: #666 0 2px 3px;
             box-shadow: #666 0 2px 3px;
             background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
+            background: -webkit-linear-gradient(#9F9, #393);
             background: -moz-linear-gradient(#9F9, #393);
+            background: -ms-linear-gradient(#9F9, #393);
+            background: -o-linear-gradient(#9F9, #393);
             -pie-background: linear-gradient(#9F9, #393);*/
         }
 
@@ -131,7 +134,10 @@
                     css = [ 'background: ' + color1 + ';' ];
                 if( on ) {
                     css.push( 'background: -webkit-gradient(linear, 0 0, 0 bottom, from(' + color1 + '), to(' + color2 + '));' );
+                    css.push( 'background: -webkit-linear-gradient(' + color1 + ', ' + color2 + ');' );
                     css.push( 'background: -moz-linear-gradient(' + color1 + ', ' + color2 + ');' );
+                    css.push( 'background: -ms-linear-gradient(' + color1 + ', ' + color2 + ');' );
+                    css.push( 'background: -o-linear-gradient(' + color1 + ', ' + color2 + ');' );
                     css.push( 'background: linear-gradient(' + color1 + ', ' + color2 + ');' );
                     if( $( '#pieToggle' ).is(':checked') ) {
                         css.push( '-pie-background: linear-gradient(' + color1 + ', ' + color2 + ');' );

diff --git a/demos/tabs.html b/demos/tabs.html
@@ -129,7 +129,10 @@
 
         .tabBox .tabs a:hover {
             background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
+            background: -webkit-linear-gradient(#EEF, #FFF 70%);
             background: -moz-linear-gradient(#EEF, #FFF 70%);
+            background: -ms-linear-gradient(#EEF, #FFF 70%);
+            background: -o-linear-gradient(#EEF, #FFF 70%);
             background: linear-gradient(#EEF, #FFF 70%);
             -pie-background: linear-gradient(#EEF, #FFF 70%);
         }
@@ -268,7 +271,10 @@ <h3>CSS</h3>
 
 .tabBox .tabs a:hover {
     background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
+    background: -webkit-linear-gradient(#EEF, #FFF 70%);
     background: -moz-linear-gradient(#EEF, #FFF 70%);
+    background: -ms-linear-gradient(#EEF, #FFF 70%);
+    background: -o-linear-gradient(#EEF, #FFF 70%);
     background: linear-gradient(#EEF, #FFF 70%);
     -pie-background: linear-gradient(#EEF, #FFF 70%);
 }

diff --git a/documentation/supported-css3-features.html b/documentation/supported-css3-features.html
@@ -163,8 +163,11 @@ <h2 id="pie-background">CSS3 Backgrounds (-pie-background)</h2>
 
 <pre class="long"><code>#myElement {
     background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
+    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
+    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
     background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
-    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*webkit*/
+    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
+    background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
     background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
     -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
 }</code></pre>
@@ -219,14 +222,31 @@ <h2 id="gradients">Gradients</h2>
 
 <p>Notes on other browsers:</p>
 
-<p>WebKit's gradient syntax is drastically different than that of the
-CSS3 spec. See the
+<p>Most other browsers require a vendor prefix on the linear-gradient name, e.g. -moz-linear-gradient for Firefox
+(supported in version 3.6+ only), -webkit-linear-gradient for recent WebKit browsers, -o-linear-gradient for Opera
+(supported in version 11.10+ only), and -ms-linear-gradient for IE10 (currently only in pre-release).</p>
+
+<p>In addition, WebKit browsers older than Chrome 10 and Safari 5.1 require a gradient syntax which is
+drastically different than that of the CSS3 spec. See the
 <a href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html">Safari documentation</a> for their syntax</p>
 
-<p>Mozilla only supports gradients (via the -moz-linear-gradient
-function) as of Firefox 3.6.</p>
+<p>Adding in PIE's required -pie-background property, you will need a set of styles similar to the following
+to get consistent linear gradient backgrounds across browsers:</p>
+
+<pre class="long"><code>#myElement {
+    background: #CCC; /*fallback for non-CSS3 browsers*/
+    background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
+    background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
+    background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/
+    background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/
+    background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
+    background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
+    -pie-background: linear-gradient(#CCC, #EEE); /*PIE*/
+    behavior: url(PIE.htc);
+}</code></pre>
 
-<p>Opera currently has no support for CSS gradients, though you can use SVG to generate gradients instead.</p>
+<p>For more detailed information on the current state of linear-gradient across browsers, see this
+<a href="http://www.webdirections.org/blog/css3-linear-gradients/">article by John Allsopp</a>.</p>
 
 
 <h2 id="rgba">RGBA Color Values</h2>