Thông tin mới nhất về CSS và giao diện người dùng web: Tóm tắt sự kiện I/O 2024

Una Kravets

Nền tảng web luôn đổi mới, với CSS và các tính năng giao diện người dùng web đi đầu trong quá trình phát triển đầy thú vị này. Chúng ta đang trải qua thời kỳ vàng cho giao diện người dùng web với các tính năng CSS mới xuất hiện trên các trình duyệt với tốc độ mà chúng ta chưa từng thấy trước đây, mở ra vô số khả năng tạo trải nghiệm web đẹp mắt và hấp dẫn. Bài đăng trên blog này sẽ đi sâu vào trạng thái hiện tại của CSS, khám phá một số tính năng mới thay đổi cuộc chơi nhất đang định nghĩa lại cách chúng ta xây dựng ứng dụng web, được giới thiệu trực tiếp tại Google I/O 2024.

Trải nghiệm tương tác mới lạ

Về cơ bản, trải nghiệm web là một lệnh gọi và phản hồi giữa bạn và người dùng. Đó là lý do tại sao bạn cần phải đầu tư vào các hoạt động tương tác chất lượng với người dùng. Chúng tôi đang nỗ lực cải thiện một số tính năng quan trọng để khai thác các khả năng chưa từng có trên web, giúp bạn di chuyển trong các trang web và di chuyển giữa các trang web.

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

Giống như tên gọi của nó, API ảnh động dựa trên cuộn cho phép bạn tạo ảnh động dựa trên cuộn động mà không cần phụ thuộc vào trình quan sát cuộn hoặc tập lệnh nặng khác.

Tạo ảnh động do cuộn

Tương tự như cách hoạt động của ảnh động dựa trên thời gian trên nền tảng, giờ đây, bạn có thể sử dụng tiến trình cuộn của thanh cuộn để bắt đầu, tạm dừng và đảo ngược ảnh động. Vì vậy, khi cuộn về phía trước, bạn sẽ thấy tiến trình ảnh động đó và khi cuộn về phía sau, tiến trình sẽ diễn ra theo chiều ngược lại. Nhờ đó, bạn có thể tạo hình ảnh một phần hoặc toàn trang với các phần tử ảnh động vào và trong khung nhìn, còn gọi là cuộn kể chuyện, để tạo hiệu ứng hình ảnh động.

Bạn có thể dùng ảnh động dựa trên thao tác cuộn để làm nổi bật nội dung quan trọng, dẫn dắt người dùng theo một câu chuyện hay chỉ đơn giản là thêm thao tác động vào trang web.

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Mã trước xác định một ảnh động đơn giản xuất hiện trong khung nhìn bằng cách thay đổi độ mờ và tỷ lệ của hình ảnh. Ảnh động được điều khiển theo vị trí cuộn. Để tạo hiệu ứng này, trước tiên hãy thiết lập ảnh động CSS, sau đó thiết lập animation-timeline. Trong trường hợp này, hàm view() với các giá trị mặc định theo dõi hình ảnh tương ứng với cuộn (trong trường hợp này cũng là khung nhìn).

Bạn cần lưu ý đến khả năng hỗ trợ trình duyệt và lựa chọn ưu tiên của người dùng, đặc biệt là đối với các nhu cầu hỗ trợ tiếp cận. Do đó, hãy sử dụng quy tắc @supports để kiểm tra xem trình duyệt có hỗ trợ ảnh động dựa trên thao tác cuộn hay không và gói ảnh động dựa trên cuộn trong truy vấn lựa chọn ưu tiên của người dùng như @media (prefers-reduced-motion: no-preference) để tuân thủ lựa chọn ưu tiên về chuyển động của người dùng. Sau khi kiểm tra, bạn sẽ biết rằng các kiểu của mình sẽ hoạt động và ảnh động không gây ra vấn đề cho người dùng.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

Ảnh động do thao tác cuộn có thể mang đến trải nghiệm kể chuyện cuộn toàn trang, nhưng cũng có thể mang đến trải nghiệm ảnh động tinh tế hơn như thanh tiêu đề thu nhỏ và hiển thị bóng khi bạn cuộn ứng dụng web.

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

Bản minh hoạ này sử dụng một số ảnh động khung hình chính khác nhau (tiêu đề, văn bản, thanh điều hướng và nền), sau đó áp dụng ảnh động do cuộn tương ứng cho từng ảnh động. Mặc dù mỗi ảnh động có kiểu ảnh động khác nhau, nhưng tất cả đều có cùng dòng thời gian ảnh động, trình cuộn gần nhất và cùng phạm vi ảnh động – từ đầu trang đến 150 pixel.

Lợi ích về hiệu suất của ảnh động dựa trên cuộn

API tích hợp sẵn này giúp giảm gánh nặng mã bạn cần duy trì, cho dù đó là tập lệnh tuỳ chỉnh bạn đã viết hay việc thêm một phần phụ thuộc bên thứ ba khác. Điều này cũng giúp bạn không cần phải gửi nhiều trình quan sát cuộn, nghĩa là có một số lợi ích đáng kể về hiệu suất. Lý do là ảnh động do cuộn điều khiển hoạt động trên luồng chính khi tạo ảnh động cho các thuộc tính có thể tạo ảnh động trên trình kết hợp như biến đổi và độ mờ, cho dù bạn đang sử dụng API mới trực tiếp trong CSS hay sử dụng các trình nối JavaScript.

Gần đây, Tokopedia đã sử dụng ảnh động do cuộn điều khiển để làm cho thanh điều hướng sản phẩm xuất hiện khi bạn cuộn. Việc sử dụng API này mang lại một số lợi ích quan trọng, cả về việc quản lý mã và hiệu suất.

"Chúng tôi đã giảm được tới 80% số dòng mã so với khi sử dụng các sự kiện cuộn JS thông thường và nhận thấy mức sử dụng CPU trung bình giảm từ 50% xuống còn 2% trong khi cuộn. – Andy Wihalim, Kỹ sư phần mềm cấp cao, Tokopedia"

Tương lai của hiệu ứng cuộn

