Tính năng mới trong giao diện người dùng trên web

Bramus
Una Kravets

Xuất bản: Ngày 1 tháng 7 năm 2026

Tại Google I/O 2026, chúng tôi đã chia sẻ rất nhiều thông tin cập nhật sẽ xuất hiện trên nền tảng Giao diện người dùng trên web. Từ việc tôn trọng lựa chọn ưu tiên của người dùng đến việc triển khai các hoạt động tương tác tự nhiên, hướng dẫn điều hướng, giảm bớt sự lộn xộn và thích ứng với nhiều hệ số hình dạng, web hiện đại mang đến cho nhà phát triển những công cụ cực kỳ mạnh mẽ để xây dựng trải nghiệm người dùng chất lượng cao và có tính xúc giác.

Sau đây là bản tóm tắt toàn diện về tất cả các tính năng được đề cập trong phiên "Có gì mới trong giao diện người dùng web", được cấu trúc theo bộ nguyên tắc cốt lõi về trải nghiệm người dùng của chúng tôi.

Phần 1: Tôn trọng lựa chọn ưu tiên của người dùng

Cá nhân hoá là yếu tố cơ bản để cải thiện khả năng sử dụng web. Các API web hiện đại giúp bạn dễ dàng tự động điều chỉnh theo lựa chọn của người dùng ở cấp hệ thống. Mặc dù những khái niệm này có vẻ cơ bản và chúng ta đã nói về chúng trong nhiều năm, nhưng thực tế là có một số API và mẫu mới giúp bạn dễ dàng xây dựng tính năng cá nhân hoá linh hoạt này.

1. contrast-color()

Hàm contrast-color() CSS nhận một màu đầu vào và tự động trả về black hoặc white, tuỳ thuộc vào màu nào có độ tương phản cao hơn so với màu đầu vào dựa trên thuật toán độ tương phản tối thiểu AA của WCAG. Điều này đảm bảo khả năng đọc mà không cần duy trì các cặp màu nền văn bản theo cách thủ công.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

Tìm hiểu thêm về contrast-color()

2. light-dark()

Hàm CSS light-dark() cho phép bạn chỉ định hai giá trị (màu sắc hoặc hình ảnh) khác nhau cho một thuộc tính, một giá trị cho chế độ sáng và một giá trị cho chế độ tối, trong một khai báo duy nhất. Trình duyệt sẽ tự động chọn màu tương phản phù hợp dựa trên color-scheme đang hoạt động (phải được đặt thành light, dark hoặc light dark trên :root hoặc một thành phần mẹ).

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

Điểm mới của light-dark() là không còn giới hạn ở các giá trị màu nữa. Kể từ Chrome 150, thuộc tính này cũng chấp nhận 2 giá trị hình ảnh.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. Hàm tuỳ chỉnh CSS (@function)

Quy tắc @function cho phép bạn xác định các hàm tuỳ chỉnh, có thể dùng lại ngay trong CSS gốc. Nó có thể chấp nhận các thuộc tính tuỳ chỉnh có phạm vi cục bộ làm đối số, thực hiện các phép tính và trả về các giá trị bằng cách sử dụng bộ mô tả result, giảm nhu cầu về trình tiền xử lý.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

Khi kết hợp với truy vấn kiểu vùng chứa và hàm if() CSS, bạn có thể tạo một hàm --light-dark() tuỳ chỉnh hoạt động với mọi loại giá trị, như minh hoạ trong bản minh hoạ này:

4. Truy vấn kiểu vùng chứa

Là một phần của CSS Container Queries, style queries cho phép nhà phát triển áp dụng kiểu cho các phần tử con dựa trên giá trị thuộc tính tuỳ chỉnh được tính toán của một vùng chứa mẹ, cho phép các thành phần động mà không cần phải có tính năng ngăn chặn kích thước rõ ràng.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

Trong bản minh hoạ này, các truy vấn kiểu được dùng để đặt màu dựa trên một thuộc tính tuỳ chỉnh --theme.

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

Tìm hiểu thêm về truy vấn theo kiểu

5. Hàm if() của CSS

Hàm CSS if() đưa logic có điều kiện nội tuyến trực tiếp vào các giá trị thuộc tính CSS. Hàm này đánh giá một loạt điều kiện được phân tách bằng dấu chấm phẩy (truy vấn kiểu, truy vấn phương tiện hoặc truy vấn tính năng) và cho phép bạn đặt các giá trị khác nhau được liên kết với điều kiện đúng đầu tiên, với một giá trị dự phòng else không bắt buộc.

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

