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 đang có nhiều đổi mới, với các tính năng CSS và giao diện người dùng web đi đầu trong quá trình phát triển thú vị này. Chúng ta đang sống trong thời kỳ hoàng kim của 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 nhiều trình duyệt với tốc độ chưa từng thấy, mở ra vô vàn khả năng để tạo ra những trải nghiệm web đẹp mắt và hấp dẫn. Bài đăng này trên blog 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 mang tính đột phá nhất đang định hình lại cách chúng ta xây dựng các ứ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 trên web là một quá trì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 đầu tư vào các hoạt động tương tác chất lượng của người dùng. Chúng tôi đã và đang nỗ lực thực hiện một số điểm cải tiến lớn để mở ra những khả năng mà chúng tôi chưa từng có trước đây trên web, chẳng hạn như khả năng điều hướng trong các trang web và điều hướng giữa các trang web.

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

Như tên gọi, API ảnh động dựa trên thao tác cuộn cho phép bạn tạo ảnh động động dựa trên thao tác cuộn mà không cần dựa vào các đối tượng theo dõi thao tác cuộn hoặc các tập lệnh nặng khác.

Tạo ảnh động dựa trên thao tác 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 trình cuộn để bắt đầu, tạm dừng và đảo ngược một ảnh động. Vì vậy, khi cuộn về phía trước, bạn sẽ thấy tiến trình của ảnh động và khi cuộn ngược lại, tiến trình sẽ đi theo hướng 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ử chuyển động vào và trong khung hiển thị, còn được gọi là scrollytelling (kể chuyện bằng cách cuộn), để tạo hiệu ứng hình ảnh sống động.

Bạn có thể dùng ảnh động dựa trên thao tác di chuyển để làm nổi bật nội dung quan trọng, hướng dẫn người dùng theo dõi một câu chuyện hoặc chỉ cần thêm một nét sống động vào các trang trên trang web của bạn.

@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%;
}

Đoạn mã trên xác định một ảnh động đơn giản xuất hiện trong khung hiển thị bằng cách thay đổi độ mờ và tỷ lệ của hình ảnh. Ảnh động được điều khiển bằng 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 đó đặt animation-timeline. Trong trường hợp này, hàm view() có các giá trị mặc định sẽ theo dõi hình ảnh so với cổng cuộn (trong trường hợp này cũng là khung hiển thị).

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 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, đồng thời gói ảnh động dựa trên thao tác cuộn trong một truy vấn về lựa chọn ưu tiên của người dùng như @media (prefers-reduced-motion: no-preference) để tôn trọng lựa chọn ưu tiên về chuyển động của người dùng. Sau khi thực hiện các bước kiểm tra này, bạn 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 dựa trên thao tác cuộn có thể là trải nghiệm kể chuyện dựa trên thao tác cuộn toàn trang, nhưng cũng có thể là ảnh động tinh tế hơn, chẳng hạn như thanh tiêu đề thu nhỏ và hiển thị bóng đổ khi bạn cuộn một ứ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 dựa trên thao tác cuộn tương ứng cho từng ảnh động. Mặc dù mỗi thành phần đều có một kiểu ảnh động riêng, nhưng tất cả đều có cùng dòng thời gian ảnh động, thành phần 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 thao tác cuộn

API tích hợp này giúp giảm gánh nặng về mã mà bạn cần duy trì, cho dù đó là tập lệnh tuỳ chỉnh bạn đã viết hay việc đưa thêm một phần phụ thuộc của bên thứ ba. Ngoài ra, việc này cũng giúp bạn không cần phải vận chuyển nhiều đối tượng theo dõi thao tác cuộn, tức là bạn sẽ nhận được một số lợi ích đáng kể về hiệu suất. Điều này là do các ảnh động dựa trên thao tác cuộn hoạt động ngoài luồng chính khi tạo ảnh động cho các thuộc tính có thể được 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 hook JavaScript.

