×

Chọn phần tử mà URL đang trỏ đến - :target - trong CSS

Avatar of admin
admin 0 Views

Trong thế giới phát triển web, CSS mang lại nhiều khả năng để tùy chỉnh giao diện và cảm nhận của trang web. Một trong các công cụ hữu ích mà CSS cung cấp là giả phần tử :target. Phần tử này cho phép bạn áp dụng kiểu dáng động cho phần tử HTML đang được URL trỏ đến.

Hiểu Về Giả Phần Tử :target

Giả phần tử :target là một công cụ mạnh mẽ trong CSS, được sử dụng để nhận diện và áp dụng kiểu dáng cho phần tử HTML khi nó được trỏ đến bởi một URL với một đoạn URL có chứa ký tự hash (#). Để dễ hình dung, hãy xem xét một ví dụ đơn giản:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        section {
            transition: background-color 0.3s ease-in-out;
        }
        section:target {
            background-color: yellow;
        }
    </style>
    <title>Ví dụ về CSS target</title>
</head>
<body>
    <h1>Nội dung chính</h1>
    <nav>
        <ul>
            <li><a href="#section1">Đi đến Phần 1</a></li>
            <li><a href="#section2">Đi đến Phần 2</a></li>
            <li><a href="#section3">Đi đến Phần 3</a></li>
        </ul>
    </nav>

    <section id="section1">
        <h2>Phần 1</h2>
        <p>Đây là nội dung phần 1.</p>
    </section>
    <section id="section2">
        <h2>Phần 2</h2>
        <p>Đây là nội dung phần 2.</p>
    </section>
    <section id="section3">
        <h2>Phần 3</h2>
        <p>Đây là nội dung phần 3.</p>
    </section>
</body>
</html>

Trong ví dụ trên, khi người dùng nhấn vào liên kết "Đi đến Phần 1", URL của trang sẽ thay đổi thành #section1, và nhờ có giả phần tử :target, CSS sẽ áp dụng kiểu dáng màu nền vàng cho section có id="section1".

Các Ứng Dụng Thực Tiễn

Tạo Menu Điều Hướng Hoạt Động

Giả phần tử :target có thể được sử dụng để tạo menu điều hướng hoạt động, giúp chỉ ra vị trí hiện tại của người dùng trên trang web. Ví dụ:

nav a {
    text-decoration: none;
    color: black;
    padding: 5px 10px;
}
nav a:target {
    background-color: #ccc;
    color: blue;
}

Khi người dùng nhấp vào một liên kết trong menu, liên kết đó sẽ được làm nổi bật, giúp người dùng dễ dàng nhận biết mình đang ở đâu trong trang.

Tạo Tab Động

Phần tử :target cũng có thể được sử dụng để thiết kế hệ thống tab động, thay thế JavaScript cơ bản. Ví dụ:

<nav>
    <a href="#tab1">Tab 1</a>
    <a href="#tab2">Tab 2</a>
    <a href="#tab3">Tab 3</a>
</nav>
<div id="tab1" class="tab-content">Nội dung Tab 1</div>
<div id="tab2" class="tab-content">Nội dung Tab 2</div>
<div id="tab3" class="tab-content">Nội dung Tab 3</div>

.tab-content {
    display: none;
}
.tab-content:target {
    display: block;
}

Khi người dùng nhấp vào một tab, phần nội dung tương ứng sẽ được hiển thị, giúp tạo thưởng thức linh hoạt và trực quan hơn.

Những Lưu Ý Khi Sử Dụng :target

Mặc dù giả phần tử :target là một công cụ mạnh mẽ, có một số lưu ý cần cân nhắc khi sử dụng:

  1. Hạn chế về hỗ trợ trình duyệt: Đảm bảo rằng trình duyệt mục tiêu của bạn hỗ trợ đầy đủ giả phần tử này; tuy nhiên, hầu hết các trình duyệt hiện đại như Chrome, Firefox và Safari đều có hỗ trợ tốt.

  2. Không thay thế hoàn toàn JavaScript: Mặc dù :target có thể tạo các hiệu ứng đơn giản, nó không thể thay thế các tính năng phức tạp mà JavaScript cung cấp.

  3. SEO và khả năng truy cập: Đảm bảo rằng việc sử dụng :target không ảnh hưởng đến khả năng SEO và khả năng truy cập của trang web. Đặc biệt là nếu trang web của bạn nhắm đến đối tượng người dùng rộng lớn.

Kết Luận

Sử dụng giả phần tử :target là một cách tuyệt vời để tạo trải nghiệm người dùng tốt hơn và giao diện động mà không cần sử dụng JavaScript phức tạp. Từ việc tạo các hiệu ứng điều hướng đơn giản đến tạo hệ thống tab động, :target mở ra nhiều khả năng thú vị cho các nhà phát triển web. Bằng cách hiểu và áp dụng đúng cách, bạn có thể tận dụng tối đa sức mạnh của CSS trong việc xây dựng các trang web hiện đại và hiệu quả.

Comments

Bài viết liên quan