Trong bản minh hoạ trước, hàm if() được dùng để tạo một màu cơ bản có độ tương phản theo giao diện dựa trên đầu ra của hàm contrast-color().

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

Hàm at-rule() CSS để dùng với @supports cho phép nhà phát triển phát hiện tính năng để biết trình duyệt có nhận ra một quy tắc @ cụ thể hay không, chẳng hạn như @starting-style hoặc @view-transition.

Ví dụ: để kiểm tra xem có hỗ trợ @function hay không, hãy sử dụng như sau:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

Việc chỉ sử dụng at-rule() cho phép kiểm tra khả năng hỗ trợ cơ bản của chính quy tắc @ và không thể dùng để kiểm thử các bộ mô tả, phần mở đầu hoặc khối quy tắc @ đầy đủ. Có những giải pháp thay thế để phát hiện các tính năng như truy vấn được cố định hoặc truy vấn kiểu.

Tìm hiểu thêm về @supports at-rule

7. <meta name="text-scale">

Thẻ meta HTML text-scale chọn trang để có tỷ lệ cỡ chữ ban đầu của phần tử gốc <html> tương ứng với chế độ cài đặt tỷ lệ văn bản ở cấp hệ điều hành và trình duyệt, điều này đặc biệt quan trọng đối với các nền tảng di động.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

Khi được áp dụng, kích thước phông chữ trên phần tử html hiện do hệ điều hành xác định, nên bạn không cần đặt font-size cơ sở. Nếu sau đó bạn sử dụng độ dài có đơn vị tương đối như em và rem, thì các giá trị pixel được tính toán sẽ dựa trên kích thước phông chữ cơ sở đó.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

Trong thẻ kết xuất của Công cụ cho nhà phát triển, bạn có thể mô phỏng cỡ chữ ưu tiên. Sử dụng trình đơn thả xuống để thay đổi giá trị.

Tìm hiểu thêm về <meta name=text-scale>

Phần 2: Triển khai các hoạt động tương tác tự nhiên

Chuyển động vật lý trực quan và cử chỉ tự nhiên là yếu tố then chốt để mang lại trải nghiệm xúc giác cho các ứng dụng web như ứng dụng gốc. CSS hiện đại giúp bạn dễ dàng đạt được điều này.

8. Hàm làm chậm linear()

Hàm gia tốc linear() cho phép bạn tạo các đường cong chuyển đổi tuỳ chỉnh, phức tạp (chẳng hạn như độ nảy, độ đàn hồi hoặc độ văng đàn hồi) bằng cách nội suy tuyến tính giữa số lượng điểm tiến trình được chỉ định không giới hạn.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

Trong bản minh họa sau, linear() được dùng để tạo hiệu ứng gia tốc tự nhiên cho hộp thoại khi hộp thoại xuất hiện hoặc bị ẩn.

Tìm hiểu thêm về linear()

9. @starting-style

Quy tắc @starting-style CSS at-rule xác định các giá trị bắt đầu cho các thuộc tính trên một phần tử mà bạn muốn chuyển đổi từ đó khi phần tử được kết xuất lần đầu trong DOM hoặc khi display của phần tử thay đổi từ none thành một giá trị hiển thị, để cho phép các hiệu ứng chuyển đổi mượt mà.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Trong bản minh hoạ trước, thành phần này được dùng để tạo hiệu ứng xuất hiện cho <dialog> khi thành phần này xuất hiện lần đầu.

10. transition-behavior: allow-discrete

Thuộc tính transition-behavior (thường được dùng dưới dạng allow-discrete trong cú pháp rút gọn transition) cho phép bạn chuyển đổi các thuộc tính riêng biệt như display hoặc overlay, đảm bảo các phần tử vẫn hiển thị trong ảnh động thoát trước khi bị ẩn.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() và sibling-count()

Các hàm CSS sibling-index() và sibling-count() trả về các số nguyên lần lượt biểu thị vị trí dựa trên 1 của một phần tử trong số các phần tử cùng cấp và tổng số phần tử cùng cấp. Chúng rất phù hợp để tính toán độ trễ của ảnh động theo từng bước một cách linh hoạt trong CSS mà không cần JavaScript.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Trong bản minh hoạ này, nội dung của hộp thoại được sắp xếp so le bằng cách sử dụng sibling-index() trong animation-delay

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. Đóng nhanh hộp thoại (thuộc tính closedby)