Tokopedia gần đây đã sử dụng ảnh động dựa trên thao tác cuộn để 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 đáng kể, cả về 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 việc 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 những hiệu ứng này sẽ tiếp tục giúp web trở nên hấp dẫn hơn và chúng tôi đã bắt đầu nghĩ đến những hiệu ứng có thể xuất hiện tiếp theo. Điều này không chỉ bao gồm khả năng sử dụng các dòng thời gian mới của ảnh động mà còn sử dụng một điểm cuộn để kích hoạt việc bắt đầu một ảnh động, được gọi là ảnh động kích hoạt bằng thao tác cuộn.

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

Bạn cũng có thể dựa vào đó để cập nhật bộ chọn theo thời gian thực bằng sự kiện scrollsnapchanging của JavaScript.

Hiện tại, những tính năng cụ thể này chỉ có trong phiên bản Canary và nằm sau một cờ. Tuy nhiên, chúng mở ra những khả năng mà trước đây 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 những khả năng tương tác dựa trên thao tác cuộn trong tương lai.

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

Xem hiệu ứng chuyển cảnh

Chúng ta vừa tìm hiểu một tính năng mới mạnh mẽ giúp tạo ảnh động trong các trang web. Tuy nhiên, cũng có một tính năng mới mạnh mẽ khác là hiệu ứng chuyển đổi chế độ xem để tạo ảnh động giữa các lượt xem trang nhằm mang đến trải nghiệm liền mạch cho người dùng. Hiệu ứng chuyển đổi chế độ xem mang đến một mức độ linh hoạt mới cho web, cho phép bạn tạo hiệu ứng 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 nhiều trang.

Airbnb là một trong những công ty đã thử nghiệm việc tích hợp hiệu ứng chuyển đổi khung hiển thị vào giao diện người dùng của họ để mang đến trải nghiệm duyệt 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, cho phép chỉnh sửa ảnh và thêm tiện nghi ngay trong một quy trình mượt mà cho người dùng.

Mặc dù những 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 hoạt động tương tác nhỏ, chẳng hạn như ví dụ này, trong đó chế độ xem danh sách của bạn đang được cập nhật khi người dùng tương tác. Bạn có thể dễ dàng đạt được hiệu ứng này bằng hiệu ứng chuyển đổi khung hiển thị.

Cách nhanh chóng bật hiệu ứng chuyển đổi chế độ xem trong ứng dụng một trang rất đơn giản, chỉ cần bao bọc 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, nội tuyến hoặc động bằng JavaScript 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ể dùng tên chuyển đổi của khung hiển thị để áp dụng ảnh động tuỳ chỉnh cho hiệu ứng chuyển đổi khung hiển thị. Tuy nhiên, việc này có thể trở nên rườm rà khi có nhiều phần tử chuyển đổi. Bản cập nhật mới đầu tiên cho hiệu ứng chuyển đổi khung 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 hiệu ứng chuyển đổi khung hiển thị có thể áp dụng cho các ả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 cho hiệu ứng chuyển đổi khung hiển thị là khả năng hỗ trợ các loại hiệu ứng chuyển đổi khung hiển thị. Các loại hiệu ứng chuyển đổi chế độ xem rất hữu ích khi bạn muốn có một loại hiệu ứng chuyển đổi chế độ xem trực quan khác khi tạo hiệu ứng chuyển động đến và đi từ chế độ xem trang.

Ví dụ: bạn có thể muốn trang chủ chuyển động đến trang blog theo một cách khác so với cách trang blog chuyển động trở lại trang chủ. Hoặc bạn có thể muốn các trang thay thế theo nhiều cách khác nhau, chẳng hạn như trong ví dụ này, chuyển từ trái sang phải và ngược lại. Trước đây, việc này khá phức tạp. 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, giúp bạn thực hiện công việc này.

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 có các loại.

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

Hiệu ứng chuyển đổi nhiều trang

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

Nhóm tính năng mới trên nhiều tài liệu này bao gồm những trải nghiệm trên web nằm 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 trong cùng một tài liệu là bạn không cần bao bọc hiệu ứng chuyển đổi bằng document.startViewTransition(). Thay vào đó, hãy chọn sử dụng cả hai trang liên quan đến hiệu ứng chuyển đổi chế độ xem bằng cách sử dụng quy tắc @view-transition CSS.

@view-transition {
  navigation: auto;
}

Để có hiệu ứng tuỳ chỉnh hơn, bạn có thể kết nối JavaScript bằng trình nghe sự kiện pageswap hoặc pagereveal mới. Các 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 đi ngay trước khi chụp ảnh nhanh cũ và với pagereveal, bạn có thể tuỳ chỉnh trang mới trước khi trang này bắt đầu kết xuất sau khi được khởi tạo.

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

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

Trong tương lai, chúng tôi dự định mở rộng các hiệu ứng chuyển đổi chế độ xem, bao gồm:

• Chuyển đổi theo phạm vi: Cho phép bạn giới hạn một hiệu ứng chuyển đổi trong 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 hiệu ứng chuyển đổi chế độ xem chạy cùng lúc.
• Chuyển đổi khung hiển thị bằng cử chỉ: Sử dụng cử chỉ kéo hoặc vuốt để kích hoạt hiệu ứng chuyển đổi khung hiển thị giữa các tài liệu nhằm mang lại trải nghiệm giống như ứng dụng gốc hơn trên web.
• Điều hướng phù hợp trong CSS: Tuỳ chỉnh hiệu ứng chuyển đổi chế độ xem trên nhiều tài liệu ngay trong CSS thay vì dùng các sự kiện pageswap và pagereveal trong JavaScript Để tìm hiểu thêm về hiệu ứng 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 ứng này một cách hiệu quả nhất bằng tính năng kết xuất trước, hãy xem bài nói chuyện sau đây của Bramus Van Damme:

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

Việc tạo 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 trở nên dễ quản lý hơn nhiều. Các tính năng và điểm cải tiến mới đang đơn giản hoá quá trình tạo thành phần giao diện người dùng, giúp bạn tập trung vào việc tạo ra trải nghiệm tuyệt vời. Việc này được thực hiện thông qua nỗ lực hợp tác của một số tổ chức tiêu chuẩn và nhóm cộng đồng chính, bao gồm Nhóm công tác CSS, Nhóm cộng đồng Open UI và WHATWG (Nhóm công tác về công nghệ ứng dụng siêu văn bản trên web).

Một điểm khó khăn lớn đối với 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, ảnh hưởng đến rất nhiều phần của nền tảng; từ bố cục và kết xuất, đến thao tác cuộn và tương tác, đến việc tạo kiểu cho tác nhân người dùng và các thuộc tính CSS, thậm chí cả những thay đổi đối với chính HTML.

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

• Các tuỳ chọn liên kết phím (để vào/thoát chế độ tương tác)
• Nhấp ra ngoài để đó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 mở ra)
• Quản lý tiêu điểm thẻ
• Trực quan hoá giá trị của lựa 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 này cũng không giúp bạn dễ dàng quản lý. Để khắc phục vấn đề này, chúng tôi đã chia nhỏ các phần đó và đang cung cấp một số tính năng cơ bản cho phép tạo kiểu cho trình đơn thả xuống, nhưng cũng làm được nhiều việc khác.

Popover API

Trước tiên, chúng tôi đã ra mắt một thuộc tính chung có tên là popover. Tôi rất vui mừng thông báo rằng thuộc tính này vừa đạt được trạng thái Mới có sẵn trong đường cơ sở cách đây vài tuần.

Các phần tử cửa sổ bật lên bị ẩn bằng display: none cho đến khi được mở bằng một trình kích hoạt, chẳng hạn 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 phần tử đó với một nút bằng cách sử dụng popovertarget. Giờ đây, nút này là đối tượng 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 thuộc tính popover hiện đã được bật, 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, bao gồm:

• Thăng cấp 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 cần phải điều chỉnh z-index.
• Chức năng đóng nhanh.: Khi nhấp vào bên ngoài vùng cửa sổ bật lên, cửa sổ bật lên sẽ đóng và tiêu điểm sẽ quay lại.
• Quản lý tiêu điểm mặc định của thẻ.: Khi bạn mở cửa sổ bật lên, điểm dừng thẻ tiếp theo sẽ nằm bên trong cửa sổ bật lên.
• Các tổ hợp phím tích hợp sẵn.: Nhấn phím esc hoặc nhấn đúp sẽ đóng cửa sổ bật lên và trả lại tiêu điểm.
• Các liên kết mặc định của Thành phần. : Trình duyệt kết nối một cách ngữ nghĩa một cửa sổ bật lên với nút kích hoạt của cửa sổ đó.

Thậm chí, có thể bạn đang sử dụng API này mà không hề hay biết. 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ề yêu cầu xem xét yêu cầu kéo. Họ đã từng bước cải thiện tính năng này bằng cách sử dụng polyfill popover (được Oddbird xây dựng với sự hỗ trợ đáng kể của Keith Cirkel thuộc GitHub) để hỗ trợ các trình duyệt cũ.

"Chúng tôi đã xoá được hàng nghìn dòng mã bằng cách di chuyển sang cửa sổ bật lên. Popover giúp chúng tôi loại bỏ nhu cầu phải đối mặt với các con số z-index ảo diệu... việc thiết lập mối quan hệ chính xác trong cây hỗ trợ tiếp cận với hành vi nút khai báo và hành vi lấy tiêu điểm được 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 một cách dễ dàng hơn đáng kể. – Keith Cirkel, Kỹ sư phần mềm, GitHub"

Tạo ảnh động cho hiệu ứng xuất hiện và biến mất

Khi có cửa sổ bật lên, bạn có thể muốn thêm một số hoạt động 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ợ hiệu ứng độ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 hiệu ứng chuyển đổi của các thuộc tính riêng biệt như display.

Quy tắc @starting-style để tạo ảnh động cho hiệu ứng 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 quá trình tạo ảnh động.

Các thuộc tính này hoạt động cho mọi phần tử mà bạn đang tạo hiệu ứng chuyển động vào lớp trên cùng, cho dù đó là cửa sổ bật lên hay hộp thoại. Nhìn chung, đối với một hộp thoại có nền, mã 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 những kiểu cần chuyển độ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ở của 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, thuộc tính này sử dụng phần tử giả ::popover-open. Cuối cùng, hãy 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í điểm neo

Popover chỉ là phần mở đầu của câu chuyện. Một tin cập nhật rất thú vị là Chrome 125 hiện đã hỗ trợ vị trí neo.

Bằng cách sử dụng tính năng định vị điểm 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ú thích đơn giản được liên kết với từng nút, được đặt ở dưới cùng chính giữa.

Thiết lập mối quan hệ dựa trên vị trí của phần tử 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ú thích). Sau đó, hãy áp dụng vị trí tuyệt đối hoặc cố định so với điểm neo bằng hàm anchor(). Đoạn mã sau đây đặt phần trên cùng của chú thích công cụ ở phần dưới cùng của nút.

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

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

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

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

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

Cuối cùng, hãy 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ới đ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ù rất thuận tiện khi sử dụng tính năng định vị điểm neo với cửa sổ bật lên, nhưng cửa sổ bật lên chắc chắn không phải là yêu cầu bắt buộc để sử dụng tính năng định vị điểm neo. Bạn có thể dùng tính năng định vị điểm neo với hai (hoặc nhiều) phần tử bất kỳ để tạo mối quan hệ trực quan. Trên thực tế, bản minh hoạ sau đây (lấy cảm hứng 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 lên 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 thực của left, right và bottom. Khi bạn di chuột lên một trong các đường liên kết, đích đến của đường liên kết sẽ thay đổi và trình duyệt sẽ chuyển đích đến để áp dụng vị trí, đồng thời tạo hiệu ứng màu để tạo ra một 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;
}

inset-area vị trí

Ngoài chế độ định vị 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 như một phần của API định vị điểm neo, được gọi là vùng lồng ghép. Vùng 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 các điểm neo tương ứng và hoạt động trên lưới 9 ô với phần tử neo ở trung tâm. 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ạ điểm neo đầu tiên trông như thế này 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à trải rộng sang trái, trải rộng sang phải hoặc trải rộng tất cả để chiếm toàn bộ tập hợp các 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 cố định, nên phần tử được định vị sẽ di chuyển linh hoạt trên trang khi phần tử cố định di chuyển. Trong trường hợp này, chúng ta có các phần tử thẻ được tạo kiểu bằng truy vấn vùng chứa, có thể đổi kích thước dựa trên kích thước vốn có của chúng (điều mà bạn không thể thực hiện bằng truy vấn nội dung nghe nhìn) và trình đơn được neo sẽ dịch chuyển theo bố cục mới khi giao diện người dùng thẻ thay đổi.

