Démo interactive.
Corrections clés, avant/après.

Parcourez la page pour découvrir ce que browserux.css améliore et pourquoi c’est important. Activez ou désactivez browserux.css avec le bouton ci-dessous.

Télécharger ↓ ★ GitHub

Reset et normalisation : les bugs présents dans tous les projets

// Les valeurs par défaut des navigateurs créent des problèmes de mise en page et des incohérences visuelles entre moteurs. Ici, les corrections sont globales et appliquées une fois pour toutes.

Modèle de boîte : box-sizing: border-box

Sans border-box, le padding et la bordure s’ajoutent à la largeur déclarée. Un élément annoncé à 200px, avec 20px de padding et une bordure de 4px, finit par occuper 248px.

Sans
200px déclarés → 248px affichés
Avec browserux.css
200px déclarés → 200px affichés
*, *::before, *::after { box-sizing: border-box; }

Bouton : héritage de la police

Les navigateurs n’héritent pas toujours de la police de la page pour <button>, <input> ou <select>. Ces éléments peuvent s’afficher dans une police système qui rompt la cohérence visuelle.

Sans : police différente de la page
Avec browserux.css : même police que la page
button, input, select, textarea { font-family: inherit; font-size: 100%; }

Image : l’espace fantôme sous l’image

Les images sont inline par défaut. Leur bas s’aligne sur la ligne de base du texte, ce qui crée un espace inattendu dans les conteneurs.

Sans : espace fantôme sous l’image
demo
Avec browserux.css : vertical-align: middle
demo
audio, canvas, iframe, img, svg, video { vertical-align: middle; }

Séparateur horizontal : <hr>

Par défaut, <hr> peut s’afficher comme une bordure en relief. browserux.css le normalise en une ligne nette, cohérente avec le thème.

Sans : bordure en relief
Avec browserux.css : ligne nette de 1px
hr { border: none; border-top: 1px solid currentColor; color: inherit; }

Mots longs : overflow-wrap: break-word

Sans break-word, une longue URL ou une chaîne insécable déborde de son conteneur et casse la mise en page sur les écrans étroits.

Sans : le texte déborde de la boîte
https://this-is-a-very-long-url-that-overflows.example.com/path/to/page
Avec browserux.css : retour à la ligne maîtrisé
https://this-is-a-very-long-url-that-overflows.example.com/path/to/page
body { overflow-wrap: break-word; }

Titres : text-wrap: balance

Sans cette règle, les titres sur plusieurs lignes laissent souvent un mot isolé sur la dernière ligne. balance répartit les mots plus harmonieusement.

Sans : mot isolé sur la dernière ligne

Un titre long mieux réparti sur plusieurs lignes

Avec browserux.css : retours à la ligne équilibrés

Un titre long mieux réparti sur plusieurs lignes

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

Utilisabilité : moins de JavaScript à écrire

// Des améliorations UX autrefois confiées à des bibliothèques ou à des scripts, désormais prises en charge nativement par CSS.

Boîte de dialogue : ouverture animée en CSS

@starting-style définit l’état d’une boîte de dialogue avant son ouverture, ce qui permet un fondu et un glissement fluides. L’arrière-plan s’estompe aussi. Sans JavaScript.

/* État avant l'ouverture, interpolé par le navigateur */
@starting-style { dialog[open] { opacity: 0; transform: translateY(-8px); } }

Zone de texte : hauteur ajustée au contenu

field-sizing: content permet à la zone de texte de grandir avec son contenu. Pas de bibliothèque JavaScript d’auto-redimensionnement. Pas de gestionnaires d’événements.

Sans : hauteur fixe, poignée de redimensionnement horizontal
Avec browserux.css : grandit pendant la saisie
textarea { field-sizing: content; resize: vertical; }

Champs de formulaire : couleur du curseur

Le curseur de texte garde souvent la couleur par défaut du navigateur. Le teinter avec l’accent principal ajoute une touche soignée et cohérente avec la marque.

Sans : curseur par défaut du navigateur
Avec browserux.css : curseur thématisé
input, textarea, [contenteditable] { caret-color: var(--bux-color-accent); }