Thuộc tính closedby trên phần tử <dialog> (có giá trị any) cho phép bạn sử dụng hành vi "đóng nhanh" khai báo, tự động đóng hộp thoại phương thức khi nhấp vào bên ngoài hộp thoại hoặc nhấn ESC mà không cần JavaScript tuỳ chỉnh.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

Bạn có thể thử tính năng này trong bản minh hoạ trước đó.

13. corner-shape

Thuộc tính viết tắt corner-shape thử nghiệm cho phép nhà phát triển sửa đổi các góc bo tròn (từ border-radius) để tạo các hình dạng trực quan tuỳ chỉnh như bevel, scoop, notch hoặc squircle (thông qua superellipse()). Đường viền, bóng và đường viền tiêu điểm sẽ tự động tuân theo hình dạng.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

Phần 3: Cung cấp chế độ chỉ đường

Việc hướng dẫn hành trình của người dùng giúp duy trì bối cảnh và hiểu rõ quy trình của ứng dụng, loại bỏ các lần tải lại gây mất phương hướng. Bạn có thể thực hiện việc này theo một số cách, bao gồm cả bằng hiệu ứng chuyển đổi chế độ xem. Hiệu ứng này đã nhận được một số nội dung cập nhật gần đây.

14. Chuyển đổi chế độ xem trong cùng một tài liệu

Là một phần của View Transition API, hiệu ứng chuyển đổi trong cùng một tài liệu cung cấp một cơ chế để tạo ảnh động giữa các trạng thái DOM trong các ứng dụng một trang (SPA) bằng cách chụp nhanh và chuyển đổi các trạng thái đó bằng CSS.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

Tìm hiểu thêm về hiệu ứng chuyển đổi chế độ xem trong cùng một tài liệu

15. Hiệu ứng chuyển đổi chế độ xem giữa các tài liệu

Mở rộng View Transition API cho các ứng dụng nhiều trang (MPA), cho phép bạn tạo các hiệu ứng chuyển đổi liền mạch, có hiệu ứng động khi điều hướng giữa các tài liệu khác nhau bằng cách so khớp các phần tử có cùng view-transition-name trên các trang.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

Tìm hiểu thêm về hiệu ứng chuyển đổi chế độ xem giữa các tài liệu

16. Chuyển đổi khung hiển thị theo phạm vi phần tử

Được ra mắt trong Chrome 147, chuyển đổi khung hiển thị theo phạm vi phần tử cho phép bạn chạy một hiệu ứng chuyển đổi khung hiển thị chỉ trên một cây con DOM cụ thể (bằng cách sử dụng element.startViewTransition()) trong khi vẫn giữ cho phần còn lại của trang hoạt động và có tính tương tác.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

Khi bắt đầu một hiệu ứng chuyển đổi khung hiển thị có phạm vi thành phần, hiệu ứng này sẽ chạy riêng biệt: hiệu ứng này chỉ quét cây con đó để tìm các thành phần có view-transition-name và giả ::view-transition được chèn vào chính gốc phạm vi. Việc cách ly này có thể thực hiện được nhờ tính năng tự động áp dụng view-transition-scope: all.

Điều này cho phép nhiều hiệu ứng chuyển đổi khung hiển thị chạy cùng một lúc, cũng như việc lồng các hiệu ứng chuyển đổi khung hiển thị: trong khi các mục trong những danh sách này đang được xáo trộn, bạn cũng có thể hoán đổi chính các danh sách.

Ngoài ra, các nhóm giả này sẽ tự động được lồng ghép và phần tràn của nhóm giả con bao quanh sẽ bị cắt khi cần.

Hiệu ứng chuyển đổi chế độ xem có phạm vi là lựa chọn phù hợp cho các hoạt động tương tác nhỏ và hiệu ứng biến đổi có trạng thái trong trang, giúp người dùng có thêm bối cảnh khi có thay đổi về hình ảnh. Đây là một cách hay để nâng cao khả năng sử dụng của ứng dụng, đồng thời cải thiện giao diện và cảm nhận của người dùng về ứng dụng. Những điều nhỏ nhặt này tạo nên sự khác biệt lớn!

Tìm hiểu thêm về hiệu ứng chuyển đổi chế độ xem theo phạm vi phần tử

17. Chuyển đổi chế độ xem hai giai đoạn

Đây là một tính năng thử nghiệm, ngay lập tức bắt đầu một hiệu ứng chuyển đổi chế độ xem giữa các tài liệu mà không cần đợi DOM mới sẵn sàng, trước tiên chuyển đổi thành một màn hình bộ khung trung gian hoặc giao diện người dùng tải, sau đó tiếp tục với hiệu ứng chuyển đổi chế độ xem giữa các tài liệu.

Tìm hiểu thêm về hiệu ứng chuyển đổi khung hiển thị hai giai đoạn

18. Ảnh động dựa trên thao tác cuộn

Ảnh động theo thao tác cuộn liên kết tiến trình của ảnh động CSS trực tiếp với vị trí cuộn của vùng chứa có thể cuộn, cho phép nhà phát triển tạo các giao diện dựa trên thao tác cuộn như hiệu ứng thị sai hiệu quả và chỉ báo cuộn.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. Ảnh động kích hoạt bằng thao tác cuộn

Ảnh động kích hoạt khi di chuyển là tính năng mới trên Chrome. Ảnh động được kích hoạt bằng thao tác cuộn kích hoạt một ảnh động CSS tiêu chuẩn dựa trên thời gian khi một ranh giới cuộn bị vượt qua (sử dụng timeline-trigger để xác định trình kích hoạt và animation-trigger để phát ảnh động), cung cấp một lựa chọn thay thế khai báo cho IntersectionObserver.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Cơ chế cơ bản cho ảnh động kích hoạt bằng thao tác cuộn là các trình kích hoạt dòng thời gian, có thể đang hoạt động hoặc không hoạt động.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

Bật trình trực quan hoá trong bản minh hoạ sau đây để xem điều gì đang xảy ra: phạm vi đầu tiên là phạm vi kích hoạt và xác định thời điểm điều kiện kích hoạt bắt đầu hoạt động. Phạm vi thứ hai là phạm vi hoạt động, xác định thời gian mà phạm vi này sẽ duy trì hoạt động.

Tìm hiểu thêm về ảnh động kích hoạt bằng thao tác cuộn

20. scroll-target-group: auto

Giờ đây, bạn có thể tạo một thành phần CSS cuộn-theo-dõi gốc, tự động làm nổi bật các đường liên kết điều hướng dựa trên vị trí cuộn của người dùng. Bằng cách đặt scroll-target-group: auto trên danh sách điều hướng, trình duyệt sẽ tự động đặt aria-current="true" và áp dụng lớp giả :target-current cho đường liên kết đang hoạt động. Sau đó, bạn có thể dùng :target-current để tạo kiểu thêm cho các đường liên kết đang hoạt động.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

Tìm hiểu thêm về thành phần CSS scroll-spy bằng scroll-target-group

21. scrollIntoView() lựa chọn vùng chứa

Phương thức scrollIntoView() có thêm lựa chọn container. Việc đặt target.scrollIntoView({container: 'nearest'}) sẽ giới hạn hoạt động cuộn ở thành phần cuộn gần nhất thay vì để thành phần này lan truyền lên trên, ngăn hoạt động cuộn ở cấp trang gây mất phương hướng.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Sử dụng hộp đánh dấu trong bản minh hoạ này để bật và tắt lựa chọn:

Tìm hiểu thêm về container: "nearest"

22. Thao tác cuộn có lập trình có thể chờ

Tất cả các phương thức cuộn có lập trình (chẳng hạn như scroll(), scrollTo() và scrollIntoView()) hiện đều trả về một Promise. Điều này cho phép nhà phát triển await quá trình hoàn tất ảnh động cuộn mượt trước khi thực thi logic tiếp theo (chẳng hạn như thêm hiệu ứng làm nổi bật).

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Trong bản minh hoạ sau đây, bạn có thể thấy hiệu ứng này đang hoạt động: phần tử này được cuộn vào khung hiển thị trước, sau đó hiệu ứng làm nổi bật sẽ được thêm vào phần tử đó.

Phần 4: Tối đa hoá nội dung, giảm tạp âm

Một trong những trải nghiệm gây khó chịu nhất trên web là khi bạn muốn xem nội dung nhưng lại bị chặn bởi các cửa sổ bật lên hoặc biểu ngữ xâm nhập. Ưu tiên vùng nội dung bằng cách loại bỏ sự lộn xộn về hình ảnh và đường viền ứng dụng, di chuyển các thao tác phụ ra phía sau giao diện người dùng theo lớp.