Chúng tôi biết rằng những hiệu ứng này sẽ tiếp tục giúp web trở nên hấp dẫn hơn. Chúng tôi cũng đang suy nghĩ về những hiệu ứng tiếp theo. Tính năng này không chỉ cho phép sử dụng tiến trình ảnh động mới mà còn cho phép sử dụng điểm cuộn để kích hoạt việc bắt đầu ảnh động, được gọi là ảnh động được kích hoạt bằng thao tác cuộn.

Và trong tương lai, trình duyệt sẽ có thêm nhiều tính năng cuộn hơn nữa. Bản minh hoạ sau đây cho thấy sự kết hợp của các tính năng trong tương lai này. Phương thức này sử dụng CSS scroll-start-target để đặt ngày và giờ ban đầu trong bộ chọn và sự kiện JavaScript scrollsnapchange để cập nhật ngày của tiêu đề, giúp bạn dễ dàng đồng bộ hoá dữ liệu với sự kiện chụp nhanh.

Bạn cũng có thể dựa trên dữ liệu này để cập nhật một bộ chọn theo thời gian thực bằng sự kiện scrollsnapchanging trong JavaScript.

Các tính năng cụ thể này hiện chỉ có trong Canary sau một lá cờ. Tuy nhiên, chúng mở ra những tính năng mà trước đây bạn không thể hoặc rất khó xây dựng trong nền tảng này, đồng thời làm nổi bật tương lai của các khả năng tương tác dựa trên thao tác cuộn.

Để tìm hiểu thêm về cách bắt đầu sử dụng ảnh động do thao tác cuộn tạo ra, nhóm của chúng tôi vừa ra mắt một loạt video mới mà bạn có thể xem trên kênh YouTube Chrome dành cho nhà phát triển. Tại đây, bạn sẽ tìm hiểu thông tin cơ bản về ảnh động dựa trên cuộn do Bramus Van Damme cung cấp, bao gồm cách hoạt động của tính năng này, từ vựng, nhiều cách tạo hiệu ứng cũng như cách kết hợp hiệu ứng để tạo trải nghiệm phong phú. Đây là một loạt video rất đáng xem.

Xem hiệu ứng chuyển đổi

Chúng tôi vừa đề cập đến một tính năng mới mạnh mẽ giúp tạo ảnh động trong các trang web, nhưng cũng có một tính năng mới mạnh mẽ có tên là chuyển đổi chế độ xem để tạo ảnh động giữa các trang nhằm tạo trải nghiệm người dùng liền mạch. Hiệu ứng chuyển đổi chế độ xem mang đến một cấp độ linh hoạt mới cho web, cho phép bạn tạo chuyển đổi liền mạch giữa các chế độ xem khác nhau trong một trang hoặc thậm chí trên các trang khác nhau.

Airbnb là một trong những công ty đã thử nghiệm việc tích hợp các chuyển đổi chế độ xem vào giao diện người dùng của họ để mang lại trải nghiệm điều hướng web mượt mà và liền mạch. Trong đó có thanh bên của trình chỉnh sửa trang thông tin, ngay trong phần chỉnh sửa ảnh và thêm tiện nghi, tất cả đều nằm trong quy trình linh hoạt dành cho người dùng.

Mặc dù các hiệu ứng toàn trang này rất đẹp và liền mạch, nhưng bạn cũng có thể tạo các tương tác vi mô, chẳng hạn như ví dụ này khi chế độ xem danh sách của bạn được cập nhật về tương tác của người dùng. Bạn có thể dễ dàng đạt được hiệu ứng này bằng các hiệu ứng chuyển đổi khung hiển thị.

Cách nhanh chóng bật hiệu ứng chuyển đổi thành phần hiển thị trong ứng dụng một trang của bạn cũng đơn giản như gói một lượt tương tác bằng document.startViewTransition và đảm bảo mỗi phần tử đang chuyển đổi đều có view-transition-name, cùng dòng hoặc sử dụng JavaScript một cách linh động khi bạn tạo các nút DOM.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

Xem các lớp chuyển đổi

Bạn có thể sử dụng tên chuyển đổi chế độ xem để áp dụng ảnh động tuỳ chỉnh cho chuyển đổi chế độ xem, mặc dù việc này có thể rườm rà khi chuyển đổi nhiều phần tử. Bản cập nhật mới đầu tiên cho hiệu ứng chuyển đổi thành phần hiển thị trong năm nay giúp đơn giản hoá vấn đề này và giới thiệu khả năng tạo các lớp chuyển đổi thành phần hiển thị có thể áp dụng cho ảnh động tuỳ chỉnh.

Xem các loại chuyển đổi

Một điểm cải tiến lớn khác đối với hiệu ứng chuyển đổi thành phần hiển thị là hỗ trợ các loại hiệu ứng chuyển đổi thành phần hiển thị. Các loại chuyển đổi chế độ xem rất hữu ích khi bạn muốn có một loại chuyển đổi chế độ xem trực quan khác khi tạo ảnh động cho và từ chế độ xem trang.

Ví dụ: bạn có thể muốn trang chủ tạo hiệu ứng động cho trang blog theo cách khác với trang blog đó hoạt ảnh trở lại trang chủ. Hoặc bạn có thể muốn các trang hoán đổi qua lại theo nhiều cách như trong ví dụ này, di chuyển từ trái sang phải và ngược lại. Trước đây, việc này khá rắc rối. Bạn có thể thêm các lớp vào DOM để áp dụng kiểu, sau đó phải xoá các lớp đó. View-transition-types cho phép trình duyệt dọn dẹp các hiệu ứng chuyển đổi cũ thay vì yêu cầu bạn thực hiện việc này theo cách thủ công trước khi bắt đầu các hiệu ứng chuyển đổi mới.

Bạn có thể thiết lập các loại trong hàm document.startViewTransition. Hàm này hiện chấp nhận một đối tượng. update là hàm callback cập nhật DOM và types là một mảng chứa các loại.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

Chuyển đổi chế độ xem nhiều trang

Điều làm cho web mạnh mẽ chính là khả năng mở rộng của web. Nhiều ứng dụng không chỉ là một trang đơn mà là một tấm thảm mạnh mẽ chứa nhiều trang. Đó là lý do chúng tôi rất vui mừng được thông báo rằng chúng tôi sẽ hỗ trợ chuyển đổi chế độ xem giữa các tài liệu cho các ứng dụng nhiều trang trong Chromium 126.

Bộ tính năng trên nhiều tài liệu mới này bao gồm các trải nghiệm web hoạt động trong cùng một nguồn gốc, chẳng hạn như điều hướng từ web.dev đến web.dev/blog, nhưng không bao gồm việc điều hướng trên nhiều nguồn gốc, chẳng hạn như điều hướng từ web.dev đến blog.web.dev hoặc đến một miền khác như google.com.

Một trong những điểm khác biệt chính với hiệu ứng chuyển đổi chế độ xem cùng một tài liệu là bạn không cần gói hiệu ứng chuyển đổi bằng document.startViewTransition(). Thay vào đó, hãy chọn cả hai trang liên quan đến quá trình chuyển đổi chế độ xem bằng cách sử dụng quy tắc tại @view-transition CSS.

@view-transition {
  navigation: auto;
}

Để có hiệu ứng tuỳ chỉnh hơn, bạn có thể nối vào JavaScript bằng trình nghe sự kiện pageswap hoặc pagereveal mới. Trình nghe này cho phép bạn truy cập vào đối tượng chuyển đổi chế độ xem.

Với pageswap, bạn có thể thực hiện một số thay đổi vào phút chót trên trang sắp chuyển ngay trước khi chụp ảnh nhanh cũ và với pagereveal, hãy tuỳ chỉnh trang mới trước khi trang đó bắt đầu hiển thị sau khi được khởi chạy.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

Trong tương lai, chúng tôi dự định mở rộng phạm vi chuyển đổi giữa các chế độ xem, bao gồm:

• Chuyển đổi trong phạm vi: Cho phép bạn giới hạn một lượt chuyển đổi thành một cây con DOM, cho phép phần còn lại của trang tiếp tục tương tác và hỗ trợ nhiều lượt chuyển đổi chế độ xem chạy cùng một lúc.
• Chuyển đổi thành phần hiển thị do cử chỉ điều khiển: Sử dụng cử chỉ kéo hoặc vuốt để kích hoạt chuyển đổi thành phần hiển thị trên nhiều tài liệu nhằm mang lại trải nghiệm giống như trên thiết bị gốc trên web.
• So khớp điều hướng trong CSS: Tuỳ chỉnh trực tiếp việc chuyển đổi chế độ xem trên nhiều tài liệu trong CSS thay vì sử dụng các sự kiện pageswap và pagereveal trong JavaScript Để tìm hiểu thêm về các chuyển đổi chế độ xem cho các ứng dụng nhiều trang, bao gồm cả cách thiết lập hiệu quả nhất bằng cách kết xuất trước, hãy xem bài nói chuyện sau của Bramus Van Damme:

Thành phần giao diện người dùng hỗ trợ công cụ: Đơn giản hoá các hoạt động tương tác phức tạp

Việc xây dựng các ứng dụng web phức tạp không phải là điều dễ dàng, nhưng CSS và HTML đang phát triển để giúp quá trình này dễ quản lý hơn nhiều. Các tính năng và điểm cải tiến mới giúp đơn giản hoá việc tạo thành phần giao diện người dùng, cho phép bạn tập trung vào việc xây dựng trải nghiệm tuyệt vời. Điều này được thực hiện thông qua nỗ lực cộng tác với sự tham gia của một số cơ quan tiêu chuẩn và nhóm cộng đồng chủ chốt, bao gồm Nhóm làm việc CSS, Nhóm cộng đồng giao diện người dùng mở và whatWG (Nhóm công nghệ ứng dụng siêu văn bản web).

Một vấn đề lớn của các nhà phát triển là một yêu cầu có vẻ đơn giản: khả năng tạo kiểu cho trình đơn thả xuống (phần tử chọn). Mặc dù có vẻ đơn giản, nhưng đây là một vấn đề phức tạp, liên quan đến nhiều phần của nền tảng; từ bố cục và kết xuất, đến cuộn và tương tác, đến kiểu của tác nhân người dùng và các thuộc tính CSS, thậm chí là thay đổi đối với chính HTML.

Một trình đơn thả xuống bao gồm nhiều phần và bao gồm nhiều trạng thái cần được tính đến, chẳng hạn như:

• Liên kết bàn phím (để nhập/thoát khỏi hoạt động tương tác)
• Nhấp để đóng
• Quản lý cửa sổ bật lên đang hoạt động (đóng các cửa sổ bật lên khác khi một cửa sổ bật lên)
• Quản lý tiêu điểm thẻ
• Hình ảnh hoá giá trị tuỳ chọn đã chọn
• Kiểu tương tác bằng mũi tên
• Quản lý trạng thái (mở/đóng)

Hiện tại, bạn khó có thể tự quản lý tất cả trạng thái này, nhưng nền tảng cũng không giúp bạn dễ dàng thực hiện việc này. Để khắc phục vấn đề này, chúng tôi đã chia nhỏ các phần đó và sẽ cung cấp một số tính năng nguyên gốc để bật trình đơn thả xuống định kiểu, nhưng cũng làm được nhiều việc khác.

Popover API

Đầu tiên, chúng tôi vận chuyển một thuộc tính toàn cầu có tên là popover. Tôi rất vui được thông báo rằng thuộc tính này vừa đạt trạng thái mới của Baseline cách đây vài tuần.

Các phần tử cửa sổ bật lên được ẩn bằng display: none cho đến khi được mở bằng một phương thức gọi như nút hoặc bằng JavaScript. Để tạo một cửa sổ bật lên cơ bản, hãy đặt thuộc tính cửa sổ bật lên trên phần tử và liên kết mã nhận dạng của cửa sổ bật lên đó với một nút bằng popovertarget. Bây giờ, nút này là phương thức gọi,

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Khi bật thuộc tính cửa sổ bật lên, trình duyệt sẽ xử lý nhiều hành vi chính mà không cần thêm tập lệnh nào, bao gồm:

• Được quảng bá lên lớp trên cùng.: Một lớp riêng biệt phía trên phần còn lại của trang, vì vậy, bạn không phải thao tác với z-index.
• Chức năng đóng nhẹ.: Thao tác nhấp vào bên ngoài vùng cửa sổ bật lên sẽ đóng cửa sổ bật lên và trả về tiêu điểm.
• Quản lý tiêu điểm thẻ mặc định.: Khi mở cửa sổ bật lên, thẻ tiếp theo sẽ dừng bên trong cửa sổ bật lên.
• Các liên kết bàn phím tích hợp.: Việc nhấn phím esc hoặc bật/tắt hai lần sẽ đóng cửa sổ bật lên và trả về tiêu điểm.
• Liên kết thành phần mặc định. : Trình duyệt kết nối một cửa sổ bật lên với trình kích hoạt theo ngữ nghĩa.

Thậm chí bạn có thể đang sử dụng API cửa sổ bật lên này ngay hôm nay mà không nhận ra. GitHub đã triển khai cửa sổ bật lên trên trình đơn "mới" của trang chủ và trong phần tổng quan về quy trình xem xét yêu cầu gộp. Họ đã cải tiến dần tính năng này bằng cách sử dụng polyfill popover do Oddbird xây dựng với một số hỗ trợ quan trọng từ Keith Cirkel của GitHub để hỗ trợ các trình duyệt cũ.

"Chúng tôi đã cố gắng ngưng sử dụng hàng nghìn dòng mã bằng cách chuyển sang cửa sổ bật lên. Tính năng bật lên giúp chúng tôi không cần phải chiến đấu với các con số chỉ mục z kỳ diệu... việc thiết lập mối quan hệ cây hỗ trợ tiếp cận chính xác bằng hành vi nút khai báo và hành vi lấy tiêu điểm tích hợp sẵn giúp Hệ thống thiết kế của chúng tôi triển khai các mẫu theo đúng cách dễ dàng hơn đáng kể.-Keith Cirkel, Kỹ sư phần mềm, GitHub”

Tạo hiệu ứng động khi vào và thoát

Khi có cửa sổ bật lên, bạn có thể sẽ muốn thêm một số tương tác. Trong năm qua, chúng tôi đã ra mắt 4 tính năng tương tác mới để hỗ trợ tạo ảnh động cho cửa sổ bật lên. bao gồm:

Khả năng tạo ảnh động cho display và content-visibility trên dòng thời gian khung hình chính.

Thuộc tính transition-behavior có từ khoá allow-discrete để bật các chuyển đổi của các thuộc tính riêng biệt như display.

Quy tắc @starting-style để tạo hiệu ứng ảnh động cho mục nhập từ display: none và vào lớp trên cùng.

Thuộc tính lớp phủ để kiểm soát hành vi của lớp trên cùng trong ảnh động.

Các thuộc tính này hoạt động với mọi phần tử mà bạn đang tạo ảnh động cho lớp trên cùng, cho dù đó là cửa sổ bật lên hay hộp thoại. Tổng thể, hộp thoại có phông nền sẽ có dạng như sau:

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

Trước tiên, hãy thiết lập @starting-style để trình duyệt biết kiểu nào sẽ tạo ảnh động cho phần tử này vào DOM. Việc này được thực hiện cho cả hộp thoại và phông nền. Sau đó, tạo kiểu cho trạng thái mở cho cả hộp thoại và phông nền. Đối với hộp thoại, thuộc tính này sử dụng thuộc tính open và đối với cửa sổ bật lên, phần tử giả ::popover-open. Cuối cùng, tạo ảnh động cho opacity, display và overlay bằng cách sử dụng từ khoá allow-discrete để bật chế độ ảnh động, trong đó các thuộc tính riêng biệt có thể chuyển đổi.

Vị trí neo

Cửa sổ bật lên chỉ là phần mở đầu của câu chuyện. Một điểm cập nhật rất thú vị là tính năng hỗ trợ định vị neo hiện đã có trong Chrome 125.

Khi sử dụng tính năng định vị neo, chỉ với vài dòng mã, trình duyệt có thể xử lý logic để liên kết một phần tử được định vị với một hoặc nhiều phần tử neo. Trong ví dụ sau, một chú giải công cụ đơn giản được liên kết với mỗi nút, nằm ở giữa dưới cùng.

Thiết lập mối quan hệ vị trí neo trong CSS bằng cách sử dụng thuộc tính anchor-name trên phần tử neo (trong trường hợp này là nút) và thuộc tính position-anchor trên phần tử được định vị (trong trường hợp này là chú giải công cụ). Sau đó, áp dụng vị trí tuyệt đối hoặc cố định so với neo bằng hàm anchor(). Mã sau đây đặt phần đầu của chú giải công cụ ở cuối nút.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

Ngoài ra, hãy sử dụng tên liên kết trực tiếp trong hàm liên kết và bỏ qua thuộc tính position-anchor. Điều này có thể hữu ích khi neo vào nhiều phần tử.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

Cuối cùng, sử dụng từ khoá anchor-center mới cho các thuộc tính justify và align để căn giữa phần tử được định vị vào điểm neo của phần tử đó.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

Mặc dù việc sử dụng vị trí neo với cửa sổ bật lên sẽ rất thuận tiện, nhưng cửa sổ bật lên chắc chắn không bắt buộc phải sử dụng vị trí neo. Bạn có thể sử dụng tính năng định vị neo với bất kỳ hai (hoặc nhiều) phần tử nào để tạo mối quan hệ hình ảnh. Trên thực tế, bản minh hoạ sau đây (lấy cảm hứng từ một bài viết của Roman Komarov) cho thấy kiểu gạch chân được liên kết với các mục trong danh sách khi bạn di chuột hoặc nhấn phím tab qua các mục đó.

Ví dụ này sử dụng hàm neo để thiết lập vị trí neo bằng các thuộc tính vật lý của left, right và bottom. Khi bạn di chuột qua một trong các đường liên kết, neo mục tiêu sẽ thay đổi và trình duyệt sẽ dịch chuyển mục tiêu để áp dụng vị trí, đồng thời tạo ảnh động cho màu sắc để tạo hiệu ứng gọn gàng.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

Định vị inset-area

Ngoài vị trí tuyệt đối theo hướng mặc định mà bạn có thể đã sử dụng trước đây, còn có một cơ chế bố cục mới được đưa vào API định vị neo có tên là vùng lồng ghép. Khu vực lồng ghép giúp bạn dễ dàng đặt các phần tử được định vị tương ứng với neo tương ứng và hoạt động trên lưới 9 ô với phần tử neo ở giữa. Ví dụ: inset-area: top đặt phần tử được định vị ở trên cùng và inset-area: bottom đặt phần tử được định vị ở dưới cùng.

Phiên bản đơn giản của bản minh hoạ liên kết đầu tiên có dạng như sau với inset-area:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

Bạn có thể kết hợp các giá trị vị trí này với từ khoá span để bắt đầu ở vị trí trung tâm và span sang trái, span sang phải hoặc span tất cả để chiếm toàn bộ tập hợp cột hoặc hàng có sẵn. Bạn cũng có thể sử dụng các thuộc tính logic. Để dễ dàng hình dung và nắm bắt cơ chế bố cục này, hãy xem công cụ này trong Chrome 125 trở lên:

Vì các phần tử này được neo, nên phần tử được định vị sẽ di chuyển linh động xung quanh trang khi phần tử neo di chuyển. Vì vậy, trong trường hợp này, chúng ta có các phần tử thẻ theo kiểu truy vấn vùng chứa. Các phần tử này sẽ thay đổi kích thước dựa trên kích thước nội tại của chúng (điều bạn không thể làm với các truy vấn đa phương tiện) và trình đơn cố định sẽ thay đổi theo bố cục mới khi giao diện người dùng của thẻ thay đổi.

Vị trí neo động bằng position-try-options

Bạn có thể dễ dàng tạo trình đơn và điều hướng trình đơn phụ bằng cách kết hợp tính năng bật lên và vị trí neo. Đồng thời, khi nhấn vào cạnh của khung nhìn bằng phần tử cố định, bạn cũng có thể để trình duyệt xử lý thay đổi vị trí cho bạn. Bạn có thể thực hiện việc này theo một số cách. Lý do đầu tiên là tạo quy tắc định vị của riêng bạn. Trong trường hợp này, trình đơn phụ ban đầu được đặt ở bên phải nút "cửa hàng". Tuy nhiên, bạn có thể tạo một khối @position-try khi không có đủ không gian ở bên phải trình đơn, hãy cung cấp cho khối đó một giá trị nhận dạng tuỳ chỉnh là --bottom. Sau đó, bạn kết nối khối @position-try này với neo bằng position-try-options.

Giờ đây, trình duyệt sẽ chuyển đổi giữa các trạng thái neo này, thử vị trí bên phải trước rồi chuyển sang vị trí dưới cùng. Bạn có thể thực hiện việc này bằng một hiệu ứng chuyển đổi đẹp mắt.

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

Cùng với logic định vị rõ ràng, trình duyệt cung cấp một số từ khoá nếu bạn muốn có một số hoạt động tương tác cơ bản như lật neo trong hướng khối hoặc nội tuyến.

position-try-options: flip-block, flip-inline;

Để có trải nghiệm lật đơn giản, hãy tận dụng các giá trị từ khoá lật này và bỏ qua việc viết định nghĩa position-try. Vì vậy, giờ đây bạn có thể có một phần tử định vị cố định đáp ứng vị trí với đầy đủ chức năng chỉ với một vài dòng CSS.

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

Tìm hiểu thêm về cách sử dụng vị trí neo.

Tương lai của giao diện người dùng theo lớp

Chúng ta thấy trải nghiệm kết nối Internet qua USB ở khắp mọi nơi và bộ tính năng được trình bày trong bài đăng này là một khởi đầu tuyệt vời để khai thác khả năng sáng tạo và kiểm soát tốt hơn các thành phần được định vị bằng neo cũng như giao diện phân lớp. Nhưng đây chỉ là khởi đầu. Ví dụ: hiện tại, popover chỉ hoạt động với các nút làm phần tử gọi hoặc với JavaScript. Đối với những nội dung như bản xem trước kiểu Wikipedia, một mẫu xuất hiện trên toàn nền tảng web, người dùng cần có thể tương tác và cũng kích hoạt một cửa sổ bật lên từ một đường liên kết và từ người dùng thể hiện sự quan tâm mà không nhất thiết phải nhấp vào, chẳng hạn như di chuột hoặc lấy tiêu điểm thẻ.

Bước tiếp theo cho API cửa sổ bật lên, chúng tôi đang làm việc trên interesttarget để giải quyết những nhu cầu này và giúp bạn dễ dàng tạo lại những trải nghiệm này bằng các trình bổ trợ hỗ trợ tiếp cận thích hợp được tích hợp sẵn. Đây là một vấn đề khó khăn về khả năng hỗ trợ tiếp cận, với nhiều câu hỏi mở về hành vi lý tưởng, nhưng việc giải quyết và chuẩn hoá chức năng này ở cấp nền tảng sẽ cải thiện trải nghiệm này cho mọi người.

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

Ngoài ra, còn có một phương thức gọi chung hướng tới tương lai (invoketarget) để kiểm thử trong Canary nhờ công việc của hai nhà phát triển bên thứ ba, Keith Cirkel và Luke Warlow. invoketarget hỗ trợ trải nghiệm khai báo cho nhà phát triển mà popovertarget cung cấp các cửa sổ bật lên, được chuẩn hoá cho tất cả các thành phần tương tác, bao gồm <dialog>, <details>, <video>, <input type="file">, v.v.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

Chúng tôi biết rằng có một số trường hợp sử dụng chưa được API này đề cập đến. Ví dụ: định kiểu cho mũi tên kết nối một phần tử được neo với neo của phần tử đó, đặc biệt là khi vị trí của phần tử được neo thay đổi và cho phép một phần tử "trượt" và ở trong khung nhìn thay vì chụp nhanh đến một vị trí khác được đặt khi phần tử đó đạt đến hộp giới hạn. Vì vậy, mặc dù chúng tôi rất hào hứng ra mắt API mạnh mẽ này, nhưng chúng tôi cũng mong muốn mở rộng nhiều tính năng hơn nữa trong tương lai.

Chọn kiểu

Khi sử dụng cùng lúc popover và anchor, nhóm đã tiến hành bật trình đơn thả xuống có thể tuỳ chỉnh. Tin vui là chúng tôi đã đạt được nhiều tiến bộ. Tin xấu là API này vẫn đang ở trạng thái thử nghiệm. Tuy nhiên, tôi rất vui được chia sẻ một số bản minh hoạ trực tiếp và thông tin cập nhật về tiến độ của chúng ta và hy vọng sẽ nhận được một số ý kiến phản hồi của bạn. Thứ nhất, chúng tôi đã có tiến triển về cách cho phép người dùng chọn sử dụng trải nghiệm mới, có thể tuỳ chỉnh. Cách hiện tại đang được triển khai để thực hiện việc này là sử dụng thuộc tính giao diện trong CSS, được đặt thành appearance: base-select. Sau khi thiết lập giao diện, bạn sẽ được chọn sử dụng một giao diện mới, có thể tuỳ chỉnh.

select {
  appearance: base-select;
}

Ngoài appearance: base-select, còn có một số nội dung cập nhật mới về HTML. Các tuỳ chọn này bao gồm khả năng gói các tuỳ chọn trong một datalist để tuỳ chỉnh và khả năng thêm nội dung tuỳ ý không tương tác (như hình ảnh) trong các tuỳ chọn của bạn. Bạn cũng sẽ có quyền truy cập vào một phần tử mới, <selectedoption>, phần tử này sẽ phản ánh nội dung của các tuỳ chọn vào chính nó, sau đó bạn có thể tuỳ chỉnh theo nhu cầu của riêng mình. Phần tử này thực sự hữu ích.

Hình ảnh minh hoạ

Bản minh hoạ trực tiếp

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

Mã sau đây minh hoạ cách tuỳ chỉnh <selectedoption> trong giao diện người dùng Gmail, trong đó biểu tượng trực quan thể hiện loại thư trả lời được chọn để tiết kiệm không gian. Bạn có thể sử dụng các kiểu hiển thị cơ bản trong selectedoption để phân biệt kiểu tuỳ chọn với kiểu xem trước. Trong trường hợp này, văn bản xuất hiện trong tuỳ chọn có thể bị ẩn đi trong selectedoption.

Hình ảnh minh hoạ

Bản minh hoạ trực tiếp

selectedoption .text {
  display: none;
}

Một trong những lợi thế lớn nhất khi sử dụng lại phần tử <select> cho API này là khả năng tương thích ngược. Trong lựa chọn quốc gia này, bạn có thể thấy một giao diện người dùng tuỳ chỉnh có hình ảnh cờ trong các tuỳ chọn để người dùng dễ dàng phân tích cú pháp nội dung hơn. Vì các trình duyệt không được hỗ trợ sẽ bỏ qua các dòng mà trình duyệt không hiểu, chẳng hạn như nút tuỳ chỉnh, danh sách dữ liệu, tuỳ chọn đã chọn và hình ảnh trong các tuỳ chọn, nên phương án dự phòng sẽ tương tự như giao diện người dùng chọn mặc định hiện tại.

Với các lựa chọn có thể tuỳ chỉnh, khả năng là vô tận. Tôi đặc biệt thích bộ chọn quốc gia theo phong cách Airbnb này vì có một phong cách thông minh cho thiết kế đáp ứng. Bạn có thể thực hiện điều này và nhiều việc khác nữa với lựa chọn kiểu cách sắp tới, biến tính năng này thành một bổ sung rất cần thiết cho nền tảng web.

Accordion độc quyền

Việc giải quyết kiểu chọn (và tất cả các phần đi kèm với kiểu đó) không phải là thành phần giao diện người dùng duy nhất mà nhóm Chrome đang tập trung vào. Nội dung cập nhật thành phần bổ sung đầu tiên là khả năng tạo các ngăn xếp độc quyền, trong đó mỗi lần chỉ có thể mở một trong các mục trong ngăn xếp

Cách bật tính năng này là áp dụng cùng một giá trị tên cho nhiều phần tử chi tiết, từ đó tạo một nhóm chi tiết được kết nối, giống như một nhóm nút chọn

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid và :user-invalid

Một điểm cải tiến khác về thành phần giao diện người dùng là các lớp giả :user-valid và :user-invalid. Ổn định trong tất cả trình duyệt gần đây, các lớp giả :user-valid và :user-invalid hoạt động tương tự như các lớp giả :valid và :invalid, nhưng chỉ khớp với một phần điều khiển biểu mẫu sau khi người dùng đã tương tác đáng kể với dữ liệu đầu vào. Điều này có nghĩa là bạn cần ít mã hơn đáng kể để xác định xem một giá trị biểu mẫu đã được tương tác hay đã trở thành "bẩn". Điều này có thể rất hữu ích để cung cấp phản hồi cho người dùng và giảm thiểu nhiều tập lệnh cần thiết để thực hiện việc này trước đây.

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

Tìm hiểu thêm về cách sử dụng các phần tử giả lập xác thực biểu mẫu user-*.

field-sizing: content

Một nội dung cập nhật tiện lợi khác cho thành phần đã ra mắt gần đây là field-sizing: content. API này có thể được áp dụng cho các thành phần điều khiển biểu mẫu như mục nhập và vùng văn bản. Thao tác này cho phép kích thước của đầu vào tăng (hoặc thu nhỏ) tuỳ theo nội dung. field-sizing: content có thể đặc biệt hữu ích cho các textarea, vì bạn không còn được phân giải thành kích thước cố định mà có thể cần phải cuộn lên để xem nội dung bạn đã viết ở các phần trước của lời nhắc trong một hộp nhập quá nhỏ.

textarea, select, input {
  field-sizing: content;
}

Tìm hiểu thêm về cách định cỡ trường.

<hr> tại <select>

Khả năng bật <hr> hoặc phần tử đường kẻ ngang trong các lựa chọn là một tính năng thành phần nhỏ nhưng hữu ích khác. Mặc dù không có nhiều ý nghĩa ngữ nghĩa, nhưng thuộc tính này giúp bạn tách biệt nội dung trong một danh sách chọn lọc một cách hiệu quả, đặc biệt là nội dung mà bạn không nhất thiết phải nhóm với optgroup, chẳng hạn như giá trị phần giữ chỗ.

Chọn Ảnh chụp màn hình

Chọn Bản minh hoạ trực tiếp

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

Tìm hiểu thêm về cách sử dụng sử dụng số giờ được chọn

Cải thiện chất lượng cuộc sống

Chúng tôi không ngừng lặp lại, không chỉ đối với các thành phần và hoạt động tương tác. Trong năm qua, chúng tôi cũng đã ra mắt nhiều bản cập nhật khác giúp cải thiện chất lượng cuộc sống.

Lồng ghép với tính năng xem trước

Tính năng lồng CSS gốc đã ra mắt trên tất cả trình duyệt vào năm ngoái và đã được cải thiện để hỗ trợ tính năng xem trước, tức là & trước tên phần tử không còn là yêu cầu nữa. Điều này giúp cho việc lồng ghép có cảm giác thoải mái hơn rất nhiều và tương tự như cách tôi đã từng làm trước đây.

Một trong những điều tôi thích nhất về tính năng lồng ghép CSS là tính năng này cho phép bạn chặn các thành phần một cách trực quan, đồng thời trong các thành phần đó có các trạng thái và đối tượng sửa đổi, chẳng hạn như truy vấn vùng chứa và truy vấn nội dung nghe nhìn. Trước đây, tôi thường nhóm tất cả các truy vấn này ở cuối tệp cho mục đích cụ thể. Bây giờ, bạn có thể viết các hàm này theo cách hợp lý, ngay bên cạnh phần mã còn lại

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Căn chỉnh nội dung cho bố cục khối

Một thay đổi thực sự thú vị khác là khả năng sử dụng các cơ chế căn giữa như align-content trong bố cục khối. Điều này có nghĩa là giờ đây bạn có thể làm những việc như căn giữa theo chiều dọc trong một div mà không cần áp dụng bố cục linh hoạt hoặc bố cục lưới, cũng như không có tác dụng phụ như ngăn thu gọn lề – điều mà bạn có thể không muốn với các thuật toán bố cục đó.

Ảnh chụp màn hình

Bản minh hoạ trực tiếp

div {
  align-content: center;
}

Text-wrap: cân bằng và đẹp mắt

Nói về bố cục, bố cục văn bản đã được cải thiện đáng kể nhờ việc bổ sung text-wrap: balance và pretty. text-wrap: balance được dùng cho một khối văn bản đồng nhất hơn, trong khi text-wrap: pretty tập trung vào việc giảm các singleton ở dòng cuối cùng trong văn bản.

h1 {
  text-wrap: balance;
}

Tìm hiểu thêm về thuộc tính text-wrap: Balance.

Thông tin cập nhật về kiểu chữ quốc tế

Nội dung cập nhật về bố cục kiểu chữ cho các tính năng văn bản CJK đã có nhiều điểm cập nhật thú vị trong năm qua, chẳng hạn như tính năng word-break: auto-phrase bọc dòng ở ranh giới của cụm từ tự nhiên.

Và text-spacing-trim, áp dụng khoảng cách giữa các ký tự dấu câu để cải thiện mức độ dễ đọc của kiểu chữ Trung, Nhật và Hàn nhằm mang lại kết quả bắt mắt hơn.

Cú pháp màu tương đối

Trong thế giới giao diện màu, chúng tôi đã thấy một bản cập nhật lớn với cú pháp màu tương đối.

Trong ví dụ này, màu ở đây sử dụng giao diện dựa trên Oklch. Khi giá trị sắc độ điều chỉnh dựa trên thanh trượt, toàn bộ giao diện sẽ thay đổi. Bạn có thể thực hiện việc này bằng cú pháp màu tương đối. Nền sử dụng màu chính, dựa trên sắc độ và điều chỉnh độ sáng, kênh sắc độ và kênh màu để điều chỉnh giá trị của màu đó. --i là chỉ mục đồng cấp trong danh sách cho độ dốc của các giá trị, cho biết cách bạn có thể kết hợp bước với các thuộc tính tuỳ chỉnh và cú pháp màu tương đối để tạo giao diện.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

Hàm light-dark()

Cùng với hàm light-dark(), việc tạo giao diện đã trở nên linh động và đơn giản hơn nhiều.

Hàm light-dark() là một điểm cải tiến về mặt công thái học, giúp đơn giản hoá các tuỳ chọn giao diện màu để bạn có thể viết các kiểu giao diện một cách ngắn gọn hơn, như được minh hoạ rất rõ trong sơ đồ trực quan này của Adam Argyle. Trước đây, bạn cần hai khối mã khác nhau (giao diện mặc định và truy vấn lựa chọn ưu tiên của người dùng) để thiết lập các tuỳ chọn giao diện. Giờ đây, bạn có thể viết các tuỳ chọn kiểu này cho cả giao diện sáng và tối trong cùng một dòng CSS bằng cách sử dụng hàm light-dark().

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

Nếu người dùng chọn giao diện sáng, nút này sẽ có nền màu xanh dương nhạt. Nếu người dùng chọn giao diện tối, nút này sẽ có nền xanh dương đậm.

Bộ chọn :has()

Tôi sẽ bỏ lỡ một trong những điểm nổi bật về khả năng tương tác có tác động lớn nhất trong năm qua nếu không đề cập đến bộ chọn :has(), đã ra mắt trên các trình duyệt vào tháng 12 năm ngoái. API này là một yếu tố đột phá trong việc viết các kiểu logic.

