A simple CSS autoprefixer written in PHP to prefix according your desires minified CSS code on the server side.
You can easily turn this code :
.myclass {
color: red;
clip-path: var(--primary);
transition-duration: 3s;
}
@keyframes nameAnim {
0%,
100% {
column-gap: 5px;
}
}Into this one :
.myclass {
color: red;
clip-path: var(--primary);
-webkit-clip-path: var(--primary);
transition-duration: 3s;
-webkit-transition-duration: 3s;
-o-transition-duration: 3s;
}
@-webkit-keyframes nameAnim {
0%,
100% {
column-gap: 5px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
}
}
@keyframes nameAnim {
0%,
100% {
column-gap: 5px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
}
}Warning:
- This plugin class doesn't support the @media and all the other CSS Rules (except @keyframes)
- You must minify your CSS before compilation.
You can submit an pull request request if you are interested in any of these features.
$css = '.myclass{color:red;clip-path:var(--primary);transition-duration:3s;}@keyframes nameAnim{0%,100%{column-gap:5px;}}';
$autoprefixer = new CSS_Autoprefixer();
$autoprefixer->compile( $css );There is 5 methods to do this :
add_all_supportadd_webkit_supportadd_o_supportadd_moz_supportadd_ms_support
You can get a support list with a getter functions such as : get_webkit_support();
$css = '.myclass{color:red;clip-path:var(--primary);transition-duration:3s;}@keyframes nameAnim{0%,100%{column-gap:5px;}}';
$autoprefixer = new CSS_Autoprefixer();
$autoprefixer->add_webkit_support( array( 'mix-blend-mode', 'color' ) );
$autoprefixer->compile( $css );
// Output: .myclass{color:red;-webkit-color:red;clip-path:var(--primary);-webkit-clip-path:var(--primary);transition-duration:3s;-webkit-transition-duration:3s;-o-transition-duration:3s;}@-webkit-keyframes nameAnim{0%,100%{column-gap:5px;-webkit-column-gap:5px;-moz-column-gap:5px;}}@keyframes nameAnim{0%,100%{column-gap:5px;-webkit-column-gap:5px;-moz-column-gap:5px;}}GPL licensed.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent