CSS đã kết thúc: năm 2023!
Chuyển đến phần nội dung:
- Thiết kế thích ứng
- Truy vấn vùng chứa
- Truy vấn kiểu
- :có bộ 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 về tính minh bạch
Rất ấn tượng! 2023 là một năm trọng đại 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, mang đến cho các nhà phát triển những tính năng mà trước đây họ nghĩ là không thể làm trên nền tảng web. Giờ đây, mọi trình duyệt hiện đại đều hỗ trợ truy vấn vùng chứa, lưới con, bộ chọn :has() và vô số không gian màu và hàm mới. Chúng tôi hỗ trợ ảnh động điều hướng cuộn chỉ dành cho CSS và tạo ảnh động mượt mà giữa các chế độ xem web bằng hiệu ứng chuyển đổi chế độ xem. Hơn hết, có rất nhiều dữ liệu nguyên gốc mới đã mang lại trải nghiệm tốt hơn cho nhà phát triển, chẳng hạn như kiểu CSS lồng nhau và phạm vi.
Thật là một năm đáng nhớ! Vì vậy, chúng tôi muốn kết thúc năm mốc quan trọng này để tôn vinh và ghi nhận tất cả những nỗ lực của các nhà phát triển trình duyệt và cộng đồng web đã giúp tất cả những điều này trở nên khả thi.
Nền tảng kiến trúc
Hãy bắt đầu bằng việc cập nhật 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 sáng tác và sắp xếp các kiểu, đồng thời mang lại sức mạnh to 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ó sẵn trên mọi công cụ chính. Các hàm này rất hữu ích cho mục đích ảnh động và bố cục. Ví dụ: giờ đây, việc sắp xếp các phần tử trên một vòng tròn quanh tâm đã chọn sẽ trở nên 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 các phần tử đó. Khi sử dụng cú pháp vi cú pháp An+B, bạn có thể kiểm soát tốt những phần tử mình muốn chọn.
Theo mặc định, các giả lập :nth-*() xem xét tất cả các phần tử con. Kể từ Chrome 111, bạn có thể tuỳ ý chuyển một 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 trẻ em trước khi An+B thực hiện việc này.
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 để thay đổi linh động 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
Hỗ trợ trình duyệt
- 118
- 118
- x
- 17,4
Chrome 118 đã thêm tính năng hỗ trợ cho @scope, một quy tắc 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 kiểu theo phạm vi, bạn có thể rất cụ thể về những phần tử bạn chọn mà không cần phải viết bộ chọn quá cụ thể hoặc kết hợp chặt chẽ chúng với cấu trúc DOM.
Cây con trong phạm vi được xác định bằng phạm vi gốc (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 tạo 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 khắc. Ví dụ: quy tắc kiểu theo 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 khớp với bộ chọn [data-component].
@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 phạm vi được áp dụng.
Ảnh chụp màn hình bản 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 các 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ó tiền đạo và cách tầng chịu ảnh hưởng của @scope.
Lồng ghép
Trước khi lồng nhau, mọi bộ chọn cần được khai báo rõ ràng, tách biệt với nhau. Điều này dẫn đến tình trạng lặp lại, biểu định kiểu hàng loạt và trải nghiệm tác giả 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 */
}
Bản ghi màn hình lồng ghép
Bản minh hoạ trực tiếp về Nesting
Việc 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 tài nguyê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 giới hạn yêu cầu sử dụng & ở nhiều vị trí, 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.
Hãy tìm hiểu thêm về tính năng lồng ghép.
Lưới con
CSS subgrid cho phép bạn tạo các lưới phức tạp hơn và căn chỉnh tốt hơn giữa các bố cục con. Cách 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 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.
Bản ghi màn hình phụ
Bản minh hoạ trực tiếp lưới con
Lưới con đặc biệt hữu ích khi căn chỉnh nội dung động của nhau. Việc này giúp người viết bản sao, người viết trải nghiệm người dùng và người dịch không phải cố tạo nội dung 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 con.
Kiểu chữ
Kiểu chữ trên web có một số điểm cập nhật quan trọng trong năm 2023. Một tính năng nâng cao tăng dần đặc biệt đẹp mắt 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 thêm tập lệnh. Không còn phải gặp vấn đề về độ dài dòng rắc rối và chuyển sang sử dụng các kiểu chữ dễ đoán hơn!
Chữ cái đầu tiên
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í của các 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 nhô lên. Thuộc tính này chấp nhận hai đối số: đối số đầu tiên thể hiện mức độ kéo chữ cái vào đoạn văn bản tương ứng và đối số thứ hai thể hiện mức độ kéo chữ cái lên 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 đây.
Ảnh chụp màn hình chữ cái đầu tiên
Bản demo chữ cái đầu tiên
initial-letter cho phần tử giả ::first-letter để xem phần tử này thay đổi.Tìm hiểu thêm về chữ cái đầu tiên.
text-wrap: sự 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, kích thước phông 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ý xuống dòng tự động hiệu quả và thẩm mỹ đều nằm trong trình duyệt. Do trình duyệt biết tất cả các yếu tố, như kích thước phông chữ, ngôn ngữ và khu vực được phân bổ, trình duyệt này làm cho trình duyệt trở thành ứ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à hai kỹ thuật gói văn bản mới, một kỹ thuật có tên là balance và pretty còn lại. Giá trị balance tìm cách tạo ra một khối văn bản hài hoà, còn pretty tìm cách ngăn chặn trẻ mồ côi và đảm bảo sự liên kết lành mạnh. Cả hai tác vụ này thường được thực hiện bằng tay, và thật tuyệt vời khi giao công việc cho trình duyệt và làm cho nó hoạt động trên bất kỳ ngôn ngữ dịch nào.
Cuộn văn bản Screencast
Bản minh hoạ trực tiếp tính năng xuống dòng tự động
balance và pretty đối với tiêu đề và đoạn văn. Hãy thử dịch bản minh hoạ này sang một ngôn ngữ khác!Tìm hiểu thêm về text-wrap: số dư.
Màu
2023 là năm màu sắc của nền tảng web. Với các không gian màu và chức năng mới hỗ trợ tuỳ chỉnh giao diện màu động, bạn cũng có thể tạo những chủ đề sống động, tươi tốt mà người dùng xứng đáng nhận được, đồng thời có thể tuỳ chỉnh các giao diện đó nữa!
Không gian màu HD (Cấp độ màu 4)
Từ phần cứng đến phần mềm, CSS đến đèn nhấp nháy; máy tính của chúng ta có thể mất rất nhiều công sức để cố gắng và thể hiện màu sắc chính xác như những gì mắt người có thể nhìn thấy. Vào năm 2023, chúng tôi có nhiều màu sắc mới, nhiều màu sắc hơn, không gian màu mới, chức năng màu sắc và các 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ó thể hiển thị các 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à các nền tảng khác.
– Tạo tô chuyển tiếp với màu HDR,
– Nội suy tô chuyển tiếp trong các không gian màu thay thế.
– Kết hợp màu bằng color-mix().
– Tạo các biến thể màu sắc với cú pháp màu tương đối.
Bản ghi 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 hỗn hợp màu
Kết hợp màu sắc là một công việc điển hình 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 với một màu mà còn có thể tạo độ trong suốt. Bạn có thể thực hiện tất cả thao tác này trong bất kỳ hệ màu nào bạn chọn. Đó là tính năng màu cơ bản và tính năng màu nâng cao.
video ghi lại chuyển động trên màn hình (color-mix())
Bản minh hoạ color-mix()
Bạn có thể xem color-mix() là một khoảnh khắc trong dải chuyển màu. Trong đó, đối tượng 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, còn đối tượng color-mix() chỉ cho thấy một bước. Mọi thứ sẽ trở nên nâng cao khi bạn bắt đầu xem xét đến hệ màu và tìm hiểu sự khác biệt về hệ màu đối 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 sắc. Phương pháp 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 sắc. color-mix() có thể kết hợp với 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à khả năng 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.
Bản ghi màn hình 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. Thay đổi tương đối là thay đổi trong đó bạn lấy giá trị hiện tại về độ bão hoà hoặc độ sáng và sửa đổi giá trị đó bằng calc(). Thay đổi tuyệt đối là khi bạn thay thế 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ụ có ý nghĩa để tuỳ chỉnh giao diện, chỉ về các biến thể theo thời gian, v.v.
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 trong năm 2023. Năm đột phá này mang đến 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 các 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. Đ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!
Kích thước truy vấn 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à bạn có thể tạo kiểu động cho các thành phần trên nhiều bố cục và trong nhiều khung hiển thị. Các truy vấn vùng chứa cho 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 (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 vùng chứa trên phần tử bạn đang truy vấn, sau đó, tương tự như truy vấn phương tiện, 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 cùng dòng) được dùng để xác định kích thước cho tiêu đề thẻ.
Bản ghi màn hình bằng @container
Bản minh hoạ @container
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 kiểu đã đạt được khi được triển khai một phần trong Chrome 111. Hiện tại, với 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 phần tử mẹ khi sử dụng @container style(). Ví dụ: truy vấn xem có giá trị thuộc tính tuỳ chỉnh 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 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 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 sau này, bạn 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 qua, các nhà phát triển yêu cầu cung cấp "bộ chọn gốc" trong CSS. Với bộ chọn :has() được cung cấp trong Chrome 105, giờ đây bạn có thể làm được điều này. 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à phần tử con.
Ảnh chụp màn hình minh hoạ :has()
Bản trình diễn trực tiếp :has()
:has(): Thẻ không có/có hình ảnhVì :has() chấp nhận một danh sách bộ chọn tương đối làm đối số, nên bạn có thể chọn nhiều hơn so với phần tử mẹ. Sử dụng các công cụ kết hợp CSS khác nhau, bạn không chỉ có thể đi lên cây DOM mà còn có thể thực hiện các lựa chọn lề. Ví dụ: li:has(+ li:hover) sẽ chọn phần tử <li> đứng trước phần tử <li> hiện đang di chuột.
Screencast :has()
Bản minh hoạ :has()
:has(): Đế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 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 một giá trị fast, slow hoặc none liên quan đến khả năng của nhiều thiết bị.
Hầu hết các thiết bị mà bạn thiết kế có khả năng có tốc độ làm mới nhanh. Điều này bao gồm máy tính để bàn 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 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 bản cập nhật thường xuyên, đồng nghĩa với việc bạn có thể tiết kiệm được mức sử dụng pin hoặc các bản cập nhật chế độ xem 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 tập lệnh để kiểm tra xem JavaScript có sẵn hay không. Điều này rất hữu ích cho tính năng nâng cao tăng dần. Trước truy vấn phương tiện này, chiến lược phát hiện xem có JavaScript hay không là đặt lớp nojs trong HTML và xoá lớp đó bằng JavaScript. Bạn có thể xoá những 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 trang để thử nghiệm thông qua Công cụ của Chrome cho nhà phát triển tại đây.
Viết tập lệnh Screencast
Bản demo tập lệnh
Hãy xem xét việc chuyển đổi giao diện trên trang web, truy vấn phương tiện tập lệnh có thể hỗ trợ nút chuyển hoạt động theo lựa chọn ưu tiên của hệ thống vì không có JavaScript. Hoặc cân nhắc thành phần chuyển đổi — nếu có JavaScript thì bạn có thể vuốt nút chuyển đó bằng một cử chỉ thay vì chỉ bật rồi tắt. 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 trong khi 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 giảm độ minh bạch
Giao diện không mờ có thể gây đau đầu hoặc khó khăn về thị giác đối với nhiều loại khiếm thị khác nhau. Đó 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 loại bỏ độ trong suốt khỏi giao diện người dùng. Truy vấn phương tiện này cho prefers-reduced-transparency rất phù hợp với các truy vấn phương tiệ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.
Video ghi lại chuyển động trên màn hình về độ minh bạch bị giảm
Bản minh hoạ mức giảm về độ minh bạch
Trong một số trường hợp, bạn có thể cung cấp bố cục thay thế mà không có nội dung che phủ 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àu thành mờ hoặc gần như mờ. Bài đăng trên blog sau đây có nhiều phầ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 nếu bạn muốn biết thời điểm mà cụm từ tìm kiếm nội dung đa phương tiện này có giá trị.
Tìm hiểu thêm về @media (prefers-reduced-transparency).
Lượt tương tác
Hoạt động 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 cũng như vị trí của họ trong một không gian ảo. Năm nay, có nhiều tính năng thú vị ra mắt, giúp các hoạt động tương tác trở nên dễ soạn và triển khai hơn, mang lại cho người dùng hành trình suôn sẻ và trải nghiệm web được tinh vi hơn.
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 các 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 hiệu ứng chuyển đổi này có thể là chuyển đổi toàn trang hoặc những sự kiện 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.
Cốt lõi của View Transitions API là hàm document.startViewTranstion. Truyền một hàm cập nhật DOM thành trạng thái mới và API sẽ xử lý mọi việc cho bạn. Công cụ này thực hiện việc này bằng cách chụp ảnh trước và sau, sau đó chuyển đổi giữa hai mục 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.
Bản ghi màn hình VT
Bản minh hoạ VT
View Transitions API (API Chuyển đổi khung hiển thị) cho các ứng dụng một trang trong Chrome 111. Tìm hiểu thêm về Chuyển đổi khung hiển thị.
Hàm giảm tốc độ tuyến tính
Hỗ trợ trình duyệt
- 113
- 113
- 112
- 17,2
Đừng để tên hàm này đánh lừa bạn. Hàm linear() (không nên nhầm lẫn với từ khoá linear) cho phép bạn tạo các hàm gia tốc phức tạp theo cách đơn giản, trong đó có thể mất đi một số độ chính xác.
Trước linear() (được cung cấp trong Chrome 113), bạn 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 gia 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 tuyến tính giữa chúng.Video ghi lại chuyển động trên màn hình chậm
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 gia tốc tuyến tính.
Kết thúc cuộn
Nhiều giao diện có hoạt động tương tác với thao tác cuộn. Đôi khi, giao diện cần phải đồ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 phương thức hết thời gian chờ không chính xác. 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 ở trên màn hình. Với sự kiện scrollend, bạn có một sự kiện cuộn cuối đúng thời điểm để biết liệu người dùng có đang thực hiện cử chỉ giữa hay không.
Bản ghi màn hình có chức năng cuộn từ đầu đến cuối
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, các đoạn mã cố gắng kết thúc cuộn không chính xác có thể bị xoá và thay thế 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 hướng cuộn
Ảnh động theo hướng cuộn là một tính năng thú vị có trong Chrome 115. Các số này cho phép bạn lấy ảnh động CSS hiện có hoặc một ảnh động được tạo bằng API Ảnh động trên web và ghép với độ lệch cuộn của thanh cuộn. Khi bạn cuộn lên và xuống – hoặc sang trái và sang phải trong một thanh 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 ScrollTimeline, bạn có thể theo dõi tiến trình tổng thể của thanh cuộn, như được minh hoạ trong bản minh hoạ sau đây. Khi bạn cuộn đến cuối trang, văn bản đó sẽ hiển thị từng ký tự một.
Bản ghi màn hình SDA
Bản minh hoạ SDA
Với ViewTimeline, bạn có thể theo dõi một phần tử khi phần tử đó di chuyển 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, mỗi hình ảnh tự tiết lộ từ thời điểm chuyển vào cửa sổ cuộn cho đến khi nằm ở chính giữa.
Bản minh hoạ bản ghi màn hình SDA
Bản minh hoạ trực tiếp SDA
Vì ảnh động hướng cuộn hoạt động với ảnh động CSS và API Ảnh động trên web, bạn có thể được hưởng lợi từ tất cả các ưu điểm mà các API này mang lại. Điều đó bao gồm khả năng chạy những ảnh động này chạy khỏi luồng chính. Giờ đây, bạn có thể có cá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 – có điều gì không thích không?
Để tìm hiểu thêm về ảnh động cuộn hướng, hãy xem bài viết này để biết tất cả chi tiết hoặc truy cập scroll-driving-animations.style bao gồm nhiều bản minh họa.
Hoãn đính kèm dòng thời gian
Khi áp dụng ảnh động hướng cuộn qua CSS, cơ chế tra cứu để tìm công cụ cuộn kiểm soát luôn đi theo cây DOM, khiến nó giới hạn ở chế độ chỉ cuộn đối tượng cấp trên. Tuy nhiên, rất thường xuyên, phần tử cần được tạo ảnh động không phải là phần tử con của thanh 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 dòng thời gian cuộn có tên của một thành phần không phải là đố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. Việc này cho phép đính kèm scroll-timeline hoặc view-timeline đã xác định có tên đó, giúp phạm vi rộng hơn. Khi bạn thiết lập danh sách này, bất kỳ trẻ nào trong số cha mẹ dùng chung đó đều có thể sử dụng dòng thời gian với tên đó.
timeline-scope được khai báo trên tệp mẹ được chia sẻ, bạn có thể tìm thấy scroll-timeline khai báo trên thanh 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
Một chức 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. Trên 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 tại điểm 50% thay vì ở đ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 cách sử dụng từ khoá allow-discrete hoặc viết tắt thuộc tính transition.
Anim rời rạc. Ghi màn hình
Anim 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.
@kiểu bắt đầu
Quy tắc CSS @starting-style được xây dựng dựa trên các tính năng mới dành cho web để tạo ảnh động đến và từ display: none. Quy tắc này cung cấp cho một phần tử kiểu "trước khi mở" mà trình duyệt có thể tra cứu trước khi phần tử đó mở trên trang. Việc này rất hữu ích cho ảnh động đầu vào 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. Công cụ 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ó thể tạo hiệu ứng động. Hãy xem ví dụ sau đây để tạo ảnh động cho thuộc tính popover (xem phần tiếp theo) vào chế độ xem 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.
Screencast
Bản minh hoạ @start-style
Tìm hiểu thêm về @Bắt đầu-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 CSS overlay mới vào quá trình 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 cho lớp trên cùng một cách suôn sẻ. 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 về trạng thái bị cắt, biến đổi và che phủ, đồng thời bạn sẽ không thấy sự 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.
Bản ghi màn hình lớp phủ
Bản demo trực tiếp lớp phủ
Tìm hiểu thêm về lớp phủ và các hoạt ảnh thoát khác.
Thành phần
2023 là một năm quan trọng cho sự giao thoa của kiểu và các thành phần HTML, với đích popover và rất nhiều việc phải làm xoay quanh việc định vị 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.
Cửa sổ bật lên
API Cửa sổ bật lên giúp bạn tạo các thành phần nằm ở đầu phần còn lại của trang. Những nội dung này có thể bao gồm trình đơn, mục 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, sau đó 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 ở phía trên phần còn lại của trang, vì vậy bạn không phải sử dụng chỉ mục z.
- Chức năng loại bỏ ánh sáng. Khi nhấp vào phần 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 trở về.
- Quản lý tiêu điểm mặc định. Mở cửa sổ bật lên khiến thẻ tiếp theo dừng lại bên trong cửa sổ bật lên.
- Các liên kết bàn phím dễ 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à quay trở lại tiêu điểm. - Liên kết thành phần có thể truy cập được. Kết nối một phần tử cửa sổ bật lên với trình kích hoạt cửa sổ bật lên về mặt ngữ nghĩa.
Video bật lên trên màn hình
Bản demo trực tiếp bật lên
Quy tắc ngang trong một số 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 ngang (thẻ <hr>) vào các phần tử <select> để giúp chia nhỏ 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, 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 giờ sử dụng trong một số lựa chọn
:lớp giả hợp lệ cho người dùng và không hợp lệ
Là phiên bản ổ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 thành phần điều khiển biểu mẫu sau khi người dùng đã tương tác đáng kể với hoạt động đầ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 với :user-invalid cho đến khi người dùng thay đổi thông tin đầu vào và để thông tin đó ở trạng thái không hợp lệ.
Với những bộ chọn mới này, người dùng không cần phải viết mã có trạng thái để theo dõi dữ liệu đầu vào mà một người dùng đã thay đổi.
:user-* Video ghi lại chuyển động trên màn hình
:user-* Bản trình bày 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 người dùng*.
Đàn phong cầm độc quyền
Hỗ trợ trình duyệt
- 120
- 120
- x
- 17,2
Một 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 nhóm chúng theo cách trực quan để thể hiện rằng chúng thuộc về nhau.
Tính năng mới trong Chrome 120 hỗ trợ thuộc tính name trên các phần tử <details>. Khi bạn 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 đàn phong 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à phần tử đồng cấp. Các thông báo này có thể nằm rải rác trên tài liệu.
CSS đã trải qua giai đoạn phát triển mạnh trong những năm vừa 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 tập lại các kiến thức cơ bản về CSS, hãy tham khảo khóa học Tìm hiểu CSS miễn phí của chúng tôi cùng với các khóa học miễn phí khác tại web.dev.
Chúng tôi chúc bạn một kỳ nghỉ lễ vui vẻ và hy vọng bạn có được cơ hội để sớm kết 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 Chrome UI DevRel,
