Regular Expression CSS3 Hack

I’ve been meaning to write this snippet for awhile. I hate writing things like:

-webkit-border-radius : 10px;
-moz-border-radius : 10px;
-o-border-radius : 10px;
border-radius : 10px;

There is at least one jQuery plug in that deals with this issue for you. But suppose your not using javascript to animate these properties, you just want a shadow or the ability to rotate a div. You could do something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >
    <title>CSS3 Hack</title>
    <script>
      window.onload = function(){
        var style = document.getElementsByTagName("style")[0]; 
 
        var prefix = ["-webkit-", "-moz-", "-o-", "-khtml-"];
 
        function replaceValue(property){
          var str = "";
          for (var i = 0; i<prefix.length; i++){
            str += prefix[i] + property + "$2;"; 
          }
          return str;
        }
        style.innerHTML = style.innerHTML.replace(/(transform|border-radius|box-shadow)\s?(.+)/g, replaceValue("$1"));
      }
    </script>
    <style>
      html, body{
        color : white;
        font-family : Georgia, serif; 
      }
      #box{
        position : absolute;
        width : 100px;
        height : 100px;
        transform-origin : 0% 0%;
        transform: translate(0px, 100px) rotate(-20deg) scale(2, 2);
        background-color : #7e9fc2;
        border-radius : 10px;
        box-shadow : 0px 0px 10px rgba(0,0,100,0.5);
        border : 4px solid #c9ddf0;
        padding : 20px;
      }
    </style>
  </head>
  <body>
    <div id="box" >CSS3 Hack</div>
  </body>
</html>

Which will result in:

In the code snippet above I alter the innerHTML of the first style tag in the html document. I run a regular expression replace to change things like:

box-shadow: 10px 10px 10px black;

to :

-webkit-box-shadow: 10px 10px 10px black;
-moz-box-shadow: 10px 10px 10px black;
-o-box-shadow: 10px 10px 10px black;
-khtml-box-shadow: 10px 10px 10px black;
box-shadow: 10px 10px 10px black;

I haven’t tested this thoroughly and it definitely wont work in IE. But I thought it was worth posting.



 
 
 

Leave a Reply

Spam protection by WP Captcha-Free