Bootstrap - Ẩn thị giác
Xin chào các nhà phát triển web tương lai! Hôm nay, chúng ta sẽ cùng nhau khám phá một tính năng thú vị và vô cùng hữu ích của Bootstrap: lớp ẩn thị giác. Như một giáo viên máy tính gần gũi, tôi rất vui được hướng dẫn các bạn trong hành trình này. Vậy hãy chuẩn bị đồ uống yêu thích của bạn, ngồi thoải mái, và cùng bắt đầu cuộc phiêu lưu này nhé!
什么是 Visually Hidden?
Trước khi chúng ta đi vào chi tiết, hãy bắt đầu từ cơ bản. Lớp ẩn thị giác trong Bootstrap giống như một chiêu trò của phù thủy trên trang web của bạn. Nó cho phép bạn ẩn nội dung thị giác trong khi vẫn giữ nội dung khả dụng cho máy quét màn hình. Thật tuyệt vời phải không?
Hãy tưởng tượng bạn đang thiết kế một trang web cho một trường học ma thuật (hãy gọi nó là Hogwarts nhé?). Bạn muốn bao gồm thông tin quan trọng cho học sinh khiếm thị, nhưng bạn không muốn thông tin này làm rối loạn bố cục thị giác cho các học sinh khác. Đó là lúc lớp ẩn thị giác ra vào cuộc giải cứu!
Làm thế nào để nó hoạt động?
Lớp ẩn thị giác sử dụng CSS để ẩn nội dung khỏi người dùng thị giác trong khi vẫn giữ nó khả dụng cho máy quét màn hình. Đó giống như có một chiếc áo choàng vô hình cho các phần tử HTML của bạn!
Hãy cùng xem một ví dụ đơn giản:
<h1>Welcome to Hogwarts</h1>
<p class="visually-hidden">This content is for screen readers only.</p>Trong ví dụ này, người dùng thị giác chỉ nhìn thấy "Welcome to Hogwarts", trong khi người dùng máy quét màn hình sẽ cũng nghe thấy "This content is for screen readers only."
Thực hiện Visually Hidden trong Bootstrap
Bây giờ chúng ta đã hiểu khái niệm, hãy xem cách chúng ta có thể thực hiện nó trong Bootstrap. Bootstrap cung cấp cho chúng ta một lớp sẵn sàng sử dụng叫做 .visually-hidden.
Dưới đây là cách bạn có thể sử dụng nó:
<div class="visually-hidden">This content is hidden visually but accessible to screen readers.</div>Đơn giản phải không? Chỉ cần thêm lớp này vào bất kỳ phần tử nào bạn muốn ẩn thị giác.
Ví dụ thực tế
Hãy xem một số ví dụ thực tế nơi bạn có thể sử dụng lớp ẩn thị giác:
- Liên kết Skip Navigation:
<a href="#main-content" class="visually-hidden">Skip to main content</a>
<nav>
<!-- Navigation menu items -->
</nav>
<main id="main-content">
<!-- Main content -->
</main>Điều này cho phép người dùng máy quét màn hình bỏ qua trực tiếp đến nội dung chính, cải thiện trải nghiệm duyệt web của họ.
- nhãn Form:
<label for="search" class="visually-hidden">Search</label>
<input type="text" id="search" placeholder="Search">Ở đây, chúng tôi cung cấp một nhãn cho máy quét màn hình mà không ảnh hưởng đến thiết kế thị giác của một mục tìm kiếm.
- Bối cảnh bổ sung:
<button>
Delete
<span class="visually-hidden">this item from your cart</span>
</button>Điều này cung cấp thêm bối cảnh cho người dùng máy quét màn hình mà không làm rối loạn văn bản nút cho người dùng thị giác.
Phép màu đằng sau Visually Hidden
Bây giờ, hãy nhìn sau màn curtain và xem Bootstrap thực hiện lớp kỳ diệu này như thế nào. Dưới đây là CSS làm cho nó hoạt động:
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}Đừng lo lắng nếu điều này trông giống như một lời phù thủy từ một lớp thuốc tiên cao cấp! Hãy cùng phân tích:
-
position: absolute: Điều này đưa phần tử ra khỏi luồng tài liệu thông thường. -
width: 1px; height: 1px: Làm cho phần tử nhỏ. -
padding: 0; margin: -1px: Loại bỏ bất kỳ không gian nào xung quanh phần tử. -
overflow: hidden: Ẩn bất kỳ nội dung nào có thể tràn ra. -
clip: rect(0, 0, 0, 0): Cắt nội dung thành một hình chữ nhật 0x0. -
white-space: nowrap: Ngăn không cho văn bản cuộn. -
border: 0: Loại bỏ bất kỳ cạnh nào.
Các khai báo !important đảm bảo rằng các phong cách này không bị thay thế bởi các quy tắc CSS khác.
Visually Hidden vs Display None
Bạn có thể đang tự hỏi, "Tại sao không chỉ sử dụng display: none?" Well, người học tập tò mò, có một sự khác biệt quan trọng:
| Thuộc tính | Ẩn thị giác | Ẩn hoàn toàn |
|---|---|---|
| Xuất hiện thị giác | Ẩn | Ẩn |
| Truy cập của máy quét màn hình | Khả dụng | Không khả dụng |
| Sự hiện diện trong DOM | Còn lại | Còn lại |
| Ảnh hưởng đến bố cục | Không ảnh hưởng | Ảnh hưởng |
Như bạn có thể thấy, visually-hidden là cách đi khi bạn muốn duy trì khả năng truy cập trong khi ẩn nội dung thị giác.
T可视性响应
Bootstrap cũng cung cấp các lớp để chuyển đổi tính khả见 based on screen size. Các lớp này kết hợp khái niệm ẩn thị giác với thiết kế响应:
-
.d-none: Ẩn cho tất cả các kích thước màn hình -
.d-{sm,md,lg,xl,xxl}-none: Ẩn chỉ trên các kích thước màn hình cụ thể -
.d-{sm,md,lg,xl,xxl}-block: Hiển thị dưới dạng phần tử block trên các kích thước màn hình cụ thể
Ví dụ:
<div class="d-none d-md-block">
This content is hidden on small screens but visible on medium and larger screens.
</div>Kết luận
Và thế là bạn đã có nó, các phù thủy web trẻ! Chúng ta đã giải mã bí ẩn của lớp ẩn thị giác trong Bootstrap. Nhớ rằng, với quyền lực lớn đi kèm với trách nhiệm lớn. Sử dụng các kỹ thuật này một cách khôn ngoan để tạo ra các trang web không chỉ hấp dẫn thị giác mà còn khả dụng cho tất cả người dùng.
Khi chúng ta kết thúc bài học, tôi nhớ lại một lời khuyên của một nhà phát triển web giàu kinh nghiệm đã từng nói với tôi, "Phép thuật thực sự của thiết kế web không nằm ở những gì bạn có thể thấy, mà là những gì bạn không thể thấy." Vậy hãy đi tiếp, thử nghiệm, và tạo ra những trải nghiệm web kỳ diệu cho tất cả mọi người!
Đến gặp lại nhau trong cuộc phiêu lưu tiếp theo trong thế giới phát triển web, hãy tiếp tục mã hóa và giữ vững sự tò mò!
Credits: Image by storyset