It works in <svg> tags:

  <style>
    .bg {
      fill: #ffffff;

      @media (prefers-color-scheme: dark) {
        fill: #000000;
      }
    }
  </style>

SVG filters are really good for text effects.

The CSS alternative version (because it can be more powerful or maintainable)

ul.notes li {
    list-style-type: "Note: ";
    list-style-position: inside;
}

The ::marker pseudo-selector can be used to customize the rest. Generating content for markers is supported by Chromium and Firefox, but not by WebKit.

A list of symbols can be used with symbols(). The browser support is not great though. @counter-style can be used instead. It's Baseline Newly Available since 2023.

There is also the old ::before trick to set custom contents.

As summary:

Passer les PNG/JPEG qualité 90 à AVIF qualité 50 permet d'économiser au moins 75% de bande passante.

L'idée plus innovante est de compresser au préalable les ressources avant qu'elles soient utilisées.

[Précompresser avant de déployer] veut dire qu’on peut les compresser une seule fois, avec le niveau maximum, et demander à nginx de servir directement les fichiers pré-compressés. Zéro CPU à chaque requête, mais surtout un meilleur ratio au final, car on peut compresser plus fort.

En outre, Zopfli permet de compresser en .zip avec 3 à 8% d'efficacité en plus.

# Serve pre-compressed files generated at build time
gzip_static on;
brotli_static on;  # nécessite libnginx-mod-http-brotli-static

# Fallback pour les contenus non pré-compressés
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript
           application/javascript application/json
           application/xml image/svg+xml;

La compression Brotli permet de compresser à hauteur de 81% le HTML. La score des Web Core Vitals est passé de 70-85 à 99%.

The reset:

legend {
  padding: 0;
  display: table;
}
fieldset {
  border: 0;
  padding: 0.01em 0 0 0;
  margin: 0;
  min-width: 0;
}
body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}

A dialog transition. It can be definitely useful instead of heavy implementations. Here is a lightweight implementation without JS.

A powerful demo

Text rotating at the borders of an image

A list of demos built with GSAP

TL;DR; use a negative GRAD value

GRAD stands for "grade", and it's a variable font axis that allows us to adjust the perceived weight of a font without changing the glyph size.

GRAD stands for "grade", and it's a variable font axis that allows us to adjust the perceived weight of a font without changing the glyph size.

body {
  --GRAD: 0;
  font-variation-settings: "GRAD" var(--GRAD);
}

@media (prefers-contrast: more) { body { --GRAD: 700 } }
@media (prefers-contrast: less) { body { --GRAD: -50 } }

@media (prefers-color-scheme: dark)                              { body { --GRAD: -50 } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { body { --GRAD: 150 } }
@media (prefers-color-scheme: dark) and (prefers-contrast: less) { body { --GRAD: -150 } }

I restart the project

Following https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/

More thoughts about utility classes (only utilities and not a core use anymore), :has(),

What fascinated me most was watching the architecture evolve across releases.

Campfire: OKLCH colors, Custom properties for everything, character-based spacing, flat file oranization, View Transitions API
Writebook (2nd): COntainer queries for component-level responsiveness, @starting-style for entrance animations
Fizzy (3rd release): CSS Layers, color-mix() and complex :has() to replace JS.

37Signals share their product codes in Open Source. That's awesome because we can learn from it:

/* Fizzy's layer architecture */
@layer reset, base, components, modules, utilities;

@layer components {
  .btn { /* Always lower specificity than utilities */ }
}

@layer utilities {
  .hide { /* Always wins over components */ }
}

A CSS only spinner under 30 lines of CSS code. "Pure creativity".
A better <mark> that draws a hand-drawn circle around matched terms.
They also created dialog animations in CSS only.

* {
  letter-spacing: clamp(
    -0.05em,
    calc((1em - 1rem) / -10),
    0em
  );
}

How CSS simplify scrollable images with

display: flex;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;

// On the images
scroll-snap-align: center;
 contain: size;
  place-self: stretch;
  object-fit: cover;

:root {
  --w: calc(100vw/1px); /* screen width  */
  --h: calc(100vh/1px); /* screen height */
  /*  The result is an integer without a unit! */
}

A version with better support:

:root {
  --w: calc(100vw/1px); /* screen width  */
  --h: calc(100vh/1px); /* screen height */
  /*  The result is an integer without a unit! */
}

A theme for october :)

The project is available at https://github.com/twomile/js-bats

The snippet:

legend {
  padding: 0;
  display: table;
}
fieldset {
  border: 0;
  padding: 0.01em 0 0 0;
  margin: 0;
  min-width: 0;
}
body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}

Let's create a project and benchmark it :D

a:not(:is(:hover, :focus)) {
  text-decoration-color: 
    color-mix(in srgb, currentColor, transparent 75%);
}