Masquage CSS

Optional Advanced vient de verser des colonnes de journal. Cette séance est un autre outil optionnel : le masque. Tu poses un pochoir sur une boîte. Là où le pochoir est plein, tu vois la photo ou la couleur. Là où il est vide, la boîte disparaît. Tu ne découpes pas un article en flux, et tu ne fais pas glisser des tuiles d’icônes sur une feuille sprite.

Réponse directe

Le masquage CSS cache des parties d’un élément avec mask-image — PNG, SVG ou dégradé. Pense à de la peinture au pochoir. mask-size, mask-repeat et mask-position se comportent comme la couche fond : cover, no-repeat, center. mask-mode choisit alpha (transparence du fichier) ou luminance (clair contre sombre). Un masque quand le bord doit fondre. clip-path pour une coupe nette (cercle ou polygone). Les libellés et boutons restent entièrement visibles.

Pourquoi un masque n’est ni une colonne ni un sprite

Les colonnes multiples fragmentent un flux de texte. Une feuille sprite rogne une bitmap avec background-position pour que beaucoup d’icônes partagent un fichier. Le masque ne fait ni l’un ni l’autre. L’élément occupe toujours sa boîte. Largeur et hauteur de mise en page ne rétrécissent pas. Tu changes seulement quels pixels de cette boîte sont peints. Les filtres (blur(), grayscale()) changent l’aspect de chaque pixel visible ; le masque décide lesquels restent.

Un PNG comme pochoir

mask-image prend url(...) comme background-image. Un PNG de masque typique est blanc (ou opaque) où tu veux la photo, transparent où tu veux un trou :

La photo reste un fond (ou un <img> avec le même masque). Le PNG tache n’est que le pochoir. Si le fichier masque manque, l’élément entier peut disparaître — garde un style sans masque, ou teste l’URL.

Fondu au dégradé

Pas besoin d’un second fichier. Un masque en dégradé, c’est le fondu quotidien en bas de carte :

Le noir (ou l’opaque total) garde le contenu ; transparent perce un trou. Le dégradé vit dans le CSS, donc pas de requête HTTP en plus — contrairement à une feuille d’icônes sprite. Ce n’est pas opacity sur toute la carte : le texte de la zone solide reste net ; seule la région masquée se dissout.

Taille, répétition, position

Traite le masque comme une couche de fond que tu ne vois jamais comme image :

mask-size: cover remplit la boîte ; contain garde le ratio du pochoir ; des longueurs figent une petite forme. repeat carrele le pochoir (rare, vite excessif). Le raccourci mask existe, mais les propriétés longues sont plus calmes tant que la couche ne « sent » pas encore comme background.

Alpha contre luminance

mask-mode répond : « Est-ce que je lis la transparence ou la luminosité ? »

alpha (souvent le défaut d’un PNG transparent) utilise le canal alpha. luminance utilise le clair et le sombre : le blanc montre en général, le noir cache — utile quand le pochoir est une photo grise, pas un PNG transparent. Si un masque JPEG « ne fait rien », il manquait probablement luminance. Sur SVG, <mask> a mask-type ; sur une boîte HTML, commence par mask-mode.

Clip net contre masque doux

clip-path coupe une géométrie : cercle, inset, polygone. Le bord est franc. Un masque peut être doux. Ce ne sont pas deux noms pour une propriété :

Avatars et tickets veulent souvent clip-path. Une affiche qui se fond dans la page veut un masque en dégradé. On peut combiner, mais un rôle par propriété est plus calme. overflow: hidden avec border-radius est le troisième outil : il clippe les enfants à la boîte de padding. Un masque peint l’élément lui-même, fond compris, sans arrondir la boîte de mise en page.

Safari et le préfixe WebKit

Certaines versions de Safari veulent encore -webkit-mask-image (et ses cousins) à côté des propriétés standard :

Ligne préfixée et ligne standard. Ne livre pas le préfixe seul pour toujours. @supports peut envelopper les extras ; l’habitude : tester le fondu dans Safari, pas seulement dans Chromium.

Masque vs clip vs overflow vs sprites

Optional Advanced a déjà utilisé les sprites pour les icônes et les colonnes pour la prose. Le masque est le pochoir. Mélanger les trois sur le même héros donne une photo à la fois recadrée comme un sprite et tranchée comme une colonne.

Ce qu’il ne faut pas masquer

N’utilise pas un masque pour « ranger » une mise en page brouillonne. Si un bouton ou un libellé passe sous le fondu, on ne lit plus et on ne clique plus. Un lecteur d’écran peut encore annoncer le texte alors que l’œil ne voit rien — c’est un bug, pas une fonctionnalité. Le contraste compte dans la partie visible. Photos décoratives, cartes et icônes sont les cibles habituelles ; pas les champs de connexion.

Si un enfant dépasse de la carte, overflow (ou un enfant plus petit) est le correctif de mise en page. S’il y a douze fichiers HTTP d’icônes, un sprite ou un jeu SVG est le correctif d’assets. Le masque ne remplace ni l’un ni l’autre.

À essayer

1. Donne à une boîte colorée mask-image: linear-gradient(to bottom, #000 50%, transparent) et regarde le bas fondre.
2. Branche un petit pochoir SVG ou PNG ; règle mask-size et mask-position: center.
3. Compare mask-mode: luminance sur un JPEG gris et alpha sur un PNG transparent.
4. Le même cercle en clip-path: circle(50%) — remarque le bord net.
5. Ajoute -webkit-mask-image avec le même dégradé. Ne masque pas un formulaire.

Erreurs fréquentes

• Le masque comme mise en page ou comme overflow: hidden
• Oublier mask-size : un minuscule pochoir coincé dans le coin
• Attendre des trous d’un JPEG sans mask-mode: luminance
• Sauter -webkit-mask-image et blâmer « les masques CSS » dans Safari
• Confondre clip-path et mask-image
• Masquer libellés, légendes ou boutons jusqu’à tuer contraste et cibles de clic
• Mélanger avec sprites (décalages de tuiles) ou colonnes (flux de texte)

Résumé

• Un masque est un pochoir sur un élément : montrer ici, cacher là
• mask-image prend une url ou un dégradé ; taille, répétition et position imitent le fond
• mask-mode : alpha contre luminance
• clip-path est une coupe géométrique nette ; les masques peuvent fondre
• Préfixe pour Safari ; ne masque jamais l’interface essentielle
• Optional Advanced continue ensuite avec l’interface utilisateur (user-interface)