Created
January 6, 2014 03:51
-
-
Save iTonyYo/8277950 to your computer and use it in GitHub Desktop.
If color format will affect page render speed? Chrome will auto convert hex color to rgba format. I'm confused about if I should do like this. Or use conditional classes to implement graceful degradation about color format.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "utf-8"; | |
.blueBoxGradient { | |
/* Old Browsers */ | |
background: #8a9aab; | |
background: rgb(138,154,171); | |
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhOWFhYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzODUzNzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* IE9 SVG, needs conditional override of 'filter' to 'none' */ | |
/* FF3.6+ */ | |
background: -moz-linear-gradient(top, hsla(211,16%,61%,1) 0%, hsla(212,34%,33%,1) 100%); | |
background: -moz-linear-gradient(top, hsl(211,16%,61%) 0%, hsl(212,34%,33%) 100%); | |
background: -moz-linear-gradient(top, rgba(138,154,171,1) 0%, rgba(56,83,113,1) 100%); | |
background: -moz-linear-gradient(top, rgb(138,154,171) 0%, rgb(56,83,113) 100%); | |
background: -moz-linear-gradient(top, #8a9aab 0%, #385371 100%); | |
/* Chrome, Safari4+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(211,16%,61%,1)), color-stop(100%,hsla(212,34%,33%,1))); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsl(211,16%,61%)), color-stop(100%,hsl(212,34%,33%))); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(138,154,171,1)), color-stop(100%,rgba(56,83,113,1))); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(138,154,171)), color-stop(100%,rgb(56,83,113))); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a9aab), color-stop(100%,#385371)); | |
/* Chrome10+, Safari5.1+ */ | |
background: -webkit-linear-gradient(top, hsla(211,16%,61%,1) 0%,hsla(212,34%,33%,1) 100%); | |
background: -webkit-linear-gradient(top, hsl(211,16%,61%) 0%,hsl(212,34%,33%) 100%); | |
background: -webkit-linear-gradient(top, rgba(138,154,171,1) 0%,rgba(56,83,113,1) 100%); | |
background: -webkit-linear-gradient(top, rgb(138,154,171) 0%,rgb(56,83,113) 100%); | |
background: -webkit-linear-gradient(top, #8a9aab 0%,#385371 100%); | |
/* Opera 11.10+ */ | |
background: -o-linear-gradient(top, hsla(211,16%,61%,1) 0%,hsla(212,34%,33%,1) 100%); | |
background: -o-linear-gradient(top, hsl(211,16%,61%) 0%,hsl(212,34%,33%) 100%); | |
background: -o-linear-gradient(top, rgba(138,154,171,1) 0%,rgba(56,83,113,1) 100%); | |
background: -o-linear-gradient(top, rgb(138,154,171) 0%,rgb(56,83,113) 100%); | |
background: -o-linear-gradient(top, #8a9aab 0%,#385371 100%); | |
/* IE10+ */ | |
background: -ms-linear-gradient(top, hsla(211,16%,61%,1) 0%,hsla(212,34%,33%,1) 100%); | |
background: -ms-linear-gradient(top, hsl(211,16%,61%) 0%,hsl(212,34%,33%) 100%); | |
background: -ms-linear-gradient(top, rgba(138,154,171,1) 0%,rgba(56,83,113,1) 100%); | |
background: -ms-linear-gradient(top, rgb(138,154,171) 0%,rgb(56,83,113) 100%); | |
background: -ms-linear-gradient(top, #8a9aab 0%,#385371 100%); | |
/* W3C */ | |
background: linear-gradient(to bottom, hsla(211,16%,61%,1) 0%,hsla(212,34%,33%,1) 100%); | |
background: linear-gradient(to bottom, hsl(211,16%,61%) 0%,hsl(212,34%,33%) 100%); | |
background: linear-gradient(to bottom, rgba(138,154,171,1) 0%,rgba(56,83,113,1) 100%); | |
background: linear-gradient(to bottom, rgb(138,154,171) 0%,rgb(56,83,113) 100%); | |
background: linear-gradient(to bottom, #8a9aab 0%,#385371 100%); | |
/* IE6-8 */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a9aab', endColorstr='#385371', GradientType=0 ); | |
} | |
/* Add a "gradientFilter" class to all elements that have a gradient, and add the following override to HTML to complete the IE9 support. */ | |
.ie9 .gradientFilter { | |
filter: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment