Click vào vùng div để điều hướng đến liên kết

Giải pháp tối ưu với kỹ thuật inset trong CSS

Tình cờ tham khảo các thành phần mẫu của Tailwind CSS, mình phát hiện một giải pháp vô cùng tinh gọn cho yêu cầu này. Ví dụ cụ thể có tại: Tailwind UI - Product Lists.

Cách triển khai chi tiết:

Bằng cách sử dụng một thẻ <span> ẩn với thuộc tính position: absolute, phủ kín vùng cần click và đặt bên trong thẻ <a>, ta có thể mở rộng vùng click mà không làm thay đổi cấu trúc HTML ban đầu.

HTML mẫu:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div class="relative">
  ...
  <h3 class="text-sm text-gray-700">
    <a href="#">
      <span aria-hidden="true" class="absolute inset-0"></span>
      Basic Tee
    </a>
  </h3>
  ...
</div>

CSS tương ứng:

1
2
3
4
5
6
7
8
9

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.absolute {
  position: absolute;
}

Ưu điểm vượt trội:

• Tối giản code: Chỉ cần 2 class CSS cơ bản và 1 phần tử <span> phụ trợ.
• Duy trì ngữ nghĩa HTML: Thẻ <a> chỉ bao quanh phần tiêu đề cần thiết, không làm rối cấu trúc DOM.
• Tương thích tốt: Hoạt động trên mọi trình duyệt hiện đại, kể cả các thiết bị cảm ứng.

Cách tiếp cận này tuy hơi vòng vo nhưng cực kỳ hiệu quả khi kết hợp với các framework CSS như Tailwind, giúp cân bằng giữa tính ứng dụng và tính thẩm mỹ trong phát triển giao diện.