Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations CSS Gradients Linear Gradients

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

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

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

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??

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

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

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

hey Wayne, thank you very much.. :)

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...