Thay đổi về tính kế thừa để định kiểu lựa chọn CSS

Stephen Chenney

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 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, mã được chọn màu khác với thư mục đã chọn cấu trúc.

CSS hỗ trợ định kiểu lựa chọn bằng ::selection phần tử giả, là một trong tập hợp các phần tử giả được gọi là đánh dấu phần tử giả. 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 mong 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>

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 phù hợp với tất cả các phần tử và một quy tắc phù hợp với các phần tử của 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 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 là được gọi là tính kế thừa nổi bật của CSS và bạn có thể dùng thử trước Các phiên bản Chrome bằng cách bật các tính năng Nền tảng web thử nghiệm trong chrome://flags.

Những trang web dựa vào những thuộc tính được chọn không kế thừa có khả năng nhận thấy thay đổi trong giao diện của văn bản được chọn, nhưng bằng chứng từ báo cáo lỗi cho thấy có có một số ít trường hợp sử dụng cho hành vi như vậy.

Thuộc tính tùy 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 tuỳ chỉnh CSS các thuộc tính. 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 được 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. Phần tử với lớp .blue và các thành phần con cháu của chúng có màu xanh dương khi được chọn, và các thành phần 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 nội dung nổi bật

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. Giống như CSS sau đây:

::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):

Sự kế thừa nội dung đánh dấu của CSS không khiến văn bản được nhấn mạnh thứ hai kế thừa màu xanh dương của 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ó một bộ chọn chung cho giả ::selection. Tốt tin tức là trang web của bạn sẽ không gây ảnh hưởng đến thay đổi này trong Chrome, nhưng bạn sẽ sẽ bỏ lỡ bất kỳ lợi ích công thái học nào 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 ::target-text phần tử giả tương tự 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àm nổi bật khác được phát triển, CSS đang hoạt động Nhóm đã giải quyết 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 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.

Vì lợi ích của tính nhất quán trên tất cả các lớp giả làm nổi bật, CSS Hoạt động Nhóm nhắc lại hỗ trợ cho tính năng kế thừa nổi bật cho ::selection, và các trình duyệt đang tìm cách khởi chạy hành vi mới, trong khi 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.