M

MLOG

Tiếng Việt

Mở khóa khả năng tạo kiểu chọn văn bản nâng cao với CSS Custom Highlight API. Tìm hiểu cách tùy chỉnh trải nghiệm lựa chọn để tăng cường tương tác người dùng.

CSS Custom Highlight API: Làm chủ việc tạo kiểu cho văn bản được chọn

Hành động khiêm tốn là chọn văn bản trên một trang web là điều mà hầu hết người dùng thực hiện mà không cần suy nghĩ nhiều. Tuy nhiên, với tư cách là nhà phát triển, chúng ta thường hướng đến việc cải thiện ngay cả những tương tác tinh tế nhất. CSS Custom Highlight API cho phép chúng ta cách mạng hóa trải nghiệm chọn văn bản, cung cấp khả năng kiểm soát chưa từng có đối với cách văn bản được chọn xuất hiện. Khả năng này vượt xa những thay đổi đơn giản về màu nền và màu chữ, cho phép tạo ra các giao diện người dùng phức tạp và hấp dẫn.

CSS Custom Highlight API là gì?

CSS Custom Highlight API là một tiêu chuẩn web hiện đại cung cấp một cách để tạo kiểu cho sự xuất hiện của các lựa chọn văn bản (và các vùng được highlight khác) bằng CSS. Nó giới thiệu pseudo-element ::highlight(), nhắm mục tiêu các vùng văn bản cụ thể dựa trên các tiêu chí do nhà phát triển xác định. API này khắc phục những hạn chế của pseudo-element ::selection truyền thống, vốn chỉ cung cấp các tùy chọn tạo kiểu rất cơ bản. Với Custom Highlight API, bạn có thể tạo ra các kiểu chọn văn bản có độ tùy biến cao và nhận biết theo ngữ cảnh.

Tại sao nên sử dụng CSS Custom Highlight API?

Custom Highlight API mang lại một số lợi thế so với các phương pháp tạo kiểu chọn văn bản truyền thống:

Hiểu các khái niệm chính

Trước khi đi sâu vào các ví dụ mã, điều cần thiết là phải hiểu các khái niệm cốt lõi của CSS Custom Highlight API:

1. Đăng ký Highlight

Quá trình bắt đầu bằng việc đăng ký một tên highlight tùy chỉnh bằng JavaScript. Tên này sau đó sẽ được sử dụng trong CSS để nhắm mục tiêu các lựa chọn văn bản cụ thể.

2. Các vùng Highlight

Các vùng highlight xác định các đoạn văn bản cụ thể sẽ được tạo kiểu. Các vùng này được tạo theo chương trình bằng cách sử dụng các API Highlight và StaticRange hoặc Range. Chúng chỉ định điểm bắt đầu và kết thúc của văn bản cần được highlight.

3. Pseudo-element ::highlight()

Pseudo-element này được sử dụng trong CSS để áp dụng các kiểu cho các tên highlight đã đăng ký. Nó hoạt động như một bộ chọn, nhắm mục tiêu các đoạn văn bản được xác định bởi các vùng highlight.

Ví dụ thực tế: Triển khai CSS Custom Highlight API

Hãy cùng khám phá một số ví dụ thực tế để minh họa cách sử dụng CSS Custom Highlight API.

Ví dụ 1: Tạo kiểu chọn văn bản cơ bản

Ví dụ này minh họa cách thay đổi màu nền và màu chữ của văn bản được chọn.

HTML:

<p id="myText">Đây là một số văn bản có thể được chọn.</p>

JavaScript:

const myText = document.getElementById('myText');
const highlight = new Highlight();

// Chọn toàn bộ đoạn văn.
highlight.add(new Range(myText.firstChild, 0, myText.firstChild, myText.firstChild.length));

CSS.highlights.set('myHighlight', highlight);

CSS:

::highlight(myHighlight) {
  background-color: #ff0;
  color: #000;
}

Giải thích:

Ví dụ 2: Highlight các từ cụ thể

Ví dụ này minh họa cách highlight các từ cụ thể trong một đoạn văn.

HTML:

<p id="myText">Đây là một đoạn văn với từ highlight mà chúng tôi muốn highlight.</p>

JavaScript:

const myText = document.getElementById('myText');
const highlight = new Highlight();
const textContent = myText.textContent;
const wordsToHighlight = ['highlight'];

wordsToHighlight.forEach(word => {
  let index = textContent.indexOf(word);
  while (index !== -1) {
    highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + word.length));
    index = textContent.indexOf(word, index + 1);
  }
});

CSS.highlights.set('keywordHighlight', highlight);

CSS:

::highlight(keywordHighlight) {
  background-color: lightgreen;
  font-weight: bold;
}

Giải thích:

Ví dụ 3: Highlight động dựa trên đầu vào của người dùng

Ví dụ này minh họa cách highlight văn bản động dựa trên đầu vào của người dùng trong hộp tìm kiếm.

HTML:

<input type="text" id="searchInput" placeholder="Nhập văn bản để highlight">
<p id="myText">Đây là một số văn bản sẽ được highlight động dựa trên đầu vào của người dùng.</p>

JavaScript:

const searchInput = document.getElementById('searchInput');
const myText = document.getElementById('myText');
const highlight = new Highlight();

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value;
  highlight.clear(); // Xóa các highlight trước đó

  if (searchTerm) {
    const textContent = myText.textContent;
    let index = textContent.indexOf(searchTerm);
    while (index !== -1) {
      highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + searchTerm.length));
      index = textContent.indexOf(searchTerm, index + 1);
    }
  }

  CSS.highlights.set('searchHighlight', highlight);
});

CSS:

::highlight(searchHighlight) {
  background-color: yellow;
  color: black;
}

Giải thích:

Ví dụ 4: Tùy chỉnh giao diện Highlight với ::highlight()

Sức mạnh của Custom Highlight API nằm ở khả năng tùy chỉnh giao diện và cảm nhận của văn bản được highlight. Đây là cách bạn có thể áp dụng bóng, gradient và các hiệu ứng hình ảnh khác.

HTML:

<p id="customText">Chọn văn bản này để xem hiệu ứng highlight tùy chỉnh.</p>

JavaScript:

const customText = document.getElementById('customText');
const highlight = new Highlight();
highlight.add(new Range(customText.firstChild, 0, customText.firstChild, customText.firstChild.length));
CSS.highlights.set('fancyHighlight', highlight);

CSS:

::highlight(fancyHighlight) {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 2px 5px;
}

Giải thích:

Những lưu ý về khả năng truy cập

Mặc dù việc nâng cao giao diện hình ảnh của các lựa chọn văn bản là quan trọng, khả năng truy cập phải luôn là mối quan tâm hàng đầu. Dưới đây là một số hướng dẫn để đảm bảo các kiểu highlight tùy chỉnh của bạn có thể truy cập được:

Tương thích trình duyệt

CSS Custom Highlight API là một tiêu chuẩn web tương đối mới và khả năng tương thích của trình duyệt có thể khác nhau. Tính đến cuối năm 2023/đầu năm 2024, sự hỗ trợ ngày càng tăng nhưng chưa được triển khai phổ biến. Bạn có thể kiểm tra trạng thái hỗ trợ trình duyệt hiện tại trên các trang web như "Can I use..." để được thông báo về các bản cập nhật tương thích.

Hãy xem xét sử dụng phát hiện tính năng (feature detection) để cung cấp các kiểu dự phòng cho các trình duyệt chưa hỗ trợ API.

if ('CSS' in window && 'highlights' in CSS) {
  // Sử dụng Custom Highlight API
} else {
  // Cung cấp các kiểu dự phòng bằng ::selection
}

Các trường hợp sử dụng trong thực tế

CSS Custom Highlight API có rất nhiều ứng dụng trong thực tế, bao gồm:

Các phương pháp hay nhất và mẹo

Kỹ thuật nâng cao

1. Kết hợp nhiều Highlight

Bạn có thể kết hợp nhiều highlight để tạo ra các hiệu ứng tạo kiểu phức tạp hơn. Ví dụ, bạn có thể muốn highlight cả từ khóa và văn bản do người dùng chọn với các kiểu khác nhau.

2. Sử dụng Sự kiện để cập nhật Highlight

Bạn có thể sử dụng các sự kiện JavaScript, chẳng hạn như di chuột qua hoặc nhấp chuột, để cập nhật động các vùng highlight dựa trên tương tác của người dùng.

3. Tích hợp với các thư viện của bên thứ ba

Bạn có thể tích hợp Custom Highlight API với các thư viện của bên thứ ba để tạo ra các giải pháp highlight phức tạp hơn. Ví dụ, bạn có thể sử dụng thư viện xử lý ngôn ngữ tự nhiên (NLP) để tự động xác định và highlight các thuật ngữ chính trong một tài liệu.

Tương lai của việc tạo kiểu chọn văn bản

CSS Custom Highlight API đại diện cho một bước tiến đáng kể trong việc tạo kiểu chọn văn bản. Nó cho phép các nhà phát triển tạo ra các giao diện người dùng hấp dẫn, dễ truy cập và nhận biết theo ngữ cảnh hơn. Khi sự hỗ trợ của trình duyệt tiếp tục tăng lên, Custom Highlight API sẵn sàng trở thành một công cụ thiết yếu cho các nhà phát triển web trên toàn thế giới.

Kết luận

CSS Custom Highlight API mở ra một thế giới khả năng để tùy chỉnh trải nghiệm chọn văn bản. Bằng cách hiểu các khái niệm chính, khám phá các ví dụ thực tế và xem xét các hướng dẫn về khả năng truy cập, bạn có thể tận dụng API mạnh mẽ này để tạo ra các giao diện người dùng thực sự đặc biệt. Hãy nắm bắt Custom Highlight API và nâng các dự án phát triển web của bạn lên một tầm cao mới.

Hãy thử nghiệm với các ví dụ được cung cấp, điều chỉnh chúng cho phù hợp với nhu cầu cụ thể của bạn và khám phá toàn bộ tiềm năng của CSS Custom Highlight API. Người dùng của bạn sẽ đánh giá cao sự chú ý đến từng chi tiết và trải nghiệm người dùng được nâng cao.