Ngày xuất bản: 8 tháng 10 năm 2024
Kể từ Chrome 131, tính năng kế thừa làm nổi bật CSS sẽ thay đổi đối với các lớp giả ::selection và ::target-text. Việc này nhằm tạo một mô hình trực quan hơn cho tính kế thừa và phù hợp với các lớp giả ::highlight, ::spelling-error và ::grammar-error mới thêm gần đây. Bài đăng này giải thích về thay đổi này. Thay đổi này sẽ không gây ra tác động rõ ràng cho hầu hết các trang web.
Định kiểu lựa chọn
Việc tạo kiểu cho giao diện của văn bản đã chọn có thể truyền tải ý nghĩa đến người dùng, chẳng hạn như mục đích của nội dung đã chọn hoặc không thể chọn văn bản. Ví dụ: GitHub tô màu mã đã chọn khác với cấu trúc thư mục đã chọn.
CSS hỗ trợ định kiểu lựa chọn bằng phần tử giả ::selection. Đây là một trong tập hợp các phần tử giả được gọi là phần tử giả làm nổi bật.
Các phần tử giả này kiểm soát cách văn bản xuất hiện trong nhiều hành động do người dùng, trình duyệt hoặc tập lệnh điều khiển. Ngoài lựa chọn, bạn có thể tạo kiểu cho lỗi chính tả (::spelling-error), lỗi ngữ pháp (::grammar-error), mục tiêu văn bản được nhúng URL (::target-text) và nội dung làm nổi bật được tạo bằng tập lệnh (::highlight).
Giống như mọi tập hợp thuộc tính CSS, hành vi kế thừa là một yếu tố quan trọng cần cân nhắc khi thiết kế trang web. Nói chung, nhà phát triển muốn các thuộc tính CSS được kế thừa thông qua cây phần tử DOM (ví dụ: font) hoặc không được kế thừa (ví dụ: background).
Các thay đổi đối với hành vi lựa chọn trong Chrome 131
Hãy xem xét mảnh tài liệu sau:
p {
color: red;
}
.blue::selection {
color: blue;
}
<p class="blue">Some <em>emphasized</em> text that one would expect to be blue</p>
Nội dung khai báo kiểu của mảnh sửa đổi màu của văn bản đã chọn, trong đó có một quy tắc khớp với tất cả các phần tử và một quy tắc khớp với các phần tử thuộc lớp "blue".
Khi bạn chọn trong Chrome 130 trở xuống, kết quả sẽ như sau:
Khi được chọn trong Chrome 131, kết quả sẽ thay đổi như sau:
Nội dung gì đã thay đổi? Hành vi kế thừa của các thuộc tính lựa chọn trước đây được triển khai thông qua kế thừa phần tử gốc, trong đó lựa chọn sử dụng các thuộc tính từ ::selection khớp với phần tử đang được chọn. Chrome phiên bản 130 trở về trước sử dụng mô hình này, trong đó văn bản được làm nổi bật không có ::selection phù hợp vì .blue::selection chỉ so khớp các phần tử có lớp "blue" mà phần tử <em> thiếu.
Chrome 131 cho phép hành vi mới, trong đó các phần tử kế thừa hành vi lựa chọn từ phần tử mẹ. Trong ví dụ trước, phần tử <em> không có ::selection phù hợp, nên phần tử này kế thừa các màu lựa chọn của phần tử <p>. Đây được gọi là tính năng kế thừa đánh dấu CSS và bạn có thể dùng thử tính năng này trong các phiên bản Chrome cũ bằng cách bật Tính năng thử nghiệm của nền tảng web trong chrome://flags.
Các trang web dựa vào các thuộc tính lựa chọn không kế thừa có thể sẽ thấy thay đổi về giao diện của văn bản đã chọn, nhưng bằng chứng từ các báo cáo lỗi cho thấy có rất ít trường hợp sử dụng cho hành vi như vậy.
Thuộc tính tuỳ chỉnh CSS để lựa chọn vẫn hoạt động
Nhiều trang web mô phỏng tính kế thừa làm nổi bật CSS thông qua việc sử dụng các thuộc tính tuỳ chỉnh CSS. Các thuộc tính tuỳ chỉnh được kế thừa thông qua cây phần tử, đưa ra kết quả "kế thừa từ phần tử mẹ" bằng một đoạn mã như sau:
:root {
--selection-color: lightgreen;
}
::selection {
color: var(--selection-color);
}
.blue {
--selection-color: blue;
}
<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text that is blue</p>
Đây là kết quả khi bạn chọn trong cả Chrome 130 và 131:
Ở đây, mọi phần tử đều kế thừa một số giá trị cho thuộc tính --selection-color thông qua cây phần tử và màu này được sử dụng khi văn bản được chọn. Các phần tử có lớp .blue và các phần tử con cháu của chúng có màu xanh dương khi được chọn, còn các phần tử khác có màu xanh lục nhạt. Nhiều trang web sử dụng kỹ thuật này và đây là phương thức được đề xuất trên Stack Overflow.
Để duy trì khả năng tương thích, mô hình kế thừa làm nổi bật CSS chỉ định rằng ::selection (và các phần tử giả làm nổi bật khác của CSS) kế thừa các giá trị thuộc tính tuỳ chỉnh từ phần tử gốc (phần tử mà các phần tử đó đang được áp dụng). Các trang web sử dụng phương thức này sẽ không bị ảnh hưởng bởi những thay đổi trong Chrome 131.
Các thuộc tính tuỳ chỉnh được xác định trên chính phần tử giả ::selection sẽ bị bỏ qua để tránh các hành vi kế thừa cạnh tranh. Bạn phải xác định các thuộc tính trên chính phần tử đó, sau đó tham chiếu đến các thuộc tính đó trong phần tử giả.
Bộ chọn chung cho ::selection tắt tính năng kế thừa đánh dấu
Các trang web không sử dụng thuộc tính tuỳ chỉnh CSS có thể đã sử dụng bộ chọn chung để đặt màu văn bản đã chọn. Ví dụ như CSS sau:
::selection /* = *::selection (universal) */ {
color: lightgreen;
}
.blue::selection {
color: blue;
}
<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>
Đây là kết quả khi bạn chọn trong cả Chrome 130 (trở xuống) và Chrome 131 (trở lên):
Tính kế thừa của phần tử làm nổi bật CSS không khiến văn bản được làm nổi bật thứ hai kế thừa màu xanh dương từ phần tử mẹ vì bộ chọn chung khớp với phần tử <em> và áp dụng màu làm nổi bật chung là màu xanh lục nhạt.
Để tận dụng các lợi ích của tính năng kế thừa đánh dấu CSS, hãy thay đổi bộ chọn phổ quát để chỉ khớp với phần tử gốc, sau đó các phần tử con sẽ kế thừa phần tử gốc đó:
:root::selection {
color: lightgreen;
}
.blue::selection {
color: blue;
}
<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>
Kết quả trong Chrome 131 sẽ có dạng như sau:
Nếu trang web của bạn sửa đổi màu lựa chọn nhưng không sử dụng thuộc tính tuỳ chỉnh, thì có thể bạn có bộ chọn chung cho ::selection giả. Tin vui là trang web của bạn sẽ không bị lỗi khi thay đổi này trong Chrome, nhưng bạn sẽ bỏ lỡ mọi lợi ích thiết thực từ tính kế thừa nổi bật.
Kiểu ::target-text cũng sẽ thay đổi
Tất cả hành vi và thay đổi được mô tả ở đây đều áp dụng cho phần tử giả ::target-text như đối với ::selection. Các trường hợp sử dụng cho nhiều kiểu văn bản mục tiêu trên một trang web bị hạn chế, đồng thời tính năng này còn khá mới, vì vậy, trang web của bạn có nhiều khả năng sẽ không thay đổi hành vi của ::target-text.
Tại sao lại có sự thay đổi này?
Khi các phần tử giả làm nổi bật khác đang trong quá trình phát triển, Nhóm làm việc CSS đã giải quyết việc triển khai tính kế thừa bằng mô hình kế thừa làm nổi bật.
Đây đã là phương thức trong thông số kỹ thuật của phần tử giả ::selection, nhưng các trình duyệt lại không triển khai phương thức này. Các phần tử giả không lựa chọn sử dụng tính kế thừa đánh dấu, trong đó phần tử giả được kế thừa như thể đó là một thuộc tính. Điều này nghĩa là các phần tử sẽ kế thừa phần tử giả đánh dấu từ phần tử gốc của tài liệu.
Để đảm bảo tính nhất quán trên tất cả các mức giả làm nổi bật, Nhóm làm việc CSS đã nhắc lại việc hỗ trợ làm nổi bật tính kế thừa cho ::selection, đồng thời các trình duyệt đang nỗ lực để khởi chạy hành vi mới, đồng thời cố gắng không phá vỡ các trang web hiện có.
Dùng thử
CodePen sau đây minh hoạ các thay đổi. Hãy dùng thử tính năng này trong Chrome 131.