0

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.

Improve this question
3
  • There are javascripts out there to do it (cross-origin problems can arise), but I'd suggest a macro of sorts. Write the code as you like, then have a batch script that makes a new CSS file with the added vendor prefixes. Commented Aug 8, 2012 at 20:43
  • I've heard about CSS preprocessors for this, but (especially during development), what I'm specifically asking for would be very handy! Commented Aug 8, 2012 at 20:44
  • 1
    The problem with having javascript do the work is that then it depends on your development enviornment whether it'll work perfectly or not. Since external CSS files included into the document don't push any of the actual CSS rules to the DOM, javascript needs to request the files via AJAX to read them. This can lead to problems when not testing via a server or if using files from a different origin. Commented Aug 8, 2012 at 20:47

3 Answers 3

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

it says The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop. If you are only care about IE9+, you should be fine with it.
3

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.

Improve this answer

1 Comment

That looks like an excellent alternative. I will definitely have a look!
0

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.