CODEWITHSUNDEEP
csstwitter-bootstrap
Sven
Sven

Reputation: 13275

Overwriting CSS properties in Twitter Bootstrap

I want to change the look of Twitter Bootstrap. I basically know how this works and have everything set up & working.

By default, the .navbar-inner has a border radius. See how it is declared below - they used prefixes.

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  background-repeat: repeat-x;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  *zoom: 1;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}

Now let's say I don't want that border-radius. Do I have to write it like this

.navbar-inner {
    border-radius: 0;
}

or like this

.navbar-inner {
    -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

to ensure maximum browser compatibility?

Using the first option works for me and it looks nicer than with all the prefixes, but I am worried that some browsers won't understand it.

Upvotes: 0

Views: 509

Answers (1)

tw16
tw16

Reputation: 29575

You have to use the prefixes if you want to cover all of the older browsers. That is the reason bootstrap has included prefixes to begin with.

If you only use the un-prefixed version, the older browsers that implemented only the prefixed versions will not interpret the un-prefixed version correctly and will not be changed / zeroed out.

Upvotes: 2

Related Questions