From cdaf4ccf569a606891159a5a85e5c032c129ab09 Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Wed, 29 Aug 2012 21:32:57 -0700 Subject: [PATCH] Remove IE6-8 support Features that supported IE6-8 included filter-based gradients, rgba, scaling, rotating, opacity, and eot font faces. --- index.html | 37 +++++++++++++------------------------ 1 file changed, 13 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index bf6bd50..9501ba0 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,7 @@ 

 .box_round {
   -webkit-border-radius: 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
-          border-radius: 12px; /* Opera 10.5, IE9, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
+          border-radius: 12px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
 
   /* useful if you don't want a bg color from leaking outside the border: */
   -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
@@ -73,7 +73,7 @@ 

   
 .box_shadow {
   -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-          box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, Firefox 4+, Chrome 6+, iOS 5 */
+          box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 */
 }

   
/* */

 
@@ -99,9 +99,7 @@ 

   
 .box_rgba {
   background-color: transparent;
-  background-color: rgba(180, 180, 144, 0.6);  /* Firefox 3+, Safari 3+, Opera 10.10+, Chrome, IE9 */
-            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); /* IE6–IE9 */
-            zoom: 1;
+  background-color: rgba(180, 180, 144, 0.6);  /* Firefox 3+, Safari 3+, Opera 10.10+, Chrome, IE9+ */
 }

   
/* */

 
@@ -112,12 +110,9 @@ 

 .box_rotate {
   -webkit-transform: rotate(7.5deg);  /* Safari 3.1+, Chrome */
      -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15 */
-      -ms-transform: rotate(7.5deg);  /* IE9 */
+      -ms-transform: rotate(7.5deg);  /* IE9+ */
        -o-transform: rotate(7.5deg);  /* Opera 10.5-12.00 */
           transform: rotate(7.5deg);  /* Firefox 16+, Opera 12.50+ */
-             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
-                     M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
-               zoom: 1;
 }
/* */
@@ -128,11 +123,9 @@

.box_scale { -webkit-transform: scale(0.8); /* Safari 3.1+, Chrome */ -moz-transform: scale(0.8); /* Firefox 3.5+ */ - -ms-transform: scale(0.8); /* IE9 */ + -ms-transform: scale(0.8); /* IE9+ */ -o-transform: scale(0.8); /* Opera 10.50+ */ transform: scale(0.8); - filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ - M11=0.9999025240093042, M12=-0.013962180339145272, M21=0.013962180339145272, M22=0.9999025240093042,SizingMethod='auto expand'); } 
/* */
@@ -182,8 +175,7 @@ 

/*                           [to clipboard] [toggle rule off] */
 .box_opacity {
-  opacity: 0.9; /* Chrome 4+, Firefox 2+, Safari 3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ */
-  filter: alpha(opacity=90); /* IE6-IE8 */
+  opacity: 0.9; /* Chrome 4+, Firefox 2+, Safari 3.1+, Opera 9+, IE9+, iOS 3.2+, Android 2.1+ */
 }
/* */
@@ -196,7 +188,7 @@

* { -webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */ -moz-box-sizing: border-box; /* Firefox 1+ */ - box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/ + box-sizing: border-box; /* Chrome, IE8+, Opera, Safari 5.1*/ } 
/* */
@@ -207,7 +199,7 @@ 

 .box_bgsize {
   -webkit-background-size: 100% 100%; /* Safari 3-4 */
-          background-size: 100% 100%; /* Opera, IE9, Safari 5, Chrome, Firefox 4+ */
+          background-size: 100% 100%; /* Opera, IE9+, Safari 5, Chrome, Firefox 4+ */
 }
/* */
@@ -294,8 +286,7 @@ 

 @font-face {
   font-family: 'WebFont';
-  src: url('myfont.eot?#') format('eot'),  /* IE6–8 */
-       url('myfont.woff') format('woff'),  /* Firefox 3.6+, IE9, Chrome 6+, Safari 5.1+*/
+  src: url('myfont.woff') format('woff'),  /* Firefox 3.6+, IE9+, Chrome 6+, Safari 5.1+*/
        url('myfont.ttf') format('truetype');  /* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ */
 }
 
@@ -326,14 +317,12 @@ 

     also css3please is an open source project!. report bugs or contribute!
 
     Notes:
-     + Multiple IE filters must be comma delimited in a single declaration. They are not additive in separate blocks.
-     + IE9 starts to suck with filter-based gradients and rounded corners. Possible solutions are using SVG or adding a wrapper.
-     + The closest thing to box-shadow for IE is Blur with makeShadow but you need a duplicate div.
+     + IE<10 browsers do not support gradients. Possible solutions are using SVG or adding a wrapper.
      + The rotation transform ends up with a different transform-origin in IE. Look at heygrady's transform
        library and his excellent guide for the best results.
      + If you’re doing transitions, Matthew Lein’s Ceaser generates code with lots of presets, including the Penner equations.
 
-    © 2010; a Paul Irish and Jonathan Neal joint, in association w/ Boaz Sender and Zoltan Hawryluk.
+    © 2012; a Paul Irish and Jonathan Neal joint, in association w/ Boaz Sender and Zoltan Hawryluk.
 
             if you like this, you'll probably also dig yayQuery and mothereffinghsl.com. <3
 */
@@ -346,6 +335,7 @@ 

 
 /*
     __Changelog__
+    2012.08.29: Removed IE6-8 support.
     2012.06.06: Removed -ms prefixes from transition, animations and gradients.
     2012.03.02: Added box-sizing. Woo!
     2012.01.21: Added transform scale and 3d transforms.(thx uxder)
@@ -375,8 +365,7 @@ 

     2010.04.11: text-shadow added.
     2010.04.05: Real rotation in IE (Thx Zoltan!). Added transition. No more DropShadow for IE (it's crap)
     2010.04.04: New copy to clipboard style. Better mousewheel support.
-    2010.03.25: Fixed the gradient flipflop. Fixed  positioning bug.
-
+    2010.03.25: Fixed the gradient flipflop. Fixed positioning bug.
 */