Start using modern CSS today
Modern CSS
:root {
--mainColor: #12345678;
}
body {
color: var(--mainColor);
font-family: system-ui;
}
a {
color: rgb(0 0 100% / 90%);
&:hover {
color: rebeccapurple;
}
> span {
font-weight: bold;
}
}
:is(input, button):is(:hover, :focus) {
color: oklch(40% 0.268735435 34.568626);
}
Becomes...
:root {
--mainColor: rgba(18,52,86,0.47059);
}
body {
color: rgba(18,52,86,0.47059);
color: var(--mainColor);
font-family: system-ui,
-apple-system,
Segoe UI,
Roboto,
Ubuntu,
Cantarell,
Noto Sans,
sans-serif;
}
a {
color: rgba(0, 0, 255, 0.9)
}
a:hover {
color: #639;
}
a > span {
font-weight: bold;
}
input:hover, input:focus, button:hover, button:focus {
color: rgb(143, 0, 0);
color: color(display-p3 0.52929 0.00000 0.00000);
}
Getting Started
- Install
postcss-preset-env
from npm. - Add postcss-preset-env to your configuration.
Here's an example with a postcss.config.js
file:
module.exports = {
plugins: [
[
'postcss-preset-env',
{
// Options
},
],
]
}
You can read more on how to use and install PostCSS Preset Env.
Tomorrow's CSS features are already available. Start using them today
With postcss-preset-env
you can use modern features such as alpha hex color, break properties,... Check out the full features list.
postcss-preset-env
will provide fallbacks and polyfills for CSS features to make your projects work in as many browsers as possible.
- custom properties
:is
pseudo class- media query ranges
- nesting rules
lab()
functionsystem-ui
font family- custom selectors
color()
function
Works with PostCSS
PostCSS is the tool for transforming CSS with JavaScript with over 60 million downloads every week. If PostCSS is enabled, adding PostCSS Preset Env is just a breeze!
Trusted by millions
PostCSS Preset Env is downloaded more than 7 million times a week from NPM. Found a bug? Let us know on GitHub!
Latest version: 8.0.1
See CHANGELOG