Vị trí cố định linh hoạt với position-try-options

Bạn có thể dễ dàng tạo trình đơn và trình đơn con điều hướng bằng cách kết hợp vị trí neo và cửa sổ bật lên. Ngoài ra, khi phần tử được cố định của bạn chạm vào cạnh của một khung hiển thị, bạn cũng có thể để trình duyệt xử lý việc 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. Cách thứ nhất là tạo quy tắc định vị của riêng bạn. Trong trường hợp này, ban đầu, trình đơn con nằm ở bên phải nút "cửa hàng trực tuyến". Nhưng 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, 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 tâm bằng cách sử dụng position-try-options.

Giờ đây, trình duyệt sẽ chuyển đổi giữa các trạng thái được cố định này, trước tiên là thử vị trí bên phải rồi chuyển xuống 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ố lượt tương tác cơ bản như lật neo theo hướng khối hoặc hướng 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 hoàn toàn việc viết định nghĩa position-try. Giờ đây, bạn có thể có một phần tử neo có chức năng đầy đủ, phản hồi theo vị trí 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í cố định.

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

Chúng ta thấy trải nghiệm được liên kết ở 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 để thoả sức sáng tạo và kiểm soát tốt hơn các phần tử được đặt ở vị trí cố định và giao diện theo 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 theo kiểu Wikipedia (một mẫu hình xuất hiện trên toàn bộ nền tảng web), người dùng cần có thể tương tác và 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 tiêu điểm thẻ.

Là 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 hook hỗ trợ tiếp cận phù hợp. Đây là một vấn đề khó giải quyết về khả năng tiếp cận, với nhiều câu hỏi chưa có lời giải đáp 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 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 trình gọi chung hướng đến tương lai khác (invoketarget) mà bạn có thể kiểm thử trong Canary nhờ công sức của 2 nhà phát triển bên thứ ba là Keith Cirkel và Luke Warlow. invoketarget hỗ trợ trải nghiệm phát triển khai báo mà popovertarget cung cấp các cửa sổ bật lên, được chuẩn hoá cho tất cả các phần tử tương tác, bao gồm <dialog>, <details>, <video>, <input type="file"> và nhiều phần tử khác.

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

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

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

Lựa chọn có thể tạo kiểu

Khi sử dụng kết hợp popover và anchor, nhóm đã đạt được tiến bộ trong việc cuối cùng cũng cho phép tạo một trình đơn thả xuống có thể tuỳ chỉnh. Tin vui là chúng ta đã đạt được nhiều tiến bộ. Tin xấu là API này hiện vẫn đang trong giai đoạn 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 trình của chúng tôi, đồng thời hy vọng nhận được một số ý kiến phản hồi của bạn. Trước tiên, đã có tiến triển về cách cho phép người dùng chọn sử dụng trải nghiệm chọn mới, có thể tuỳ chỉnh. Cách hiện tại (đang trong quá trình triển khai) để thực hiện việc này là sử dụng một 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ẽ chọn sử dụng một trải nghiệm chọ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. Những tính năng này bao gồm khả năng gói các lựa chọn trong một datalist để tuỳ chỉnh và khả năng thêm nội dung không tương tác tuỳ ý như hình ảnh vào các lựa chọn. Bạn cũng sẽ có quyền truy cập vào một phần tử mới là <selectedoption>. Phần tử này sẽ phản ánh nội dung của các lựa chọn trong 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 rất 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>

Đoạn mã sau đây minh hoạ cách tuỳ chỉnh <selectedoption> trong giao diện người dùng Gmail, trong đó một biểu tượng trực quan đại diện cho loại câu 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 của lựa chọn với kiểu của bản xem trước. Trong trường hợp này, văn bản xuất hiện trong lựa chọn có thể bị ẩn trực quan 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 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 lựa chọn để người dùng dễ dàng phân tích nội dung. Vì các trình duyệt không được hỗ trợ sẽ bỏ qua những dòng mà chúng không hiểu, chẳng hạn như nút tuỳ chỉnh, datalist, selectedoption và hình ảnh trong các lựa 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, bạn có vô số khả năng. Tôi đặc biệt thích bộ chọn quốc gia theo kiểu Airbnb này vì có một kiểu thiết kế thích ứng thông minh. Bạn có thể làm được điều này và nhiều việc khác nữa với thành phần select có thể tạo kiểu sắp ra mắt, khiến thành phần này trở thành một bổ sung rất cần thiết cho nền tảng web.

