Hàm lượng giác

Chrome 111 đã hỗ trợ thêm các hàm lượng giác sin(), cos(), tan(), asin(), acos(), atan() và atan2(), cung cấp các hàm này trên tất cả các công cụ chính. Các 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 lớp giả :nth-child(), bạn có thể chọn các phần tử trong DOM theo chỉ mục của các phần tử đó. Khi sử dụng ngữ pháp vi mô An+B, 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 phần tử giả lập :nth-*() sẽ tính đến tất cả phần tử con. Kể từ Chrome 111, bạn có thể tuỳ ý truyền danh sách bộ chọn vào :nth-child() và :nth-last-child(). Bằng cách đó, bạn có thể lọc trước danh sách phần tử con trước khi An+B thực hiện việc của nó.

Trong bản minh hoạ sau, logic 3n+1 chỉ được áp dụng cho những 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 linh động bộ chọn được sử dụng.

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

Phạm vi

Chrome 118 đã hỗ trợ thêm @scope, một quy tắc at cho phép bạn so khớp bộ chọn theo phạm vi với một cây con cụ thể của tài liệu. Với tính năng tạo kiểu theo phạm vi, bạn có thể chỉ định chính xác các 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 ghép nối chặt chẽ các phần tử đó với cấu trúc DOM.

Một cây con trong phạm vi được xác định bằng gốc phạm vi (ranh giới trên) và 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 trong phạm vi sau đây chỉ nhắm đến các phần tử <img> nằm giữa phần tử .card và bất kỳ thành phần lồng nhau nào được bộ chọn [data-component] so khớp.

@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 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ề phạm vi

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ý độ cụ thể, phạm vi không có phần mở đầu và cách @scope ảnh hưởng đến trình tự.

Lồng ghép

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

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 */
}

Lồng ghép có thể làm giảm trọng số của biểu định kiểu, giảm mức hao tổn của 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 giới hạn yêu cầu sử dụng & ở nhiều nơi, nhưng sau đó đã được gỡ bỏ bằng cập nhật cú pháp nhúng thoải mái.

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

Lưới phụ

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

Lưới con đặc biệt hữu ích khi căn chỉnh các thành phần đồng cấp với nội dung động của nhau. Điều này giúp nhà văn bản quảng cáo, nhà văn bản trải nghiệm người dùng và người dịch không phải cố gắng tạo văn bản dự án "phù hợp" với bố cục. Với lưới con, 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 thiết lập kiểu cho vị trí đặt chữ cái đầu tiên. Bạn có thể định vị các chữ cái ở trạng thái thả xuống hoặc nâng lên. Thuộc tính này chấp nhận hai đối số: đối số đầu tiên cho biết độ sâu thả chữ cái vào đoạn văn tương ứng và đối số thứ hai cho biết độ cao để nâng chữ cái lên trên đoạn vă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 tiên

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

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

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

Là nhà phát triển, bạn không biết kích thước cuối cùng, kích thước phông chữ hoặc thậm chí là ngôn ngữ của dòng 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 ngắt dòng văn bản đều nằm trong trình duyệt. Vì trình duyệt có 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 trình duyệt là một ứng cử viên tuyệt vời để xử lý bố cục văn bản nâng cao và chất lượng cao.

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

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

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

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

CSS và màu sắc hiện 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 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 không gian màu thay thế. – Pha trộn màu sắc bằng color-mix(). – Tạo 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

Việc pha trộn màu sắc là một nhiệm vụ kinh điển và trong năm 2023, CSS cũng có thể thực hiện việc này. Bạn không chỉ có thể pha màu trắng hoặc đen với một màu khác, mà còn có thể pha độ trong suốt và thực hiện tất cả những việc này trong không gian màu bất kỳ mà bạn chọn. Đây đồng thời là một tính năng màu cơ bản và một tính năng màu nâng cao.

Bạn có thể coi color-mix() là một thời điểm trong một độ dốc. Trong khi hiệu ứng 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 nâng cao hơn khi bạn bắt đầu tính đến không gian màu và tìm hiểu sự khác biệt giữa không gian màu kết hợp 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 biến thể màu. Hàm này mạnh hơn một chút so với color-mix() nhưng cũng là một chiến lược khác để xử lý màu. color-mix() có thể kết hợp màu trắng để làm sáng màu, trong đó RCS cho phép truy cập chính xác vào kênh độ sáng và có thể sử dụng calc() trên kênh để giảm hoặc tăng độ sáng theo phương thức 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 và sửa đổi giá trị đó bằng calc(). Thay đổi tuyệt đối là thay đổi trong đó bạn thay thế giá trị kênh bằng một giá trị hoàn toàn mới, như đặt độ mờ thành 50%. Cú pháp này cung cấp cho bạn các công cụ có ý nghĩa để tạo giao diện, biến thể đúng thời điểm và nhiều tính năng khác.

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

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

Thay vì sử dụng thông tin kích thước chung của khung nhìn để áp dụng kiểu CSS, truy vấn vùng chứa hỗ trợ truy vấn phần tử mẹ trong trang. Điều này có nghĩa là các thành phần có thể được tạo kiểu một cách linh động trên nhiều bố cục và trong nhiều chế độ xem. Các truy vấn vùng chứa về kích thước đã trở nên ổ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 (14 tháng 2).

Để sử dụng tính năng này, trước tiên, hãy thiết lập vùng chứa trên phần tử mà bạn đang truy vấn, sau đó, tương tự như truy vấn nội dung đa phương tiệ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, kích thước truy vấn vùng chứa cqi (thể hiện kích thước của vùng chứa nội tuyến) được dùng để định 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

Truy vấn kiểu đã ra mắt với một phần triển khai trong Chrome 111. Hiện tại, với các truy vấn kiểu, 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ị 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 kiểu

Bản minh hoạ truy vấn kiểu

Mặc dù cách này 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ố ưu điểm. Thứ nhất, với truy vấn kiểu, bạn có thể cập nhật giá trị trong CSS nếu cần cho các trạng thái giả. Ngoài ra, trong các phiên bản triển khai trong tương lai, 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 thuộc tính-giá trị 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 cung cấp "bộ chọn mẹ" trong CSS. Với bộ chọn :has() xuất hiện trong Chrome 105, việc này hiện có thể thực hiện được. Ví dụ: việc sử dụng .card:has(img.hero) sẽ chọn các phần tử .card có hình ảnh chính làm phần tử con.

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

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

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 lựa chọn hơn so với phần tử mẹ. Khi sử dụng nhiều bộ kết hợp CSS, bạn không chỉ có thể di chuyển 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> đang được di chuột qua.

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

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

Truy vấn nội dung đa phương tiệ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 chức năng của các thiết bị khác nhau.

Hầu hết các thiết bị mà bạn thiết kế đều có thể có tốc độ làm mới nhanh. Điều này bao gồm cả máy tính và hầu hết 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 có công suất thấp có thể có tốc độ làm mới chậm. Nếu thiết bị không thể xử lý ảnh động hoặc các bản cập nhật thường xuyên, bạn có thể tiết kiệm mức sử dụng pin hoặc cập nhật khung hiển thị bị lỗi.

Tìm hiểu thêm về @media (bản cập nhật).

Truy vấn nội dung đa phương tiện bằng tập lệnh

Bạn có thể dùng truy vấn nội dung đa phương tiện bằng tập lệnh để kiểm tra xem có JavaScript hay không. Điều này rất hữu ích cho việc cải tiến dần. Trước truy vấn nội dung đa phương tiện này, chiến lược để phát hiện xem có JavaScript 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 theo lựa chọn ưu tiên của hệ thống vì không có JavaScript. Hoặc hãy cân nhắc thành phần nút chuyển – nếu có JavaScript, bạn có thể vuốt nút chuyển 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ó thể tạo tập lệnh, đồng thời cung cấp trải nghiệm cơ bản có ý nghĩa nếu tắt tính năng tạo tập lệnh.

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

Truy vấn nội dung nghe nhìn có độ minh bạch thấp

