CSS ẩn nội dung của div

/* Keyword values */
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

/* Global values */
content-visibility: inherit;
content-visibility: initial;
content-visibility: revert;
content-visibility: revert-layer;
content-visibility: unset;

visible

không có tác dụng. Nội dung của phần tử được sắp xếp và hiển thị như bình thường

<style>
section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

<section>…
<section>…
<section>…
<section>…
…

Phần tử. Nội dung bị bỏ qua không được truy cập bằng các tính năng tác nhân người dùng, chẳng hạn như tìm trong trang, điều hướng theo thứ tự tab, v.v. , cũng không thể chọn hoặc có thể đặt tiêu điểm. Điều này tương tự như đưa ra nội dung

<style>
section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

<section>…
<section>…
<section>…
<section>…
…

<style>
section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

<section>…
<section>…
<section>…
<section>…
…

Phần tử bật ngăn bố cục, ngăn kiểu và ngăn sơn. Nếu phần tử không phải, nó cũng bỏ qua nội dung của nó. Không giống như ẩn, nội dung bị bỏ qua vẫn phải khả dụng như bình thường đối với các tính năng tác nhân người dùng như tìm trong trang, điều hướng theo thứ tự tab, v.v. , và phải có tiêu điểm và có thể chọn như bình thường

Giá trị ban đầuvisibleÁp dụng cho các phần tửForWhichLayoutContainmentCanApplyInheritednoGiá trị tính toán như đã chỉ địnhKiểu hoạt ảnhrời rạc

Trước Chromium 90, các tiêu đề ngoài màn hình và vai trò mốc trong content-visibility: auto không được hiển thị với các công cụ a11y. Kể từ Chromium 90, điều này đã được sửa và nội dung ngoài màn hình trong phần tử content-visibility: auto vẫn còn trong mô hình đối tượng tài liệu và cây trợ năng. Điều này cho phép cải thiện hiệu suất trang với content-visibility: auto mà không ảnh hưởng tiêu cực đến khả năng truy cập

Tuy nhiên, một lưu ý cần lưu ý là do các kiểu dành cho nội dung ngoài màn hình không được hiển thị nên các phần tử được cố ý ẩn bằng

<style>
section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

<section>…
<section>…
<section>…
<section>…
…

<style>
section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

<section>…
<section>…
<section>…
<section>…
…

<style>
section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

<section>…
<section>…
<section>…
<section>…
…

Ví dụ sau đây cho thấy có thể quản lý khả năng hiển thị trong tập lệnh. Lợi ích bổ sung của việc sử dụng

<style>
section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

<section>…
<section>…
<section>…
<section>…
…

<style>
section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

<section>…
<section>…
<section>…
<section>…
…

Làm cách nào để ẩn văn bản trong div CSS?

Làm cách nào để ẩn một phần của div?

Làm cách nào để ẩn div trong HTML dựa trên điều kiện?