It's a cheap version for liquid glass with backdrop-filter: blur(10px) brightness(120%); :D

SVG filters are really good for text effects.

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

That's why Content Security Policies in HTTP are still useful for CSS

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:

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;
}

Des définitions avec des exemples de locales.

i18n: The design and development of a product that is enabled for target audiences that vary in culture, region, or language.
i10n: The tailoring of a system to the individual cultural expectations of a specific target market or group of individuals.
Locale: an identifier for a set of international preferences
international

Ainsi que les RFCs les définissant, avec notamment l'exemple de l'en-tête HTTP "Content-Language", "Accept-Language".
Les locales sont aussi utilisées via l'attribut lang, la spécificité de translate, dir, hreflang en HTML; et les possiblités d'usages en CSS via les sélecteurs

Mots-clés lié à display: flex

• auto : L'ancien roi. Contextuel, imprévisible parfois, il laisse le navigateur calculer la taille selon le modèle de boîte standard (display).
• min-content : "Je veux être aussi petit que possible." Le navigateur va essayer de réduire la boîte jusqu'à ce que le mot le plus long ou l'élément le plus large force la largeur minimale. C'est le "soft wrapping" ultime.
• max-content : "Je prends toute la place dont j'ai besoin." La boîte s'élargit pour contenir tout le texte sans aucun retour à la ligne, quitte à provoquer un scroll horizontal (à utiliser avec prudence !).
• fit-content : Le compromis parfait. C'est mathématiquement équivalent à min(max-content, available-space). La boîte s'adapte au contenu, mais s'arrête poliment si elle touche le bord du conteneur parent.
• stretch : L'élément s'étire pour remplir l'axe disponible. C'est souvent le comportement par défaut des flex-items ou des grid-items.

Math functions such as clamp(), min(), max().

Le pattern Repeat Auto Minmax (RAM) est usuellement donné aux snippets qui génère une grille responsive sans aucun breakpoint grid-template-columns: minmax(300px, 1fr)

The breakpoint is used for mobile, but appears inconvenient for tablet or half-screen windows.

Solutions:

• having more breakpoints in between
• design with container queries in mind
• make the design dynamic at its core, meaning that it can change based on the number of items
• leverage well supported features like Grid and Flex

appearance: base-select, so it's too early yet.

It can be useful for later. It seems broken on Firefox though.

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

I don't know if SASS is relevant for most projects nowadays.

A powerful demo

I also use the folder model to understand it. The way I undestood it is with some trials. I got it with position:absolute that somehow create a new stack. This stack inherits the z-index of the DOM node.

Render Voxel design in UI

a thing you absolutely cannot do is nest one interactive control inside another

it has few examples.

Some things to consider in this reset:

• an anonymous layer is used.
• border-box for all
• reset margins and borders
• reset body margins and paddings.
• min body height is 100%
• typography: line-height 1.5; prevent text-size-adjust for mobile
• but headings, button, input and label get a smaller line-height
• prevent media content overflow with max-inline-size: 100%; display: block; block-size: auto
• fill svg with currentColor for svg without fill properties
• inherit fonts in fields
• textarea should resize only vertically
• remove fieldset borders
• text with text-wrap: pretty
• every digit has its own size (use tabular-nums for tables, time, math) with font-variant-numeric: proportional-nums
• overflow-wrap: break-word on texts and heading to avoid inline overflows
• get the numbers on the same baseline with font-variant-numeric: lining-nums;
• hanging punctuation must be set properly
• code clarity is a must, so font-variant-numeric: slashed-zero is useful.
• collapse table borders
• reset sup and sub line-height because they are messing with it in texts
• align opacity with :disabled to 0.8 for all browsers and set the cursor: not-allowed
• add an outline-offset to 0.2rem for :focus-visible

Shadcn makes the radio button overly complex, even if <input type="radio" name="beverage" value="coffee" /> with 30 lines of CSS is enough.
The library uses 3 imports (and 2 components) and 45 lines of code and ARIA.

Text rotating at the borders of an image

HTML and CSS only 😃