Giao diện không mờ có thể gây đau đầu hoặc gây khó khăn về thị giác cho nhiều loại khiếm thị. Đó là lý do Windows, macOS và iOS có các tuỳ chọ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 ưu tiên khác, cho phép bạn sáng tạo trong khi vẫn điều chỉnh cho 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 phủ lên nội dung khác. Trong các trường hợp khác, bạn có thể điều chỉnh độ mờ của một màu để trở nên mờ hoặc gần như mờ. Bài đăng trên blog sau đây có nhiều bản minh hoạ đầy cảm hứng hơn, phù hợp với lựa chọn ưu tiên của người dùng. Hãy xem các bản minh hoạ này nếu bạn muốn biết thời điể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 trên một trang. Với API Chuyển đổi thành phần hiển thị, ​​bạn có thể tạo hiệu ứng chuyển đổi hình ảnh giữa hai trạng thái trang của Ứng dụng một trang. Các hiệu ứng chuyển đổi này có thể là hiệu ứng chuyển đổi toàn trang hoặc các hiệu ứng nhỏ hơn trên trang, chẳng hạn như thêm hoặc xoá một mục mới vào danh sách.

Cốt lõi của API Chuyển đổi khung hiển thị 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. Để làm việc này, bạn cần chụp ảnh trước và sau, sau đó chuyển đổi giữa hai chế độ này. Khi sử dụng CSS, bạn có thể kiểm soát nội dung được chụp và tuỳ ý tuỳ chỉnh cách tạo ảnh động cho các ảnh chụp nhanh này.

API chuyển đổi khung hiển thị dành cho ứng dụng trang đơn được vận chuyển trong Chrome 111. Tìm hiểu thêm về Chuyển đổi khung hiển thị.

Hàm tốc độ tuyến tính

Đừng để tên của hàm này đánh lừa bạn. Hàm linear() (đừng nhầm với từ khoá linear) cho phép bạn tạo các hàm làm dịu phức tạp theo cách đơn giản, với sự đánh đổi là mất một số độ chính xác.

Trước linear() (được xuất bản trong Chrome 113), không thể tạo hiệu ứng nảy hoặc hiệu ứng lò xo trong CSS. Nhờ linear(), bạn có thể ước chừng các hiệu ứng làm dịu này bằng cách đơn giản hoá chúng thành một loạt các đ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 sử dụng trình tạo tốc độ tuyến tính.

Kết thúc cuộn

Nhiều giao diện bao gồm tương tác cuộn và đôi khi giao diện cần đồng bộ hoá thông tin có 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 phương thức thời gian chờ không chính xác do phương thức này có thể kích hoạt trong khi ngón tay của người dùng vẫn đang hiển thị trên màn hình. Với sự kiện scrollend, bạn có một sự kiện cuộn kết thúc đúng thời điểm để biết liệu người dùng có đang thực hiện cử chỉ hay không.

Điều này rất 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ó. Giờ đây, bạn có thể xoá và thay thế các đoạn mã thử kết thú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 do cuộn

Ảnh động do cuộn là một tính năng thú vị có trong Chrome 115. Các lớp này cho phép bạn lấy một ảnh động CSS hoặc ảnh động được tạo bằng API Ảnh động trên web hiện có và ghép nối ảnh động đó với độ dời cuộn của thanh cuộn. Khi bạn cuộn lên và xuống – hoặc sang trái và phải trong thanh cuộn ngang – ảnh động được liên kết sẽ quét qua 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 thanh cuộn, như minh hoạ trong bản minh hoạ sau. Khi bạn cuộn đến cuối trang, văn bản sẽ hiển thị từng ký tự.

Với ViewDòng thời gian, bạn có thể theo dõi một phần tử khi phần tử đó đi qua cửa sổ cuộn. 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, mỗi hình ảnh sẽ tự hiển thị từ thời điểm hình ảnh đó đi vào cuộn cho đến khi hình ảnh đó ở giữa.

Vì ảnh động do cuộn hoạt động với ảnh động CSS và API Ảnh động trên web, nên bạn có thể hưởng lợi từ tất cả các 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 trên luồng chính. Giờ đây, bạn có thể có ảnh động mượt mà, do thao tác cuộn điều khiển, chạy trên luồng chính chỉ với một vài dòng mã bổ sung – còn gì tuyệt hơn?

