M

MLOG

Tiếng Việt

Nắm vững kỹ thuật tạo accordion thuần CSS với chức năng chỉ hiển thị một nội dung, nâng cao trải nghiệm người dùng và khả năng tiếp cận trên mọi nền tảng web.

Accordion Thuần CSS: Tạo Widget Chỉ Hiện Một Nội Dung để Nâng Cao Trải Nghiệm Người Dùng

Accordion là một thành phần chủ yếu trong thiết kế web hiện đại, cung cấp một cách trình bày gọn gàng và hiệu quả lượng lớn thông tin dưới định dạng dễ tiêu hóa. Chúng đặc biệt hữu ích cho các mục Hỏi Đáp (FAQ), mô tả sản phẩm và menu điều hướng. Bài viết này đi sâu vào việc tạo ra các accordion thuần CSS với hành vi chỉ hiển thị một nội dung (single disclosure), nghĩa là chỉ có một mục accordion có thể được mở tại một thời điểm. Cách tiếp cận này giúp nâng cao trải nghiệm người dùng bằng cách ngăn chặn tình trạng quá tải nội dung và thúc đẩy việc duyệt web tập trung.

Hiểu Rõ Lợi Ích của Accordion Thuần CSS

Accordion truyền thống dựa trên JavaScript thường yêu cầu quản lý trạng thái và xử lý sự kiện, điều này có thể làm tăng độ phức tạp cho mã của bạn. Ngược lại, accordion thuần CSS tận dụng sức mạnh của các bộ chọn CSS và lớp giả `:checked` để đạt được chức năng mong muốn mà không cần dựa vào JavaScript. Điều này mang lại:

Các Thành Phần Cơ Bản: Cấu Trúc HTML

Nền tảng của accordion thuần CSS của chúng ta nằm ở một cấu trúc HTML được tổ chức tốt. Chúng ta sẽ sử dụng các yếu tố sau:

Đây là cấu trúc HTML cơ bản:


<div class="accordion-container">
  <input type="radio" name="accordion" id="section1">
  <label for="section1">Section 1 Title</label>
  <div class="accordion-content">
    <p>Content for Section 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">Section 2 Title</label>
  <div class="accordion-content">
    <p>Content for Section 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">Section 3 Title</label>
  <div class="accordion-content">
    <p>Content for Section 3.</p>
  </div>
</div>

Giải thích:

Tạo Kiểu cho Accordion bằng CSS

Bây giờ, hãy thêm CSS để tạo kiểu cho accordion và triển khai hành vi chỉ hiển thị một nội dung.


.accordion-container {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

input[type="radio"] {
  display: none;
}

label {
  display: block;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none; /* Initially hide the content */
}

input[type="radio"]:checked + label {
  background-color: #ddd;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block; /* Show content when radio button is checked */
}

Giải thích:

Nâng Cao Khả Năng Tiếp Cận với Thuộc Tính ARIA

Để đảm bảo accordion của chúng ta có thể tiếp cận được bởi người dùng khuyết tật, chúng ta cần thêm các thuộc tính ARIA. Các thuộc tính ARIA (Accessible Rich Internet Applications) cung cấp thông tin ngữ nghĩa cho các công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình.

Đây là cách chúng ta có thể nâng cao khả năng tiếp cận:


<div class="accordion-container" role="presentation"> 
  <input type="radio" name="accordion" id="section1" aria-controls="content1">
  <label for="section1" aria-expanded="false" aria-controls="content1">Section 1 Title</label>
  <div id="content1" class="accordion-content" role="region" aria-labelledby="section1">
    <p>Content for Section 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false" aria-controls="content2">Section 2 Title</label>
  <div id="content2" class="accordion-content" role="region" aria-labelledby="section2">
    <p>Content for Section 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false" aria-controls="content3">Section 3 Title</label>
  <div id="content3" class="accordion-content" role="region" aria-labelledby="section3">
    <p>Content for Section 3.</p>
  </div>
</div>

Giải thích:

Những Lưu Ý Quan Trọng về Khả Năng Tiếp Cận:

Tùy Chỉnh và Cải Tiến

Accordion thuần CSS cơ bản có thể được tùy chỉnh và cải tiến thêm để đáp ứng các yêu cầu thiết kế cụ thể.

Thêm Hiệu Ứng Chuyển Động

Để tạo ra trải nghiệm người dùng mượt mà hơn, chúng ta có thể thêm hiệu ứng chuyển động CSS vào nội dung của accordion.


.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none;
  transition: max-height 0.3s ease-out; /* Add transition */
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block;
  max-height: 500px; /* Set a maximum height for the transition */
}

