Cách ly - Thủ thuật CSS

Anonim

Các isolationbất động sản trong CSS được sử dụng để ngăn chặn các yếu tố từ pha trộn với phông nền của họ.

.module ( isolation: isolate; )

Nó thường được sử dụng nhất khi mix-blend-modeđã được khai báo trên một phần tử khác. Áp dụng isolationcho các phần tử bảo vệ phần tử đó để phần tử đó không kế thừa được mix-blend-modeáp dụng cho các phần tử khác có thể đứng sau nó.

Nói cách khác, nếu mix-blend-modenói các phần tử chồng chéo hòa trộn với nhau, thì hãy isolationtạo ra một sự miễn trừ đối với các phần tử mà nó được áp dụng. Nó giống như một cách để tắt chế độ pha trộn, nhưng từ một phần tử mẹ thay vì cần phải chọn phần tử có pha trộn trực tiếp.

Giá trị

  • isolate: Thực hiện chính xác những gì mà nó nói. Nó bảo vệ phần tử không bị trộn lẫn vào các phần tử khác có trong phông nền.
  • auto: Đặt lại sự cô lập và cho phép phần tử hòa vào phông nền của nó.

Xem Pen Isolation Cha-Cha-Cha bằng CSS-Tricks (@ css-trick) trên CodePen.

Một trường hợp sử dụng

Maria Antonietta Perna, viết cho SitePoint, đã tạo một bản trình diễn giúp thúc đẩy điểm về nhà đặc biệt tốt. Chúng tôi đã tạo hình ảnh này để giúp giải thích bản trình diễn của cô ấy:

Xem sự pha trộn Văn bản / Hình ảnh Bút với chế độ trộn-pha trộn của SitePoint (@SitePoint) trên CodePen.

Nơi nó không hoạt động

Bạn có thể mong đợi isolationđể cô lập các phần tử khi background-blend-modeđược sử dụng, nhưng không phải vậy. Các yếu tố nền vốn đã bị cô lập bởi bản chất của chúng ở chỗ chúng không hòa trộn với nội dung đằng sau chúng.

Một điểm khác isolationdường như không có hiệu lực là khi nó được sử dụng cùng với translatetrên cùng một phần tử. Bạn có thể gặp phải điều này nếu bạn cố gắng căn giữa một phần tử theo cả chiều dọc và chiều ngang bằng cách sử dụng absoluteđịnh vị và translatecùng nhau:

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

Việc sử dụng translatedường như để cô lập phần tử của riêng nó mà không cần sử dụng isolation.

Có liên quan

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

Thêm thông tin

  • Đặc điểm kỹ thuật W3C
  • cô lập trên MDN
  • cô lập trên Codrops
  • SitePoint: Xem cận cảnh thuộc tính chế độ trộn CSS

Hỗ trợ trình duyệt để cô lập

Trình duyệt Chrome Safari Firefox Opera IE / Edge Android iOS
41 7.1 36 30 Không 41 8,4

Tôi có thể sử dụng… Hỗ trợ trình duyệt cho chế độ trộn-trộn không

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
41 32 Không 79 TP.

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 81 14.0-14.4