lrdlg
68 lines
2.5 KiB
CSS
68 lines
2.5 KiB
CSS
/* ==========================================================================
|
|
utilities.css — Classes utilitaires
|
|
--------------------------------------------------------------------------
|
|
Dernière couche de la cascade : ces classes doivent pouvoir surcharger
|
|
un composant sans recourir à !important.
|
|
Volontairement peu nombreuses — une bibliothèque utilitaire complète
|
|
n'aurait pas de sens sans outil de purge.
|
|
========================================================================== */
|
|
|
|
@layer utilities {
|
|
|
|
/* ======================================================================
|
|
MASQUAGE VISUEL ACCESSIBLE
|
|
Retire l'élément de l'affichage tout en le laissant lisible par les
|
|
lecteurs d'écran. À utiliser pour les libellés, les intitulés de
|
|
sections de navigation, les annonces de contexte.
|
|
|
|
Ne PAS utiliser display:none ni visibility:hidden pour cet usage :
|
|
ces propriétés retirent aussi l'élément de l'arbre d'accessibilité.
|
|
====================================================================== */
|
|
|
|
.visually-hidden {
|
|
position: absolute !important;
|
|
inline-size: 1px;
|
|
block-size: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* ======================================================================
|
|
RÉGION D'ANNONCE (live region)
|
|
Conteneur des messages dynamiques destinés aux lecteurs d'écran
|
|
(confirmation de copie d'adresse, par exemple).
|
|
====================================================================== */
|
|
|
|
.sr-status {
|
|
position: absolute;
|
|
inline-size: 1px;
|
|
block-size: 1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
}
|
|
|
|
/* ======================================================================
|
|
FLUX D'IMPRESSION
|
|
====================================================================== */
|
|
|
|
/* Élément affiché uniquement à l'écran */
|
|
.screen-only { }
|
|
|
|
/* Élément affiché uniquement à l'impression (révélé par print.css) */
|
|
.print-only { display: none; }
|
|
|
|
/* ======================================================================
|
|
DIVERS
|
|
====================================================================== */
|
|
|
|
/* Empêche la coupure d'un groupe de mots (« Bac 3 », « Office 365 ») */
|
|
.nowrap { white-space: nowrap; }
|
|
|
|
/* Retire la marge basse résiduelle du dernier enfant d'un bloc */
|
|
.flow-end { margin-block-end: 0 !important; }
|
|
}
|