Barres de défilement personnalisées et modes à fort contraste avec le CSS
Les touches finales d'un thème personnalisé sont les parties que les gens oublient : la barre de défilement, le contraste, l'option de retirer entièrement la couleur. Ce guide rassemble les règles CSS JustZix qui peaufinent un site jusqu'à en faire quelque chose que vous appréciez vraiment d'utiliser.
Stylisez la barre de défilement
Une barre de défilement par défaut peut jurer avec un thème sombre soigneusement ajusté. Les navigateurs modernes vous donnent deux façons de la restyliser. Utilisez les deux pour une couverture complète.
html {
scrollbar-width: thin;
scrollbar-color: #4b5263 #1f232a;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #1f232a;
}
::-webkit-scrollbar-thumb {
background: #4b5263;
border-radius: 8px;
border: 3px solid #1f232a;
}
::-webkit-scrollbar-thumb:hover {
background: #5c6370;
}Les propriétés scrollbar-width et scrollbar-color couvrent Firefox ; les pseudo-éléments ::-webkit-scrollbar couvrent Chrome, Edge et Opera. Inclure les deux signifie que votre règle a l'air correcte dans chaque navigateur pris en charge par JustZix.
Un véritable mode à fort contraste
Pour les utilisateurs malvoyants, ou simplement pour la lecture en pièce lumineuse, le contraste brut aide. Cette recette force des fonds quasi noirs, un texte quasi blanc et une accentuation marquée.
html, body {
background: #000 !important;
color: #fff !important;
}
p, li, span, div, h1, h2, h3, h4, td, th {
color: #fff !important;
}
a, a:visited {
color: #ffe066 !important;
text-decoration: underline !important;
}
button, .btn {
background: #ffe066 !important;
color: #000 !important;
border: 2px solid #fff !important;
}Le jaune sur noir est l'une des associations au plus fort contraste disponibles et est un défaut d'accessibilité de longue date. Souligner les liens garantit qu'ils sont distinguables sans dépendre de la couleur.
Renforcez le contraste sans recolorer
Si vous aimez la palette du site mais qu'elle semble délavée, poussez le contraste avec un filtre au lieu de tout repeindre.
html {
filter: contrast(1.15) brightness(0.97);
}C'est une seule ligne et c'est réversible — désactivez la règle JustZix et la page redevient normale. Gardez les valeurs douces ; tout ce qui dépasse 1,3 commence à écraser les détails.
Modes en niveaux de gris et couleurs réduites
La couleur peut distraire. Une règle en niveaux de gris la retire entièrement, ce qui est idéal pour la concentration ou pour revoir une mise en page sans biais de couleur.
html {
filter: grayscale(1);
}Vous préférez garder les images en couleur mais atténuer l'interface ? Appliquez les niveaux de gris à tout, puis restaurez les médias.
html {
filter: grayscale(0.85);
}
img, video, picture, canvas {
filter: grayscale(0);
}Respectez les préférences de mouvement
Un thème d'accessibilité complet calme aussi l'animation. Cette règle élimine le mouvement distrayant pour quiconque a demandé à son système de le réduire.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}Tout assembler
- Associez toujours les propriétés de barre de défilement Webkit et Firefox pour que la règle soit multi-navigateurs.
- Le contraste et les niveaux de gris basés sur filtre sont des règles d'une ligne et entièrement réversibles — idéaux pour un basculement rapide.
- Pour une accessibilité sérieuse, repeignez avec de vraies couleurs plutôt qu'avec des filtres ; soulignez les liens.
- Enregistrez chaque mode comme sa propre règle JustZix et activez celui qui convient au moment.
Ceci se marie naturellement avec un mode sombre universel et des réglages de lecture confortable. Trouvez plus de recettes prêtes à l'emploi dans nos exemples prêts à l'emploi, ou téléchargez JustZix et commencez à habiller le web à votre façon.
Notez cet article
Aucune note — soyez le premier.