Cách sử dụng phổ biến nhất của thuộc tính hiển thị CSS là để xác định bố cục bên ngoài và bên trong của phần tử. Chúng tôi thường xuyên sử dụng khối, phần tử nội tuyến, flex và lưới
Tất cả các thông số kỹ thuật cho tài sản display
có thể được tìm thấy trong CSS Display Module Level 3
. Kể từ tháng 9 năm 2021, có thể tìm thấy một bất động sản mới contents
ở đó. Trước đó rất lâu, nó đã được thêm vào Firefox trong một thử nghiệm thành công
Nó là gì?
Trong bài viết này, chúng tôi sẽ điều tra lý do tại sao bổ sung này là một yếu tố thay đổi cuộc chơi và nó sẽ tác động như thế nào đến người dùng và khả năng sử dụng của họ
Làm thế nào nó hoạt động?Trước tiên hãy đi sâu vào thông số kỹ thuật CSS để có một định nghĩa chính thức
“Bản thân phần tử không sinh ra hộp nào, nhưng phần tử con và phần tử giả của nó vẫn sinh ra hộp và chữ chạy bình thường. Đối với mục đích tạo hộp và bố cục, phần tử phải được xử lý như thể nó đã được thay thế trong cây phần tử bằng nội dung của nó [bao gồm cả phần tử con của tài liệu nguồn và phần tử giả của nó, chẳng hạn như. trước và. sau các phần tử giả, được tạo trước/sau các phần tử con của phần tử như bình thường]. ” —
TL;DR. bằng cách sử dụng display: contents
phần tử sẽ không tạo ra một hộp cụ thể. Thay vào đó, nó sẽ thay thế hộp giả và hộp con của nó thành hộp con của cha mẹ nó
Trước contents
, chỉ có một tùy chọn để kiểm soát liệu một phần tử có tạo ra bất kỳ hộp nào hay không. display: none
. Sử dụng nó có nghĩa là các phần tử và hậu duệ của chúng sẽ không tạo hộp hoặc chạy văn bản
hành vi cơ bản
Để hiểu rõ hơn về giá trị thuộc tính hiển thị mới này, hãy bắt đầu với một ví dụ nhỏ. Chúng tôi sẽ hiển thị kết quả bằng cách áp dụng cách hiển thị mới này cho div có phần đệm và màu nền
Hãy xem đoạn mã dưới đây
Nó xuất ra các kết quả sau
Kết quả bố trí của đoạn mã trên
Nếu chúng tôi sửa đổi màn hình thành contents
, như thế này
.content {
display: contents;
background: #ff555e;
padding: 2rem;
}
Hãy xem kết quả
Kết quả bố cục của đoạn mã trên với nội dung hiển thị
Phần đệm và màu thuộc về .content
. Tại sao?
Các yếu tố giả và sự kiện bị ảnh hưởng như thế nào?
Trong ví dụ trước, chúng ta đã thấy phần tử biến mất khỏi bố cục như thế nào. Nó vẫn sẽ có mặt trong đánh dấu mặc dù. Điều này ảnh hưởng như thế nào đến các sự kiện và các lớp giả của nó?
- yếu tố giả. những thứ đó sẽ không bị ảnh hưởng. Chúng sẽ hoạt động như mong đợi vì chúng có tác động đến nội dung của div chứ không phải bố cục
- sự kiện nhà nước. sẽ không hoạt động kết hợp với nội dung hiển thị. Vì div sẽ không được hiển thị nên chúng sẽ không có bất kỳ tác dụng nào. Các lớp giả như di chuột sẽ không có bất kỳ tác động nào
- nhấp chuột sự kiện. ngay cả khi phần tử không được hiển thị, nó vẫn sẽ có mặt trong DOM. Có thể ràng buộc các sự kiện vì chúng sẽ truyền cho con cái của chúng. Như đã đề cập trước đó, đánh dấu vẫn có trong DOM
Ví dụ đầu tiên không phải là ấn tượng. Nó thậm chí không có giá trị nó. Nó không có nghĩa là cho kịch bản cụ thể đó. display: contents
được dùng để kết hợp với Flex và Grid. Tại sao?
Hai bố cục đó chỉ có thể hoạt động trên các phần tử con cấp một. Bây giờ với nội dung hiển thị, chúng ta có thể biến phần con thành một phần của bố cục Flex/Grid
Hãy xem một ví dụ
Hãy xem kết quả
Kết quả bố trí từ đoạn mã trên
Lưu ý cách tất cả các div của display
2 tham gia vào bố cục linh hoạt mặc dù chúng không phải là con cấp một của display
0
⚠️ Đừng nhầm lẫn, đây không phải là sự thay thế hay thay thế cho subgrid. Tính năng này phục vụ một mục đích hoàn toàn khác
Tại sao nó lại quan trọng?Vì vậy, chúng tôi đã thấy nó hoạt động như thế nào, nhưng không biết tại sao. Tại sao không loại bỏ phần tử cha này? . Vì vậy, đây là những gì tất cả về?
Như chúng ta đã thấy trước đây, Grid và Flex chỉ có thể tương tác với các phần tử con cấp một. Vấn đề với hạn chế đó là nó đang ra lệnh cho HTML ngữ nghĩa của chúng ta. Các ràng buộc về bố cục buộc chúng tôi phải tạo mã HTML khó đọc hơn. Điều đó cuối cùng làm tổn thương khả năng tiếp cận thiết bị. Tại sao?
Đánh dấu HTML được chuyển đổi thành Cây DOM. Các trình duyệt sau đó tạo một cây trợ năng dựa trên đó. Cây đó được API trợ năng dành riêng cho nền tảng sử dụng để cung cấp trải nghiệm tốt hơn cho người dùng yêu cầu công nghệ hỗ trợ. Tạo một đánh dấu rõ ràng và toàn diện có nghĩa là trình duyệt sẽ có thể hỗ trợ người dùng tốt hơn
Làm thế nào để kiểm tra điều đó? . Hãy kiểm tra tìm kiếm đầu vào của Google trông như thế nào
Chú thích từ Kiểm tra văn bản nhập tìm kiếm đầu vào của Google
Hãy xem đánh dấu của chúng tôi cải thiện như thế nào. Bây giờ chúng ta có thể đi từ đây
Để đánh dấu chính xác hơn này
Chúng tôi có thể bọc danh sách trong một thẻ display
5 đúng hơn về mặt ngữ nghĩa so với nỗ lực đầu tiên của chúng tôi. Bố cục CSS Flex/Grid của chúng tôi không còn là hạn chế đối với đánh dấu của chúng tôi nữa
Dưới đây chúng ta có thể thấy một ảnh chụp màn hình của hỗ trợ hiện tại. Chỉ với display
6 hỗ trợ đầy đủ và display
7 một phần, điều đó có nghĩa là hỗ trợ của nó hơi thấp
chó săn. com
Nó có nghĩa là gì? . Chúng ta vẫn nên thấy trước rằng trình duyệt có thể không triển khai tính năng này và cung cấp dự phòng. Các công cụ như display
8 có thể giúp chúng tôi điều chỉnh trải nghiệm người dùng theo các tính năng có sẵn
Tôi hy vọng bài viết này giúp bạn thấy được giá trị của tính năng này. Nó giúp chúng tôi giải phóng phần đánh dấu của mình khỏi sự hạn chế của bố cục. Trong nhiều năm, chúng tôi đã phải đối mặt với sự thất vọng của những hạn chế này
Chúng ta không nên bỏ qua khả năng tiếp cận. Đó là một chủ đề quan trọng cần được chú ý nhiều hơn. Chúng tôi chịu trách nhiệm tối đa hóa phạm vi tiếp cận nội dung của mình