Chuyển đổi chế độ hiển thị khi ẩn phần tử - Thủ thuật CSS

Anonim

Nhóm phát triển tại Medium đã thảo luận về một số hoạt động xấu làm phá vỡ khả năng tiếp cận. Trong một ví dụ, họ cho rằng điều đó opacitykhông được hỗ trợ tốt bởi trình đọc màn hình và vì vậy nếu chúng ta muốn ẩn một phần tử trong quá trình chuyển đổi thì chúng ta cũng nên sử dụng visibilitythuộc tính:

.m-fadeOut ( visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms; ) .m-fadeIn ( visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms; )

Hãy nhớ độ mờ và khả năng hiển thị vẫn để lại một phần tử trong luồng tài liệu. Nếu bạn cần xóa nó khỏi dòng chảy, thì còn nhiều việc phải làm. Trên thực tế, đây là một cách để nghĩ về chúng…

có thể làm cho mọi thứ trở nên vô hình có thể làm cho mọi thứ không thể nhấp vào được xóa khỏi luồng tài liệu có thể được chuyển đổi có thể được đảo ngược trên trẻ em
sự mờ đục ya Không Không Đúng Không
hiển thị ya ya Không Đúng Đúng
trưng bày ya ya ya Không Không
sự kiện con trỏ Không ya Không Không Không

Nếu bạn cần thay đổi giá trị hiển thị của một phần tử sau khi mờ dần, điều đó khó hơn. Không thực sự khả thi trong CSS vì displaykhông thể chuyển đổi. Snook đã viết về điều này, bao gồm một số JavaScript để trợ giúp.