228 private links
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()
Are CSS reset always needed?
CSS resets are based on three premises:
- There are differences in how user agents present web pages, that is, their default styles vary.
- These differences have an effect on the given website.
- The differences are important to be handled.
But there are developers that does not use these resets
- That there are sites and apps out there that do not use and that work fine without a CSS reset is pretty much never being talked about in the context of CSS resets.
- When we take the extreme positions of always and never needing a CSS reset, positions we observe in practice, then we end up with a contradiction. P & ¬P
It reflects ARIA presses state with CSS. Isn't it already built-in ?
I am using it for aria-current.
Should it become a standard layout?
I also started when Flexbox was becoming at thing around 2014-2015.
[I] ... always hope that they learn from our past mistakes and become masters at the basics.
Replace <br> with text-indent: 2em each-line;.
The support for "each-line" is limited though: https://caniuse.com/?search=text-indent+each-line