Mise en page : scrollbar stable

Quand une scrollbar apparaît ou disparaît, le contenu se décale. scrollbar-gutter: stable réserve l’espace nécessaire et évite les sauts de mise en page.

Sans : le contenu bouge quand la scrollbar apparaît

Observez le bord droit de cette barre →

Ligne 2

Ligne 3

Avec browserux.css : espace toujours réservé

Le bord droit de cette barre reste stable →

Ligne 2

Ligne 3

html { overflow-y: scroll; scrollbar-gutter: stable; }

Contrôles de formulaire : accent-color

Les cases à cocher, boutons radio et sliders utilisent souvent le bleu par défaut du navigateur. Une seule déclaration accent-color les adapte tous à votre couleur de marque.

Sans : bleu par défaut du navigateur
Avec browserux.css : couleur principale de la marque
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--bux-color-accent); }

Accessibilité : utilisable par tous

// Navigation au clavier, lecteurs d'écran, besoins visuels spécifiques : les bases restent solides sans effort supplémentaire.

Focus clavier : :focus-visible

Les clics à la souris ne doivent pas afficher de contour inutile, tandis que la navigation au clavier doit garder un indicateur de focus bien visible. BrowserUX utilise une solution fallback plus sûre : :focus reste visible par défaut, puis :focus:not(:focus-visible) retire le contour lors des interactions au pointeur dans les navigateurs compatibles.

Sans : contour de focus affiché partout
Cliquez ici
Avec browserux.css : fallback via :focus, affiné par :focus-visible
Cible du focus
:focus { outline: var(--bux-focus-width) solid var(--bux-focus-color); outline-offset: var(--bux-focus-offset); }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: var(--bux-focus-width) solid var(--bux-focus-color); outline-offset: var(--bux-focus-offset); }

Validation de formulaire : :user-valid / :user-invalid

Avec :valid/:invalid, les champs requis peuvent afficher une erreur dès le chargement de la page, avant même que l'utilisateur saisisse quoi que ce soit. :user-valid/:user-invalid attendent d'abord une vraie interaction.

Sans : état d'erreur avant interaction

Invalide avant toute interaction de l'utilisateur

Avec browserux.css : validation après interaction

Saisissez une valeur invalide, puis cliquez ailleurs

:is(input, textarea, select):user-invalid { background-color: var(--bux-color-invalid-surface); border-color: var(--bux-color-invalid); }

Mode sombre : color-scheme: light dark

Sans cette déclaration, les contrôles natifs de l'interface (sélecteurs de date, listes déroulantes, cases à cocher) restent clairs même en mode sombre. Une ligne les aligne sur le thème du système.

Sans : les contrôles natifs ignorent le mode sombre
Avec browserux.css : adaptation au thème du système
:root { color-scheme: light dark; }

Préférences système : tester les cas sensibles

// Pas besoin d'ouvrir les outils de développement. Vous pouvez voir directement ici comment browserux.css réagit aux préférences système.

Mode sombre

Les variables CSS s'adaptent via prefers-color-scheme: dark. Les états de validation et la scrollbar suivent le même thème.

Thème + champs de validation

Mouvement réduit

Animations et transitions sont désactivées via prefers-reduced-motion: reduce.

Animation en cours

Contraste élevé

Les placeholders et les éléments atténués sont renforcés avec prefers-contrast: more.

Texte normal. Accentuation italique. Petit texte.

Couleurs forcées

Le mode contraste élevé de Windows remplace les couleurs CSS. browserux.css préserve les signaux essentiels avec forced-colors: active.

Activez-le via Paramètres Windows → Accessibilité → Thèmes de contraste.

:focus-visible utilise Highlight. Les éléments de formulaire retrouvent leurs bordures ButtonText.

Sans animation

Cette boîte de dialogue s'ouvre instantanément : pas de fondu, pas de glissement, pas de retour visuel pour l'utilisateur.

Avec @starting-style ✓

Elle apparaît en fondu depuis une opacité de 0 et glisse vers le bas. L'arrière-plan s'estompe aussi. CSS pur, zéro JavaScript.