Remove all the -ms-

zhigui · Jun 15, 2012 · 1957cc3 · 1957cc3
1 parent 816e9fe
commit 1957cc3
Show file tree

Hide file tree

Showing 15 changed files with 159 additions and 300 deletions.
diff --git a/_posts/examples/2010-12-01-perspective-01.html b/_posts/examples/2010-12-01-perspective-01.html
@@ -5,32 +5,30 @@
 ---
 
   <style media="screen">
-  
+
     .container {
       width: 200px;
       height: 200px;
       border: 1px solid #CCC;
       margin: 0 auto 40px;
     }
-  
+
     .box {
       width: 100%;
       height: 100%;
     }
-  
+
     #red .box {
       background-color: red;
       -webkit-transform: perspective( 600px ) rotateY( 45deg );
          -moz-transform: perspective( 600px ) rotateY( 45deg );
-          -ms-transform: perspective( 600px ) rotateY( 45deg );
            -o-transform: perspective( 600px ) rotateY( 45deg );
               transform: perspective( 600px ) rotateY( 45deg );
     }
 
     #blue {
       -webkit-perspective: 600px;
          -moz-perspective: 600px;
-          -ms-perspective: 600px;
            -o-perspective: 600px;
               perspective: 600px;
     }
@@ -39,7 +37,6 @@
       background-color: blue;
       -webkit-transform: rotateY( 45deg );
          -moz-transform: rotateY( 45deg );
-          -ms-transform: rotateY( 45deg );
            -o-transform: rotateY( 45deg );
               transform: rotateY( 45deg );
     }

diff --git a/_posts/examples/2010-12-01-perspective-02-children.html b/_posts/examples/2010-12-01-perspective-02-children.html
@@ -5,7 +5,7 @@
 ---
 
   <style media="screen">
-    
+
     .container {
       width: 200px;
       height: 200px;
@@ -26,15 +26,13 @@
       background: red;
       -webkit-transform: perspective( 400px ) rotateY( 45deg );
          -moz-transform: perspective( 400px ) rotateY( 45deg );
-          -ms-transform: perspective( 400px ) rotateY( 45deg );
            -o-transform: perspective( 400px ) rotateY( 45deg );
               transform: perspective( 400px ) rotateY( 45deg );
     }
 
     #blue {
       -webkit-perspective: 400px;
          -moz-perspective: 400px;
-          -ms-perspective: 400px;
            -o-perspective: 400px;
               perspective: 400px;
     }
@@ -43,7 +41,6 @@
       background: blue;
       -webkit-transform: rotateY( 45deg );
          -moz-transform: rotateY( 45deg );
-          -ms-transform: rotateY( 45deg );
            -o-transform: rotateY( 45deg );
               transform: rotateY( 45deg );
     }
@@ -53,7 +50,7 @@
 <body>
 
   <h1>{{ page.title }}</h1>
-  
+
 {% highlight css %}
 
 #red figure {
@@ -62,7 +59,7 @@ <h1>{{ page.title }}</h1>
 }
 
 {% endhighlight %}
-  
+
   <section id="red" class="container">
     <figure></figure>
     <figure></figure>
@@ -74,7 +71,7 @@ <h1>{{ page.title }}</h1>
     <figure></figure>
     <figure></figure>
   </section>
-  
+
 {% highlight css %}
 
 #blue {
@@ -87,7 +84,7 @@ <h1>{{ page.title }}</h1>
 }
 
 {% endhighlight %}
-  
+
   <section id="blue" class="container">
     <figure></figure>
     <figure></figure>
@@ -99,6 +96,5 @@ <h1>{{ page.title }}</h1>
     <figure></figure>
     <figure></figure>
   </section>
-  
+
   <script src="../js/utils.js"></script>
-
diff --git a/_posts/examples/2010-12-01-perspective-03.html b/_posts/examples/2010-12-01-perspective-03.html
@@ -5,7 +5,7 @@
 ---
 
   <style media="screen">
-    
+
     .container {
       width: 200px;
       height: 200px;
@@ -14,31 +14,27 @@
       border: 1px solid #CCC;
       -webkit-perspective: 1200px;
          -moz-perspective: 1200px;
-          -ms-perspective: 1200px;
            -o-perspective: 1200px;
               perspective: 1200px;
     }
