Accueil Github Docs Démo EN |

BrowserUX.css : Démo Interactive

Quelques corrections clés, avant et après.

Parcourez la page pour découvrir ce que browserux.css améliore et pourquoi c'est important. Utilisez le bouton ci-dessous pour activer ou désactiver browserux.css.

npm install browserux.css

Télécharger

Voir le CHANGELOG

Reset & Normalisation

Les bugs présents sur tous les projets

Les valeurs par défaut des navigateurs qui causent des problèmes de mise en page, des incohérences visuelles et des maux de tête cross-browser. Corrigés une fois pour toutes, globalement.

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 de 200px avec 20px de padding et une bordure de 4px s'affiche à 248px.

Sans

200px déclarés → 248px rendus

Avec browserux.css

200px déclarés → 200px rendus

*, *::before, *::after { box-sizing: border-box; }

Bouton : héritage de la police

Les navigateurs n'héritent pas de la police de la page sur <button>, <input> ou <select>. Ils s'affichent 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 mystérieux en bas

Les images sont inline par défaut. Leur bas s'aligne sur la ligne de base du texte, créant un espace à l'intérieur des conteneurs qui semble ne pas avoir de cause.

Sans : espace invisible sous l'image

Avec browserux.css : vertical-align: middle

audio, canvas, iframe, img, svg, video { vertical-align: middle; }

Séparateur horizontal : <hr>

Le <hr> par défaut s'affiche avec une bordure 3D en relief. Normalisé en une ligne propre et cohérente avec le thème.

Sans : bordure 3D en relief

Avec browserux.css : ligne nette 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 sans espace déborde de son conteneur et casse la mise en page sur les petits écrans.

Sans : le texte déborde

https://this-is-a-very-long-url-that-overflows.example.com/path/to/page

Avec browserux.css : retour à la ligne propre

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 propriété, les titres qui passent à la ligne laissent souvent un seul mot seul sur la dernière ligne, une veuve typographique. balance répartit les mots uniformément.

Sans : mot orphelin en dernière ligne

The fix that saves every project from layout pain

Avec browserux.css : lignes équilibrées

The fix that saves every project from layout pain

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

Ergonomie

Ce qui nécessitait autrefois du JavaScript

Des améliorations UX qui nécessitaient autrefois des bibliothèques ou des scripts, désormais gérées nativement par CSS.

Dialog : animation d'ouverture native

@starting-style définit l'état d'un dialog avant son ouverture, permettant un fondu + glissement fluide. Le backdrop s'anime aussi. Zéro JavaScript.

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

Textarea : redimensionnement automatique

field-sizing: content fait grandir le textarea avec son contenu. Aucune bibliothèque JavaScript. Aucun écouteur d'événement.

Sans : hauteur fixe, redimensionnement horizontal

Avec browserux.css : grandit au fil de la saisie

textarea { field-sizing: content; resize: vertical; }

Liens : décalage du soulignement

Le soulignement par défaut coupe les jambages (g, j, p, q, y). Un petit décalage le maintient éloigné des glyphes pour une lisibilité nettement améliorée.

Sans : le soulignement coupe les jambages

Typographie : remarquez les jambages gjpqy

Avec browserux.css : soulignement décalé proprement

Typographie : remarquez les jambages gjpqy

a { text-underline-offset: 0.2em; }

Champs de formulaire : couleur du curseur

Le curseur de texte utilise la couleur par défaut du navigateur. Le thématiser avec la couleur d'accent principale crée une touche soignée et cohérente avec la marque.

Sans : curseur navigateur par défaut

Avec browserux.css : curseur thématisé

input, textarea, [contenteditable] { caret-color: var(--bux-color-primary); }

Mise en page : stabilité de la gouttière de scrollbar

Quand une scrollbar apparaît ou disparaît, le contenu se décale. scrollbar-gutter: stable réserve l'espace en permanence, plus de sauts de mise en page.

Sans : le contenu se décale à l'apparition de la scrollbar

Observez ce bord droit →

Ligne 2

Ligne 3

Avec browserux.css : gouttière toujours réservée

Ce bord droit 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 le bleu par défaut du navigateur. Une seule déclaration accent-color les thématise tous avec la couleur de la marque.

Sans : bleu par défaut du navigateur

Case à cocher Bouton radio

Avec browserux.css : couleur primaire de la marque

Case à cocher Bouton radio

input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--bux-color-primary); }

Accessibilité

Utilisable par tous

Utilisateurs clavier, lecteurs d'écran, utilisateurs avec des besoins visuels. Tous couverts, sans effort supplémentaire.

Focus clavier : :focus-visible

Les clics souris ne devraient pas afficher un contour. La navigation clavier si. :focus-visible laisse le navigateur décider, pas de bruit visuel au clic, anneau clair à la touche Tab.

Sans : anneau affiché au clic

Cliquez ici

Avec browserux.css : anneau visible uniquement à Tab

Tab ici

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--bux-color-primary); outline-offset: 2px; }

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

Avec :valid/:invalid, les champs obligatoires affichent une erreur au chargement avant que l'utilisateur ait tapé quoi que ce soit. :user-valid/:user-invalid attendent une interaction.

Sans : erreur avant toute interaction

Invalide avant que l'utilisateur ait touché le champ

Avec browserux.css : validation après interaction

Tapez quelque chose d'invalide, puis cliquez en dehors

input:user-invalid { background-color: var(--bux-invalid-bg-color); border-color: var(--bux-invalid-border-color); }

Mode sombre : color-scheme: light dark

Sans cette déclaration, les contrôles UI natifs (sélecteurs de date, selects, cases à cocher) restent clairs même en mode sombre. Une ligne les corrige tous au niveau système.

Sans : les contrôles natifs ignorent le mode sombre

Avec browserux.css : s'adapte au thème OS

:root { color-scheme: light dark; }

Préférences utilisateur

Simuler les paramètres OS

Pas besoin d'ouvrir les DevTools. Voyez directement comment browserux.css répond aux préférences système.

🌙 Mode sombre

Les variables CSS s'adaptent via prefers-color-scheme: dark. Fonds de validation, piste de scrollbar, tout est couvert.

Thème + champs de validation

🎛️ Mouvement réduit

Toutes les animations et transitions sont réduites à zéro via prefers-reduced-motion: reduce.

Animation en cours

🌓 Contraste élevé

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

Texte normal. Italique. Petit texte.

🎨 Couleurs forcées

Le Mode Contraste Élevé de Windows remplace les couleurs CSS. browserux.css restaure les signaux critiques via forced-colors: active.

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

:focus-visible utilise Highlight. Les bordures des éléments de formulaire sont restaurées avec ButtonText.