# 142: Ẩn mọi thứ với CSS - Thủ thuật CSS

Anonim

Không chỉ có một thuộc tính CSS duy nhất mà bạn tiếp cận khi ẩn và hiển thị mọi thứ trong CSS. Có một loạt các cân nhắc mà chúng ta sẽ xem xét trong video này.

Ví dụ, có một displaytài sản mà trong đó display: none;rất hiệu quả để che giấu đồ vật. Nhưng nó cũng sẽ ẩn yếu tố đó khỏi công nghệ hỗ trợ và bạn không phải lúc nào cũng muốn điều đó, giống như menu điều hướng thả xuống (menu thả xuống được ẩn trực quan nhưng không nên ẩn khỏi công nghệ hỗ trợ).

displaycũng không thể chuyển đổi được, vì vậy nếu bạn muốn làm mờ dần / làm mờ yếu tố transitionđó, điều đó là không. Trừ khi bạn sử dụng JavaScript để chỉ áp dụng thuộc tính đó sau khi quá trình chuyển đổi đã xảy ra.

Chuyển tiếp là gì? opacitylà, và hóa ra visibilitylà quá. Sự kết hợp này khá hữu ích với nhau, vì khi một phần tử có visibility: hidden;nó sẽ không ảnh hưởng đến các sự kiện như nhấp chuột / nhấn. Tuy nhiên, kết hợp này không đưa phần tử ra khỏi luồng trang, có thể hữu ích hoặc không hữu ích. Tài positionsản có thể hữu ích trong những trường hợp đó.

Xem! Rất nhiều điều để suy nghĩ!