Skip to content

Instantly share code, notes, and snippets.

@iTonyYo
Created January 6, 2014 03:51
Show Gist options
  • Save iTonyYo/8277950 to your computer and use it in GitHub Desktop.
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.
@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