Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Remove support for old browsers #124

Merged
merged 1 commit into from

3 participants

@romamatusevich
Collaborator

According to the issue: #123

Remove:
1. -webkit-border-radius
2. -webkit-gradient, -moz-linear-gradient, -o-linear-gradient
3. -moz-transform, -o-transform
4. -moz-transition, -o-transition
5. -moz-animation, -o-animation, @-moz-keyframes, @-o-keyframes
6. -o-tab-size

Leave:
1. -webkit-box-sizing: according http://caniuse.com/#search=box-sizing Safari 5.0 and Android 2.3-3 use -webkit prefix.

Add:
1. Comments about Opera 15+ support to -webkit prefixed properties: -webkit-transform, -webkit-animation.
2. Update comment for -webkit-transition support: Safari 3.2-6 and add Android 2.1+, iOS 3.2-6.1.

index.html
((7 lines not shown))
-ms-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* IE 9 <span class="endcomment">*/</span></span>
- -o-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Opera 10.50-12.00 <span class="endcomment">*/</span></span>
- transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 16+, IE 10+, Opera 12.10+ <span class="endcomment">*/</span></span>
+ transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 16+, IE 10+, Opera 12.10 <span class="endcomment">*/</span></span>
@paulirish Owner

you killed the + on opera?
let's just update it to "Opera" and call it a day.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@paulirish
Owner

This is an epic PR. thank you so much. :dancer:

want to follow up with a commit to change the Opera 12* to "Opera" ?

After that i'll merge the eff out of this.

thanks so much for this one @romamatusevich

@romamatusevich
Collaborator

Always pleasure!

Update "Opera 12*" to "Opera" for: background-image: linear-gradient, transform: rotate, transform: scale, transition, animation.

Also I can remove all comments about Opera < 15 and instead of "Opera 15+" use "Opera". What do you think about it?

@asuh

This is awesome! I was wondering when it would happen. Can I suggest an update to box shadow as well? the -webkit-box-shadow prefix is not needed for Android 4+. Thus, we can look at getting rid of it all together since the other requirements match the border radius prefix.

@romamatusevich
Collaborator

I suggest to leave -webkit-box-shadow. So, remove only support for Android < 2.3

@paulirish paulirish merged commit 79bff6e into paulirish:master
@paulirish
Owner

Merged!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 13, 2013
  1. @romamatusevich
This page is out of date. Refresh to see the latest.
Showing with 10 additions and 35 deletions.
  1. +10 −35 index.html
