Tuyệt kỹ xử lý giao diện trống với data-empty-text: Khi CSS "gánh" còng lưng JavaScript

Chào anh em!

Khi xây dựng các ứng dụng Web, chúng ta thường xuyên phải đối mặt với bài toán Empty State (Trạng thái rỗng). Đó là khi người dùng chưa có đơn hàng nào, giỏ hàng trống trơn, hoặc một bảng dữ liệu không có kết quả tìm kiếm.

Thông thường, để hiển thị dòng chữ "Không có dữ liệu", anh em sẽ dùng JavaScript hoặc các cú pháp của Framework (như v-if trong Vue hay toán tử ba ngôi trong React) để kiểm tra mảng. Nếu mảng rỗng thì in ra thẻ <div> chứa câu thông báo.

Nhưng nếu bạn đang làm một trang web thuần, hoặc muốn code HTML/CSS của mình "sạch" và thông minh hơn mà không cần lạm dụng logic JavaScript thì sao? Đó là lúc thuộc tính tùy chỉnh data-empty-text của HTML5 kết hợp cùng CSS tỏa sáng.

1. data-empty-text thực chất là gì?

Trong HTML5, W3C đã giới thiệu một tính năng cực kỳ mạnh mẽ gọi là Custom Data Attributes (Thuộc tính dữ liệu tùy chỉnh). Tính năng này cho phép lập trình viên tự đẻ ra bất kỳ thuộc tính nào mình muốn, miễn là nó bắt đầu bằng tiền tố data-.

data-empty-text không phải là một thuộc tính mặc định của trình duyệt, mà là một quy ước (convention) rất phổ biến trong giới Frontend. Nó được dùng để cất giấu một đoạn văn bản dự phòng (fallback text) ngay bên trong thẻ HTML.

Ví dụ:

<ul class="user-list" data-empty-text="Hiện tại chưa có người dùng nào.">
    <!-- Nếu có dữ liệu, các thẻ <li> sẽ nằm ở đây -->
</ul>

Nhìn vào HTML, đoạn text "Hiện tại chưa có người dùng nào" đang nằm im lìm và trình duyệt sẽ không hiển thị nó ra màn hình. Vậy làm sao để gọi nó ra khi thẻ <ul> trống rỗng?

2. Phép thuật của CSS: :empty và attr()

Đây là lúc CSS thể hiện sức mạnh. Chúng ta sẽ kết hợp 3 khái niệm cực kỳ hay của CSS lại với nhau:

• :empty: Pseudo-class (Lớp giả) giúp chọn ra những thẻ HTML không có bất kỳ nội dung nào bên trong (kể cả khoảng trắng hay thẻ con).
• ::before / ::after: Pseudo-element (Phần tử giả) giúp tạo ra một thành phần ảo bên trong thẻ.
• attr(): Hàm của CSS giúp lấy giá trị từ một thuộc tính của thẻ HTML.

Đoạn code CSS thần thánh:

/* Chỉ áp dụng khi danh sách trống */
.user-list:empty::after {
    /* Lấy nội dung từ thuộc tính data-empty-text để hiển thị */
    content: attr(data-empty-text);
    
    /* Trang trí cho đẹp */
    display: block;
    padding: 20px;
    text-align: center;
    color: #888;
    font-style: italic;
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 8px;
}

Kết quả:

• Khi bạn dùng JavaScript (hoặc load từ Server) đổ các thẻ <li> vào, class :empty sẽ bị vô hiệu hóa, đoạn thông báo tự động biến mất.
• Khi bạn xóa hết các thẻ <li>, thẻ <ul> trở về trạng thái rỗng, CSS sẽ ngay lập tức bắt được sự kiện :empty và in đoạn text được cấu hình trong data-empty-text ra màn hình.

3. Tại sao cách này lại "đáng đồng tiền bát gạo"?

• Tách biệt mối quan tâm (Separation of Concerns): JavaScript của bạn giờ đây chỉ cần làm đúng một việc là "Thêm/Xóa phần tử". Nhiệm vụ hiển thị cảnh báo rỗng được giao lại hoàn toàn cho CSS. Code JS sẽ bớt đi những dòng if-else lằng nhằng.
• Tái sử dụng cực cao (Reusability): Bạn chỉ cần viết đoạn CSS trên một lần duy nhất vào file hệ thống. Sau đó, ở bất kỳ chỗ nào (bảng, danh sách, thẻ div), bạn chỉ cần gắn thuộc tính data-empty-text="Nội dung tùy ý" là nó sẽ tự động hoạt động một cách hoàn hảo.
• HTML Semantic (Ngữ nghĩa): Nội dung thông báo rỗng được gắn chặt vào chính cái component chứa nó, giúp mã nguồn HTML cực kỳ dễ đọc và dễ bảo trì.

4. Giao tiếp với JavaScript bằng dataset

Tuy CSS đã lo phần hiển thị, nhưng đôi khi trong logic JavaScript, bạn vẫn muốn lấy hoặc thay đổi đoạn thông báo này một cách linh hoạt (ví dụ: đổi ngôn ngữ từ tiếng Việt sang tiếng Anh).

HTML5 cung cấp API dataset để thao tác với các tiền tố data- cực kỳ dễ dàng:

const list = document.querySelector('.user-list');

// Đọc giá trị (Chú ý: empty-text chuyển thành camelCase là emptyText)
console.log(list.dataset.emptyText); // Kết quả: "Hiện tại chưa có người dùng nào."

// Thay đổi giá trị bằng JavaScript
list.dataset.emptyText = "Đang tải dữ liệu, vui lòng chờ...";

Lời kết

data-empty-text kết hợp với CSS :empty là một ví dụ điển hình cho câu nói: "Code ít hơn, làm được nhiều hơn". Bằng cách thấu hiểu và tận dụng tối đa sức mạnh của HTML5 và CSS3, anh em hoàn toàn có thể xử lý các logic UI một cách thanh lịch mà không cần phải lúc nào cũng "gõ đầu" JavaScript.

Hãy thử áp dụng tuyệt kỹ này vào dự án tiếp theo để thấy source code của mình sạch sẽ và gọn gàng hơn như thế nào nhé! Chúc anh em code vui!