Hàm lượng giác

Chrome 111 đã thêm tính năng hỗ trợ cho các hàm lượng giác sin(), cos(), tan(), asin(), acos(), atan() và atan2(), giúp các hàm này có sẵn trên tất cả các công cụ chính. Những hàm này rất hữu ích cho mục đích tạo ảnh động và bố cục. Ví dụ: giờ đây, bạn có thể dễ dàng bố trí các phần tử trên một vòng tròn xung quanh tâm đã chọn.

Tìm hiểu thêm về các hàm lượng giác trong CSS.

Lựa chọn phức tạp thứ n

Với bộ chọn giả lớp :nth-child(), bạn có thể chọn các phần tử trong DOM theo chỉ mục của chúng. Khi sử dụng An+B cú pháp vi mô, bạn có thể kiểm soát chính xác những phần tử mà bạn muốn chọn.

Theo mặc định, các giả định :nth-*() sẽ tính đến tất cả các phần tử con. Kể từ Chrome 111, bạn có thể truyền một danh sách bộ chọn vào :nth-child() và :nth-last-child() (không bắt buộc). Nhờ đó, bạn có thể lọc trước danh sách các thành phần con trước khi An+B thực hiện thao tác.

Trong bản minh hoạ sau, logic 3n+1 chỉ được áp dụng cho những con búp bê nhỏ bằng cách lọc trước chúng bằng of .small. Sử dụng trình đơn thả xuống để thay đổi bộ chọn được dùng một cách linh động.

Tìm hiểu thêm về các lựa chọn phức tạp nth-*.

Phạm vi

Chrome 118 đã thêm tính năng hỗ trợ @scope, một quy tắc tại cho phép bạn điều chỉnh phạm vi so khớp bộ chọn thành một cây con cụ thể của tài liệu. Với kiểu có phạm vi, bạn có thể chỉ định rất cụ thể những phần tử mà bạn chọn mà không cần phải viết bộ chọn quá cụ thể hoặc liên kết chặt chẽ chúng với cấu trúc DOM.

Cây con có phạm vi được xác định bằng một gốc phạm vi (ranh giới trên) và một giới hạn phạm vi (ranh giới dưới) không bắt buộc.

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

Các quy tắc kiểu được đặt bên trong một khối phạm vi sẽ chỉ nhắm đến các phần tử trong cây con được tách ra. Ví dụ: quy tắc kiểu có phạm vi sau đây chỉ nhắm đến các phần tử <img> nằm giữa phần tử .card và mọi thành phần lồng ghép khớp với bộ chọn [data-component].

@scope (.card) to ([data-component]) {
  img { … }
}

Trong bản minh hoạ sau, các phần tử <img> trong thành phần băng chuyền không được so khớp do giới hạn phạm vi được áp dụng.

Ảnh chụp màn hình minh hoạ phạm vi

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

Tìm hiểu thêm về @scope trong bài viết "Cách sử dụng @scope để giới hạn phạm vi tiếp cận của bộ chọn". Trong bài viết này, bạn sẽ tìm hiểu về bộ chọn :scope, cách xử lý tính cụ thể, các phạm vi không có phần mở đầu và cách tầng bị ảnh hưởng bởi @scope.

Lồng ghép

Trước khi lồng, mọi bộ chọn đều cần được khai báo rõ ràng, tách biệt với nhau. Điều này dẫn đến sự lặp lại, số lượng lớn biểu định kiểu và trải nghiệm sáng tác rời rạc. Giờ đây, bạn có thể tiếp tục chọn các quy tắc kiểu có liên quan được nhóm trong đó.

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

Việc lồng ghép có thể giảm dung lượng của biểu định kiểu, giảm chi phí chung của các bộ chọn lặp lại và tập trung các kiểu thành phần. Cú pháp ban đầu được phát hành với một hạn chế yêu cầu sử dụng & ở nhiều nơi, nhưng sau đó đã được gỡ bỏ bằng bản cập nhật cú pháp lồng ghép nới lỏng.

Tìm hiểu thêm về việc lồng ghép.

Subgrid

CSS subgrid cho phép bạn tạo các lưới phức tạp hơn với sự căn chỉnh tốt hơn giữa các bố cục con. Thao tác này cho phép một lưới nằm bên trong một lưới khác, áp dụng các hàng và cột của lưới bên ngoài làm hàng và cột của chính nó, bằng cách sử dụng subgrid làm giá trị cho các hàng hoặc cột của lưới.

Lưới con đặc biệt hữu ích để căn chỉnh các thành phần ngang hàng với nội dung động của nhau. Điều này giúp chuyên viên nội dung quảng cáo, chuyên viên viết nội dung trải nghiệm người dùng và người dịch không phải cố gắng tạo bản sao dự án "phù hợp" với bố cục. Với lưới phụ, bạn có thể điều chỉnh bố cục cho phù hợp với nội dung.

Tìm hiểu thêm về lưới phụ.

Initial-letter

Ra mắt vào đầu năm trong Chrome 110, thuộc tính initial-letter là một tính năng CSS nhỏ nhưng mạnh mẽ, giúp đặt kiểu cho vị trí của các chữ cái đầu. Bạn có thể đặt chữ ở trạng thái thả xuống hoặc nâng lên. Thuộc tính này chấp nhận 2 đối số: đối số đầu tiên cho biết độ sâu mà chữ cái sẽ rơi vào đoạn văn tương ứng và đối số thứ hai cho biết mức độ nâng chữ cái lên phía trên. Bạn thậm chí có thể kết hợp cả hai, chẳng hạn như trong bản minh hoạ sau.

Ảnh chụp màn hình có chữ cái đầu

Bản minh hoạ chữ cái đầu

Tìm hiểu thêm về initial-letter.

text-wrap: balance and pretty

Là một nhà phát triển, bạn không biết kích thước, cỡ chữ hoặc thậm chí là ngôn ngữ cuối cùng của một tiêu đề hoặc đoạn văn. Tất cả các biến cần thiết để xử lý hiệu quả và thẩm mỹ việc xuống dòng văn bản đều nằm trong trình duyệt. Vì trình duyệt biết tất cả các yếu tố, chẳng hạn như kích thước phông chữ, ngôn ngữ và vùng được phân bổ, nên đây là lựa chọn phù hợp để xử lý bố cục văn bản nâng cao và chất lượng cao.

Đây là nơi xuất hiện 2 kỹ thuật xuống dòng văn bản mới, một kỹ thuật có tên là balance và kỹ thuật còn lại là pretty. Giá trị balance nhằm tạo ra một khối văn bản hài hoà, trong khi pretty nhằm ngăn chặn các từ đơn dòng và đảm bảo việc ngắt từ đúng cách. Theo truyền thống, cả hai nhiệm vụ này đều được thực hiện thủ công và thật tuyệt vời khi giao nhiệm vụ này cho trình duyệt và để trình duyệt hoạt động cho mọi ngôn ngữ được dịch.

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

Không gian màu HD (Cấp độ màu 4)

Từ phần cứng đến phần mềm, từ CSS đến đèn nhấp nháy, máy tính của chúng ta có thể phải mất rất nhiều công sức để cố gắng thể hiện màu sắc một cách chân thực như mắt người có thể nhìn thấy. Năm 2023, chúng tôi có các màu mới, nhiều màu hơn, không gian màu mới, các hàm màu và tính năng mới.

Giờ đây, CSS và màu sắc có thể: – Kiểm tra xem phần cứng màn hình của người dùng có hỗ trợ màu HDR có gam màu rộng hay không. – Kiểm tra xem trình duyệt của người dùng có hiểu cú pháp màu như Oklch hoặc Display P3 hay không. – Chỉ định màu HDR trong Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ, v.v. – Tạo hiệu ứng chuyển màu bằng màu HDR, – Nội suy hiệu ứng chuyển màu trong các không gian màu thay thế. – Trộn màu bằng color-mix(). – Tạo các biến thể màu bằng cú pháp màu tương đối.

Tìm hiểu thêm về Color 4 và không gian màu.

hàm color-mix

Pha màu là một tác vụ cổ điển và CSS cũng có thể làm được điều này vào năm 2023. Bạn không chỉ có thể pha màu trắng hoặc đen vào một màu, mà còn có thể pha độ trong suốt và làm tất cả những việc này trong bất kỳ không gian màu nào mà bạn chọn. Đây vừa là một tính năng cơ bản về màu sắc, vừa là một tính năng nâng cao về màu sắc.

