BrowserUX.css: Pas seulement un reset. Une mise à niveau du navigateur.

Simple dans son essence, solide dans ses fondations.

browserux.css est construit autour de quatre axes fondamentaux, présents dans chaque règle CSS.

• 🔄

  Réinitialisation

  Supprime les marges, paddings et styles navigateur indésirables, tout en préservant les comportements sémantiques utiles.

• ⚙️

  Normalisation

  Harmonise le rendu des éléments HTML entre les navigateurs pour garantir un comportement cohérent quel que soit l'environnement.

• 🧩

  Utilisabilité

  Optimise le flux d'interaction UX et réduit les frictions sur tous types d'appareils.

• ♿

  Accessibilité

  Garantit que le site reste utilisable pour tous les utilisateurs, y compris ceux qui utilisent des technologies d'assistance.

Léger en taille, riche en fonctionnalités.

• 🔄

  Réinitialisation

  • Réinitialisation universelle des espacements (margin/padding à 0).
  • Réinitialisation du modèle de boîte en border-box.
  • Suppression des indentations des tableaux.
  • Neutralisation des styles par défaut des boutons et champs de formulaire.
  • Bordure de fieldset et padding de legend supprimés.
  • Éléments [hidden] garantis invisibles (display: none !important).
  • Éléments médias rendus responsives.
  • Nettoyage des contours de focus par défaut dans Firefox.
  • Styles de validation de champs navigateur neutralisés.
  ⚙️

  Normalisation

  • Typographie de base unifiée (taille, police, hauteur de ligne).
  • Comportements typographiques standardisés (b, small, sub, sup).
  • Retour à la ligne équilibré pour les titres (text-wrap: balance).
  • Rendu normalisé de la règle horizontale (hr).
  • Apparence harmonisée des champs de formulaire.
  • Rendu cohérent des listes et tableaux.
  • Dialog et dialog::backdrop normalisés.
  • Réactivité améliorée du contenu média.
  • Comportement cohérent des barres de défilement.
• 🧩

  Utilisabilité

  • Défilement fluide (sauf si désactivé par les préférences utilisateur).
  • Transition fluide entre thèmes clair/sombre (respecte la préférence de réduction de mouvement).
  • Gestion tactile optimisée sur mobile (touch-action: manipulation).
  • Empêche le contenu média de déborder de son conteneur.
  • Les mots longs et les URL reviennent à la ligne pour éviter le débordement (overflow-wrap: break-word).
  • Désactive la sélection de texte indésirable sur les éléments interactifs.
  • Force la visibilité de la barre de défilement pour éviter les décalages de mise en page.
  • Gouttière de barre de défilement réservée pour éviter les décalages (scrollbar-gutter: stable).
  • Styles de curseur améliorés pour les éléments interactifs (pointer, not-allowed).
  • Le textarea s'ajuste automatiquement au contenu sans JavaScript (field-sizing: content).
  • Décalage de soulignement amélioré pour une meilleure lisibilité des liens (text-underline-offset).
  • Curseur de texte cohérent avec le thème dans les champs éditables (caret-color).
  • Animation d'entrée native pour le dialog via @starting-style (respecte la préférence de réduction de mouvement).
  • Styles optimisés pour l'impression pour un rendu imprimé plus propre.
• ♿

  Accessibilité

  • L'interface native du navigateur s'adapte au thème système (color-scheme: light dark).
  • Respecte les préférences système : mode sombre et réduction de mouvement.
  • Couverture complète des variables en mode sombre, y compris les couleurs de validation et de barre de défilement.
  • Support du mode contraste élevé (prefers-contrast: more).
  • Support de la transparence réduite pour le backdrop de dialog et la barre de défilement (prefers-reduced-transparency).
  • Support du mode contraste élevé de Windows (forced-colors: active).
  • Les styles de validation de champs ne s'appliquent qu'après interaction utilisateur (:user-valid / :user-invalid).
  • Contours de focus clavier visibles avec :focus-visible.
  • Support de accent-color sur les champs de formulaire.
  • Curseur d'aide sur les éléments avec information supplémentaire (abbr, dfn).
  • Styles de validation neutres (notamment dans Firefox).
  • Barres de défilement visibles et personnalisables, sans les masquer via des hacks CSS.