div
{
<? css3(‘transition’, ‘opacity 200ms linear’); ?>
}
[/sourcecode]
… Which will output:
[sourcecode language=”css”]
div
{
-moz-transition: opacity 200ms linear;
-webkit-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
[/sourcecode]
And here’s an example for defining the CSS3 function element():
[sourcecode language=”css”]
div
{
<? css3(‘background’, ‘element(#background-div)’); ?>
}
[/sourcecode]
… Which will give you:
[sourcecode language=”css”]
div
{
background: -moz-element(#background-div);
background: -webkit-element(#background-div);
background: -o-element(#background-div);
background: -ms-element(#background-div);
background: element(#background-div);
}
[/sourcecode]
* As of January 2012, the element() function is supported only by Mozilla FireFox, so you may consider using normal CSS to define that function.
All Features:
[sourcecode language=”css”]
div
{
<? css3(‘background’, ‘url("background.png") no-repeat center, linear-gradient(#ccc, #333)’); ?>
}
[/sourcecode]
Requirements:
Usage:
[sourcecode language=”css”]
<link rel="stylesheet" href="css3.php?files=" />
[/sourcecode]
[sourcecode language=”css”]
<link rel="stylesheet" href="css3.php?files=Styles/styles-01.css,Styles/styles-02.css" />
[/sourcecode]
The order in which you define them is going to be their inclusion order in the final PHP-processed file. Make sure that URLs, pointing to external assets such as background images and fonts are set relatively to the css3.php file, otherwise, they will not be requested correctly.
[sourcecode language=”css”]
div
{
<? css3(‘background’, ‘element(#background-div)’); ?>
}
[/sourcecode]
[sourcecode language=”php”]
$prefixes = array(‘-moz-‘, ‘-webkit-‘, ‘-o-‘, ‘-ms-‘);
[/sourcecode]
The script can be easily changed to allow passing of prefixes as a function argument, if you wish to define the properties per function usage. Even better – the third argument can be an exclusion array, which will be checked against the vendor-specific array in the script itself (in_array()). Basically, you can change the function to this:
[sourcecode language=”css”]
div
{
<? css3(‘background’, ‘element(#background-div)’, array(‘-moz-‘, ‘-webkit-‘)); ?>
}
[/sourcecode]
The script can be downloaded from here. Other cool HTML5, CSS3 and JavaScript experiments can be found on this page.
© 2006 - 2023 Martin Ivanov