Những tính năng ít được biết đến của HTML/CSS hiện đại

• Nguyên nhân chính khiến hiệu năng website suy giảm gần đây là lạm dụng JavaScript và các script theo dõi; trong nhiều trường hợp, chỉ với HTML/CSS cũng đã có thể thay thế đầy đủ
• Những tính năng mới được bổ sung gần đây như CSS nesting, relative colors, các đơn vị viewport mới (lvh, svh, dvh) giúp giải quyết đơn giản các tác vụ trước đây phải phụ thuộc vào JS hoặc preprocessor
• CSS không chỉ là công cụ tạo kiểu đơn thuần mà còn là một ngôn ngữ mạnh mẽ có thể triển khai animation, kiểm tra đầu vào, giao diện dark mode, menu accordion
• Xét về hiệu năng, CSS được tăng tốc bằng GPU và chạy trên luồng riêng nên mượt mà và hiệu quả hơn JS trong animation và hiệu ứng chuyển tiếp
• Tác giả nhấn mạnh CSS không chỉ là công cụ thực dụng mà còn là phương tiện biểu đạt và nghệ thuật, đồng thời khuyến khích các lập trình viên web khai thác nhiều hơn tiềm năng của CSS hiện đại

---

Mở đầu: Sự phức tạp của web, và những thử nghiệm mới

• Nhiều website đang gặp vấn đề suy giảm hiệu năng và độ phức tạp do lạm dụng framework JavaScript
  • Ứng dụng React mất vài giây để tải, còn NextJS thì phát sinh lỗi hydration
  • Thư mục node_modules chiếm tới vài gigabyte dung lượng
• Ngay cả không có JavaScript, vẫn có thể triển khai các chức năng mạnh mẽ chỉ với HTML và CSS
  • Ngoài các giỏ hàng phức tạp của trang thương mại điện tử hay dashboard, JavaScript có thể không thực sự là thứ bắt buộc
• Bài viết này giới thiệu các tính năng mới nhất của CSS, nhằm khuyến khích lập trình viên khám phá nhiều khả năng đa dạng mà không chỉ phụ thuộc vào JavaScript

Những hiểu lầm và nhận thức về CSS

CSS có thật sự khó và bất tiện không?

• Cái nhìn tiêu cực về CSS bắt nguồn từ thiếu nền tảng học tập cơ bản
  • Nhiều lập trình viên bỏ qua kiến thức nền tảng về CSS và chỉ tập trung vào JavaScript hoặc TypeScript
  • CSS không phải chỉ là công cụ styling đơn giản, mà là một ngôn ngữ chuyên biệt theo miền với những khả năng mạnh mẽ
• CSS có thể triển khai dễ dàng các layout phức tạp bằng công cụ như flexbox
  • Ví dụ: chỉ với display: flex và justify-content: center là có thể căn giữa div một cách đơn giản
  • Developer tools của trình duyệt cung cấp widget để điều chỉnh trực quan các thuộc tính flexbox
• Nếu chỉ đào sâu một phía (ví dụ JS) và xem nhẹ CSS thì việc cảm thấy gánh nặng cũng là điều dễ hiểu

Nỗi khổ khi viết CSS, và sự thay đổi

• Trước đây CSS không thật sự tiện dụng, nên các công cụ như Sass hay Tailwind đã xuất hiện
  • Ví dụ: phải quản lý các chuỗi selector dài như .post > .buttons .like:hover
• Gần đây, các tính năng cải thiện chất lượng (như nesting) đã được bổ sung, giúp việc phát triển trở nên thoải mái hơn chỉ với CSS thuần
  • CSS nesting giúp gom các style liên quan vào một chỗ, tăng khả năng đọc
    • Ví dụ: .post { & > .buttons { .like { &:hover { ... } } } }
    • Quan hệ cha-con trở nên rõ ràng hơn, nên có thể dùng tên class ngắn và đơn giản
