Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations CSS Gradients Linear Gradients

Isha Srivastava
Isha Srivastava
5,002 Points
Posted by Isha Srivastava
Isha Srivastava
5,002 Points

Regarding render prefix!!

I use Mozilla Firefox so i did-

.gradient{
       width:200px;
       height: 200px;
       border:2px solid green;
       border-radius:20px;
       background: -moz-linear- gradient(45deg,green,maroon,crimson,darkblue);         
      }

but now even if i want to open this on other browser like google chrome then what should be the syntax?

6 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Isha,

You should always write the code so that browsers that don't need the prefix have something to use.

Not all browsers need the prefix. Some may need the prefix for transitions but not gradients. So having the none prefixed code at the end means you always have code for those browsers. If you don't add the none prefixed code you will run into problems if the browser doesn't require them. Browsers are updated regularly, so the none prefixed code is used by them too.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Isha,

The most common vendor prefixes are.

-moz-      <!-- Firefox and other browsers using Mozilla's browser engine -->
-webkit-  <!-- Safari, Chrome and browsers using the Webkit engine -->
-o-           <!-- Opera -->
-ms-        <!-- Internet Explorer (but not always) -->

Hope this helps.

Isha Srivastava
Isha Srivastava
5,002 Points
Isha Srivastava
Isha Srivastava
5,002 Points

Thanks Wayne,

but even if i am writing the code like this so that it works on the both browser simultaneously.. 

      background: -moz-linear-gradient(45deg, green,maroon,crimson,darkblue);
                         -webkit-linear-gradient(45deg, green,maroon,crimson,darkblue);

then also it works only for Mozilla Firefox and not for google chrome, but yes if i write the code like-

      background: -moz-linear-gradient(45deg, green,maroon,crimson,darkblue);
      background: -webkit-linear-gradient(45deg, green,maroon,crimson,darkblue);

then its working for both the browser so is this the right way??

Gloria Dwomoh
Gloria Dwomoh
13,116 Points
Gloria Dwomoh
Gloria Dwomoh
13,116 Points

For chrome 10 and above (might also work on safari 5.1 and above...I am not sure) I think this would work

.gradient{ 
   width:200px; 
   height: 200px;
   border:2px solid green; 
   border-radius:20px; 
   background: -webkit-linear-gradient(45deg,green,maroon,crimson,darkblue);
}
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Isha,

Yes, your second example is the correct way to do it.

      background: -moz-linear-gradient(45deg, green,maroon,crimson,darkblue);
      background: -webkit-linear-gradient(45deg, green,maroon,crimson,dark blue);

But remember to add the normal css to the bottom too.

      background: -moz-linear-gradient(45deg, green,maroon,crimson,darkblue);
      background: -webkit-linear-gradient(45deg, green,maroon,crimson,dark blue);
      background: (45deg, green,maroon,crimson,dark blue);
Isha Srivastava
Isha Srivastava
5,002 Points
Isha Srivastava
Isha Srivastava
5,002 Points

hey Wayne, thanks but can you please explain why is it so to add the normal css to the bottom??

Isha Srivastava
Isha Srivastava
5,002 Points
Isha Srivastava
Isha Srivastava
5,002 Points

hey Wayne, thank you very much.. :)

Yves Roulin
Yves Roulin
4,452 Points
Yves Roulin
Yves Roulin
4,452 Points

The Prefixes just make sure that the bottom CSS works in other web browsers, like a "Patch" for Firefox, Opera, IE and so on...