Bộ chọn :has() cho phép bạn kiểm tra xem một phần tử con có các phần tử con cụ thể hay không hoặc các phần tử con đó có ở trạng thái cụ thể hay không và về cơ bản cũng có thể hoạt động như một bộ chọn mẹ.

:has() đã được chứng minh là đặc biệt hữu ích cho nhiều công ty, bao gồm cả PolicyBazaar, họ sử dụng :has() để tạo kiểu cho các khối dựa trên nội dung bên trong, chẳng hạn như trong phần so sánh, nơi kiểu sẽ điều chỉnh nếu có kế hoạch so sánh trong khối hoặc nếu khối đó trống.

“Với bộ chọn :has(), chúng tôi có thể loại bỏ quy trình xác thực dựa trên JavaScript đối với lựa chọn của người dùng và thay thế bằng một giải pháp CSS hoạt động liền mạch với trải nghiệm tương tự như trước đây.– Aman Soni, Trưởng nhóm kỹ thuật, PolicyBazaar”

Cụm từ tìm kiếm về vùng chứa

Một bổ sung quan trọng khác cho web hiện mới ra mắt và ngày càng được sử dụng nhiều là các truy vấn vùng chứa, cho phép truy vấn kích thước nội tại của phần tử mẹ để áp dụng kiểu: một lược răng tinh gọn hơn nhiều so với các truy vấn đa phương tiện chỉ truy vấn kích thước khung nhìn.

Gần đây, Angular đã ra mắt một trang web tài liệu mới đẹp mắt trên angular.dev bằng cách sử dụng truy vấn vùng chứa để tạo kiểu cho các khối tiêu đề dựa trên không gian có sẵn trên trang. Vì vậy, ngay cả khi bố cục thay đổi và chuyển từ bố cục thanh bên nhiều cột sang bố cục một cột, các khối tiêu đề vẫn có thể tự điều chỉnh.

Nếu không có truy vấn vùng chứa, việc thực hiện những việc như thế này khá khó khăn và gây tổn hại đến hiệu suất, đòi hỏi trình quan sát thay đổi kích thước và trình quan sát phần tử. Giờ đây, việc tạo kiểu cho một phần tử dựa trên kích thước mẹ của phần tử đó là điều không hề khó khăn.

@property

Cuối cùng, chúng tôi rất vui khi thấy @property xuất hiện trong Baseline. Đây là một tính năng chính để cung cấp ý nghĩa ngữ nghĩa cho các thuộc tính tuỳ chỉnh CSS (còn gọi là biến CSS) và cho phép sử dụng nhiều tính năng tương tác mới. @property cũng hỗ trợ ý nghĩa theo ngữ cảnh, kiểm tra kiểu, giá trị mặc định và giá trị dự phòng trong CSS. Mở ra cơ hội cho các tính năng mạnh mẽ hơn như truy vấn kiểu dải ô. Đây là một tính năng chưa từng có trước đây và hiện cung cấp rất nhiều chiều sâu cho ngôn ngữ của CSS.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

Kết luận

Với tất cả các tính năng giao diện người dùng mạnh mẽ mới này trên các trình duyệt, bạn có vô số lựa chọn. Trải nghiệm tương tác mới mẻ với ảnh động do cuộn và chuyển đổi chế độ xem giúp web trở nên linh hoạt và tương tác hơn theo những cách mà chúng ta chưa từng thấy. Ngoài ra, các thành phần giao diện người dùng cấp độ tiếp theo giúp bạn dễ dàng xây dựng các thành phần mạnh mẽ, được tuỳ chỉnh đẹp mắt mà không làm mất toàn bộ trải nghiệm gốc. Cuối cùng, các điểm cải tiến về chất lượng cuộc sống trong cấu trúc, bố cục, kiểu chữ và thiết kế thích ứng không chỉ giải quyết những vấn đề nhỏ nhưng quan trọng, mà còn cung cấp cho nhà phát triển các công cụ cần thiết để xây dựng giao diện phức tạp hoạt động trên nhiều thiết bị, kiểu dáng và nhu cầu của người dùng.

Với các tính năng mới này, bạn có thể xoá tập lệnh của bên thứ ba cho các tính năng nặng về hiệu suất như cuộn và liên kết các phần tử với nhau bằng cách định vị neo, tạo hiệu ứng chuyển đổi trang linh hoạt, cuối cùng là tạo trình đơn thả xuống theo kiểu và cải thiện cấu trúc tổng thể của mã gốc.

Đây là thời điểm tốt nhất để trở thành nhà phát triển web. Chưa có sự kiện nào tạo ra nhiều năng lượng và sự hào hứng như vậy kể từ khi CSS3 được công bố. Những tính năng mà chúng tôi cần nhưng chỉ mơ ước có được trong quá khứ, cuối cùng đã trở thành hiện thực và trở thành một phần của nền tảng. Chính nhờ ý kiến của bạn mà chúng tôi có thể ưu tiên và cuối cùng là hiện thực hoá những tính năng này. Chúng tôi đang nỗ lực để giúp bạn dễ dàng thực hiện những việc khó khăn và tẻ nhạt ngay từ đầu, nhờ đó, bạn có thể dành nhiều thời gian hơn để xây dựng những điều quan trọng, chẳng hạn như các tính năng cốt lõi và chi tiết thiết kế giúp thương hiệu của bạn trở nên khác biệt.

Để tìm hiểu thêm về các tính năng mới này khi chúng ra mắt, hãy theo dõi tại developer.chrome.com và web.dev. Tại đây, nhóm của chúng tôi chia sẻ tin tức mới nhất về các công nghệ web. Hãy dùng thử ảnh động do cuộn, chuyển đổi chế độ xem, định vị neo hoặc thậm chí là lựa chọn có thể tạo kiểu và cho chúng tôi biết cảm nhận của bạn. Chúng tôi luôn sẵn sàng lắng nghe và trợ giúp bạn.