CODEWITHSUNDEEP
csscross-browser
BenMorel
BenMorel

Reputation: 36484

Cross-browser CSS3 javascript library

I'm a bit worried about having to write cross-browser CSS directives every time I use a CSS3 feature, for example:

-webkit-transform: rotate(7.5deg);  /* Safari 3.1+, Chrome 
   -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15 
    -ms-transform: rotate(7.5deg);  /* IE9 
     -o-transform: rotate(7.5deg);  /* Opera 10.5-12.00 
        transform: rotate(7.5deg);  /* Firefox 16+, Opera 12.50+

In the same way that CSS3 PIE works for IE, is there a javascript library that we could just include as a one-liner in the html <head>, that would read the standard version of the CSS directive (transform: in this example), and apply the specific one for the current browser?

That would allow me to write valid CSS3 code, and even more important, write less code.

Upvotes: 1

Views: 1956

Answers (3)

1001binary
1001binary

Reputation: 1

You can use cross-style for handling the cross browsers. There will be a lot of built-in custom CSS components in this library.

e.g:

.cs-border-radius {
  background-color: indigo;
  padding: 32px;
  cs-border-radius: 10px; // custom CSS component
}
<html>
  <head>Test the cs-border-radius working on cross browsers</head>
  <link href="site.css" rel="stylesheet"/>
  <body>
    <div class="cs-border-radius">
      Congratulations! Your border-radius is working fine on cross browsers!
    </div>

    <script type="text/javascript" src="cross-style.min.js"></script>
  </body>
</html>

output:

    <div class="cs-border-radius" style="border-radius:10px;
-moz-border-radius:10px; -webkit-border-radius:10px;
-khtml-border-radius:10px; behavior: url(../vendors/css-pie/2.0-beta-1/PIE.htc)">
              Congratulations! Your border-radius is working fine on cross browsers!
    </div>

Upvotes: 0

maxisam
maxisam

Reputation: 22705

I would suggest you use twitter bootstrap and use its less mixins to achieve this. Besides, if you want to write less css code. You must check LESS first.

in its less mixins

it contains a lot of stuff like 

// CSS3 PROPERTIES
// --------------------------------------------------

// Border Radius
.border-radius(@radius:4px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

And the whole framework handle cross-browser issues very well from my point of view.

You might still need to use PIE to fix some problems and write your own mixinses.

The good thing here is you don't need to include any extra javascript library

You pretty much just use CSS to fix everything.

Upvotes: 3

David Thomas
David Thomas

Reputation: 253308

There's prefix-free, which promises to do what you want; though I must confess that I've never used it, so while I link to it, I'm unable to offer any recommendation.

Upvotes: 5

Related Questions