Chúng tôi có rất nhiều thuộc tính CSS và việc thành thạo tất cả chúng có thể là một thách thức. Khả năng hiển thị CSS là một trong những thuộc tính quan trọng bạn nên nắm vững nếu muốn trở thành nhà phát triển web lành nghề.
Trong bài viết này, tôi sẽ xác định khả năng hiển thị CSS, giải thích ý nghĩa của nó, đồng thời liệt kê và giải thích các giá trị khả năng hiển thị CSS khác nhau.
Khả năng hiển thị CSS là gì?
Thuộc tính hiển thị CSS ẩn hoặc hiển thị một phần tử trên trang web. Ví dụ: bạn có thể có bốn trường trên trang web của mình và sử dụng thuộc tính hiển thị để xác định cách chúng sẽ được hiển thị. Tất cả các mục sẽ xuất hiện trên trang nếu bạn đặt chế độ hiển thị thành hiển thị.
Tuy nhiên, nếu mục bị ẩn, nó vẫn sẽ chiếm dung lượng nhưng sẽ bị ẩn khỏi màn hình trình duyệt/kết thúc.
Khả năng hiển thị CSS rất quan trọng trong các trường hợp sau;
- Kiểm soát mức độ hiển thị: Bạn có thể kiểm soát những gì sẽ được hiển thị dựa trên người dùng hiện tại. Bạn có thể đặt mức độ hiển thị của một phần tử để nó chỉ hiển thị khi người dùng kích hoạt nó bằng một hành động cụ thể. Ví dụ: di chuột qua hoặc nhấp vào nút.
- Giữ lại bố cục: Một ứng dụng tốt sẽ giữ lại bố cục và nội dung bất kể kích thước màn hình. Khi bạn đặt chế độ hiển thị của một mục thành ẩn, mục đó sẽ vẫn chiếm dung lượng nhưng người dùng cuối sẽ không hiển thị. Cách tiếp cận này cho phép bạn duy trì một bố cục nhất quán.
- Tối ưu hóa hiệu suất: Trình duyệt không phải liên tục tính toán lại bố cục khi thuộc tính khả năng hiển thị được đặt thành khả năng hiển thị: ẩn. Tuy nhiên, nếu bạn sử dụng thuộc tính display:none, trình duyệt phải tính toán lại bố cục mỗi khi bạn quyết định hiển thị lại phần tử.
- Tạo giao diện người dùng năng động và tương tác: Bạn có thể kết hợp thuộc tính hiển thị CSS với các thuộc tính khác như độ mờ để tạo hiệu ứng mờ dần, hoạt ảnh và chuyển tiếp mượt mà.
Các giá trị hiển thị CSS khác nhau
Khả năng hiển thị CSS có năm giá trị có thể. Tôi sẽ đi vào chi tiết thông qua các khối mã và ảnh chụp màn hình. Nếu bạn định theo dõi
- Tạo một thư mục trên máy tính cục bộ của bạn.
- Thêm hai tập tin; index.html và style.css.
- Mở dự án trong trình soạn thảo mã yêu thích của bạn (Tôi sử dụng Mã VS)
Bạn có thể sử dụng lệnh này;
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
Một cách khác là kết hợp các tệp index.html và style.css. Tại phần
index.html thêm cái này;
<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">
Bây giờ bạn sẽ có một cái gì đó tương tự như thế này trong trình soạn thảo mã của mình;
Dễ thấy
Khi bạn đặt giá trị của một phần tử thành mức độ hiển thị: hiển thị, nó sẽ xuất hiện trên trang web. Khả năng hiển thị này có sẵn theo mặc định. Chúng ta có thể có ba trường trong tài liệu HTML của mình để hiểu rõ hơn về khái niệm này. Tại phần
trong tệp index.html, thêm phần sau;
<div class="container"> <div class="box1"> Box 1 </div> <div class="box2"> Box 2 </div> <div class="box3"> Box 3 </div> </div>
Bây giờ chúng ta có thể tạo kiểu cho các div (hộp) của mình bằng mã CSS sau;
.container {
padding: 15px;
width: max-content;
display: flex;
border: 1px solid black;
}
.box1,
.box2,
.box3 {
height: 30px;
width: 100px;
}
.box1 {
background-color: rgb(224, 49, 209);
margin-right: 15px;
}
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
}
.box3 {
background-color: rgb(154, 43, 12);
}Khi trang cuối cùng được hiển thị, bạn sẽ có kết quả như thế này;
Nếu bạn đặt mức độ hiển thị của trường thành mức độ hiển thị: hiển thị, điều này sẽ không có hiệu lực vì tất cả các trường đều hiển thị theo mặc định.
Tuy nhiên, chúng ta có thể chứng minh cách hoạt động của thuộc tính hiển thị với màn hình: không có thuộc tính nào trên một trong các hộp. Ví dụ: chúng ta có thể chọn box3. Thay đổi mã CSS trong lớp .box3 như sau;
.box3 {
background-color: rgb(154, 43, 12);
display: none
}Khi kết xuất lại trang, bạn sẽ nhận thấy rằng chúng tôi chỉ có hai trường, một và hai.
Nếu quan tâm, bạn sẽ nhận thấy rằng phần tử .container của chúng tôi đã bị giảm kích thước. Khi bạn sử dụng thuộc tính display: none, Box 3 không được hiển thị và vị trí của nó trong trình duyệt của chúng tôi trở nên trống đối với các trường khác.
Ẩn giấu
Khi chúng tôi áp dụng thuộc tính CSS “visight:hidden” trên một phần tử, nó sẽ bị ẩn khỏi người dùng cuối. Tuy nhiên, nó vẫn sẽ chiếm không gian. Ví dụ: chúng ta có thể ẩn Box2 bằng thuộc tính này.
Để đạt được điều này, hãy sửa đổi mã CSS Box2 như sau;
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}Thay đổi duy nhất chúng tôi đã thực hiện là thêm dòng này;
visibility: hidden
Trang cuối cùng sẽ giống như được hiển thị;
Chúng tôi thấy một khoảng trống giữa Hộp 1 và hộp 3bởi vì cái hộp 2 nó chỉ bị ẩn thôi
Chúng ta có thể thấy chiếc hộp đó 2 nó vẫn còn trong DOM nếu chúng tôi kiểm tra trang được hiển thị của mình.
Sụp đổ
Thu gọn là giá trị hiển thị được sử dụng trong các phần tử con. Các bảng HTML là một ví dụ tuyệt vời về nơi chúng ta có thể sử dụng thuộc tính “visibility: thu gọn”.
Chúng ta có thể thêm đoạn mã sau để tạo bảng trong tệp HTML của mình;
<table> <tr> <th>Programming Language</th> <th>Framework</th> </tr> <tr> <td>JavaScript </td> <td>Angular </td> </tr> <tr class="hidden-row"> <td>Ruby </td> <td>Ruby on Rails</td> </tr> <tr> <td>Python </td> <td>Django </td> </tr> </table>
Bây giờ chúng ta có thể tạo kiểu cho bảng của mình với đường viền 1px trên tất cả các ô của nó. Thêm phần này vào tệp CSS của bạn;
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}Khi hiển thị bảng chúng ta sẽ có như sau;
Bây giờ chúng ta sẽ ẩn hàng thứ hai để minh họa cách hoạt động của thuộc tính hiển thị: thu gọn. Thêm phần này vào mã CSS của bạn;
.hidden-row {
visibility: collapse;
}Khi trang được hiển thị, hàng từ Ruby và Ruby on Rails sẽ bị ẩn.
Sơ bộ
Thuộc tính khả năng hiển thị: ban đầu đặt lại phần tử HTML về giá trị ban đầu của nó. Ví dụ;
- Chúng tôi bắt đầu bằng cách hiển thị tất cả các hàng trong bảng của mình.
- Chúng tôi đã thu gọn giá trị hàng 2do đó che giấu nó.
- Bây giờ chúng ta có thể quay lại giá trị ban đầu (hiển thị nó)
Chúng tôi sẽ thêm một nút chuyển đổi giữa hiển thị và thu gọn các giá trị để minh họa điều này.
Thêm nút có thể nhấp này vào mã HTML của bạn;
<button onclick="toggleVisibility()">Click Me!!</button>
Sau đó, chúng ta có thể thêm một hàm JavaScript tìm kiếm lớp .hidden-row và chuyển sang lớp .visible-row khi nút được nhấp vào.
<script>
function toggleVisibility() {
const hiddenRow = document.querySelector('.hidden-row');
hiddenRow.classList.toggle('visible-row');
}
</script>
Add this code to your CSS file;
.visible-row {
visibility: initial;
}Giá trị hiển thị sẽ thay đổi khi bạn nhấp vào nút hiển thị;
Thừa kế
Thuộc tính hiển thị: Kế thừa cho phép phần tử con kế thừa thuộc tính hiển thị từ phần tử cha của nó.
Chúng ta có thể có đoạn mã đơn giản này để minh họa cách hoạt động của thuộc tính này;
<h1>Inherit Demo</h1> <div style="visibility: hidden"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p> </p>
Chỉ nội dung bên trong thẻ h1 và đoạn văn mới được hiển thị khi trang được hiển thị. Tuy nhiên, sẽ có một khoảng trống biểu thị các mục ẩn giữa các thẻ
.
Chúng tôi có một div có khả năng hiển thị mà chúng tôi đặt là ẩn. Chúng tôi có một thẻ
bên trong phần tử div. Chúng tôi đã thiết lập mức độ hiển thị của phần tử là sự kế thừa, nghĩa là nó kế thừa từ div cha của nó.
Tuy nhiên, nếu chúng ta đặt thuộc tính của div ở chế độ hiển thị thì phần tử
(phần tử con của nó) cũng sẽ kế thừa phần tử này.<h>Inherit Demo</h>
<div style="visibility: visible">
<h2 style="visibility: inherit"> Hidden</h2>
</div>
<p>Visible (not inside a hidden element) </p>
Khả năng hiển thị CSS: ẩn so với ẩn hiển thị: không có
Sự khác biệt chính giữa display:none vàvisible:hidden là cái trước loại bỏ hoàn toàn phần tử khỏi bố cục, trong khi cái sau ẩn phần tử nhưng vẫn chiếm dung lượng.
Chúng ta có thể sử dụng mã này để chứng minh sự khác biệt giữa hai mã này;
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgray;
margin-right: 20px;
}
.box1 {
background-color: lightblue;
}
.box2 {
background-color: black;
}
.container {
padding: 10px;
border :2px solid black;
padding-left: 20px;
width: 250px;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
</body>
</html>Nếu chúng tôi hiển thị trang của mình, chúng tôi sẽ có hai hộp cạnh nhau;
Hiển thị: không có bản demo
Thêm phần này vào lớp .box1;
display: none;
Khi trang hiển thị, bạn sẽ nhận thấy rằng .box1 sẽ không còn được hiển thị nữa. Hộp thứ hai (màu đen) cũng di chuyển sang trái, thay thế vị trí trước đó của hộp màu xanh nhạt.
Khả năng hiển thị: bản demo ẩn
Thay vì display: none thêm lớp này .box1;
visibility: hidden
Thuộc tính này để lại một khoảng trống cho box1 nhưng không hiển thị nó. Mặt bên kia của hộp 2 vẫn giữ nguyên vị trí.
display:nonevisibility:hidden Xóa hoàn toàn phần tử khỏi trang web Ẩn phần tử HTML nhưng vẫn chiếm không gian trên trang web Bạn có thể tạo kiểu cho một phần tử có mức độ hiển thị được đặt thành không Bạn có thể đặt và tạo kiểu cho một phần tử có khả năng hiển thị bị ẩn Không có sẵn cho trình đọc màn hình Bạn có thể truy cập phần tử có mức độ hiển thị được đặt thành ẩn bằng trình đọc màn hình
Cải thiện khả năng truy cập với khả năng hiển thị CSS
Bạn có thể sử dụng khả năng hiển thị CSS để ẩn các phần tử không quan trọng đối với tất cả người dùng. Ví dụ: bạn có thể sử dụng tính năng này để ẩn người dùng đã đăng nhập, tính năng này sẽ chỉ khả dụng đối với người dùng chưa đăng nhập. Bạn cũng có thể có thanh bên hoặc chân trang chứa thông tin về điều khoản dịch vụ hoặc bản quyền.
Chúng tôi có thể có mã này để minh họa cách bạn có thể cải thiện khả năng hiển thị;
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style>
.login-form {
display: none;
}
.login-text:hover + .login-form {
display: block;
}
.login-form label {
display: block;
margin-bottom: 5px;
}
.login-form input {
width: 30%;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p class="login-text">Login</p>
<form class="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<button type="submit">Submit</button>
</form>
</body>
</html>Biểu mẫu đăng nhập chỉ hiển thị sau khi di chuột qua phần tử đầu tiên.
Ứng dụng
Chúng tôi tin rằng giờ đây bạn có thể sử dụng các thuộc tính hiển thị CSS trong mã của mình một cách thuận tiện để giúp quá trình chuyển đổi diễn ra suôn sẻ hơn và cải thiện khả năng truy cập của các trang web. Tuy nhiên, bạn cần biết sử dụng từng giá trị hiển thị ở đâu để tránh các trang bị loại. Bạn cũng có thể ẩn dữ liệu chính khỏi người dùng cuối khi sử dụng sai thuộc tính hiển thị CSS.
Hãy xem các tài nguyên và hướng dẫn CSS của chúng tôi để tìm hiểu thêm về các thuộc tính CSS mà bạn có thể kết hợp với khả năng hiển thị CSS.