23. Truy vấn trạng thái cuộn (scrolled)

Là một phần của CSS Container Queries, các truy vấn scroll-state cho phép bạn tạo kiểu cho các thành phần con dựa trên trạng thái cuộn của một vùng chứa (với container-type: scroll-state). Truy vấn scrolled (ví dụ: scroll-state(scrolled: bottom)) phát hiện hướng của thao tác cuộn tương đối gần đây nhất, cho phép các mẫu như "Hidey Bar".

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Tìm hiểu thêm về mẫu "Hidey Bar"

24. Truy vấn vùng chứa được cố định

CSS Anchor Positioning (Định vị phần tử neo) bao gồm truy vấn vùng chứa được neo, cho phép bạn kiểm tra xem vị trí dự phòng nào (ví dụ: fallback: bottom hoặc fallback: flip-block) hiện đang hoạt động trên một phần tử được định vị bằng phần tử neo, cho phép cập nhật linh hoạt cho việc tạo kiểu cho một phần tử được định vị bằng phần tử neo (chẳng hạn như mũi tên chú thích).

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

Trong bản minh hoạ sau đây, một cửa sổ bật lên được đặt ở vị trí cố định sẽ tự định vị lại dựa trên vị trí dự phòng và vị trí trong khung nhìn bằng cách sử dụng các truy vấn vùng chứa được cố định. Khi mở phía trên đối tượng gọi, chú thích sẽ tạo hiệu ứng từ dưới lên, từ nguồn. Khi ở bên dưới đối tượng gọi, nó sẽ tạo ảnh động từ trên xuống.

25. CSS border-shape

Thuộc tính border-shape cho phép bạn xác định đường viền không phải hình chữ nhật bằng cách sử dụng cùng một cú pháp hình dạng như clip-path. Không giống như thao tác cắt, border-shape giữ cho đường viền, đường nét và bóng đổ được căn chỉnh trực quan với hình dạng tuỳ chỉnh. Ngoài ra, border-shape còn có nhiều khả năng hơn corner-shape vì border-shape linh hoạt hơn nhiều.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. Hàm shape() của CSS

Hàm shape() của CSS cho phép bạn xác định các đường dẫn hình học phức tạp trong CSS. Bạn có thể dùng thuộc tính này với các thuộc tính như clip-path, border-shape hoặc shape-outside để tạo các hình dạng tự nhiên, không phải hình chữ nhật mà nội dung có thể nổi lên.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. Vị trí cố định cho mỗi trục

Nhờ một thay đổi gần đây trong quy cách tràn cho phép vùng chứa chỉ là một trình cuộn cho một trục duy nhất, giờ đây, vị trí cố định có thể theo dõi đồng thời hai vùng chứa cuộn khác nhau (một vùng chứa cho mỗi trục). Điều này giúp cột đầu tiên và hàng trên cùng cố định trong bảng hoạt động như mong đợi ngay cả bên trong các vùng chứa cuộn một trục.

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

Bạn có thể dùng thử tính năng này trong Chrome 148 khi bật cờ Experimental Web Platform Features (Các tính năng thử nghiệm của nền tảng web).

Tìm hiểu thêm về position: sticky trên mỗi trục

Phần 5: Điều chỉnh theo hệ số hình dạng

Một trong những điều có giá trị nhất về web là tính linh hoạt. Người dùng có thể truy cập web trên nhiều thiết bị, mỗi thiết bị có cơ chế tương tác riêng. Về cơ bản, bố cục phải thích ứng với thiết bị và phương thức nhập, cho dù bàn phím ảo đang mở hay mục tiêu chạm đang hoạt động. Khi thiết kế cho web, việc lưu ý đến kiểu dáng thiết bị sẽ giúp trang web hoặc ứng dụng web của bạn trở nên tinh tế hơn và đáp ứng được kỳ vọng của người dùng.

28. Cử chỉ cuộn quá mức (các vùng có thể vuốt)

Một ví dụ về việc thích ứng với kiểu dáng là khả năng sử dụng các lượt tương tác dựa trên cử chỉ và thao tác vuốt trên web di động. Bạn có thể dùng trình cuộn để đạt được một số hiệu ứng này, nhưng đây không phải lúc nào cũng là một phương pháp trực quan.