• Relative colors giúp việc điều chỉnh màu sắc trở nên dễ dàng
  • Có thể chỉnh độ sáng bằng hsl(from #123456 h s calc(l + 10))
  • Tạo màu động bằng cách trộn hai màu với color-mix()
• Cú pháp phạm vi media query cho phép viết điều kiện trực quan như (width <= 768px)
• Đơn vị lh hỗ trợ tạo style theo chiều cao dòng
• Thuộc tính scrollbar-gutter giải quyết vấn đề layout bị xô lệch do thanh cuộn
• Baseline bảo đảm khả năng tương thích tính năng trên các trình duyệt chính
  • newly available là các tính năng hoạt động trên trình duyệt mới nhất
  • widely available là các tính năng được hỗ trợ tới cả trình duyệt từ 2,5 năm trước
  • Ví dụ: CSS nesting đã được mọi trình duyệt hỗ trợ từ tháng 12/2023

Vì sao phát triển chỉ với CSS/HTML?

• Một số người dùng tắt JavaScript theo mặc định (vì lý do bảo mật, quyền riêng tư, v.v.)
• Nếu cung cấp website chỉ bằng CSS/HTML thuần, những người dùng đó cũng có khả năng sử dụng trang cao hơn
• Từ góc độ phát triển lẫn người dùng, việc chỉ dùng CSS/HTML có lợi ích lớn về tốc độ, khả năng truy cập, mức dùng CPU và pin
  • CSS animation chạy trên compositor thread, giúp giảm tải cho CPU
  • JavaScript chạy qua event loop nên có thể phát sinh độ trễ nhỏ
• Cải thiện khả năng truy cập và tính dễ sử dụng
  • Hiệu ứng hover cho nút, animation toast, kiểm tra đầu vào đều có thể triển khai đơn giản bằng CSS

Ví dụ thực tế và các tính năng chính của CSS

Tạo animation khởi đầu tự nhiên với @starting-style

• Trước đây, để tạo animation khi phần tử xuất hiện cần cấu trúc phức tạp như keyframes, JS trigger, v.v.
• Việc bổ sung @starting-style giúp chỉ định trạng thái ban đầu trở nên đơn giản. Có thể dễ dàng tạo animation cho trạng thái khởi đầu của phần tử (ví dụ: fade-in)
  • Thiết lập bằng transition: opacity 1s; @starting-style { opacity: 0; }
  • Hoạt động mà không cần @keyframes hay JavaScript riêng
• Chỉ cần khai báo trạng thái ban đầu cùng với transition là animation sẽ được áp dụng tự nhiên
  • Ví dụ: xử lý mượt mà việc chuyển đổi độ trong suốt và vị trí của thông báo toast

Thiết lập giao diện dark/light mode một cách dễ dàng

• color-scheme: light dark tự động chuyển theme theo tùy chọn của người dùng
• Hàm light-dark(#000, #FFF) cho phép chỉ định màu phù hợp với chế độ sáng/tối
• Dùng radio button và selector :has để hỗ trợ người dùng tự chọn theme
  • Có thể chuyển theme chỉ bằng CSS mà không cần JavaScript
  • Có thể bổ sung JavaScript tùy chọn để lưu/tải theme

Tạo UI tùy biến với radio/checkbox và :has, :checked

• Các tương tác phức tạp như tab, accordion, toggle cũng có thể triển khai mà không cần JavaScript
• Radio button có thể được custom styling bằng :checked và :has
  • Ví dụ: chỉ định style cho nút đã chọn bằng label:has(input:checked)
  • Ẩn phần tử input bằng opacity: 0 nhưng vẫn giữ được khả năng truy cập cho trình đọc màn hình
• Phần tử details phù hợp để tạo menu accordion như FAQ
  • Có thể điều khiển trạng thái chỉ mở một mục bằng thuộc tính name
  • Có thể thêm animation theo trạng thái [open]

Kiểm tra đầu vào và phản ánh trạng thái

• Kết hợp các thuộc tính HTML như pattern, required với pseudo-class CSS (:valid, :invalid, :user-valid, v.v.) để cung cấp kiểm tra theo thời gian thực và phản hồi trực quan
• Cải thiện trải nghiệm người dùng bằng cách thay đổi style outline/border của trường nhập liệu
• Dùng thuộc tính pattern của HTML để kiểm tra tính hợp lệ của trường nhập
  • Ví dụ: \w{3,16} cho phép từ 3 đến 16 ký tự chữ cái/số/gạch dưới
• Dùng :valid và :invalid của CSS để styling theo tính hợp lệ
  • :user-valid và :user-invalid chỉ áp dụng style sau khi người dùng đã nhập
• Có thể styling phần tử khác theo trạng thái input bằng selector :has
• Trong một số trường hợp (ví dụ điều kiện nhập phức tạp), JS vẫn cần thiết, nhưng phần lớn trường hợp CSS/HTML là đủ

Cách dùng đúng các đơn vị viewport

• Đơn vị vw/vh gặp vấn đề độ chính xác trên di động do thanh địa chỉ (thanh điều hướng) xuất hiện/biến mất
• Khuyến nghị dùng các đơn vị viewport mới như lvh/svh/dvh (largest/smallest/dynamic viewport height)
  • lvh: dùng cho toàn màn hình (ví dụ nền toàn trang)
  • svh: dùng cho các nút, liên kết luôn phải hiển thị trên màn hình
  • dvh: phân bổ kích thước linh hoạt theo thay đổi như cuộn trang
• Overlay bàn phím có thể xử lý bằng thuộc tính interactive-widget hoặc VirtualKeyboard API
  • <meta name="viewport" content="width=device-width, interactive-widget=resizes-content">
  • Trên các trình duyệt dựa trên Chromium có thể dùng navigator.virtualKeyboard.overlaysContent = true

Wishlist cho CSS (những gì còn thiếu hoặc mong muốn có)

• Khối có thể tái sử dụng: áp dụng class khác bên trong một class (ví dụ @apply border)
• Selector kết hợp media query: kết hợp @media với selector class
• Biến nth-child: span { --nth: nth-child(); } để styling động
• Selector nth-letter: styling ký tự cụ thể (ví dụ p::nth-letter(2))
• Loại bỏ đơn vị: tạo giá trị không đơn vị bằng calc(100vw / 1px)
• Hàm image(): hỗ trợ màu thay thế và mảnh ảnh
• Thẻ style trong body: hỗ trợ tiêu chuẩn chính thức để giảm vấn đề FOUC

Kết lại: CSS, và tính nghệ thuật của web

• CSS không chỉ là một công cụ đơn thuần mà còn là phương tiện biểu đạt sáng tạo
• Công cụ AI hay chuỗi build (linter, công cụ minify) có thể hạn chế tính sáng tạo
• CSS đồng thời đáp ứng hiệu năng, khả năng truy cập và biểu đạt nghệ thuật
• Bài viết này được tạo bằng khoảng 49kB HTML/CSS không có JavaScript
  • Mọi widget tương tác và yếu tố thị giác đều được triển khai thủ công
  • Ví dụ: trò chơi click bằng CSS chứng minh tiềm năng mang tính ngôn ngữ lập trình của CSS