Aide-mémoire des astuces et techniques pratiques en CSS

Guide de référence de techniques CSS pratiques, d'améliorations typographiques et d'astuces pour terminaux mobiles.

Lisibilité typographique & Ligatures

Active le crénage (kerning) et les ligatures optionnelles pour les titres :

h1, h2, h3 {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

---

Effet de texte en dégradé (Gradient Text)

Rend des dégradés linéaires directement à l'intérieur des caractères :

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

---

Contour de texte (Text Stroke)

Ajoute un trait de contour aux caractères de texte :

.stroked-heading {
  -webkit-text-stroke: 1.5px #111;
  color: white;
}

---

Optimisations tactiles et WebKit pour mobile

Désactive la surbrillance de toucher par défaut et les menus contextuels sur appui long :

* {
  /* Supprime le rectangle de surbrillance tactile sur mobile */
  -webkit-tap-highlight-color: transparent;
  /* Désactive le menu contextuel iOS lors d'un appui long */
  -webkit-touch-callout: none;
}

/* Supprime le contour au clic tout en préservant le focus clavier */
a:focus:not(:focus-visible) {
  outline: none;
}

---

Défilement fluide accéléré matériellement

.scroll-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Défilement avec inertie sur les anciennes versions de Safari iOS */
  overscroll-behavior-y: contain;    /* Empêche le déclenchement intempestif du pull-to-refresh */
}