210 private links
A css reset.
The font family can be simplified with system-ui.
I don't know if it is pertinent to make the font-size bigger than the user wants it...
Crazy easter eggs everywhere
From scratch
The author provides a list of hosting too: https://web.pixelshannon.com/make/#:~:text=where%20can%20i%20publish%20my%20website%20for%20free%3F
A modern marquee element
But, when a developer experience feature is baked into the browser, I start to get uncomfortable. I know I can be a bit of a curmudgeon about this stuff, but that isn’t my default setting. That comes from lots of experience of lots of different codebases in my years as a CSS consultant. I’m a stickler for learning from mistakes.
CSS library based on Counter Strike 1.6 UI.
- Springy easing with linear()
- Typed custom properties
- View transitions for page navigation
- Transition animation for
- Transition animation for
- Animated adaptive gradient text
A tool is proposed at the end to create such blur effects. It has a radius, an inset, blur value and a transition from the blur value to 0.
A rating UI pattern with smileys: only built with HTML and css.
I don't understand everything yet
To simulate unsupported CSS rules: delete them.
Providing fallback is as easy as providing multiple values for the same property: the first the most supported, then going to the last value.
In other situations, we might want to apply an alternative set of styles when a feature is unsupported. We can use the @supports at-rule for this.
The goal isn’t to produce exactly the same UI for all users. The goal is to provide a reasonable fallback experience.
- browser breakdown
The statistics come from caniuse, that uses the web analystics statcounter. For each website, the audience will be different. Joshwcomeau notes that there are 4.1% more Firefox users visiting his website.
It leads to the potential harm: Is it OK to break the user experience for 1% of users? What is the potential harm caused by a broken experience?
To answer this question in business, this is a cost question: is it worth it? On the contrary, essential services such as a booking vaccine service needs to be as widely supported as possible.
Pro tip for media queries: using min-width container queries only will display at worse the mobile view.
This is a playground for learning and testing CSS selectors in a visual way. Start by selecting a playground or let's start with a random selector.
A progressive enhancement with view-transition
Are CSS reset needed? The author generates diff-images with and without.
Using margin-inline und max()