Khả năng hiển thị CSS nâng cao thiết kế web của bạn như thế nào với những viên ngọc ẩn
Chúng tôi có nhiều thuộc tính CSS và việc thành thạo tất cả 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 mà bạn nên nắm vững nếu muốn trở thành một nhà phát triển web lành nghề.
Trong bài viết này, tôi sẽ định nghĩa Khả năng hiển thị CSS, giải thích tầm quan trọng của nó, liệt kê và giải thích các giá trị hiển thị CSS khác nhau.
Khả năng hiển thị CSS là gì?
Thuộc tính khả năng hiển thị CSS ẩn hoặc hiển thị một phần tử trong trang web. Chẳng hạn, bạn có thể có bốn hộp trên trang web của mình và sử dụng thuộc tính khả năng hiển thị để xác định cách chúng sẽ được hiển thị. Tất cả các yếu tố sẽ xuất hiện trên trang nếu bạn đặt chế độ hiển thị là hiển thị.
Tuy nhiên, nếu phần tử bị ẩn, nó sẽ vẫn chiếm dung lượng nhưng sẽ bị ẩn khỏi trình duyệt/màn hình cuối.
Khả năng hiển thị CSS rất quan trọng trong các trường hợp sau;
- Kiểm soát khả năng 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 chế độ hiển thị của một phần tử thành chỉ hiển thị khi người dùng kích hoạt phần tử đó bằng một hành động nhất định. Chẳng hạn, di chuột hoặc nhấp vào nút.
- Bảo toàn bố cục: Một ứng dụng tốt nên bảo toàn bố cục và nội dung của nó bất kể kích thước màn hình. Khi bạn đặt chế độ hiển thị của một phần tử là ẩn, phần tử đó sẽ vẫn chiếm dung lượng nhưng sẽ không hiển thị cho người dùng cuối. Cách tiếp cận như vậy giúp duy trì bố cục nhất quán.
- Tối ưu hóa hiệu suất: Trình duyệt không cần tiếp tục tính toán lại bố cục khi thuộc tính khả năng hiển thị được đặt là khả năng hiển thị: ẩn. Tuy nhiên, khi bạn sử dụng thuộc tính display:none, trình duyệt cần tính toán lại bố cục bất cứ khi nào bạn quyết định hiển thị lại phần tử.
- Tạo giao diện người dùng động và tương tác: Bạn có thể kết hợp thuộc tính khả năng hiển thị CSS với các thuộc tính khác, chẳng hạn 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 có ý định theo cùng,
- Tạo một thư mục trên máy cục bộ của bạn.
- Thêm hai tập tin; index.html và style.css.
- Mở dự án trong trình chỉnh sửa mã yêu thích của bạn (Tôi đang 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
Việc tiếp theo là kết nối các tệp index.html và style.css. Trên phần
của tệp index.html, hãy thêm phần 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 trên trình chỉnh sửa mã của mình;
Dễ thấy
Khi bạn đặt giá trị của một phần tử là visibility: visible, phần tử đó sẽ xuất hiện trên trang web. Khả năng hiển thị này là có theo mặc định. Chúng ta có thể có ba hộp trong tài liệu HTML của mình để hiểu khái niệm này tốt hơn. Trong phần
của index.html của bạn, hãy 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>
Giờ đây, chúng ta có thể tạo kiểu cho các div (hộp) của mình bằng cách sử dụ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ó một cái gì đó như thế này;
Nếu bạn đặt khả năng hiển thị trên các hộp là khả năng hiển thị: có thể nhìn thấy, Điều này sẽ không có bất kỳ ảnh hưởng nào vì tất cả các hộp đề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 visible bằng cách sử dụng thuộc tính display: none trên một trong các hộp. Chúng ta có thể chọn box3 làm ví dụ. Thay đổi mã CSS trên lớp .box3 như sau;
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
Khi bạn hiển thị lại trang, bạn sẽ lưu ý rằng chúng tôi chỉ có hai hộp, một và hai.
Nếu bạn quan tâm, bạn sẽ lưu ý rằng phần tử .container của chúng tôi đã giảm kích thước. Khi bạn sử dụng thuộc tính display: none, Hộp 3 không được hiển thị và không gian của nó trên trình duyệt của chúng tôi sẽ bị bỏ trống cho các hộp khác chiếm chỗ.
Ẩn giấu
Khi chúng ta áp dụng thuộc tính CSS visibility: hidden trên một phần tử, phần tử đó sẽ bị ẩn khỏi người dùng cuối. Tuy nhiên, nó vẫn sẽ chiếm không gian. Chẳng hạn, 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ã Box2 CSS 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ẽ được hiển thị;
Chúng ta có thể thấy một khoảng trống giữa Hộp 1 và Hộp 3 vì phần tử Hộp 2 chỉ bị ẩn.
Chúng tôi có thể thấy rằng Hộp 2 vẫn còn trên 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à một giá trị khả năng hiển thị được sử dụng trên các phần tử phụ. Các bảng HTML là một ví dụ hoàn hảo về nơi chúng ta có thể áp dụng thuộc tính visibility:collapse.
Chúng tôi 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 chúng tôi hiển thị bảng, chúng tôi sẽ có những điều sau đây;
Bây giờ chúng ta sẽ ẩn hàng thứ hai để chứng minh cách thức hoạt động của thuộc tính visibility:collapse. 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 có Ruby và Ruby on Rails sẽ bị ẩn.
Ban đầu
Thuộc tính khả năng hiển thị: ban đầu đặt lại một phần tử HTML về giá trị ban đầu của nó. Ví dụ;
- Chúng tôi bắt đầu với tất cả các hàng trong bảng của chúng tôi được hiển thị.
- Chúng tôi đã thu gọn giá trị của hàng 2, do đó ẩn 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 các giá trị hiển thị và thu gọn để chứng minh đ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à bật/tắt lớp .visible-row trên lớp đó khi nhấp vào nút.
<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ị khả năng hiển thị sẽ chuyển đổi qua lại khi bạn nhấp vào nút được hiển thị;
Thừa kế
Thuộc tính visibility : inherit cho phép phần tử con kế thừa thuộc tính display từ phần tử cha.
Chúng ta có thể có mã đơn giản này để chứng minh 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ị nếu bạn kết xuất trang. Tuy nhiên, sẽ tồn tại một khoảng trắng đại diện cho các phần tử ẩn giữa các thẻ
và
.
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ó thẻ
bên trong div. Chúng tôi đã đặt khả năng hiển thị của
là kế thừa, có nghĩa là nó kế thừa từ cha của nó, div.
Tuy nhiên, nếu chúng ta đặt thuộc tính của div là có thể nhìn thấy, thì
(con của nó) cũng sẽ kế thừa thuộc tính đó.
<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 hiển thị: không có
Sự khác biệt chính giữa display:none và visibility:hidden là cái trước loại bỏ hoàn toàn một phần tử khỏi bố cục trong khi cái sau ẩn một phần tử nhưng vẫn chiếm dung lượng.
Chúng tôi có thể sử dụng mã này để chứng minh sự khác biệt giữa hai;
<!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;
Màn hình: không có demo
Thêm phần này vào lớp .box1;
display: none;
Khi bạn kết xuất trang, bạn sẽ lưu ý 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 để chiếm không gian trước đó của hộp lightblue.
Khả năng hiển thị: demo ẩn
Thay vì display: none, hãy thêm lớp .box1 này;
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 khác, box2 vẫn giữ nguyên vị trí của nó.
display:nonevisibility:hiddenXóa hoàn toàn một thành phần khỏi trang webẨn một thành phần HTML nhưng vẫn chiếm dung lượng trên trang web Bạn có thể tạo kiểu cho một thành phần có hiển thị được đặt thành noneBạn có thể định vị và tạo kiểu cho một thành phần có khả năng hiển thị bị ẩnKhông thể truy cập bằng trình đọc màn hìnhBạn có thể truy cập một phần tử có khả năng hiển thị được đặt là ẩn bằng trình đọc màn hình
Cải thiện khả năng truy cập với CSS Visibility
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. Chẳng hạn, 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 chỉ khả dụng với những 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 điều khoản dịch vụ hoặc thông tin 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ị khi bạn di chuột qua mục đầu tiên.
Phần kết luận
Chúng tôi tin rằng giờ đây bạn có thể thoải mái sử dụng thuộc tính khả năng hiển thị CSS trong mã của mình để thực hiện quá trình chuyển đổi suôn sẻ và cải thiện khả năng truy cập các trang web của bạn. Tuy nhiên, bạn phải biết nơi sử dụng mọi giá trị khả năng hiển thị để tránh kết thúc bằng các trang lộn xộn. Bạn cũng có thể ẩn dữ liệu quan trọng khỏi người dùng cuối khi sử dụng sai thuộc tính khả năng hiển thị của 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ị của CSS.