Accordion độc quyền

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

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, do đó tạo ra 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 giả lớp :user-valid và :user-invalid. 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 chế độ kiểm soát 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 "không hợp lệ". Điều này có thể rất hữu ích khi cung cấp ý kiến phản hồi cho người dùng và giảm nhiều tập lệnh cần thiết để thực hiện việc này trong quá khứ.

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ả xác thực biểu mẫu user-*.

field-sizing: content

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

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

Tìm hiểu thêm về kích thước trường.

<hr> tại <select>

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

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

Chọ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 hr trong select

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

Chúng tôi không ngừng cải tiến và điều này không chỉ áp dụng cho các hoạt động tương tác và thành phần. Ngoài ra, còn nhiều bản cập nhật khác về chất lượng cuộc sống đã được triển khai trong năm qua.

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

Tính năng lồng CSS gốc đã có mặt trên tất cả các trình duyệt vào năm ngoái và kể từ đó đã được cải thiện để hỗ trợ tính năng xem trước. Điều này có nghĩa là bạn không còn bắt buộc phải dùng & trước tên phần tử nữa. Điều này giúp việc lồng ghép trở nên thuận tiện hơn nhiều và tương tự như những gì tôi đã quen trong quá khứ.

Một trong những điều tôi thích nhất về tính năng lồng 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 đưa các trạng thái và bộ sửa đổi vào trong các thành phần đó, chẳng hạn như truy vấn vùng chứa và truy vấn phương tiện. Trước đây, tôi có thói quen nhóm tất cả các truy vấn này ở cuối tệp để đảm bảo tính cụ thể. Giờ đây, bạn có thể viết các phương thức này theo cách hợp lý, ngay bên cạnh phần còn lại của mã

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

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

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

Align-content cho bố cục khối

Một thay đổi thực sự đáng chú ý 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ể thực hiện 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 dạng lưới, cũng như không gặp phải các tác dụng phụ như ngăn chặn việc thu gọn lề mà bạn có thể không muốn từ 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;
}

Ngắt dòng: cân bằng và đẹp

Về bố cục, bố cục văn bản đã có một điểm cải tiến đáng chú ý khi 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 từ đơn trên dòng cuối cùng trong văn bản.

h1 {
  text-wrap: balance;
}

Tìm hiểu thêm về text-wrap: balance.

Nội dung cập nhật về kiểu chữ quốc tế

Các bản cập nhật bố cục kiểu chữ cho các tính năng văn bản CJK đã nhận được nhiều bản cập nhật hữu ích trong năm qua, chẳng hạn như tính năng word-break: auto-phrase giúp ngắt dòng tại ranh giới 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 khả năng đọc của kiểu chữ tiếng Trung, tiếng Nhật và tiếng Hàn, giúp kết quả trông bắt mắt hơn.

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

Trong thế giới tạo giao diện bằng màu sắc, chúng ta đã 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, các 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 các kênh độ sáng, độ bão hoà và sắc độ để điều chỉnh giá trị của màu. --i là chỉ mục anh em trong danh sách cho sự phân cấp 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 hoạt và đơn giản hơn rất nhiều.

