SASS linear gradients and IE

David G - DrupalI am close to releasing a new site upgrade for a new client, which included a completely new site design. The client came to preview the website and asked if I could add some gradients throughout the webpage. Of course, I said, “Sure! Why not!” (… when will I learn :D). Anyways, I’m aware of a few techniques to do this and have been slowly trying to leverage Compass in my websites CSS. So after some fiddling I found the necessary Compass declarations to get the outcome I desired.

Gradients and CSS

An old technique for creating gradients in a Div or background of a page is to use images. You create a 1 pixel wide image with your gradient and repeat the image across the X-axis of your div so it fills the area. This approach, while crude, is the safest way to support the most legacy browsers if that is a criteria for your project.

A newer technique is CSS3 gradients, and leveraging vendor specific CSS rules as needed (for IE). In general an example of a complete gradient using this newer technique might look like the following declarations. I derived this CSS from the Colorzilla website:

background: #223953; /* Old browsers */
background: -moz-linear-gradient(top,  #223953 48%, #1a2f46 54%, #1a2f46 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(48%,#223953), color-stop(54%,#1a2f46), color-stop(100%,#1a2f46)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #223953 48%,#1a2f46 54%,#1a2f46 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #223953 48%,#1a2f46 54%,#1a2f46 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #223953 48%,#1a2f46 54%,#1a2f46 100%); /* IE10+ */
background: linear-gradient(to bottom,  #223953 48%,#1a2f46 54%,#1a2f46 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#223953', endColorstr='#1a2f46',GradientType=0 ); /* IE6-9 */

This does work and degrades as-needed for the client device — but oh my gosh what a pain to write and maintain from hand. If your site is using Compass (which uses Sass) then luckily there are some SASS Mixins that can greatly help you. Here is an except of my project SCSS file:

@import "compass/utilities/general/hacks";
@mixin update-12042014-theme-changes-two-gradients {
  body {
    // This "hack" should be before any background-image stuff as per docs:
    // https://github.com/Compass/compass/commit/2f40eb9f7f76a50c2b024b94290abf6ec3673e63
    @include filter-gradient(#cad7df, #fefefe, vertical);
    @include background(none , linear-gradient(/*top, */#cad7df, #fefefe), fixed);
  }
  #header-wrapper {
    div.container { background-color: $almost_white; }

    @include filter-gradient(#0f3979, #5f8bc3, vertical);
    @include background(none , linear-gradient(/*top, */#0f3979, #5f8bc3), fixed);

  }
  /* ... more code ... */
}

The above SCSS declarations when inspected in a browser produces the following declarations:

#header-wrapper {
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FF0F3979',endColorstr='#FF5F8BC3');
background: none,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#0f3979),color-stop(100%,#5f8bc3)),fixed;
background: none,-webkit-linear-gradient(#0f3979,#5f8bc3),fixed;
background: none,-moz-linear-gradient(#0f3979,#5f8bc3),fixed;
background: none,-o-linear-gradient(#0f3979,#5f8bc3),fixed;
background: none,linear-gradient(#0f3979,#5f8bc3),fixed;
}

As you can see this is the output we essentially want and it requires only two @include directives in our SCSS files! This helps us to create more modular, concise CSS definitions to re-use throughout our stylesheets.

As noted in the SCSS directives above the filter-gradient directive should be placed prior to any background directives in your CSS. This way this “hack” for older browsers is overridden by the newer directives when the CSS is processed by the browser.

I hope this small glimpse of Compass and Sass usage in a website gets you interested in integrating this tool into your web development stack!

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *