BrowserUX.css
browserux.css
browserux.css est une base CSS minimaliste, centrée sur l'expérience utilisateur et l'accessibilité. Conçu pour renforcer les comportements natifs de HTML et CSS, il offre une base moderne et cohérente qui améliore l'ergonomie sur tous les appareils, sans classes utilitaires, sans framework lourd, sans JavaScript.
npm install browserux.css
browserux.css
/* Reset : modèle de boîte cohérent */
*,
::before,
::after {
box-sizing: inherit;
}
html { box-sizing: border-box; }
/* UX : défilement fluide, sauf si l'utilisateur le refuse */
@media (prefers-reduced-motion: no-preference) {
:root { scroll-behavior: smooth; }
}
/* A11y : focus clavier visible */
:where(a, button, input, select, textarea, summary, [contenteditable], [tabindex]):focus-visible {
outline: var(--bux-focus-width) solid var(--bux-focus-color);
outline-offset: var(--bux-focus-offset);
}
// browserux.css est construit autour de quatre axes fondamentaux, présents dans chaque règle CSS.
Supprime les marges, paddings et styles navigateur indésirables, tout en préservant les comportements sémantiques utiles.
Harmonise le rendu des éléments HTML entre les navigateurs pour garantir un comportement cohérent quel que soit l'environnement.
Optimise le flux d'interaction UX et réduit les frictions sur tous types d'appareils.
Garantit que le site reste utilisable pour tous les utilisateurs, y compris ceux qui utilisent des technologies d'assistance.
// browserux.css est organisé en quatre sections logiques.
L'utilisation de variables CSS permet une personnalisation facile des thèmes.
Gère les préférences spécifiques à l'utilisateur détectées via les media queries.
Harmonise l'apparence des éléments natifs avec le thème du navigateur.
Une intégration équilibrée des quatre principes fondamentaux, organisée dans une structure logique.
browserux.lab.css suit les fonctionnalités CSS émergentes qui pourraient un jour intégrer browserux.css. C’est un document de travail, pas une feuille de style prête à l’emploi.