-    
+
     #cube {
       width: 100%;
       height: 100%;
       position: absolute;
       -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
-          -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
               transform-style: preserve-3d;
       -webkit-transform: translateZ( -100px );
          -moz-transform: translateZ( -100px );
-          -ms-transform: translateZ( -100px );
            -o-transform: translateZ( -100px );
               transform: translateZ( -100px );
     }
 
     #cube.spinning {
       -webkit-animation: spinCubeWebkit 8s infinite ease-in-out;
          -moz-animation: spinCubeMoz    8s infinite ease-in-out;
-          -ms-animation: spinCubeMS     8s infinite ease-in-out;
            -o-animation: spinCubeO      8s infinite ease-in-out;
               animation: spinCube       8s infinite ease-in-out;
     }
@@ -65,15 +61,14 @@
       color: white;
       text-align: center;
     }
-    
+
     #cube.panels-backface-invisible figure {
       -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
-          -ms-backface-visibility: hidden;
            -o-backface-visibility: hidden;
               backface-visibility: hidden;
     }
-    
+
     #cube .front  { background: hsla(   0, 100%, 50%, 0.7 ); }
     #cube .back   { background: hsla(  60, 100%, 50%, 0.7 ); }
     #cube .right  { background: hsla( 120, 100%, 50%, 0.7 ); }
@@ -84,46 +79,40 @@
     #cube .front  {
       -webkit-transform: translateZ( 100px );
          -moz-transform: translateZ( 100px );
-          -ms-transform: translateZ( 100px );
            -o-transform: translateZ( 100px );
               transform: translateZ( 100px );
     }
     #cube .back {
       -webkit-transform: rotateX( -180deg ) translateZ( 100px );
          -moz-transform: rotateX( -180deg ) translateZ( 100px );
-          -ms-transform: rotateX( -180deg ) translateZ( 100px );
            -o-transform: rotateX( -180deg ) translateZ( 100px );
               transform: rotateX( -180deg ) translateZ( 100px );
     }
     #cube .right {
       -webkit-transform: rotateY(   90deg ) translateZ( 100px );
          -moz-transform: rotateY(   90deg ) translateZ( 100px );
-          -ms-transform: rotateY(   90deg ) translateZ( 100px );
            -o-transform: rotateY(   90deg ) translateZ( 100px );
               transform: rotateY(   90deg ) translateZ( 100px );
     }
     #cube .left {
       -webkit-transform: rotateY(  -90deg ) translateZ( 100px );
          -moz-transform: rotateY(  -90deg ) translateZ( 100px );
-          -ms-transform: rotateY(  -90deg ) translateZ( 100px );
            -o-transform: rotateY(  -90deg ) translateZ( 100px );
               transform: rotateY(  -90deg ) translateZ( 100px );
     }
     #cube .top {
       -webkit-transform: rotateX(   90deg ) translateZ( 100px );
          -moz-transform: rotateX(   90deg ) translateZ( 100px );
-          -ms-transform: rotateX(   90deg ) translateZ( 100px );
            -o-transform: rotateX(   90deg ) translateZ( 100px );
               transform: rotateX(   90deg ) translateZ( 100px );
     }
     #cube .bottom {
       -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
          -moz-transform: rotateX(  -90deg ) translateZ( 100px );
-          -ms-transform: rotateX(  -90deg ) translateZ( 100px );
            -o-transform: rotateX(  -90deg ) translateZ( 100px );
               transform: rotateX(  -90deg ) translateZ( 100px );
     }
-    
+
   </style>
 
 </head>
@@ -141,35 +130,35 @@ <h1>{{ page.title }}</h1>
       <figure class="bottom">6</figure>
     </div>
   </section>
-  
+
 
   <section id="options">
-    
+
     <p class="perspective">
       <label>perspective</label>
       <input type="range" min="1" max="2000" value="1200" data-units="px" />
     </p>
-    
+
     <p class="perspective-origin-x">
       <label>perspective-origin x</label>
       <input type="range" min="0" max="100" value="50" data-units="%" />
     </p>
-    
+
     <p class="perspective-origin-y">
       <label>perspective-origin y</label>
       <input type="range" min="0" max="100" value="50" data-units="%" />
     </p>
-    
+
     <p class="spinning">
       <button>Toggle Spinning</button>
     </p>
-    
+
     <p class="backface-visibility">
       <button>Toggle Backface Visibility</button>
     </p>
-    
+
   </section>
-  
+
   <script src="../js/utils.js"></script>
   <script>
     var init = function() {
@@ -180,16 +169,16 @@ <h1>{{ page.title }}</h1>
           // get -vendor- prefix css property
           perspectiveProp = Modernizr.prefixed('perspective'),
           perspectiveOriginProp = Modernizr.prefixed('perspectiveOrigin'),
-          
+
           updatePerspectiveOrigin = function() {
-            boxContainer.style[ perspectiveOriginProp ] = 
+            boxContainer.style[ perspectiveOriginProp ] =
               perspectiveOrigin.x + '% ' + perspectiveOrigin.y + '%';
           };
 
       optionsContainer.querySelector('.perspective input').addEventListener( 'change', function( event ){
         boxContainer.style[ perspectiveProp ] = event.target.value + 'px';
       }, false);
-      
+
       optionsContainer.querySelector('.perspective-origin-x input').addEventListener( 'change', function( event ){
         perspectiveOrigin.x = event.target.value;
         updatePerspectiveOrigin();
@@ -199,16 +188,16 @@ <h1>{{ page.title }}</h1>
         perspectiveOrigin.y = event.target.value;
         updatePerspectiveOrigin();
       }, false);
-      
+
       optionsContainer.querySelector('.spinning button').addEventListener( 'click', function(){
         cube.toggleClassName('spinning');
       }, false);
-      
+
       optionsContainer.querySelector('.backface-visibility button').addEventListener( 'click', function(){
         cube.toggleClassName('panels-backface-invisible');
       }, false);
-      
+
     };
-      
+
     window.addEventListener( 'DOMContentLoaded', init, false);
   </script>
diff --git a/_posts/examples/2010-12-02-transforms-01-functions.html b/_posts/examples/2010-12-02-transforms-01-functions.html
@@ -14,11 +14,10 @@
       position: relative;
       -webkit-perspective: 600px;
          -moz-perspective: 600px;
-          -ms-perspective: 600px;
            -o-perspective: 600px;
               perspective: 600px;
     }
-  
+
     .panel {
       width: 100%;
       height: 100%;
@@ -27,55 +26,50 @@
       color: white;
       background: red;
     }
-    
+
     #translate-z-negative .panel {
       -webkit-transform: translateZ( -200px );
          -moz-transform: translateZ( -200px );
-          -ms-transform: translateZ( -200px );
            -o-transform: translateZ( -200px );
               transform: translateZ( -200px );
     }
 
     #translate-z-positive .panel {
       -webkit-transform: translateZ( 200px );
          -moz-transform: translateZ( 200px );
-          -ms-transform: translateZ( 200px );
            -o-transform: translateZ( 200px );
               transform: translateZ( 200px );
     }
-    
+
     #rotate-x .panel {
       -webkit-transform: rotateX( 45deg );
          -moz-transform: rotateX( 45deg );
-          -ms-transform: rotateX( 45deg );
            -o-transform: rotateX( 45deg );
               transform: rotateX( 45deg );
     }
-    
+
     #rotate-y .panel {
       -webkit-transform: rotateY( 45deg );
          -moz-transform: rotateY( 45deg );
-          -ms-transform: rotateY( 45deg );
            -o-transform: rotateY( 45deg );
               transform: rotateY( 45deg );
     }
-    
+
     #rotate-z .panel {
       -webkit-transform: rotateZ( 45deg );
          -moz-transform: rotateZ( 45deg );
-          -ms-transform: rotateZ( 45deg );
            -o-transform: rotateZ( 45deg );
               transform: rotateZ( 45deg );
     }
-    
-    
+
+
   </style>
 
 </head>
 <body>
 
   <h1>{{ page.title }}</h1>
-  
+
   <div id="translate-z-negative" class="container">
     <div class="panel">translateZ( -200px )</div>
   </div>
@@ -95,6 +89,6 @@ <h1>{{ page.title }}</h1>
   <div id="rotate-z" class="container">
     <div class="panel">rotateZ( 45deg )</div>
   </div>
-  
+
   <script src="../js/utils.js"></script>