Bạn có thể coi color-mix() là một thời điểm trong một dải chuyển màu. Trong khi một dải chuyển màu cho thấy tất cả các bước cần thiết để chuyển từ màu xanh dương sang màu trắng, thì color-mix() chỉ cho thấy một bước. Mọi thứ sẽ trở nên phức tạp hơn khi bạn bắt đầu tính đến các không gian màu và tìm hiểu xem không gian màu trộn có thể khác biệt như thế nào so với kết quả.

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

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

Cú pháp màu tương đối (RCS) là một phương thức bổ sung cho color-mix() để tạo các biến thể màu. Hàm này mạnh hơn color-mix() một chút nhưng cũng là một chiến lược khác để xử lý màu. color-mix() có thể trộn màu trắng để làm sáng một màu, trong đó RCS cho phép truy cập chính xác vào kênh độ sáng và khả năng sử dụng calc() trên kênh để giảm hoặc tăng độ sáng theo cách lập trình.

RCS cho phép bạn thực hiện các thao tác tương đối và tuyệt đối đối với một màu. Thay đổi tương đối là thay đổi mà bạn lấy giá trị hiện tại của độ bão hoà hoặc độ sáng rồi sửa đổi bằng calc(). Thay đổi tuyệt đối là khi bạn thay thế một giá trị kênh bằng một giá trị hoàn toàn mới, chẳng hạn như đặt độ mờ thành 50%. Cú pháp này cung cấp cho bạn các công cụ hữu ích để tạo giao diện, các biến thể đúng lúc và nhiều công cụ khác.

Tìm hiểu thêm về cú pháp màu tương đối.

Truy vấn vùng chứa theo kích thước

Thay vì sử dụng thông tin kích thước chung của khung hiển thị để áp dụng kiểu CSS, truy vấn vùng chứa hỗ trợ việc truy vấn một phần tử gốc trong trang. Điều này có nghĩa là bạn có thể tạo kiểu cho các thành phần theo cách linh hoạt trên nhiều bố cục và trong nhiều khung hiển thị. Truy vấn vùng chứa theo kích thước đã ổn định trong tất cả các trình duyệt hiện đại vào ngày Lễ tình nhân năm nay (ngày 14 tháng 2).

Để sử dụng tính năng này, trước tiên, hãy thiết lập tính năng ngăn chặn trên phần tử mà bạn đang truy vấn, sau đó, tương tự như truy vấn nội dung nghe nhìn, hãy sử dụng @container với các tham số kích thước để áp dụng kiểu. Cùng với các truy vấn vùng chứa, bạn sẽ nhận được kích thước truy vấn vùng chứa. Trong bản minh hoạ sau đây, kích thước truy vấn vùng chứa cqi (đại diện cho kích thước của vùng chứa nội tuyến) được dùng để định kích thước tiêu đề thẻ.

Tìm hiểu thêm về cách sử dụng truy vấn vùng chứa.

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

Các truy vấn về kiểu đã được triển khai một phần trong Chrome 111. Với các truy vấn kiểu hiện tại, bạn có thể truy vấn giá trị của các thuộc tính tuỳ chỉnh trên một phần tử mẹ khi sử dụng @container style(). Ví dụ: truy vấn xem giá trị của một thuộc tính tuỳ chỉnh có tồn tại hay không hoặc được đặt thành một giá trị nhất định, chẳng hạn như @container style(--rain: true).

Ảnh chụp màn hình truy vấn về kiểu

Bản minh hoạ câu hỏi về kiểu

Mặc dù nghe có vẻ tương tự như việc sử dụng tên lớp trong CSS, nhưng truy vấn kiểu có một số lợi thế. Thứ nhất, với các truy vấn kiểu, bạn có thể cập nhật giá trị trong CSS khi cần cho các trạng thái giả. Ngoài ra, trong các phiên bản triển khai sau này, bạn sẽ có thể truy vấn các dải giá trị để xác định kiểu được áp dụng, chẳng hạn như style(60 <= --weather <= 70) và kiểu dựa trên các cặp giá trị thuộc tính, chẳng hạn như style(font-style: italic).

