Khám Phá Các Bộ Chọn CSS Nâng Cao Để Tối Ưu Hóa Thiết Kế Web Hiện Đại

CSS hiện đại đã phát triển rất nhiều với những bộ chọn nâng cao giúp tạo ra giao diện người dùng hiệu quả và linh hoạt. Trong bài viết này, chúng ta sẽ khám phá một số bộ chọn CSS mạnh mẽ như :is(), :where(), :not() và :has(), cùng với cách áp dụng chúng vào thực tiễn thiết kế web.

1. Bộ Chọn :is()

Bộ chọn giả lớp :is() cho phép áp dụng kiểu dáng cho nhiều bộ chọn mà không cần phải lặp lại các thuộc tính. Điều này giúp cải thiện mã CSS và làm nó dễ đọc hơn.

Ví Dụ:

<div class="alert success">Thông báo thành công</div>
<div class="alert error">Thông báo lỗi</div>
<div class="alert warning">Thông báo cảnh báo</div>

:is(.alert.success, .alert.error, .alert.warning) {
    font-weight: bold;
    border: 1px solid;
    border-radius: 4px;
}

.alert.success { border-color: green; }
.alert.error { border-color: red; }
.alert.warning { border-color: orange; }

Kết Quả:

Tất cả các thông báo cảnh báo sẽ có kiểu dáng chung với phông chữ đậm và viền, màu sắc sẽ được xác định theo từng loại thông báo.

2. Bộ Chọn :where()

Tương tự như :is(), bộ chọn :where() cũng giúp nhóm các bộ chọn lại với nhau nhưng lại có độ đặc hiệu bằng 0. Điều này rất hữu ích khi bạn cần định nghĩa các kiểu dễ dàng ghi đè.

Ví Dụ:

<button class="primary">Hành Động Chính</button>
<input type="button" value="Hành Động Phụ">
<input type="submit" value="Gửi Biểu Mẫu">

:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

button.primary {
    background-color: #007BFF;
    color: white;
}

Kết Quả:

Tất cả các nút sẽ có kiểu dáng nhất quán nhưng nút với lớp primary sẽ có màu nền đặc biệt, nổi bật.

3. Bộ Chọn :not()

Bộ chọn giả lớp :not() giúp loại trừ các thành phần nhất định khỏi các bộ chọn. Điều này đặc biệt hữu ích khi bạn muốn áp dụng kiểu cho tất cả nhưng trừ một phần tử hoặc lớp nhất định.

Ví Dụ:

<ul>
    <li class="done">Nhiệm vụ đã hoàn thành</li>
    <li>Nhiệm vụ cần làm</li>
    <li>Nhiệm vụ khác</li>
</ul>

li:not(.done) {
    background-color: #f0f0f0;
}

li.done {
    color: #888;
}

Kết Quả:

Tất cả các nhiệm vụ chưa hoàn thành sẽ có màu nền nhất quán, trong khi nhiệm vụ đã hoàn thành sẽ có màu sắc nhạt hơn để dễ phân biệt.

4. Bộ Chọn :has()

Bộ chọn :has() cho phép bạn tạo kiểu cho một phần tử dựa trên nội dung bên trong của nó. Đây là một bộ chọn rất mạnh mẽ nhưng hiện tại hỗ trợ trình duyệt vẫn còn hạn chế.

Ví Dụ:

<section>
    <h2>Phần Video</h2>
    <video src="movie.mp4" controls></video>
    <img src="thumbnail.jpg" alt="Hình thu nhỏ video">
</section>
<section>
    <h2>Phần Chỉ Có Văn Bản</h2>
    <p>Nội dung văn bản mà không có phương tiện truyền thông.</p>
</section>

section:has(video) {
    background-color: #1a1a1a;
}

section:has(video) img {
    filter: brightness(0.8);
}

Kết Quả:

Phần có chứa video sẽ có màu nền tối hơn, tạo cảm giác nổi bật cho nội dung đa phương tiện.

5. Hỗ Trợ Trình Duyệt

• :is() và :where(): Hầu hết các trình duyệt hiện đại đã hỗ trợ.
• :not(): Được hỗ trợ rộng rãi, nhưng các bộ chọn phức tạp có thể không hoạt động trên những trình duyệt cũ.
• :has(): Hỗ trợ hạn chế, chỉ có ở các phiên bản mới của một số trình duyệt.

6. Cân Nhắc Về Đặc Hiệu

• Bộ chọn :is() và:where() kế thừa độ đặc hiệu cao nhất từ các bộ chọn mà chúng chứa.
• :not() có độ đặc hiệu bằng độ đặc hiệu của bộ chọn của nó.
• :has() có thể gây ra các vấn đề về đặc hiệu trong CSS vì nó phụ thuộc vào các bộ chọn bên trong.

7. Ứng Dụng Thực Tế

• Tạo kiểu cho các thành phần: Sử dụng :is() và :where() để áp dụng kiểu chung cho các nút hoặc các phần tử biểu mẫu khác nhau.
• Bố cục linh hoạt: :has() có thể tạo ra các bố cục thích ứng tuỳ thuộc vào sự hiện diện của các phần tử cụ thể.
• Thiết kế đáp ứng: Kết hợp các bộ chọn này cùng với media queries để tạo ra các thiết kế đa dạng và tương thích hơn.

Kết Luận

Việc sử dụng các bộ chọn CSS nâng cao không chỉ giúp mã CSS của bạn trở nên gọn gàng và hiệu quả hơn mà còn giúp cải thiện khả năng duy trì trong dài hạn. Hãy chú ý đến hỗ trợ trình duyệt, đặc biệt là đối với bộ chọn :has(), và áp dụng chúng một cách thông minh để nâng cao trải nghiệm của người dùng trong thiết kế web hiện đại.