- API CSS Custom Highlight cho phép các nhà phát triển tạo kiểu cho các đoạn văn bản cụ thể mà không cần thay đổi cấu trúc DOM.
- Bằng cách kết hợp các đối tượng Range và Highlight với HighlightRegistry, các điểm đánh dấu trực quan tùy chỉnh có thể được áp dụng theo chương trình.
- Phần tử giả ::highlight() cung cấp một giao diện CSS chuyên dụng để tạo kiểu cho các vùng được đánh dấu đã đăng ký một cách độc lập.
- Cách tiếp cận này tối ưu hóa hiệu năng bằng cách giảm dung lượng DOM và tránh các thay đổi bố cục liên quan đến việc chèn các phần tử bao bọc.
Bạn đã bao giờ cảm thấy bực bội khi cố gắng tô sáng những từ cụ thể trên trang giấy và nhận ra rằng mình phải bao bọc mọi thứ bằng hàng triệu ký tự đặc biệt chưa? <span> or <mark> Thẻ `<div>`? Đó là một cơn ác mộng về hiệu năng và thực sự có thể làm hỏng bố cục CSS của bạn. Và đó là lý do tại sao... API đánh dấu tùy chỉnh CSS Khi được sử dụng, nó trở thành yếu tố thay đổi cuộc chơi đối với bất kỳ ai cần chỉ ra văn bản một cách động mà không cần thay đổi cấu trúc HTML thực tế.
Về cơ bản, API này mở rộng những điều chúng ta đã biết, chẳng hạn như: ::selection or ::spelling-errorNhưng nó lại trao cho chúng ta chìa khóa mở ra cả vương quốc. Thay vì dựa vào trình duyệt để quyết định cái gì được tô sáng, Giờ đây bạn có thể xác định các phạm vi văn bản tùy ý. và bạn có thể tùy chỉnh kiểu dáng theo ý thích. Đây là cách xử lý gọn gàng hơn nhiều đối với các vấn đề như kết quả tìm kiếm, chỉnh sửa cộng tác hoặc tô sáng cú pháp mà không làm tăng thêm dung lượng không cần thiết cho DOM.
Tại sao lại loại bỏ yếu tố đánh dấu?
Trong một thời gian dài, <mark> Thẻ <p> là lựa chọn hàng đầu để nhấn mạnh văn bản. Mặc dù rất tốt cho ngữ nghĩa cơ bản, nhưng nó lại có một số hạn chế khá khó chịu. Ví dụ, Việc chèn các nút vào DOM có thể gây ra các phép tính toán lại bố cục tốn kém.Điều này có thể khiến trang web của bạn hoạt động chậm chạp, đặc biệt là trong các hiệu ứng động. Nhưng vấn đề thực sự bắt đầu khi bạn cần làm nổi bật văn bản mà... trải rộng trên nhiều phần tử HTMLVì bạn không thể chỉ để một thẻ mở và đóng nó bên trong một phần tử khác mà không tạo ra HTML không hợp lệ, nên bạn buộc phải chia phần được tô sáng thành nhiều đoạn nhỏ, điều này khá rườm rà.
Các khái niệm cốt lõi của API
Để làm được điều này, bạn cần làm quen với một vài đối tượng cụ thể. Đầu tiên, đó là... Đối tượng phạm viVề cơ bản, đó là một con trỏ cho biết "bắt đầu từ đây và kết thúc ở đó" trong tài liệu. Sau đó, chúng ta có... Đối tượng được tô sáng, nhóm này gom một hoặc nhiều phạm vi này lại với nhau để chúng có thể được coi là một nhóm phong cách duy nhất. Tất cả những điều này đều được quản lý bởi HighlightRegistry (truy cập qua CSS.highlights), hoạt động như một bản đồ nơi bạn ghi lại những điểm nổi bật của mình dưới một tên duy nhất.
Thực hiện từng bước
Việc tạo vùng sáng tùy chỉnh trên màn hình chỉ gồm bốn bước đơn giản. Đầu tiên, bạn... tạo các đối tượng Range của bạn Trong JavaScript, bạn có thể thực hiện điều này bằng cách xác định một nút văn bản và sử dụng các phương thức như... setStart và setEnd Để xác định chính xác những ký tự bạn muốn nhắm mục tiêu. Nếu bạn cần bao phủ toàn bộ một yếu tố, setStartBefore và setEndAfter là những người bạn tốt nhất của bạn.
Sau khi thiết lập phạm vi, bước thứ hai là... khởi tạo một đối tượng Highlight mớiMột tính năng thú vị ở đây là một vùng tô sáng duy nhất có thể chứa nhiều phạm vi. Điều này rất phù hợp cho tính năng "tìm kiếm trên trang", nơi bạn muốn mọi lần xuất hiện của một từ đều có cùng màu. Sau đó, bạn... đăng ký điểm nổi bật sử dụng CSS.highlights.set('my-name', highlight)Điều này cung cấp cho phần được tô sáng một mã định danh tùy chỉnh mà công cụ CSS có thể nhận biết được.
Bước cuối cùng là áp dụng kiểu dáng. Bạn sử dụng... ::highlight(my-name) phần tử giả trong tệp CSS của bạn. Vì đây không phải là một phần tử chuẩn, bạn chỉ có thể sử dụng một vài thuộc tính, nhưng bạn có thể dễ dàng thay đổi chúng. màu nền hoặc trang trí văn bản Để làm nổi bật các phạm vi đó. Ví dụ, bạn có thể sử dụng nền màu vàng tươi cho kết quả tìm kiếm hoặc gạch ngang cho văn bản đã xóa trong trình soạn thảo cộng tác.
Các tính năng nâng cao về sử dụng và hiệu năng
Một trong những trường hợp sử dụng ấn tượng nhất là tô sáng cú pháp cho mã nguồn . Theo truyền thống, các thư viện như Prism.js sẽ chèn hàng ngàn thẻ span để tô màu các token, điều này có thể làm cho DOM trở nên vô cùng nặng nề. Bằng cách sử dụng API Tô sáng Tùy chỉnh, bạn có thể phân tách mã trong JavaScript và áp dụng kiểu mà không cần thêm bất kỳ phần tử nào vào trang . Điều này giúp giữ cho DOM gọn nhẹ và ngăn trình duyệt bị quá tải khi xử lý các tài liệu khổng lồ.
Nếu bạn cần thay đổi vùng được tô sáng ngay lập tức, bạn không cần phải bắt đầu lại từ đầu. Bởi vì đối tượng Highlight được liên kết với Range, đơn giản là cập nhật ranh giới của khu vực. Vùng được tô sáng trên màn hình sẽ tự động cập nhật. Nếu muốn loại bỏ vùng tô sáng này, bạn có thể xóa một vùng cụ thể bằng cách sử dụng... delete phương thức trên đối tượng Highlight hoặc xóa toàn bộ thông tin đăng ký sử dụng CSS.highlights.delete.
Khả năng truy cập và hỗ trợ trình duyệt
Điều quan trọng cần nhớ là những điểm nổi bật này chỉ mang tính chất trực quan và không mang ý nghĩa ngữ nghĩa vốn có với trình đọc màn hình. Nếu bạn đang xây dựng một thứ gì đó mà khả năng truy cập là ưu tiên hàng đầu, bạn nên sử dụng type Thuộc tính của giao diện Highlight cho phép xác định xem phần được tô sáng là lỗi chính tả hay ngữ pháp, mặc dù khả năng hỗ trợ tính năng này có thể khác nhau tùy từng nơi. Khi không chắc chắn, Bổ sung các điểm nổi bật của bạn bằng nhãn ARIA Hoặc sử dụng HTML ngữ nghĩa là cách tốt nhất.
Về khả năng tương thích, API này đã được cải thiện đáng kể trong thời gian gần đây. Nó đã hoạt động ổn định trên Chrome, Edge và Safari, và Firefox cũng đã tham gia (bắt đầu từ khoảng phiên bản 140), có nghĩa là giờ đây nó khả thi cho hầu hết các môi trường sản xuất. Để tránh lỗi trên các trình duyệt cũ hơn, nên kiểm tra xem thuộc tính 'highlights' có tồn tại trong đối tượng CSS trước khi chạy mã của bạn.
API này thay đổi căn bản cách chúng ta xử lý thao tác văn bản bằng cách tách biệt phần hiển thị trực quan khỏi cấu trúc HTML. Bằng cách tận dụng các đối tượng Range và Highlight, các nhà phát triển có thể triển khai các tính năng phức tạp như tìm kiếm thời gian thực và tô màu cú pháp trong khi vẫn giữ cho DOM nhẹ và hiệu suất nhanh nhạy, từ đó vượt qua hiệu quả những hạn chế truyền thống của các phần tử bao bọc.