View
45 index.html
@@ -44,8 +44,7 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_round {
- -webkit-border-radius: <b g="0">12px</b>; <span class="comment">/* Android &le; 1.6, iOS 1-3.2, Safari 3-4 <span class="endcomment">*/</span></span>
- border-radius: <b g="0">12px</b>; <span class="comment">/* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ <span class="endcomment">*/</span></span>
+ border-radius: <b g="0">12px</b>; <span class="comment">/* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ <span class="endcomment">*/</span></span>
<span class="comment">/* useful if you don't want a bg color from <a href="http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed">leaking outside</a> the border: */</span>
background-clip: padding-box; <span class="comment">/* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ <span class="endcomment">*/</span></span>
@@ -83,11 +82,8 @@
<pre class="rule">
.box_gradient {
background-color: <b g="0" i="lHex">#444444</b>;
- background-image: -webkit-gradient(linear, left top, left bottom, from(<b g="0" i="lHex">#444444</b>), to(<b g="1" i="lHex">#999999</b>)); <span class="comment">/* Chrome, Safari 4+ <span class="endcomment">*/</span></span>
background-image: -webkit-linear-gradient(top, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Chrome 10-25, iOS 5+, Safari 5.1+ <span class="endcomment">*/</span></span>
- background-image: -moz-linear-gradient(top, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Firefox 3.6-15 <span class="endcomment">*/</span></span>
- background-image: -o-linear-gradient(top, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Opera 11.10-12.00 <span class="endcomment">*/</span></span>
- background-image: linear-gradient(to bottom, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ <span class="endcomment">*/</span></span>
+ background-image: linear-gradient(to bottom, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Chrome 26, Firefox 16+, IE 10+, Opera <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -108,11 +104,9 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_rotate {
- -webkit-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Chrome, Safari 3.1+ <span class="endcomment">*/</span></span>
- -moz-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 3.5-15 <span class="endcomment">*/</span></span>
+ -webkit-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Chrome, Opera 15+, Safari 3.1+ <span class="endcomment">*/</span></span>
-ms-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* IE 9 <span class="endcomment">*/</span></span>
- -o-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Opera 10.50-12.00 <span class="endcomment">*/</span></span>
- transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 16+, IE 10+, Opera 12.10+ <span class="endcomment">*/</span></span>
+ transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 16+, IE 10+, Opera <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -121,11 +115,9 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_scale {
- -webkit-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Chrome, Safari 3.1+ <span class="endcomment">*/</span></span>
- -moz-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Firefox 3.5+ <span class="endcomment">*/</span></span>
+ -webkit-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Chrome, Opera 15+, Safari 3.1+ <span class="endcomment">*/</span></span>
-ms-transform: scale(<b g="0">0.8</b>); <span class="comment">/* IE 9 <span class="endcomment">*/</span></span>
- -o-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Opera 10.50-12.00 <span class="endcomment">*/</span></span>
- transform: scale(<b g="0">0.8</b>); <span class="comment">/* Firefox 16+, IE 10+, Opera 12.10+ <span class="endcomment">*/</span></span>
+ transform: scale(<b g="0">0.8</b>); <span class="comment">/* Firefox 16+, IE 10+, Opera <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -135,11 +127,9 @@
<pre class="rule">
.box_3dtransforms {
-webkit-perspective: <b g="0">300px</b>; <span class="comment">/* Chrome 12+, Safari 4+ <span class="endcomment">*/</span></span>
- -moz-perspective: <b g="0">300px</b>; <span class="comment">/* Firefox 10+ <span class="endcomment">*/</span></span>
-ms-perspective: <b g="0">300px</b>; <span class="comment">/* IE 10 <span class="endcomment">*/</span></span>
perspective: <b g="0">300px</b>;
-webkit-transform: rotateY(<b g="1">180</b>deg); -webkit-transform-style: preserve-3d;
- -moz-transform: rotateY(<b g="1">180</b>deg); -moz-transform-style: preserve-3d;
-ms-transform: rotateY(<b g="1">180</b>deg); -ms-transform-style: preserve-3d;
transform: rotateY(<b g="1">180</b>deg); transform-style: preserve-3d;
}</pre>
@@ -151,10 +141,8 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_transition {
- -webkit-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Chrome 1-25, Safari 3.2+ <span class="endcomment">*/</span></span>
- -moz-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Firefox 4-15 <span class="endcomment">*/</span></span>
- -o-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Opera 10.50–12.00 <span class="endcomment">*/</span></span>
- transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ <span class="endcomment">*/</span></span>
+ -webkit-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 <span class="endcomment">*/</span></span>
+ transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -219,10 +207,8 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_animation&#58;hover {
- -webkit-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Chrome, Safari 5+ <span class="endcomment">*/</span></span>
- -moz-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Firefox 5-15 <span class="endcomment">*/</span></span>
- -o-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Opera 12.00 <span class="endcomment">*/</span></span>
- animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Chrome, Firefox 16+, IE 10+, Opera 12.10+ <span class="endcomment">*/</span></span>
+ -webkit-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Chrome, Opera 15+, Safari 5+ <span class="endcomment">*/</span></span>
+ animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Chrome, Firefox 16+, IE 10+, Opera <span class="endcomment">*/</span></span>
}
@-webkit-keyframes <b g="0">myanim</b> {
@@ -230,16 +216,6 @@
<b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
<b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
}
-@-moz-keyframes <b g="0">myanim</b> {
- <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
- <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
- <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
-}
-@-o-keyframes <b g="0">myanim</b> {
- <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
- <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
- <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
-}
@keyframes <b g="0">myanim</b> {
<b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
<b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
@@ -297,7 +273,6 @@
<pre class="rule">
.box_tabsize {
-moz-tab-size: <b g="0">2</b>; <span class="comment">/* Firefox 4+ <span class="endcomment">*/</span></span>
- -o-tab-size: <b g="0">2</b>; <span class="comment">/* Opera 10.60+ <span class="endcomment">*/</span></span>
tab-size: <b g="0">2</b>;
}</pre>
<!-- <pre class="rule comment commentclose"><span class="comment">/* */</span></pre> -->
Something went wrong with that request. Please try again.