Để tìm hiểu thêm về ảnh động do cuộn điều khiển, hãy xem bài viết này có đầy đủ thông tin chi tiết hoặc truy cập vào scroll-driven-animations.style có nhiều bản minh hoạ.

Tệp đính kèm bị hoãn trong tiến trình

Khi áp dụng ảnh động điều khiển cuộn qua CSS, cơ chế tra cứu để tìm trình cuộn kiểm soát luôn đi lên cây DOM, khiến cho nó giới hạn trong việc chỉ cuộn đối tượng cấp trên. Tuy nhiên, phần tử cần tạo ảnh độ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ử ảnh động tìm thấy một tiến trình 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 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, giúp nó có phạm vi rộng hơn. Khi đó, mọi thành phần con của thành phần mẹ dùng chung đó đều có thể sử dụng tiến trình có tên đó.

có thể tìm thấy scroll-timeline được khai báo trên thanh cuộ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 riêng biệt, 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 riêng biệt nào tại điểm 50% thay vì tại điểm 0%. Bạn có thể thực hiện việc này bằng thuộc tính transition-behavior sử dụng từ khoá allow-discrete hoặc trong thuộc tính transition dưới dạng viết tắt.

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

@starting-style

Quy tắc CSS @starting-style dựa trên các tính năng web mới để tạo ảnh động đến và đi từ display: none. Quy tắc này đưa ra cách để tạo kiểu "trước khi mở" cho phần tử 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 nhập và để tạo ảnh động trong các phần tử như cửa sổ bật lên hoặc hộp thoại. Lớp này cũng có thể hữu ích bất cứ khi nào bạn tạo một phần tử và muốn tạo ảnh động cho phần tử đó. Hãy lấy ví dụ sau đây để tạo ảnh động cho thuộc tính popover (xem phần tiếp theo) vào khung hiển thị và đưa 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 ảnh động mục nhập khác.

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) tạo ảnh động ra khỏi lớp trên cùng một cách mượt mà. 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 cách mượt mà khi được thêm vào phần tử lớp trên cùng.

Tìm hiểu thêm về lớp phủ và các ảnh động thoát khác.

Cửa sổ bật lên

Popover API giúp bạn tạo các thành phần nằm trên phần còn lại của trang. Các thành phần này có thể bao gồm trình đơn, lựa chọn và chú giải công cụ. 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à 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 nút gọi bằng popovertarget="my-popover". API Popover hỗ trợ:

• Quảng bá 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 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à tiêu điểm trả lại.
• Quản lý tiêu điểm 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 hỗ trợ tiếp cận. 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 hỗ trợ tiếp cận. Kết nối phần tử popover với trình kích hoạt popover theo ngữ nghĩa.

Quy tắc dòng ngang trong lựa chọn

Một thay đổi nhỏ khác đối với HTML đã có mặt trên Chrome và Safari trong năm nay, đó là khả năng thêm các phần tử quy tắc theo chiều ngang (thẻ <hr>) vào các phần tử <select> để giúp chia nhỏ nội dung của bạn một cách trực quan. Trước đây, việc đặt thẻ <hr> vào một phần tử select sẽ không hiển thị. Nhưng năm nay, cả Safari và Chrome đều hỗ trợ tính năng này, cho phép phân tách 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 Bả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ả 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ế độ đ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. 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. Chế độ điều khiển tương tự sẽ không khớp :user-invalid cho đến khi người dùng thay đổi giá trị đầu vào và để nội dung đó ở 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 phải viết mã 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 phần tử giả xác thực biểu mẫu user-*.

Bảng điều khiển độc quyền

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

Tính năng mới trong Chrome 120 là hỗ trợ thuộc tính name trên các phần tử <details>. Khi sử dụng thuộc tính này, 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 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> của nhóm, phần tử đang mở trước đó sẽ tự động đóng. Loại accordion này được gọi là accordion độc quyền.

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