CSS

Augmenter la taille de clic d'un élément

Créer un élément transparent dans le ::before, qui est agrandi de x px par rapport à l'élément d'origine.

button::before {
    content: '';
    position: absolute;
    top: -10px; right: -10px; bottom: -10px; left: -10px;
}

Reset le style d'un bouton par défaut

button {
  /* ou appearance: none ; permet d'enlever le style par défaut du navigateur */
  all: initial;
  font: inherit;
  color: inherit;
}

Pour une grid qui se retaille toute seule

display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

Des enfants à largeur égale

Explication Stack Overflow : "if the parent container can not provide enough space for the native-size added together of every item (no space to grow), we need to make the width: 0 to give every item the same start point to grow."

.item {
  flex: 1 1 0;
  width: 0;
}

Full bleed

(https://www.joshwcomeau.com/css/full-bleed/)

.wrapper {
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
}

.full-bleed {
  grid-column: 1 / -1;
}

Style standardisé de focus

(Standardizing Focus Styles With CSS Custom Properties )

Pourquoi l'utilisation de :is dans le snippet ? car la spécificité devient très haute, donc plus compliqué à surcoucher “par accident” par la suite

/* Permet d’avoir une valeur mini de 2px */
--outline-size: max(2px, 0.08em);
--outline-style: solid;
--outline-color: currentColor;

:is(a, button, input, textarea, summary) {
  --outline-size: max(2px, 0.08em);
  --outline-style: solid;
  --outline-color: currentColor;
}

:is(a, button, input, textarea, summary):focus:not(:focus-visible) {
  outline: none;
}

:is(a, button, input, textarea, summary):focus-visible {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  /* Fallback sur --outline-size pour surcoucher --outline-offset si on
  le souhaite */
  outline-offset: var(--outline-offset, var(--outline-size));
}