Có thể có thời gian, khi bạn làm việc trên sự phát triển của các trang web, bạn cần phải "ẩn" các khu vực cụ thể của các mục vì một lý do nào đó. Bạn có thể, tất nhiên, chỉ cần xóa (các) mục trong câu hỏi từ đánh dấu HTML , nhưng nếu bạn muốn chúng nằm trong mã, nhưng không hiển thị trên màn hình trình duyệt vì bất kỳ lý do nào (và chúng tôi sẽ xem xét lý do làm điều này ngay). Để giữ một phần tử trong HTML của bạn, nhưng ẩn nó để hiển thị, bạn sẽ chuyển sang CSS.
Hai cách phổ biến nhất để ẩn một phần tử nằm trong HTML sẽ sử dụng các thuộc tính CSS cho "display" hoặc "visibility". Thoạt nhìn, hai thuộc tính này dường như có thể làm điều tương tự, nhưng chúng có những khác biệt riêng biệt mà bạn nên biết. Chúng ta hãy nhìn vào sự khác biệt giữa hiển thị: none và visibility: hidden.
Hiển thị
Sử dụng cặp thuộc tính / giá trị CSS của chế độ hiển thị: ẩn giấu phần tử khỏi trình duyệt. tuy nhiên, yếu tố ẩn đó vẫn chiếm không gian trong bố cục. Nó giống như bạn đã cơ bản làm cho các yếu tố vô hình, nhưng nó vẫn còn tại chỗ và chiếm không gian nó đã có thể đưa lên đã có nó được để lại một mình.
Nếu bạn đặt DIV trên trang của mình và sử dụng CSS để cung cấp kích thước chiếm 100x100 pixel, thuộc tính hiển thị: ẩn sẽ khiến DIV không hiển thị trên màn hình, nhưng văn bản theo sau sẽ hoạt động như vẫn ở đó, tôn trọng Khoảng cách 100x100.
Thành thật mà nói, tài sản tầm nhìn không phải là một cái gì đó chúng tôi sử dụng rất thường xuyên, và chắc chắn không phải của riêng mình. Nếu chúng tôi cũng đang sử dụng các thuộc tính CSS khác như định vị để đạt được bố cục mà chúng tôi muốn cho một phần tử nhất định, thì chúng tôi có thể sử dụng chế độ hiển thị để ẩn mục đó ban đầu, chỉ để "bật" trở lại khi di chuột. Đó là một trong những khả năng sử dụng của tài sản này, nhưng một lần nữa, nó không phải là một cái gì đó chúng ta chuyển sang với bất kỳ tần số.
Trưng bày
Không giống như thuộc tính hiển thị, để lại một phần tử trong luồng tài liệu bình thường, hiển thị: không có phần tử nào hoàn toàn loại bỏ khỏi tài liệu. Nó không chiếm bất kỳ không gian nào, mặc dù HTML cho nó vẫn nằm trong mã nguồn. Điều này là bởi vì nó, thực sự, bị loại bỏ khỏi luồng tài liệu. Đối với tất cả ý định và mục đích, mục đã biến mất. Điều này có thể là một điều tốt hoặc một điều xấu, tùy thuộc vào ý định của bạn. Nó cũng có thể gây tổn hại cho trang của bạn nếu bạn sử dụng sai tài sản này!
Chúng tôi thường sử dụng "display: none" khi thử nghiệm một trang. Nếu chúng ta cần một khu vực để "biến mất" một chút để chúng tôi có thể kiểm tra các khu vực khác của trang, chúng tôi có thể sử dụng display: none cho điều đó. Tuy nhiên, điều cần ghi nhớ là phần tử phải được trả về trang trước khi khởi chạy thực tế của trang web đó. Điều này là do một mục được xóa khỏi luồng tài liệu trong phương thức này không được các công cụ tìm kiếm hoặc trình đọc màn hình nhìn thấy, mặc dù nó có thể vẫn còn trong đánh dấu HTML. Trước đây, phương pháp này đã được sử dụng như phương pháp mũ đen để cố gắng ảnh hưởng đến thứ hạng công cụ tìm kiếm, vì vậy các mục không được hiển thị có thể là một lá cờ đỏ để Google xem xét tại sao phương pháp đó đang được sử dụng.
Một cách chúng tôi tìm thấy hiển thị: không có gì hữu ích và nơi chúng tôi sử dụng trên các trang web sản xuất trực tiếp, là khi chúng tôi xây dựng trang web đáp ứng có thể có các yếu tố có sẵn cho một kích thước hiển thị nhưng không cho những người khác. Bạn có thể sử dụng display: none để ẩn phần tử đó và sau đó bật lại với các truy vấn phương tiện sau này. Đây là việc sử dụng hiển thị có thể chấp nhận được: không, bởi vì bạn không cố che giấu bất cứ điều gì vì những lý do bất chính, nhưng có một nhu cầu hợp pháp để làm như vậy.
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào 3/3/17