EN | FR
Plus qu'un reset. Une mise à niveau du navigateur.
browserux.css est une base CSS moderne centrée sur l'expérience utilisateur et l'accessibilité.
Conçue pour améliorer les comportements natifs HTML et CSS, elle fournit une base propre et moderne qui améliore l'ergonomie sur tous les appareils, sans classes utilitaires, sans framework lourd et sans JavaScript.
Avec la v5, BrowserUX évolue vers une base CSS plus architecturée : couches de cascade explicites, tokens sémantiques et améliorations natives progressives faciles à surcharger.
- Plus robuste qu'un reset, plus léger qu'un framework.
- Pensée dès le départ pour l'UX native et l'accessibilité.
- Améliore le focus, la validation, les dialogues, les préférences utilisateur et les détails d'interface du navigateur.
- Fonctionne avec du HTML sémantique, du CSS écrit à la main et des design systems personnalisés.
- Simple par défaut, modulaire au besoin.
npm
npm install browserux.cssimport 'browserux.css/browserux.css';CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/browserux.css@5.0.1/browserux.css">L'exemple CDN est figé sur 5.0.1 pour garantir des installations reproductibles. Mettez à jour la version de manière volontaire lors des montées de version.
L'entrée historique à la racine reste disponible pour la compatibilité. Si vous souhaitez plus de contrôle, vous pouvez utiliser les bundles publics modulaires :
import 'browserux.css/core.css';
import 'browserux.css/a11y.css';
import 'browserux.css/browser-ui.css';| Bundle | Contient | Recommandé pour |
|---|---|---|
browserux.css |
Base complète | Usage par défaut |
core.css |
Tokens + styles par défaut | La base la plus sûre |
a11y.css |
Tokens + préférences utilisateur + styles par défaut | Support des préférences système sans la couche interface navigateur complète |
browser-ui.css |
Tokens + couche interface navigateur | Sélection, barres de défilement, focus, dialog, UX des formulaires |
BrowserUX repose sur quatre piliers fondamentaux :
- 🔄 Reset : supprime les valeurs par défaut problématiques des navigateurs tout en préservant les comportements utiles
- ⚙️ Normalisation : aligne le rendu entre les navigateurs
- 🧩 Utilisabilité : améliore les formulaires, les dialogues, le défilement, la stabilité de la mise en page et l'ergonomie native
- ♿ Accessibilité : prend en charge le mode sombre, la réduction des animations, les préférences de contraste, le focus visible et une meilleure temporisation de la validation
La base est organisée en quatre parties :
- 🔣 tokens et déclaration des couches
- ⚙️ préférences utilisateur
- 🧩 interface native du navigateur
- 🧱 styles par défaut du navigateur
browserux.css se comprend plus facilement comme une pile de couches :
core.css= la base la moins opinionnéea11y.css= la base plus le support moderne des préférences utilisateurbrowser-ui.css= la couche la plus opinionnée de BrowserUXbrowserux.css= l'expérience BrowserUX complète
BrowserUX ne se situe pas au même endroit que la plupart des points de départ CSS :
- plus large que
modern-normalize - plus orientée UX et accessibilité que
sanitize.css - moins prescriptive que les frameworks « classless » comme Pico CSS ou Water.css
Pour le détail complet, voir le guide de comparaison.
BrowserUX n'est plus seulement documenté manuellement. Le projet intègre désormais une stratégie de validation plus claire :
- Support navigateurs : support de base, améliorations progressives et fonctionnalités à support limité
- Matrice de validation de la démo : ce que la démo couvre et ce qui doit être automatisé
- Validation Playwright : installation et exécution de la configuration de validation multi-navigateurs et du contrat de distribution
La configuration actuelle inclut une couverture « smoke » Playwright sur Chromium, Firefox et WebKit, des scénarios pour le focus, la validation, l'animation de dialog, la gouttière de scrollbar et le comportement du schéma de couleur, ainsi qu'un contrat de distribution Node pour la surface des bundles v5.