postcss-preset-env
caniuse
postcss-preset-env | caniuse | |
---|---|---|
9 | 390 | |
2,201 | 5,503 | |
- | - | |
6.6 | 9.5 | |
about 2 years ago | 5 days ago | |
CSS | JavaScript | |
Creative Commons Zero v1.0 Universal | Creative Commons Attribution 4.0 |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
postcss-preset-env
-
Vanilla+PostCSS as an Alternative to SCSS
Switching from a ready-made tool like Sass or a recommendation package like cssnext (deprecated since 2019) or PostCSS Preset Env (archived in 2022), to the modular PostCSS Preset Env plugin set we can choose a helpful and convenient set of future CSS features beyond the current stable client CSS.
-
What is PostCSS & Why should we care?
To enable the future CSS there is also a plugin called PostCSS Preset Env. This plugin will take the unreleased CSS selectors and change it to the present usable CSS. More info at PostCSS Preset Env
-
Getting started with Svelte, Tailwind, and Nrwl NX
Third, we enable the postcss-preset-env plugin, which adds support for many other cool things
- Why css in js over scss/css? Convince a team lead
-
PostCSS nesting with CSS variables isn't working in Tailwind CSS & Next.js
My PostCSS Config contains postcss-preset-env already which should support for CSS nesting. I also installed postcss-nested & postcss-css-variables, just in case.
-
Moving From Tailwind To Vanilla-er CSS
To solve this I used postcss-preset-env, which allowed me to define a "custom-media" with the name --viewport-lg and the value (min-width: 1024px). As postcss-preset-env also supported nested CSS this allowed for some pretty readable CSS.
-
CSS tips and tricks you won’t see in most of the tutorials
If you use PostCSS, postcss-preset-env[1] is pretty neat for reading up on the latest features. E.g. here is the place properties feature[2].
1: https://preset-env.cssdb.org/
-
Here's my website setup...
postcss-preset-env - it lets you use some cutting-edge CSS but understandable by modern browsers.
-
VSCode extensions for detecting CSS/SCSS invalid value errors?
https://stylelint.io https://github.com/csstools/postcss-preset-env
caniuse
-
Time-Based CSS Animations
The article uses custom css @properties which are awesome and have 88% browser support [1].
One thing to watch out for is differences in how browsers handle setting the fallback initial-value. Chrome will use initial-value if CSS variable is undefined OR set to an invalid value. Firefox will only use initial-value if the variable is undefined. For most projects, this won't be an issue, but for a recent project, I ended up needing to use javascript to set default values in Firefox to iron out the inconsistency between browser implementations.
[1] https://caniuse.com/?search=%40property
-
CSS Text Box Trim
Safari is the only browser that doesn't support extending HTML element
https://caniuse.com/?search=Custom%20Elements
-
JavaScript is not single-threaded
You forgot to mention (Web)Workers. This is explicit creation, management, and communication with additional threads within JavaScript. What's more, they've been around in JavaScript longer than the V8 engine has even existed!
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers...
https://caniuse.com/?search=webworkers
- Show HN: Render audio to HTML canvas using WebGPU
-
Tree-shaking, the horticulturally misguided algorithm
Do you happen to know where can I check out the cutoff version for each browser? https://caniuse.com/?search=wasm doesn't have it (or other things like WasmGC for that matter)
- Le saviez-vous ? :focus :focus-within :focus-visible
-
10 Websites Every Web Developer Should Bookmark
(https://caniuse.com/) A handy tool for checking the browser compatibility of HTML, CSS, and JavaScript features. Can I Use provides up-to-date support tables for various web technologies across different browsers.
-
SASS is dead? CSS vs SASS 2024
Caniuse
-
Free Resources Every Web Developer Should Know About
Can I Use (https://caniuse.com/)
-
Speedometer 3.0: A Shared Browser Benchmark for Web Application Responsiveness
> Is it though?
In my experience it's the buggiest browser out of the big three, and is often missing basic features like e.g.:
https://caniuse.com/?search=opus
Supported in Firefox for *12 years* now, in Chrome for 10, still no support in Safari.
They only "support" Opus audio in their special snowflake '.caf' container, which is super buggy and the last time I checked no open source program could even generate Opus '.caf' files that could be played by Safari on all Apple platforms. I ended up writing a custom converter which takes a standard '.opus' file and remuxes it on-the-fly (I only store '.opus' files on my server) into Safari-compatible '.caf' files, taking special care to massage it so that it avoids all of their demuxer/decoder bugs. You shouldn't have to do this to have cross-browser high quality audio!
What are some alternatives?
autoprefixer - Parse CSS and add vendor prefixes to rules by Can I Use
browserslist - 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
postcss-nested - PostCSS plugin to unwrap nested rules like how Sass does it.
caniemail - Can I email… Support tables for HTML and CSS in emails.
svelte-preprocess - A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
modern-css-reset - A bare-bones CSS reset for modern web development.
Sass - Sass makes CSS fun!
modern-normalize - 🐒 Normalize browsers' default style
Tailwind CSS - A utility-first CSS framework for rapid UI development.
Servo - Servo, the embeddable, independent, memory-safe, modular, parallel web rendering engine
postcss-mixins - PostCSS plugin for mixins
WHATWG HTML Standard - HTML Standard