Hiển thị: không có CSS

Đây là câu trả lời từ tương lai.. khoảng 8 năm sau khi bạn đặt câu hỏi. Mặc dù vẫn chưa có giá trị đối lập nào cho display: none, nhưng hãy đọc tiếp.. Có điều gì đó thậm chí còn tốt hơn

Tài sản display quá tải, thật không vui chút nào. Nó có ít nhất ba chức năng khác nhau. Nó kiểm soát các

• loại hiển thị bên ngoài (cách phần tử tham gia vào bố cục luồng gốc, e. g. block, inline)
• kiểu hiển thị bên trong (bố cục của các phần tử con, e. g. flex, grid)
• hộp hiển thị (cho dù phần tử có hiển thị hay không, e. g. contents, none)

Đây là thực tế đã tồn tại từ rất lâu, chúng tôi đã học cách chung sống với nó, nhưng một số cải tiến đã quá hạn từ lâu (hy vọng. ) đang đến theo cách của chúng tôi

Firefox hiện hỗ trợ cú pháp hai giá trị (hoặc giá trị nhiều từ khóa) cho thuộc tính display phân tách các loại hiển thị bên ngoài và bên trong. Ví dụ: block bây giờ trở thành display0 và flex trở thành display2. Nó không giải quyết được vấn đề của none, nhưng tôi nghĩ rằng việc tách biệt rõ ràng các mối quan tâm là một bước đi đúng hướng

Trong khi đó, Chromium (85+) đã cung cấp cho chúng tôi thuộc tính display4 và công bố nó với một số sự phô trương. Nó nhằm mục đích giải quyết một vấn đề khác—tăng tốc thời gian tải trang bằng cách không hiển thị một phần tử (và các bố cục con của nó) cho đến khi phần tử đó tiếp cận khung nhìn và thực sự cần được xem, trong khi vẫn có thể truy cập được cho các tìm kiếm 'Tìm', v.v. Nó tự động thực hiện điều này chỉ bằng cách đặt cho nó giá trị display5. Bản thân đây đã là một tin thú vị, nhưng hãy xem nó còn làm được những gì khác…

Thuộc tính display6 cung cấp cho bạn tất cả các lợi ích tương tự của nội dung chưa được hiển thị và trạng thái hiển thị được lưu trong bộ nhớ cache giống như display7 ngoài màn hình. Tuy nhiên, không giống như với display5, nó không tự động bắt đầu hiển thị trên màn hình

Điều này cho phép bạn kiểm soát nhiều hơn, cho phép bạn ẩn nội dung của một phần tử và sau đó bỏ ẩn chúng một cách nhanh chóng

So sánh nó với các cách phổ biến khác để ẩn nội dung của phần tử

• display: none. ẩn phần tử và phá hủy trạng thái kết xuất của nó. Điều này có nghĩa là bỏ ẩn phần tử cũng đắt như hiển thị một phần tử mới có cùng nội dung
• block0. ẩn phần tử và giữ trạng thái kết xuất của nó. Điều này không thực sự xóa phần tử khỏi tài liệu vì nó (và nó là cây con) vẫn chiếm không gian hình học trên trang và vẫn có thể được nhấp vào. Nó cũng cập nhật trạng thái kết xuất bất cứ lúc nào cần thiết ngay cả khi ẩn

Mặt khác, display6 ẩn phần tử trong khi vẫn giữ nguyên trạng thái hiển thị của nó, vì vậy, nếu có bất kỳ thay đổi nào cần xảy ra, chúng chỉ xảy ra khi phần tử được hiển thị lại (i. e. thuộc tính display6 bị xóa)

Ồ. Vì vậy, đó là điều mà lẽ ra display: none nên có từ trước đến nay—một cách loại bỏ một phần tử khỏi bố cục, một cách duyên dáng và hoàn toàn độc lập với kiểu hiển thị. Vì vậy, 'đối diện' của display6 là block5, nhưng bạn có một tùy chọn thứ ba, rất hữu ích trong display5, tùy chọn này giúp bạn kết xuất lười biếng, tăng tốc độ tải trang ban đầu của bạn

Tin xấu duy nhất ở đây là Firefox và Safari vẫn chưa áp dụng nó. Nhưng ai biết được, vào thời điểm bạn (đồng nghiệp lập trình viên thân mến) đang đọc điều này, điều đó có thể đã thay đổi. Giữ một mắt trên https. // caniuse. com/css-content-visibility

Cả thuộc tính hiển thị và khả năng hiển thị đều rất quan trọng trong CSS. Và đối với các giá trị cụ thể của block7 và block8, chúng hoạt động tương tự nhau, nhưng có một chút khác biệt giữa chúng. Đôi khi hành vi của họ cũng có thể gây ra một chút nhầm lẫn cho một số nhà phát triển

Trong bài viết này, chúng ta sẽ thảo luận về cách hoạt động của từng thuộc tính này cùng với một ví dụ và trang web cuối cùng trông như thế nào

Bắt đầu nào

trưng bày. không ai

Khi bạn đặt thuộc tính display cho bất kỳ phần tử cụ thể nào thành none, phần tử được đề cập sẽ không được hiển thị, vì vậy phần tử đó sẽ không xuất hiện trên trang web. Do đó, sẽ không có khoảng trống nào được phân bổ cho phần tử đó trên trang giữa các phần tử khác. Mặc dù vậy, bạn vẫn có thể tương tác với phần tử thông qua DOM

trưng bày. không xóa hoàn toàn phần tử khỏi bố cục trang web mà không để lại bất kỳ khoảng trống nào

Bạn có thể xem mã và trang hiển thị cho thuộc tính display: none bên dưới

hiển thị. ẩn giấu

Khi bạn đặt thuộc tính inline2 cho bất kỳ phần tử cụ thể nào thành inline3, phần tử được đề cập sẽ được hiển thị nhưng sẽ không xuất hiện trên trang web. Do khả năng hiển thị được đặt thành ẩn nên mặc dù phần tử có thể không hiển thị nhưng không gian được phân bổ cho phần tử trên trang web vẫn giữ nguyên. Vì vậy, nó sẽ xuất hiện dưới dạng một khoảng trống trên trang cuối cùng

hiển thị. hidden giữ phần tử trong bố cục trang web nhưng ẩn nó, do đó để lại khoảng trống cho phần tử

Bạn có thể xem mã và trang hiển thị cho thuộc tính inline4 bên dưới

Đây là cách các thuộc tính display: none và inline4 hoạt động và cách sử dụng chúng cùng với kết xuất trên trang web. Tôi hy vọng bạn tìm thấy điều này hữu ích

Cảm ơn vì đã đọc

Nếu bạn thích đọc những câu chuyện như thế này và muốn hỗ trợ tôi với tư cách là một nhà văn, hãy cân nhắc đăng ký làm thành viên Medium. Đó là 5 đô la một tháng, cho phép bạn truy cập không giới hạn vào tất cả các câu chuyện trên Phương tiện. Nếu bạn đăng ký bằng liên kết của tôi, tôi sẽ kiếm được một khoản hoa hồng nhỏ

CSS có hiển thị không Xóa khỏi DOM không?

Hiển thị Không có nghĩa là gì trong HTML?

Ẩn có giống như không hiển thị không?