Isolement - Astuces CSS

Anonim

La isolationpropriété en CSS est utilisée pour empêcher les éléments de se fondre dans leur arrière-plan.

.module ( isolation: isolate; )

Il est le plus couramment utilisé lorsqu'il mix-blend-modea été déclaré sur un autre élément. Appliquer isolationà l'élément protège cet élément afin qu'il n'hérite pas de l' mix-blend-modeappliqué aux autres éléments qui pourraient se trouver derrière lui.

En d'autres termes, si mix-blend-modeindique aux éléments qui se chevauchent de se mélanger les uns avec les autres, isolationcrée une exemption sur les éléments où elle est appliquée. C'est comme un moyen de désactiver le mode mix-blend-mode, mais à partir d'un élément parent plutôt que de devoir sélectionner l'élément avec le mélange directement.

Valeurs

  • isolate: Fait exactement ce qu'il dit. Il empêche l'élément de se fondre dans d'autres éléments qui se trouvent dans la toile de fond.
  • auto: Réinitialise l'isolement et permet à l'élément de se fondre dans son arrière-plan.

Voir le Pen Isolation Cha-Cha-Cha par CSS-Tricks (@ css-tricks) sur CodePen.

Un cas d'utilisation

Maria Antonietta Perna, écrivant pour SitePoint, a créé une démo qui fait particulièrement bien ressortir le point. Nous avons créé ce graphique pour expliquer sa démo:

Voir le mélange texte / image du stylet avec le mode de mélange mixte par SitePoint (@SitePoint) sur CodePen.

Là où ça ne marche pas

Vous pouvez vous attendre isolationà isoler des éléments lors de background-blend-modeson utilisation, mais ce n'est pas le cas. Les éléments d'arrière-plan sont déjà isolés par leur nature en ce sens qu'ils ne se fondent pas avec le contenu qui se trouve derrière eux.

Un autre endroit où isolationsemble être invalidé est lorsqu'il est utilisé en conjonction avec translatesur le même élément. Vous pourriez vous heurter à cela si vous essayez de centrer un élément à la fois verticalement et horizontalement en utilisant le absolutepositionnement et translateensemble:

.module ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); isolation: isolate; )

L'utilisation de translatesemble isoler l'élément de lui-même sans l'utilisation isolation.

En rapport

  • mix-blend-mode
  • background-blend-mode

Plus d'information

  • Spécification W3C
  • isolation sur MDN
  • isolement sur Codrops
  • SitePoint: un gros plan sur la propriété CSS mix-blend-mode

Prise en charge du navigateur pour isoler

Chrome Safari Firefox Opéra IE / Edge Android iOS
41 7,1 36 30 non 41 8.4

Puis-je utiliser… Prise en charge du navigateur pour le mode mix-blend

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
41 32 Non 79 TP

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 81 14,0-14,4