Đúng cách để làm cho các phần tử HTML ban đầu ẩn

Question

tôi trong nhiều năm sử dụng một cái gì đó như thế này trong HTML của tôi cho các yếu tố cần được ẩn:

<div style="display: none"></div> 

Đó là ok, nhưng tôi không thể đứng kiểu in-line nữa không.

1. Ẩn các phần tử theo chương trình trong JavaScript window.onload sự kiện quá muộn - nó sẽ nhấp nháy trên màn hình.

2. Tôi có thể tạo lớp CSS 'ẩn', nhưng với các chiến lược tải tích cực của trình duyệt (như trong Opera), khối có thể xuất hiện trong một giây (trước khi CSS được tải).

Có cách nào tốt hơn không?

Answer 1

Theo như tôi biết, phương pháp class="hidden" là tốt nhất và thường được sử dụng nhất. Tôi đề nghị bạn sử dụng class="hidden".

"nhưng với chiến lược tải tích cực của trình duyệt (như trong Opera), khối có thể xuất hiện trong một giây (trước khi CSS được tải)."

Tôi không sử dụng Opera, nhưng nếu bất kỳ trình duyệt nào tải trang trước khi áp dụng kiểu thì rất nhiều lỗi, không chỉ các thành phần ẩn của bạn. Tôi không biết bất kỳ trình duyệt nào đang thực hiện việc này.

Answer 2

Gần đây tôi đã bắt đầu sử dụng các đối tượng nút và tôi thích phương pháp này ngày càng nhiều. Bằng cách này bạn không phải sử dụng các phần tử HTML ẩn, bạn chỉ cần đặt, ví dụ: một neo:

<a name="some-anchor" id="some-anchor-id" /> 

rồi thay thế bằng nút đã tạo. Bằng cách này bạn sẽ không phải lo lắng về các yếu tố nhấp nháy trên tải, bởi vì sẽ không có bất kỳ.

Answer 3

Tùy thuộc vào yếu tố, có thể chấp nhận để tạo và chèn phần tử bằng javascript sau khi trang đã tải (thay vì ẩn sau khi tải trang). Chỉ là một ý nghĩ, mặc dù nó sẽ không làm suy giảm một cách duyên dáng cho người dùng mà không kích hoạt javascript ...

Answer 4

Nếu bạn chỉ có một trang HTML, những yếu tố đó sẽ được hiển thị?

Các thành phần này được hiển thị cho trình đọc màn hình theo mặc định, điều này không đẹp hay dễ tiếp cận?

Nếu bạn chỉ có trang HTML + CSS, bạn không thể bỏ ẩn các thành phần này, thì không có điểm nào ngoài các thủ thuật SEO mũ đen.

Nếu bạn có trang HTML + CSS + JS thì có giá trị để có chúng.

Chỉ có giá trị khi có chúng khi bạn bật JS. Điều này có nghĩa là họ nên _exist trong javascript

Sử dụng javascript để tạo các yếu tố này và chèn chúng vào DOM.

nếu bạn xây dựng trang web của mình từ đầu bằng HTML, HTML + CSS, HTML + CSS + JS thì bạn sẽ nhận ra chúng thuộc về mã javascript của bạn.Vui lòng đọc thêm về Progressive Enhancement

Answer 5

Bạn có thể xác định lớp học của trang. Nó sạch hơn một chút so với nội tuyến, nhưng bạn sẽ phải có định nghĩa lớp đơn đó trên tất cả các trang. Nhưng sau đó, tôi cũng cố gắng sử dụng một chân trang/đầu trang động đơn lẻ ..

Answer 6

Bạn có thể thêm vào kiểu ẩn một vị trí cố định sẽ đưa nó ra khỏi cửa sổ trình duyệt. Điều này có thể là một giải pháp để tránh việc chớp mắt trong Opera.

Ví dụ:

.super_hide{ 
    position:fixed; 
    top:-1000px; /* you would need to know how height the content is or put something huge*/ 
} 

Hy vọng điều này sẽ giúp!