Syntax, timing function, looped animation, multi-step animation, alternating animations, shorthand values, fill modes (forwards and backwards), dynamic animations with CSS variables

How to fingerprint, with CSS and the according project: https://github.com/OliverBrotchie/CSS-Fingerprint

Skeuomorphism relies on real-world aesthetics to make the UI intuitive and familiar. The app logo of YouTube on iPhone was a TV for example.

Flat and Material design has dominated the web UI landscape since the early days of responsive design

The dream of a more tactile-looking 3D web UI lived on, and it resurfaced in 2020 as Neumorphism.

A mix of Skeumorphism and Material Design.

Neumorphism also has serious accessibility flaws. The poor contrast made the UI unusable for users with poor vision or color blindness, and it’s difficult to perceive visual hierarchy if the effect is overused. Moreover everything, including cards and other non-interactable elements, looks like a button.

Claymorphism builds on top of Neumorphism foundations. Although both use rounded corners, they differ in how they use backgrounds and shadow.

Pick your main color and this tool generate the platette that is WCAG compliant.
It generates individual Sass variables or css variables.

Summary:

RGB is known to be limited.

HSL provides a much more explicit way to describe the color:

• a position on a color wheel: hue (0-360, described as turn or degrees)
• how much of this color: saturation
• lightness

Looks better !

HWB: Hue, hiteness and Blackness. It is useful for creating monochrome color palette.

LAB is recommended if you want a color to look the same on-screen as, say, printed on a t-shirt.
It uses three axes: lightness, a-axis (green to red) and b-axis (blue to yellow)

LCH is much more interesting for web development though. it stands for Lightness, Chroma and Hue.

• lightness: a pourcentage that can exceeds 100.
• hue : is working the same as in HSL
• Chroma : respresents the amount of color. It is similar to the saturation. In the browsers, there is often an upper bound.

More about it: https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/

A comparison between LCH and HSL : https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4253d9b2-46d7-4b10-9e1a-b5f3ac6cea1c/5-modern-css-color.png

Tip: Holding down SHIFT and clicking the color swatch in the inspector in Chrome and Firefox dev tools will toggle the color value between hex, RGB and HSL!

Thanks for this cool tip !

Check the Level 5 Color specification for more about incoming color possibilities.

Only supported by chrome for now

1. A Save-Data header is sent on each HTTP request. This allows dynamic backends to change the HTML returned.
2. The NetworkInformation.saveData JavaScript API. This allows client-side JavaScript to check this and act accordingly.
3. The upcoming prefers-reduced-data media query, which allows CSS to set different options depending on this setting. This is available behind a flag in Chrome, but not yet on by default while it finishes standardization.

simple.css includes the following right out the box:

• A good looking sans-serif local font stack.
• Typographic best practices.
• Automagic flipping to dark mode.
• Fully responsive.
• Sensible defaults that format standard HTML elements.
• Super lightweight; less than 4 KB in size.

A powerful color picker with corresponding color palette. A clean & simple color picker for web designers.

In a nutschell: font-variant-numeric: tabular-nums; to make space between digit in a number consistent.

See https://twitter.com/i/status/1486059026064584711 for a animated example

Use gap to insert space on both axis left and right between elements

Nesting
Subgrid
Cascade Layers
New CSS color functions
accent-color
@when / @else
:has()
@container() query

I totally agree :)

Stylus on the Chrome Web Store has more than half a million users. Stylish has over three million. That’s a lot of people modifying the web to get what they want.

It is possible to activate/deactivate a class with node.classList.toggle('className', true/false)

The example provided about forms is impressive ! HTML and CSS are so much powerful ! I think I will use them more in vue and svelte :)

There is a <template> tag in HTML 5.

The componentization is still to be done though. I always forgot how HTML5 and CSS are powerful nowadays.

TL;DR; using css variables again

aspect-ratio can have two types of values:

• 3 / 2: a ratio of 3 in width and 2 in height
• 3: a simple number where the width and height are equal

How to program a dark theme for a website. It is easier than expected with @media (prefers-color-scheme: dark) and css variables !

TL;DR; Use hsl isntead of RGB to create a gradient. This will avoid a grey zone. But using hsl is not available in CSS for now, so we can use a linear-gradient from a multiple of colors instead. Each color have to be similar to its neighbors... and it works !

and here the tool: https://www.joshwcomeau.com/gradient-generator/

Display an item on scroll.