Giải thích:

Tạo Kiểu với Biểu Tượng

Thêm biểu tượng vào tiêu đề accordion có thể cải thiện sự hấp dẫn về mặt hình ảnh và sự hiểu biết của người dùng. Bạn có thể sử dụng các phần tử giả CSS hoặc các biểu tượng phông chữ cho mục đích này.

Sử dụng Phần tử giả CSS:


label::after {
  content: '+'; /* Initial icon */
  float: right;
  font-size: 1.2em;
}

input[type="radio"]:checked + label::after {
  content: '-'; /* Change icon when expanded */
}

Sử dụng Biểu Tượng Phông Chữ (ví dụ: Font Awesome):

  1. Bao gồm CSS của Font Awesome trong tệp HTML của bạn: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="..." crossorigin="anonymous" />
  2. Sử dụng các lớp Font Awesome thích hợp trong các nhãn của bạn:

<label for="section1">Section 1 Title <i class="fas fa-plus"></i></label>

Sau đó, sử dụng CSS để thay đổi biểu tượng khi mục được mở rộng:


input[type="radio"]:checked + label i.fas.fa-plus {
  display: none;
}

input[type="radio"]:checked + label {
    /* insert the minus icon */
}

input[type="radio"]:checked + label::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f068"; /* fa-minus unicode */
    float:right;
}

Những Lưu Ý về Thiết Kế Đáp Ứng

Đảm bảo rằng accordion của bạn hoạt động tốt trên các kích thước màn hình khác nhau bằng cách sử dụng các kỹ thuật thiết kế đáp ứng. Bạn có thể sử dụng các truy vấn media để điều chỉnh kiểu dáng của accordion dựa trên chiều rộng màn hình.

Ví dụ:


@media (max-width: 768px) {
  .accordion-container {
    width: 100%; /* Adjust width for smaller screens */
  }

  label {
    padding: 8px;
    font-size: 0.9em; /* Adjust font size */
  }
}

Kỹ Thuật Nâng Cao

Mặc dù accordion thuần CSS cơ bản cung cấp một nền tảng vững chắc, có những kỹ thuật nâng cao có thể cải thiện hơn nữa chức năng và trải nghiệm người dùng của nó.

Lưu Trạng Thái với Local Storage

Bạn có thể sử dụng JavaScript (mặc dù điều này đi ngược lại cách tiếp cận thuần CSS) và local storage để ghi nhớ trạng thái của accordion, để khi người dùng quay lại trang, các mục đã mở trước đó vẫn được mở.

Tải Nội Dung Động

Đối với các accordion có lượng lớn nội dung, bạn có thể tải nội dung một cách động bằng AJAX. Điều này có thể cải thiện thời gian tải trang ban đầu và giảm việc sử dụng băng thông.

Xử Lý Các Vấn Đề Thường Gặp

Dưới đây là một số vấn đề thường gặp bạn có thể gặp phải khi triển khai accordion thuần CSS và cách giải quyết chúng:

Ví Dụ Thực Tế

Accordion thuần CSS có thể được sử dụng trong nhiều kịch bản thực tế khác nhau:

Kết Luận

Accordion thuần CSS với chức năng chỉ hiển thị một nội dung cung cấp một cách mạnh mẽ và hiệu quả để nâng cao trải nghiệm người dùng và khả năng tiếp cận trên trang web của bạn. Bằng cách tận dụng sức mạnh của các bộ chọn CSS và thuộc tính ARIA, bạn có thể tạo ra các yếu tố tương tác có hiệu suất cao, dễ bảo trì và dễ tiếp cận cho nhiều đối tượng người dùng. Cho dù bạn đang xây dựng một trang Hỏi Đáp đơn giản hay một ứng dụng web phức tạp, accordion thuần CSS có thể giúp bạn trình bày thông tin một cách rõ ràng và hấp dẫn, góp phần tạo ra trải nghiệm người dùng tổng thể tốt hơn cho khán giả toàn cầu.

Tài Nguyên Học Tập Thêm