Tìm hiểu thêm về cách sử dụng truy vấn kiểu.

Bộ chọn :has()

Trong gần 20 năm, các nhà phát triển đã yêu cầu có một "bộ chọn phần tử mẹ" trong CSS. Giờ đây, bạn có thể làm việc này nhờ bộ chọn :has() có trong Chrome 105. Ví dụ: việc sử dụng .card:has(img.hero) sẽ chọn các phần tử .card có hình ảnh nổi bật làm phần tử con.

Ảnh chụp màn hình minh hoạ :has()

:has() Bản minh hoạ trực tiếp

Vì :has() chấp nhận danh sách bộ chọn tương đối làm đối số, nên bạn có thể chọn nhiều phần tử hơn phần tử mẹ. Khi sử dụng nhiều bộ kết hợp CSS, bạn không chỉ có thể đi lên cây DOM mà còn có thể chọn theo chiều ngang. Ví dụ: li:has(+ li:hover) sẽ chọn phần tử <li> đứng trước phần tử <li> hiện đang được di chuột.

Tìm hiểu thêm về bộ chọn :has() CSS.

Cập nhật truy vấn nội dung nghe nhìn

Truy vấn nội dung nghe nhìn update giúp bạn điều chỉnh giao diện người dùng cho phù hợp với tốc độ làm mới của thiết bị. Tính năng này có thể báo cáo giá trị fast, slow hoặc none liên quan đến các chức năng của nhiều thiết bị.

Hầu hết các thiết bị mà bạn thiết kế đều có tốc độ làm mới nhanh. Điều này áp dụng cho máy tính và hầu hết các thiết bị di động. Máy đọc sách điện tử và các thiết bị như hệ thống thanh toán tiêu thụ ít điện năng có thể có tốc độ làm mới chậm. Khi biết rằng thiết bị không xử lý được ảnh động hoặc thông tin cập nhật thường xuyên, tức là bạn có thể tiết kiệm mức sử dụng pin hoặc các bản cập nhật khung hiển thị bị lỗi.

Tìm hiểu thêm về @media (update).

Tạo tập lệnh truy vấn nội dung nghe nhìn

Bạn có thể dùng truy vấn phương tiện tập lệnh để kiểm tra xem JavaScript có hoạt động hay không. Điều này rất hữu ích cho việc cải tiến tăng dần. Trước truy vấn nội dung nghe nhìn này, một chiến lược để phát hiện xem JavaScript có hoạt động hay không là đặt một lớp nojs trong HTML và xoá lớp đó bằng JavaScript. Bạn có thể xoá các tập lệnh này vì CSS hiện có cách phát hiện JavaScript và điều chỉnh cho phù hợp.

Tìm hiểu cách bật và tắt JavaScript trên một trang để kiểm thử thông qua Công cụ của Chrome cho nhà phát triển tại đây.

Hãy xem xét việc chuyển đổi giao diện trên một trang web, truy vấn phương tiện tập lệnh có thể hỗ trợ việc chuyển đổi hoạt động dựa trên lựa chọn ưu tiên của hệ thống vì không có JavaScript. Hoặc cân nhắc sử dụng một thành phần công tắc – nếu có JavaScript, thì công tắc có thể được vuốt bằng cử chỉ thay vì chỉ bật và tắt. Có rất nhiều cơ hội tuyệt vời để nâng cấp trải nghiệm người dùng nếu có tập lệnh, đồng thời cung cấp trải nghiệm nền tảng có ý nghĩa nếu tập lệnh bị vô hiệu hoá.

Tìm hiểu thêm về tập lệnh.

Truy vấn nội dung nghe nhìn có độ trong suốt thấp

Giao diện không trong suốt có thể gây đau đầu hoặc gây khó khăn về thị lực đối với nhiều loại suy giảm thị lực. Đó là lý do Windows, macOS và iOS có các lựa chọn ưu tiên hệ thống có thể giảm hoặc xoá độ trong suốt khỏi giao diện người dùng. Truy vấn nội dung nghe nhìn này cho prefers-reduced-transparency phù hợp với các truy vấn nội dung nghe nhìn về lựa chọn ưu tiên khác, cho phép bạn sáng tạo trong khi vẫn điều chỉnh cho phù hợp với người dùng.

Trong một số trường hợp, bạn có thể cung cấp một bố cục thay thế không có nội dung chồng lên nội dung khác. Trong những trường hợp khác, bạn có thể điều chỉnh độ mờ của màu để màu đó trở nên mờ đục hoặc gần như mờ đục. Bài đăng sau đây trên blog có nhiều bản minh hoạ truyền cảm hứng hơn, thích ứng với lựa chọn ưu tiên của người dùng. Hãy xem nếu bạn tò mò về những thời điểm mà truy vấn nội dung nghe nhìn này có giá trị.

Tìm hiểu thêm về @media (prefers-reduced-transparency).

Hiệu ứng chuyển đổi khung hiển thị

Hiệu ứng chuyển đổi chế độ xem có tác động lớn đến trải nghiệm người dùng của một trang. Với View Transitions API, bạn có thể tạo hiệu ứng chuyển đổi trực quan giữa hai trạng thái trang của Ứng dụng một trang. Những hiệu ứng chuyển đổi này có thể là hiệu ứng chuyển đổi toàn trang hoặc những hiệu ứng nhỏ hơn trên một trang, chẳng hạn như thêm hoặc xoá một mục mới khỏi danh sách.

Chức năng cốt lõi của View Transitions API là hàm document.startViewTranstion. Truyền vào một hàm cập nhật DOM thành trạng thái mới và API sẽ xử lý mọi thứ cho bạn. Thao tác này được thực hiện bằng cách chụp ảnh nhanh trước và sau, sau đó chuyển đổi giữa hai ảnh. Bằng cách sử dụng CSS, bạn có thể kiểm soát những gì được chụp và tuỳ ý tuỳ chỉnh cách các ảnh chụp nhanh này được tạo hiệu ứng.

View Transitions API cho Ứng dụng một trang được phát hành trong Chrome 111. Tìm hiểu thêm về Hiệu ứng chuyển đổi chế độ xem.

Hàm làm mịn tuyến tính

Đừng để tên của hàm này đánh lừa bạn. Hàm linear() (không nhầm lẫn với từ khoá linear) cho phép bạn tạo các hàm làm chậm phức tạp một cách đơn giản, nhưng sẽ mất đi một số độ chính xác.

Trước linear() (ra mắt trong Chrome 113), bạn không thể tạo hiệu ứng nảy hoặc đàn hồi trong CSS. Nhờ linear(), bạn có thể ước chừng các đường cong này bằng cách đơn giản hoá chúng thành một chuỗi điểm, sau đó nội suy tuyến tính giữa các điểm này.

Tìm hiểu thêm về linear(). Để tạo đường cong linear(), hãy dùng trình tạo đường cong tăng tốc tuyến tính.

Kết thúc cử chỉ cuộn

Nhiều giao diện có các lượt tương tác cuộn và đôi khi giao diện cần đồng bộ hoá thông tin liên quan đến vị trí cuộn hiện tại hoặc tìm nạp dữ liệu dựa trên trạng thái hiện tại. Trước sự kiện scrollend, bạn phải sử dụng một phương thức thời gian chờ không chính xác có thể kích hoạt trong khi ngón tay của người dùng vẫn còn trên màn hình. Với sự kiện scrollend, bạn có một sự kiện scrollend được tính thời gian hoàn hảo, giúp bạn biết liệu người dùng có đang thực hiện cử chỉ hay không.

Đây là điều quan trọng đối với trình duyệt vì JavaScript không thể theo dõi sự hiện diện của ngón tay trên màn hình trong khi cuộn, thông tin này đơn giản là không có sẵn. Giờ đây, bạn có thể xoá và thay thế các đoạn mã cố gắng xác định điểm cuối của thao tác cuộn không chính xác bằng một sự kiện có độ chính xác cao do trình duyệt sở hữu.

Tìm hiểu thêm về scrollend.

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

Ảnh động dựa trên thao tác cuộn là một tính năng thú vị có trong Chrome 115. Các API này cho phép bạn lấy một ảnh động CSS hiện có hoặc một ảnh động được tạo bằng Web Animations API, rồi ghép ảnh động đó với độ lệch cuộn của một thành phần có thể cuộn. Khi bạn cuộn lên và xuống (hoặc sang trái và phải trong một trình cuộn ngang), ảnh động được liên kết sẽ tua đi và tua lại để phản hồi trực tiếp.

Với ScrollTimeline, bạn có thể theo dõi tiến trình tổng thể của một thành phần có thể cuộn, như minh hoạ trong bản minh hoạ sau. Khi bạn di chuyển đến cuối trang, văn bản sẽ xuất hiện từng ký tự một.

Với ViewTimeline, bạn có thể theo dõi một phần tử khi phần tử đó đi qua scrollport. Cách này hoạt động tương tự như cách IntersectionObserver theo dõi một phần tử. Trong bản minh hoạ sau đây, mỗi hình ảnh sẽ xuất hiện từ thời điểm hình ảnh đó đi vào cổng cuộn cho đến khi ở giữa.

Vì ảnh động dựa trên thao tác cuộn hoạt động với ảnh động CSS và Web Animations API, nên bạn có thể tận dụng mọi lợi thế mà các API này mang lại. Điều này bao gồm cả khả năng chạy các ảnh động này ngoài luồng chính. Giờ đây, bạn có thể tạo ảnh động mượt mà, được điều khiển bằng thao tác cuộn, chạy ngoài luồng chính chỉ với một vài dòng mã bổ sung. Thật tuyệt vời phải không?

Để tìm hiểu thêm về ảnh động dựa trên thao tác cuộn, hãy xem bài viết này để biết tất cả thông tin chi tiết hoặc truy cập vào scroll-driven-animations.style để xem nhiều bản minh hoạ.

Tệp đính kèm bị hoãn

Khi áp dụng một ảnh động dựa trên thao tác cuộn thông qua CSS, cơ chế tra cứu để tìm bộ cuộn kiểm soát luôn đi lên cây DOM, do đó, cơ chế này chỉ giới hạn ở các thành phần tổ tiên có thể cuộn. Tuy nhiên, rất thường xuyên, phần tử cần được tạo hiệu ứng không phải là phần tử con của trình cuộn mà là phần tử nằm trong một cây con hoàn toàn khác.

Để cho phép phần tử động tìm thấy một dòng thời gian cuộn có tên của một phần tử không phải là phần tử gốc, hãy sử dụng thuộc tính timeline-scope trên một phần tử mẹ dùng chung. Điều này cho phép scroll-timeline hoặc view-timeline đã xác định có tên đó đính kèm vào nó, giúp nó có phạm vi rộng hơn. Sau khi bạn thiết lập, mọi trẻ là con của cha mẹ dùng chung đó đều có thể sử dụng dòng thời gian có tên đó.

Tìm hiểu thêm về timeline-scope.

Ảnh động thuộc tính rời rạc

Một tính năng mới khác trong năm 2023 là khả năng tạo ảnh động rời rạc, chẳng hạn như tạo ảnh động đến và đi từ display: none. Kể từ Chrome 116, bạn có thể sử dụng display và content-visibility trong các quy tắc khung hình chính. Bạn cũng có thể chuyển đổi bất kỳ thuộc tính rời rạc nào ở điểm 50% thay vì ở điểm 0%. Bạn có thể thực hiện việc này bằng thuộc tính transition-behavior bằng cách sử dụng từ khoá allow-discrete hoặc trong thuộc tính transition dưới dạng một thuộc tính viết tắt.

Tìm hiểu thêm về chuyển đổi các ảnh động rời rạc.

@starting-style

Quy tắc CSS @starting-style dựa trên các chức năng mới của web để tạo hiệu ứng chuyển động đến và đi từ display: none. Quy tắc này cung cấp một cách để tạo cho một phần tử kiểu "before-open" (trước khi mở) mà trình duyệt có thể tra cứu trước khi phần tử đó mở trên trang. Điều này rất hữu ích cho ảnh động vào cảnh và để tạo ảnh động cho các phần tử như cửa sổ bật lên hoặc hộp thoại. Bạn cũng có thể sử dụng tính năng này bất cứ khi nào tạo một phần tử và muốn thêm khả năng tạo ảnh động cho phần tử đó. Hãy xem ví dụ sau đây để minh hoạ cách chuyển đổi thuộc tính popover (xem phần tiếp theo) vào chế độ xem và vào lớp trên cùng một cách mượt mà từ bên ngoài khung nhìn.

