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 ra một mô hình trực quan hơn cho tính năng 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, một trong một nhóm 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).
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>
Phần khai báo kiểu của mảnh sửa đổi màu của văn bản đã chọn, với 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ử 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 thành:
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 nào khớp với chính nó, vì vậy, phần tử này kế thừa 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 cho lựa chọn vẫn hoạt động
Nhiều trang web mô phỏng tính năng 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 của lớp này 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 CSS khác) 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ử này đ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 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 năng kế thừa đánh dấu CSS không khiến văn bản được nhấn mạnh thứ hai kế thừa màu xanh dương từ phần tử mẹ vì bộ chọn phổ quát khớp với phần tử <em> và áp dụng màu đánh dấu phổ quát, 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 với thay đổi này trong Chrome, nhưng bạn sẽ bỏ lỡ mọi lợi ích về mặt công thái học từ việc kế thừa văn bản được làm 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 nhiều kiểu văn bản mục tiêu trên một trang web bị hạn chế và tính năng này còn khá mới, vì vậy, trang web của bạn rất khó thay đổi hành vi ::target-text.
Tại sao lại có sự thay đổi này?
Khi các phần tử giả lập làm nổi bật khác đang trong quá trình phát triển, Nhóm làm việc CSS đã quyết định triển khai tính năng kế thừa bằng mô hình kế thừa làm nổi bật.
Đây đã là phương thức trong quy cách của phần tử giả ::selection, nhưng trình duyệt không triển khai phương thức này. Các phần tử giả lập không phải phần tử lựa chọn sử dụng tính năng kế thừa làm nổi bật, trong đó phần tử giả lập được kế thừa như thể là một thuộc tính. Tức là các phần tử kế thừa phần tử giả lập làm nổi bật từ phần tử mẹ của tài liệu.
Để đảm bảo tính nhất quán trên tất cả các pseudo highlight, Nhóm làm việc CSS đã nhắc lại việc hỗ trợ tính năng kế thừa highlight cho ::selection và các trình duyệt đang nỗ lực để ra mắt hành vi mới này, đồng thời cố gắng không làm hỏng các trang web hiện có.
Dùng thử
CodePen sau đây minh hoạ các thay đổi. Dùng thử trong Chrome 131.