Nhóm Chrome đang phát triển một giải pháp khai báo được đề xuất, trong đó thảo luận với nhóm cộng đồng OpenUI để cho phép bạn tạo các vùng có thể vuốt gốc (ví dụ: danh sách có thể vuốt trong Gmail hoặc trình đơn bên có thể vuốt để đóng) bằng cách sử dụng overscrollcontainer và trình gọi lệnh, hoạt động tự nhiên trên cả thao tác chạm và cuộn.

Tìm hiểu thêm về cử chỉ cuộn quá mức

29. HTML trong Canvas

HTML-in-Canvas API là một sự thay đổi lớn về mô hình, cho phép nhà phát triển đặt các phần tử DOM thực bên trong một <canvas> (bằng cách sử dụng thuộc tính layoutsubtree). Các phần tử này vẫn có thể tìm kiếm, truy cập và hỗ trợ đầy đủ các tính năng của trình duyệt như tự động điền, đồng thời cho phép các chương trình đổ bóng WebGL/WebGPU tương tác với các phần tử này một cách tự nhiên.

Vòng chớp nhoáng

Xem nhanh một số tính năng mạnh mẽ khác đang thúc đẩy sự phát triển của web.

30. Di chuyển giữ nguyên trạng thái DOM (moveBefore())

Phương thức DOM moveBefore() cho phép bạn thay đổi thành phần gốc của các nút DOM (ví dụ: phát video, iframe hoặc đầu vào được lấy tiêu điểm) mà không làm mất trạng thái hoặc kích hoạt quá trình tải lại.

Điều này có nghĩa là video tiếp tục phát, iframe không tải lại, ảnh động CSS không khởi động lại và các trường nhập liệu vẫn giữ được tiêu điểm khi bạn thay đổi thành phần mẹ của chúng trong bố cục.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

Tìm hiểu thêm về moveBefore()

31. CSS text-fit

text-fit là một thuộc tính CSS thử nghiệm giúp tự động điều chỉnh kích thước phông chữ để vừa chính xác các dòng văn bản với chiều rộng chính xác của phần tử chứa (ví dụ: text-fit: grow per-line-all).

Tìm hiểu thêm về text-fit

32. CSS text-box (text-box-trim và text-box-edge)

Thuộc tính text-box (và các thuộc tính dài text-box-trim và text-box-edge) cắt bớt khoảng trống dọc (khoảng cách dòng) phía trên và phía dưới văn bản, đảm bảo căn chỉnh và căn giữa theo chiều dọc một cách hoàn hảo.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

Tìm hiểu thêm về text-trim

33. Khoảng trống trang trí CSS

Khoảng trống trang trí CSS mang column-rule đến lưới và flexbox, đồng thời giới thiệu một thuộc tính row-rule mới, cho phép nhà phát triển tạo kiểu cho các khoảng trống giữa các hàng và cột. Không cần phải chỉnh sửa đường viền hoặc phần tử giả để tạo kiểu cho các quy tắc giữa các hàng và cột.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

Tìm hiểu thêm về CSS Gap Decorations

34. Các đơn vị khung nhìn có nhận biết thanh cuộn (vw, vh, v.v.)

Các đơn vị khung nhìn như vw và vh sẽ tự động trừ đi kích thước của thanh cuộn (nếu được đảm bảo hiển thị, bằng cách sử dụng overflow-y: scroll hoặc scrollbar-gutter: stable được khai báo trên :root), ngăn chặn tình trạng tràn ngang do vô tình khi đặt các phần tử thành 100vw.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

Tìm hiểu thêm về các đơn vị cửa sổ xem có tính đến thanh cuộn

35. Quyền truy cập JavaScript vào các phần tử giả

Giờ đây, Web API hiển thị các phần tử giả CSS (chẳng hạn như ::before hoặc ::after) cho JavaScript.

Bạn có thể truy xuất một phiên bản CSSPseudoElement bằng cách sử dụng Element.pseudo(type) và kiểm tra xem phần tử giả nào đã kích hoạt một sự kiện bằng cách sử dụng Event.pseudoTarget.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

Tìm hiểu thêm về CSSPseudoElement

Kết luận

Đó là tất cả những điểm mới trong Giao diện người dùng trên web. Chúng tôi hy vọng bạn sẽ tận dụng những tính năng này và xây dựng một số giao diện tuyệt vời. Hẹn gặp lại vào năm sau!