Hàm light-dark() là một điểm cải tiến về khả năng sử dụng, giúp đơn giản hoá các lựa chọn tạo giao diện màu để bạn có thể viết các kiểu giao diện theo cách ngắn gọn hơn, như Adam Argyle đã minh hoạ rất rõ ràng trong sơ đồ trực quan này. Trước đây, bạn sẽ cần 2 khối mã riêng biệt (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 lựa chọn về giao diện. Giờ đây, bạn có thể viết các lựa chọn về 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 màu xanh dương đậm.

Bộ chọn :has()

Và tôi sẽ thiếu sót nếu nói về giao diện người dùng hiện đại mà không đề cập đến 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, đó chính là bộ chọn :has(), được triển khai 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ó phần tử con cụ thể hay không, hoặc liệu các phần tử con đó có ở một trạng thái cụ thể hay không, và về cơ bản, bộ chọn này cũng có thể hoạt động như một bộ chọn phần tử mẹ.

:has() đã cho thấy là đặc biệt hữu ích đối với 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ó một gói để 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 cho chúng tôi với trải nghiệm tương tự như trước đây.– Aman Soni, Trưởng nhóm kỹ thuật, PolicyBazaar"

Truy vấn vùng chứa

Một điểm bổ sung quan trọng khác cho web hiện đã có sẵn và đang ngày càng được sử dụng là truy vấn vùng chứa. Truy vấn này cho phép truy vấn kích thước nội tại của phần tử gốc để áp dụng các kiểu: một lược đồ chi tiết hơn nhiều so với truy vấn phương tiện (chỉ truy vấn kích thước khung hiển thị).

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 các truy vấn vùng chứa để tạo kiểu cho các khối tiêu đề dựa trên khoảng trống có sẵn trên trang. Vì vậy, ngay cả khi bố cục thay đổi, 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, bạn sẽ rất khó đạt được điều này và ảnh hưởng đến hiệu suất, vì cần có trình quan sát 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 của phần tử mẹ là điều không mấy khó khăn.

@property

Và 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 của CSS (còn gọi là biến CSS) và cho phép hàng loạt tính năng tương tác mới. @property cũng cho phép ý nghĩa theo bối cảnh, kiểm tra kiểu, giá trị mặc định và giá trị dự phòng trong CSS. Mở ra cánh cửa cho nhiều tính năng mạnh mẽ hơn nữa, chẳng hạn như truy vấn theo kiểu phạm vi. Đây là một tính năng chưa từng có trước đây và hiện mang đến nhiều thông tin chi tiết cho ngôn ngữ CSS.

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

Kết luận

Với tất cả các chức năng giao diện người dùng mạnh mẽ mới này xuất hiện trên các trình duyệt, khả năng là vô tận. Trải nghiệm tương tác mới lạ với ảnh động dựa trên thao tác cuộn và hiệu ứng chuyển đổi khung hiển thị giúp web trở nên linh hoạt và có tính tương tác hơn theo những cách mà chúng ta chưa từng thấy trước đâ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 hơn bao giờ hết trong việc tạo các thành phần mạnh mẽ, được tuỳ chỉnh đẹp mắt mà không cần loại bỏ toàn bộ trải nghiệm gốc. Cuối cùng, những điểm cải thiện 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 những công cụ cần thiết để xây dựng các giao diện phức tạp hoạt động trên nhiều thiết bị, hệ số hình dạng và nhu cầu của người dùng.

Với những 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 có hiệu suất cao như tính năng kể chuyện bằng hình ảnh và tính năng kết nối các phần tử với nhau bằng tính năng định vị điểm neo, tạo hiệu ứng chuyển trang mượt mà, cuối cùng là tạo kiểu cho trình đơn thả xuống và cải thiện cấu trúc tổng thể của mã một cách tự nhiên.

Đây là thời điểm thích hợp nhất để trở thành một nhà phát triển web. Kể từ khi CSS3 được công bố, chưa có sự kiện nào mang lại nhiều năng lượng và sự phấn khích đến vậy. Những tính năng mà chúng tôi cần nhưng chỉ dám mơ ước trong quá khứ, cuối cùng cũng trở thành hiện thực và là một phần của nền tảng này. Nhờ tiếng nói của bạn, 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 một cách tự nhiên, 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ề những tính năng mới này khi chúng ra mắt, hãy theo dõi developer.chrome.com và web.dev. Tại đây, nhóm của chúng tôi sẽ chia sẻ tin tức mới nhất về các công nghệ web. Hãy dùng thử các tính năng như ảnh động dựa trên thao tác cuộn, hiệu ứng chuyển đổi chế độ xem, vị trí neo hoặc thậm chí là thành phần chọn có thể tạo kiểu và cho chúng tôi biết ý kiến của bạn. Chúng tôi sẵn sàng lắng nghe và trợ giúp bạn.