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 😃

ReliCSS is a "CSS hack" detection tool designed to help developers identify and replace outdated browser-specific CSS hacks with modern, standards-compliant alternatives.

Real-time "CSS hack" detection and analysis with instant feedback
Context-aware modern CSS suggestions
Client-side processing - your code never leaves your device

Differences:

• light-dark() requires a color-scheme
• prefer-color-scheme doesn't consider the color-scheme

It's very chromium dependent though

Card content alignment with CSS subgrid