Απομόνωση - CSS-Κόλπα

Anonim

Η isolationιδιότητα στο CSS χρησιμοποιείται για να αποτρέψει την ανάμειξη στοιχείων με τα παρασκήνια τους.

.module ( isolation: isolate; )

Χρησιμοποιείται συχνότερα όταν mix-blend-modeέχει δηλωθεί σε άλλο στοιχείο. Η εφαρμογή isolationστο στοιχείο προστατεύει αυτό το στοιχείο έτσι ώστε να μην κληρονομήσει το mix-blend-modeεφαρμοσμένο στα άλλα στοιχεία που ενδέχεται να βρίσκονται πίσω από αυτό.

Με άλλα λόγια, εάν mix-blend-modeλέει ότι τα αλληλεπικαλυπτόμενα στοιχεία συνδυάζονται μεταξύ τους, τότε isolationδημιουργεί μια εξαίρεση στα στοιχεία όπου εφαρμόζονται. Είναι σαν ένας τρόπος απενεργοποίησης της λειτουργίας mix-blend-mode, αλλά από ένα γονικό στοιχείο αντί να χρειάζεται να επιλέξετε το στοιχείο με άμεση ανάμειξη.

Αξίες

  • isolate: Κάνει ακριβώς αυτό που λέει. Προστατεύει το στοιχείο από την ανάμειξη σε άλλα στοιχεία που βρίσκονται στο φόντο.
  • auto: Επαναφέρει την απομόνωση και επιτρέπει στο στοιχείο να αναμιχθεί στο φόντο του.

Δείτε το Pen Isolation Cha-Cha-Cha από CSS-Tricks (@ css-tricks) στο CodePen.

Μια θήκη χρήσης

Η Μαρία Antonietta Perna, γράφοντας για το SitePoint, δημιούργησε μια επίδειξη που οδηγεί το σπίτι πολύ καλά. Δημιουργήσαμε αυτό το γραφικό για να εξηγήσουμε το demo της:

Δείτε το μείγμα κειμένου στυλό / εικόνας με λειτουργία mix-blend από το SitePoint (@SitePoint) στο CodePen.

Όπου δεν λειτουργεί

Μπορεί να περιμένετε isolationνα απομονώσετε στοιχεία όταν background-blend-modeχρησιμοποιείται, αλλά αυτό δεν ισχύει. Τα στοιχεία του φόντου είναι ήδη απομονωμένα από τη φύση τους, καθώς δεν συνδυάζονται με το περιεχόμενο που βρίσκεται πίσω από αυτά.

Ένα άλλο σημείο που isolationφαίνεται να είναι άκυρο είναι όταν χρησιμοποιείται σε συνδυασμό με translateτο ίδιο στοιχείο. Μπορεί να συναντήσετε αυτό εάν προσπαθήσετε να κεντράρετε ένα στοιχείο τόσο κάθετα όσο και οριζόντια χρησιμοποιώντας τη absoluteθέση και translateμαζί:

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

Η χρήση του translateφαίνεται να απομονώνει το στοιχείο από μόνο του χωρίς τη χρήση isolation.

Σχετιζομαι με

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

Περισσότερες πληροφορίες

  • Προδιαγραφή W3C
  • απομόνωση στο MDN
  • απομόνωση στο Codrops
  • SitePoint: Μια κοντινή ματιά στην ιδιότητα λειτουργίας συνδυασμού μείγματος CSS

Υποστήριξη προγράμματος περιήγησης για απομόνωση

Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ IE / Edge Android iOS
41 7.1 36 30 Όχι 41 8.4

Μπορώ να χρησιμοποιήσω… Υποστήριξη προγράμματος περιήγησης για λειτουργία mix-blend

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο Firefox ΙΕ Ακρη Σαφάρι
41 32 Οχι 79 ΤΡ

Κινητό / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4