Tìm hiểu thêm về @starting-style và các hiệu ứng chuyển động khác khi bắt đầu.

Lớp phủ

Bạn có thể thêm thuộc tính overlay CSS mới vào hiệu ứng chuyển đổi để cho phép các phần tử có kiểu lớp trên cùng (chẳng hạn như popover và dialog) chuyển động mượt mà ra khỏi lớp trên cùng. Nếu bạn không chuyển đổi lớp phủ, phần tử của bạn sẽ ngay lập tức quay lại trạng thái bị cắt, biến đổi và che khuất, đồng thời bạn sẽ không thấy quá trình chuyển đổi diễn ra. Tương tự, overlay cho phép ::backdrop tạo ảnh động mượt mà khi được thêm vào một phần tử lớp trên cùng.

Tìm hiểu thêm về lớp phủ và các hiệu ứng thoát khác.

Popover

Popover API giúp bạn tạo các phần tử nằm trên phần còn lại của trang. Những thành phần này có thể bao gồm trình đơn, lựa chọn và chú thích. Bạn có thể tạo một cửa sổ bật lên đơn giản bằng cách thêm thuộc tính popover và một id vào phần tử bật lên, đồng thời kết nối thuộc tính id của phần tử đó với một nút gọi bằng popovertarget="my-popover". Popover API hỗ trợ:

• Thúc đẩy lên lớp trên cùng. Cửa sổ bật lên sẽ xuất hiện trên 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 chỉ mục z.
• 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. 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.
• Liên kết phím hỗ trợ tiếp cậ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.
• Liên kết thành phần có thể truy cập. Kết nối một phần tử cửa sổ bật lên với một trình kích hoạt cửa sổ bật lên theo ngữ nghĩa.

Quy tắc ngang trong select

Một thay đổi nhỏ khác đối với HTML đã được triển khai trong Chrome và Safari năm nay là khả năng thêm các phần tử đường kẻ ngang (thẻ <hr>) vào các phần tử <select> để giúp phân tách nội dung một cách trực quan. Trước đây, việc đặt thẻ <hr> vào một lựa chọn sẽ không hiển thị. Tuy nhiên, năm nay, cả Safari và Chrome đều hỗ trợ tính năng này, giúp tách biệt nội dung tốt hơn trong các phần tử <select>.

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

Chọn Minh hoạ trực tiếp

Tìm hiểu thêm về cách sử dụng hr trong select

:các lớp giả hợp lệ và không hợp lệ của người dùng

Ổn định trong tất cả các trình duyệt trong năm nay, :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. Một thành phần điều khiển biểu mẫu bắt buộc và trống sẽ khớp với :invalid ngay cả khi người dùng chưa bắt đầu tương tác với trang. Thành phần kiểm soát tương tự sẽ không khớp với :user-invalid cho đến khi người dùng thay đổi dữ liệu đầu vào và để dữ liệu đó ở trạng thái không hợp lệ.

Với các bộ chọn mới này, bạn không cần viết mã có trạng thái để theo dõi dữ liệu đầu vào mà người dùng đã thay đổi.

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-*.

Accordion độc quyền

Một kiểu giao diện người dùng phổ biến trên web là thành phần accordion. Để triển khai mẫu này, bạn kết hợp một số phần tử <details>, thường là nhóm chúng một cách trực quan để cho biết rằng chúng thuộc cùng một nhóm.

Điểm mới trong Chrome 120 là hỗ trợ thuộc tính name trên các phần tử <details>. Khi thuộc tính này được sử dụng, nhiều phần tử <details> có cùng giá trị name sẽ tạo thành một nhóm ngữ nghĩa. Bạn chỉ có thể mở tối đa một phần tử trong nhóm cùng một lúc: khi bạn mở một trong các phần tử <details> trong nhóm, phần tử đã mở trước đó sẽ tự động đóng. Loại bảng xếp chữ này được gọi là bảng xếp chữ độc quyền.

Các phần tử <details> thuộc một thành phần accordion độc quyền không nhất thiết phải là các phần tử cùng cấp. Chúng có thể nằm rải rác trong tài liệu.