Làm cách nào để sử dụng nội dung hiển thị trong CSS?

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

The layout result of the above code

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ả

The layout result of the above code with display contents

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

Nó tỏa sáng ở đâu?

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ả

The layout result from the above code

Kết quả bố trí từ đoạn mã trên

Lưu ý cách tất cả các div của display2 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 display0

⚠️ Đừ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

Caption from Inspecting Google’s input search input text

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ẻ display5 đú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

Hỗ trợ CSS cho nó là gì?

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 display6 hỗ trợ đầy đủ và display7 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ư display8 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

Suy nghĩ cuối cùng

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

Tôi có thể sử dụng nội dung hiển thị CSS không?

hiển thị. nội dung làm cho các phần tử con của phần tử xuất hiện như thể chúng là phần tử con trực tiếp của phần tử cha, bỏ qua chính phần tử đó . Điều này có thể hữu ích khi nên bỏ qua phần tử bao bọc khi sử dụng lưới CSS hoặc các kỹ thuật bố cục tương tự.

Nội dung hiển thị trong CSS là gì?

Thuộc tính CSS hiển thị đặt xem một phần tử được coi là một khối hay phần tử nội tuyến và bố cục được sử dụng cho phần tử con của nó, chẳng hạn như bố cục dòng, lưới hoặc flex. Formally, the display property sets an element's inner and outer display types.

Làm cách nào để hiển thị văn bản trong CSS?

Thêm nội dung văn bản vào phần tử bằng CSS . trước và. sau phần tử giả với thuộc tính Nội dung CSS để thêm nội dung văn bản vào phần tử Use the ::before and ::after pseudo-elements with CSS Content property to add text content to an element . phần tử giả. before chèn văn bản ở vị trí bắt đầu và phần tử giả. sau khi chèn văn bản ở vị trí kết thúc.

Nội tuyến hiển thị trong CSS là gì?

Một cách sử dụng phổ biến để hiển thị. chặn nội tuyến là để hiển thị các mục trong danh sách theo chiều ngang thay vì theo chiều dọc .