Đã bao bọc CSS: Năm 2023!
Chuyển đến nội dung:
- Thiết kế đáp ứng
- Cụm từ tìm kiếm về vùng chứa
- Truy vấn kiểu
- :has chọn
- Cập nhật truy vấn về nội dung nghe nhìn
- Viết tập lệnh truy vấn nội dung nghe nhìn
- Truy vấn nội dung nghe nhìn minh bạch
Rất ấn tượng! 2023 là một năm thành công của CSS!
Từ #Interop2023 đến nhiều trang đích mới trong không gian CSS và giao diện người dùng nhằm hỗ trợ những chức năng mà các nhà phát triển từng nghĩ là không thể trên nền tảng web. Giờ đây, mọi trình duyệt hiện đại đều hỗ trợ các truy vấn vùng chứa, lưới con, bộ chọn :has() và hàng loạt các hàm và không gian màu mới. Trong Chrome, chúng tôi hỗ trợ ảnh động dựa trên thao tác cuộn chỉ dành cho CSS và tạo ảnh động mượt mà giữa các chế độ xem web bằng chuyển đổi chế độ xem. Hơn hết, trên hết, có rất nhiều dữ liệu gốc mới đã được cung cấp để mang đến trải nghiệm tốt hơn cho nhà phát triển như lồng ghép CSS và kiểu có giới hạn.
Một năm trôi qua thật tuyệt! Vì vậy, chúng tôi muốn kết thúc năm quan trọng này để tôn vinh và cảm nhận tất cả nỗ lực của các nhà phát triển trình duyệt và cộng đồng web đã giúp chúng tôi đạt được điều này.
Nền móng kiến trúc
Hãy bắt đầu với những nội dung cập nhật về ngôn ngữ và các chức năng chính của CSS. Đây là những tính năng nền tảng cho cách bạn soạn thảo và sắp xếp các kiểu, đồng thời trao quyền lớn cho nhà phát triển.
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(), giúp các hàm này có thể sử dụng được trên mọi 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, việc bố trí các phần tử trên một vòng tròn xung quanh tâm đã chọn sẽ dễ dàng hơn nhiều.
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-*
Hỗ trợ trình duyệt
- 111
- 111
- 113
- 9
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 chúng. Khi sử dụng cú pháp vi mô An+B, bạn có thể kiểm soát tốt các phần tử mình muốn chọn.
Theo mặc định, trình giả :nth-*() xem xét tất cả cá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 thành phần con trước khi An+B thực hiện.
Trong bản minh hoạ sau, logic 3n+1 chỉ được áp dụng cho các 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 để linh động thay đổi bộ chọn đã sử dụng.
Tìm hiểu thêm về các lựa chọn phức tạp thứ n-*.
Phạm vi
Chrome 118 đã hỗ trợ thêm cho @scope, một quy tắc at cho phép bạn so khớp bộ chọn phạm vi với một cây con cụ thể của tài liệu. Với việc tạo kiểu theo phạm vi, bạn có thể xác định thật cụ thể những phần tử mình chọn mà không cần phải viết các 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ởi gốc phạm vi (ranh giới trên) và giới hạn phạm vi (giới hạn dưới) (không bắt buộc).
@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/
Quy tắc kiểu được đặt bên trong một khối phạm vi sẽ chỉ nhắm mục tiêu các phần tử trong cây con đã được cắt. 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à mọi thành phần lồng nhau mà bộ chọn [data-component] khớp.
@scope (.card) to ([data-component]) {
img { … }
}
Trong bản minh hoạ sau đây, các phần tử <img> trong thành phần băng chuyền không khớp do giới hạn về phạm vi đã á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
@scopeTì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ý mức độ cụ thể, các phạm vi ít mở đầu và mức tác động của @scope vào tầng.
Lồng ghép
Trước khi lồng nhau, bạn cần khai báo rõ ràng từng bộ chọn một, tách biệt với nhau. Điều này dẫn đến tình trạng lặp lại, chứa hàng loạt biểu định kiểu và tình trạng soạn thảo thư rác rải rác. Giờ đây, bạn có thể tiếp tục bộ chọn với 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 */
}
Lồng video ghi lại chuyển động trên màn hình
Bản minh hoạ trực tiếp cách lồng ghép
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. Ban đầu, cú pháp này được phát hành với giới hạn là yêu cầu sử dụng & ở nhiều nơi, nhưng sau đó đã được loại bỏ bằng bản cập nhật cú pháp lồng ghép thoải mái.
Tìm hiểu thêm về cách 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 hàng riêng của mình bằng cách dùng subgrid làm giá trị cho các hàng hoặc cột của lưới.
Ghi màn hình bằng lưới phụ
Bản minh hoạ trực tiếp về lưới phụ
Lưới phụ đặ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 người viết nội dung quảng cáo, người viết nội dung UX và biên dịch viên không phải cố gắng tạo nội dung dự án "phù hợp" vào 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ụ.
Kiểu chữ
Kiểu chữ trên web có một số thay đổi quan trọng trong năm 2023. Một tính năng nâng cao tăng dần đặc biệt hữu ích là thuộc tính text-wrap. Thuộc tính này cho phép điều chỉnh bố cục kiểu chữ, được soạn trong trình duyệt mà không cần tập lệnh bổ sung. Tạm biệt các dòng dài khó xử lý và chào đón các kiểu chữ dễ dự đoán hơn!
Chữ cái đầu
Bắt đầu từ đầu năm nay 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í của các chữ cái đầu tiên. Bạn có thể đặt các chữ cái ở trạng thái thả xuống hoặc nâng lên. Cơ sở lưu trú này chấp nhận 2 đối số: đối số thứ nhất về độ sâu của chữ cái để thả chữ cái vào đoạn văn tương ứng và đối số thứ hai về mức độ cần phó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 đây.
Ảnh chụp màn hình chữ cái đầu
Bản minh hoạ chữ cái đầu
initial-letter cho phần tử giả ::first-letter để phần tử này thay đổi.Tìm hiểu thêm về chữ cái đầu.
text-wrap: cân bằng và đẹp
Là nhà phát triển, bạn không biết kích thước cuối cùng, cỡ chữ hay thậm chí là ngôn ngữ của dòng tiêu đề hoặc đoạn. Tất cả các biến cần thiết để xử lý gói văn bản một cách hiệu quả và thẩm mỹ đều nằm trong trình duyệt. Vì trình duyệt không 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à khu vực được phân bổ, nên trình duyệt này trở thành một ứng 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 xuất hiện hai kỹ thuật gói văn bản mới, một kỹ thuật gọi 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 hoà trong khi pretty tìm cách ngăn chặn trẻ mồ côi và đảm bảo dấu gạch nối lành mạnh. 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.
Bản ghi màn hình dạng văn bản
Bản minh hoạ trực tiếp dạng văn bản
balance và pretty lên tiêu đề và đoạn. Hãy thử dịch bản minh hoạ sang ngôn ngữ khác!Tìm hiểu thêm về thuộc tính text-wrap: cán cân.
Màu
2023 là năm màu sắc của nền tảng web. Với các hệ màu và chức năng mới hỗ trợ tuỳ chỉnh giao diện màu linh động, bạn có thể tạo ra các giao diện sống động, tươi tốt mà người dùng của bạn xứng đáng nhận được và cũng có thể tuỳ chỉnh các giao diện đó!
Không gian màu HD (Cấp độ 4)
Từ phần cứng đến phần mềm, CSS cho đến đèn nhấp nháy; có thể mất rất nhiều công sức để máy tính của chúng ta thử và 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, không gian màu mới, các chức năng màu sắc và những tính năng mới.
Giờ đây, CSS và màu có thể:
– Kiểm tra xem phần cứng màn hình của người dùng có hỗ trợ dải màu HDR gam 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 độ dốc bằng màu HDR,
– Nội dung các dải chuyển màu trong hệ màu thay thế.
– Kết hợp màu sắc với color-mix().
– Tạo biến thể màu sắc có cú pháp màu tương đối.
Video ghi lại chuyển động trên màn hình màu 4
Bản minh hoạ màu 4
Tìm hiểu thêm về Màu 4 và hệ màu.
hàm phối màu
Kết hợp màu sắc là một công việc quen thuộc và trong năm 2023, CSS cũng có thể làm việc này. Bạn không chỉ có thể kết hợp màu trắng hoặc đen thành một màu, mà còn có thể kết hợp độ trong suốt với bất kỳ không gian màu nào bạn chọn. Đó đồng thời là tính năng màu cơ bản và tính năng màu nâng cao.
color-mix() Video ghi lại chuyển động trên màn hình
Bản minh hoạ color-mix()
Bạn có thể xem color-mix() là một khoảnh khắc thời gian từ một dải chuyển màu. Trong trường hợp dải chuyển màu thể hiện 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ỉ thể hiện một bước. Mọi thứ sẽ tiến xa hơn khi bạn bắt đầu tính đến hệ màu và tìm hiểu xem hệ màu kết hợp có thể khác nhau như thế nào 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 sắc 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 sắc. Phương pháp này hiệu quả 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.
Ghi lại chuyển động trên màn hình bằng RCS
Bản minh hoạ trực tiếp RCS
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 sắc. Thay đổi tương đối là thay đổi trong đó 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à 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ụ ý nghĩa để tuỳ chỉnh giao diện, chỉ các biến thể theo thời gian và nhiều tính năng khác.
Tìm hiểu thêm về cú pháp màu tương đối.
Thiết kế thích ứng
Thiết kế thích ứng phát triển vào năm 2023. Năm đột phá này đã ra mắt các tính năng mới, thay đổi hoàn toàn cách chúng tôi xây dựng trải nghiệm web thích ứng và mở ra một mô hình mới cho thiết kế thích ứng dựa trên thành phần. Sự kết hợp của truy vấn vùng chứa và :has() hỗ trợ các thành phần sở hữu kiểu phản hồi và logic dựa trên kích thước của thành phần mẹ, cũng như sự hiện diện hoặc trạng thái của bất kỳ thành phần con nào trong thành phần con đó. Điều đó có nghĩa là cuối cùng bạn có thể tách bố cục cấp trang khỏi bố cục cấp thành phần và viết logic một lần để sử dụng thành phần của bạn ở mọi nơi!
Truy vấn về vùng chứa kích thước
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. Tức là các thành phần có thể được tạo kiểu theo cách linh động trên nhiều bố cục và trong nhiều khung hiển thị. 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ử bạn đang truy vấn, sau đó tương tự như truy vấn đ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ề 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 cùng dòng) được dùng để định kích thước tiêu đề thẻ.
Ghi lại chuyển động trên màn hình cho @container
Bản minh hoạ về @container
Tìm hiểu thêm về cách sử dụng truy vấn vùng chứa.
Truy vấn về 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. 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 nếu giá trị thuộc tính tuỳ chỉnh tồn tại 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ạ về kiểu truy vấn
Mặc dù điều 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. Đầu tiên là với các truy vấn kiểu, bạn có thể cập nhật giá trị trong CSS khi cần thiết 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 phạm vi 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 phải có một "bộ chọn cha 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ụ: 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()
:has(): Thẻ không có/có hình ảnhVì :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 các bộ kết hợp CSS khác nhau, bạn không chỉ di chuyển được cây DOM mà còn thực hiện các lựa chọn đi ngang. Ví dụ: li:has(+ li:hover) sẽ chọn phần tử <li> đứng trước phần tử <li> đang di chuột.
Video ghi lại chuyển động trên màn hình :has()
Bản minh hoạ :has()
:has(): Gắn vào đếTìm hiểu thêm về bộ chọn CSS :has().
Cập nhật truy vấn về nội dung nghe nhìn
Truy vấn phương tiện update cung cấp cho bạn cách đ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 khả năng của các thiết bị khác nhau.
Hầu hết các thiết bị bạn thiết kế có khả năng có tốc độ làm mới nhanh. Áp dụng cho máy tính và hầu hết thiết bị di động. Thiết bị đọc sách điện tử và thiết bị, chẳng hạn như hệ thống thanh toán sử dụng công suất thấp, có thể có tốc độ làm mới chậm. Việc biết rằng thiết bị không thể xử lý ảnh động hoặc các bản cập nhật thường xuyên, có nghĩa là 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.
Cập nhật Screencast
Cập nhật bản minh hoạ
Tìm hiểu thêm về @media (update).
Viết tập lệnh truy vấn nội dung nghe nhìn
Bạn có thể sử dụng truy vấn phương tiện của tập lệnh để kiểm tra xem có JavaScript hay không. Điều này rất tốt cho tính năng nâng cao tăng dần. Trước khi truy vấn nội dung đa phương tiện này, chiến lược để phát hiện xem có thể sử dụng 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 để thử nghiệm qua Công cụ của Chrome cho nhà phát triển tại đây.
Tập lệnh ghi lại chuyển động trên màn hình
Bản minh hoạ tập lệnh
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 xem xét thành phần nút chuyển – nếu có JavaScript thì người dùng có thể vuốt nút chuyển bằng một 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 tập lệnh có sẵn và vẫn cung cấp trải nghiệm nền tảng có ý nghĩa nếu tập lệnh bị tắt.
Tìm hiểu thêm về tập lệnh.
Truy vấn nội dung nghe nhìn có độ trong suốt giảm
Giao diện không mờ có thể gây đau đầu hoặc khó khăn về thị lực đối với nhiều loại khiếm khuyết thị giác. Đó là lý do Windows, macOS và iOS có các lựa chọn ưu tiên về hệ thống có thể làm giảm hoặc xoá bỏ tính minh bạch khỏi giao diện người dùng. Truy vấn phương tiện này cho prefers-reduced-transparency phù hợp với các truy vấn phương tiện truyền thông tùy chọ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.
Giảm độ trong suốt của Screencast
Bản minh hoạ việc giảm độ trong suốt
Trong một số trường hợp, bạn có thể cung cấp bố cục thay thế không có nội dung che phủ nội dung khác. Trong các trường hợp khác, độ mờ của màu có thể được điều chỉnh thành mờ hoặc gần mờ. Bài đăng sau đây trên blog có nhiều bản minh hoạ truyền 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 tham khảo các bản minh hoạ này nếu bạn muốn biết những thời điểm mà truy vấn đa phương tiện này có giá trị.
Tìm hiểu thêm về @media (prefers-reduced-transparency).
Tương tác
Tương tác là nền tảng của trải nghiệm kỹ thuật số. Tính năng này giúp người dùng nhận được phản hồi về nội dung họ đã nhấp vào và vị trí của họ trong không gian ảo. Năm nay, có nhiều tính năng thú vị đã được triển khai giúp việc soạn thảo và triển khai tương tác trở nên dễ dàng hơn, đem lại trải nghiệm duyệt web mượt mà hơn cho người dùng và mang lại trải nghiệm mượt mà hơn cho người dùng.
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 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 trang đơn. Những chuyển đổi này có thể là chuyển đổi toàn bộ trang hoặc những hoạt động nhỏ hơn trên một trang như thêm hoặc xoá một mục mới khỏi danh sách.
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 lên trạng thái mới và API sẽ xử lý mọi việc cho bạn. Để làm việc này, bạn có thể chụp ảnh trước và sau, sau đó chuyển đổi giữa hai chế độ này. Bằng cách sử dụng CSS, bạn có thể kiểm soát nội dung được chụp và tuỳ chỉnh cách các ảnh chụp nhanh này được tạo hiệu ứng động.
Ghi lại chuyển động trên màn hình khi phát trực tuyến
Bản minh hoạ VT
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ề Lượt chuyển đổi chế độ xem.
Hàm tốc độ tuyến tính
Hỗ trợ trình duyệt
- 113
- 113
- 112
- 17,2
Đừng để tên của hàm này đánh lừa bạn. Hàm linear() (đừng nhầm lẫn với từ khoá linear) hỗ trợ bạn tạo các hàm gia tốc phức tạp theo cách đơn giản, nhưng sẽ bị mất độ chính xác.
Trước linear() (được xuất bản trong Chrome 113), không thể tạo hiệu ứng thoát hoặc hiệu ứng lò xo trong CSS. Nhờ linear(), bạn có thể ước chừng các tốc độ này bằng cách đơn giản hoá chúng thành một chuỗi các điểm, sau đó nội suy tuyến tính giữa các điểm này.
linear() sử dụng các điểm này và nội suy theo đường thẳng giữa chúng.Screencast
Bản minh hoạ tốc độ tuyến tính
linear().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 các 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 được xác định thời gian hoàn hảo để biết liệu người dùng có còn đang thực hiện cử chỉ giữa chừng hay không.
Screencast
Bản minh hoạ Scrollend
Đ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 giản là không có sẵn. Giờ đây, bạn có thể xoá các đoạn mã cố gắng cuộn không chính xác và thay thế bằng 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 theo hướng cuộn
Ảnh động dựa trên cuộn là một tính năng thú vị có trong Chrome 115. Các đối tượng này cho phép bạn tạo ảnh động CSS hiện có hoặc ảnh động được tạo bằng Web Animations API rồi ghép nối với độ lệch cuộn của trình cuộn. Khi bạn cuộn lên và xuống – hoặc trái và phải trong trình cuộn ngang – ảnh động được liên kết sẽ tua đi và tua lại theo phản hồi trực tiếp.
Với ScrollDòng thời gian, bạn có thể theo dõi tiến trình tổng thể của một trình 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ẽ tự hiển thị theo từng ký tự một.
Ghi lại chuyển động trên màn hình SDA
Bản minh hoạ SDA
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. Phương thức 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 tự hiển thị kể từ thời điểm đi vào cửa sổ cuộn cho đến khi nằm ở chính giữa.
Ghi lại chuyển động trên màn hình minh hoạ SDA
Bản minh hoạ trực tiếp SDA
Do ảnh động dựa trên cuộn hoạt động với ảnh động CSS và Web Animations API, nên bạn có thể hưởng lợi từ tất cả những lợi thế mà các API này mang lại. Điều đó bao gồm cả khả năng làm cho những ảnh động này chạy ra khỏi luồng chính. Giờ đây, bạn có thể có ảnh động mượt mà, được điều khiển bằng thao tác cuộn, chạy khỏi luồng chính chỉ với một vài dòng mã bổ sung – điểm không thích là gì?
Để tìm hiểu thêm về ảnh động dựa trên 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-Navigation-Animations.style, trong đó có nhiều bản minh hoạ.
Tệp đính kèm có tiến trình bị hoãn
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à 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 dòng thời gian cuộn được đặt tên của một đối tượng không phải đối tượng cấp trên, hãy sử dụng thuộc tính timeline-scope trên một thành phần mẹ dùng chung. Điều này cho phép đính kèm scroll-timeline hoặc view-timeline đã xác định có tên đó, từ đó có phạm vi rộng hơn. Với vị trí này, bất kỳ người con nào của nhà xuất bản mẹ dùng chung đó đều có thể sử dụng dòng thời gian bằng tên đó.
timeline-scope được khai báo trên thành phần mẹ được chia sẻ, bạn có thể tìm thấy scroll-timeline được khai báo trên trình cuộn bằng phần tử sử dụng nó làm animation-timelineBản ghi màn hình minh hoạ
Bản minh hoạ trực tiếp
Tìm hiểu thêm về timeline-scope.
Ảnh động thuộc tính rời rạc
Trong năm 2023, một tính năng mới khác là khả năng tạo ảnh động rời rạc, chẳng hạn như tạo ảnh động đến và từ display: none. 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 tại điểm 50% thay vì tại điểm 0%. Bạn có thể thực hiện điều này với thuộc tính transition-behavior bằng từ khoá allow-discrete hoặc thuộc tính transition dưới dạng viết tắt.
Ảnh động rời rạc. Ghi màn hình
Ảnh động rời rạc. Bản minh hoạ
Tìm hiểu thêm về cách chuyển đổi ảnh động rời rạc.
@starting-style
Quy tắc CSS @starting-style xây dựng dựa trên các tính năng mới của web để tạo ảnh động đến và từ display: none. Quy tắc này đưa ra cách để cung cấp cho một phần tử trạng thái "trước khi mở" mà trình duyệt có thể tra cứu trước khi mở phần tử trên trang. Điều này rất hữu ích cho ảnh động mục nhập cũng như để tạo ảnh động trong các phần tử như cửa sổ bật lên hoặc hộp thoại. Định dạng 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 phần tử đó có khả năng tạo hiệu ứng động. 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.
Video ghi lại chuyển động trên màn hình theo kiểu bắt đầu
Bản minh hoạ @begin-style
Tìm hiểu thêm về @starting-style và các ảnh động khác cho mục nhập.
Lớp phủ
Bạn có thể thêm thuộc tính CSS overlay 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 hiệu ứng động từ lớp trên cùng một cách mượt mà. Nếu bạn không chuyển lớp phủ, phần tử của bạn sẽ ngay lập tức quay trở lại bị cắt bớt, biến đổi và che khuất, đồng thời bạn sẽ không thấy hiệu ứng 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 phần tử lớp trên cùng.
Ghi lại chuyển động trên màn hình dạng lớp phủ
Bản minh hoạ trực tiếp về lớp phủ
Tìm hiểu thêm về lớp phủ và các ảnh động thoát khác.
Thành phần
2023 là một năm quan trọng với sự giao thoa giữa các thành phần kiểu và HTML, với việc đích popover và nhiều việc đang được thực hiện liên quan đến vị trí neo và tương lai của trình đơn thả xuống tạo kiểu. Các thành phần này giúp bạn dễ dàng xây dựng các mẫu giao diện người dùng phổ biến mà không cần dựa vào thư viện bổ sung hoặc xây dựng hệ thống quản lý trạng thái của riêng bạn từ đầu mỗi lần.
Cửa sổ bật lên
API Popover giúp bạn tạo các phần tử nằm ở đầu phần còn lại của trang. Các nội dung 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à id vào phần tử bật lên, đồng thời kết nối thuộc tính id của thuộc tính này với nút gọi bằng popovertarget="my-popover". API Cửa sổ bật lên 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 phía trên phần còn lại của trang, vì vậy, bạn không cần phải sử dụng chỉ mục z.
- Chức năng đóng mở đèn. 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 bạn mở cửa sổ bật lên, thẻ tiếp theo sẽ dừng lại bên trong cửa sổ bật lên.
- Liên kết bàn phím hỗ trợ tiếp cận. Thao tác nhấn phím
eschoặc bật/tắt hai lần sẽ đóng cửa sổ bật lên và tiêu điểm quay lại. - Liên kết thành phần có thể truy cập. Việc kết nối một phần tử cửa sổ bật lên với một cửa sổ bật lên sẽ kích hoạt theo ngữ nghĩa.
Ghi màn hình bật lên
Bản minh hoạ trực tiếp về cửa sổ bật lên
Quy tắc theo chiều ngang được 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 đưa thẻ <hr> vào vùng chọn sẽ không hiển thị. Nhưng năm nay, cả Safari và Chrome đều hỗ trợ tính năng này, giúp phân tách nội dung hiệu quả 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 sử dụng số giờ chọn lọc
:lớp giả hợp lệ và không hợp lệ của user
Ổ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 viết mã trạng thái để theo dõi dữ liệu đầu vào mà người dùng đã thay đổi.
:user-* Video ghi lại chuyển động trên màn hình
:user-* Bản minh hoạ trực tiếp
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-*.
Đàn phong cầm độc quyền
Hỗ trợ trình duyệt
- 120
- 120
- x
- 17,2
Mẫu giao diện người dùng phổ biến trên web là thành phần đàn phong cầm. Để triển khai mẫu này, bạn kết hợp một vài phần tử <details>, thường là nhóm theo hình ảnh trực quan để cho biết các phần tử này 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 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 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 đàn phong cầm này được gọi là đàn phong cầm độc quyền.
Các phần tử <details> thuộc một đàn phong cầm độc quyền không nhất thiết phải là các phần tử đồng cấp. Chúng có thể nằm rải rác trên tài liệu.
CSS đã phục hồi như vậy trong vài năm qua, đặc biệt là trong năm 2023. Nếu bạn mới sử dụng CSS hoặc chỉ muốn ôn lại kiến thức cơ bản, hãy xem khoá học Tìm hiểu CSS miễn phí của chúng tôi cùng với các khoá học miễn phí khác được cung cấp tại web.dev.
Chúc bạn một kỳ nghỉ lễ vui vẻ và hy vọng bạn có cơ hội sớm tích hợp một số tính năng CSS và giao diện người dùng mới tuyệt vời này vào công việc của mình!
⇾ Nhóm DevRel về giao diện người dùng Chrome,
