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 {
color: color-mix(in oklch, cyan, green 25%);
}
}
: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 {
color: rgb(0, 222, 199);
}
@media (color-gamut: p3) {
a > span {
color: color(display-p3 0.33498 0.86864 0.78466);
}
}
input:hover, input:focus, button:hover, button:focus {
color: rgb(131, 27, 0);
}
@media (color-gamut: p3) {
input:hover, input:focus, button:hover, button:focus {
color: color(display-p3 0.49362 0.10739 0);
}
}
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
features: {},
},
],
]
}
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.
- cascade layers
:is()
pseudo class- media query ranges
- nesting rules
oklab()
function- custom selectors
light-dark()
color-mix()
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: 10.0.6
See CHANGELOG