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.