Manejo de Eventos con la API de Resaltado Personalizado de CSS: Elevando las Interacciones de Selección de Texto

La selección de texto es una interacción fundamental en la web. Los usuarios resaltan texto por diversas razones: copiar contenido, compartir citas, realizar búsquedas o simplemente centrar la atención. Aunque los navegadores ofrecen un resaltado de texto predeterminado, la API de Resaltado Personalizado de CSS ofrece un control sin precedentes sobre esta interacción, permitiendo a los desarrolladores crear experiencias de selección visualmente atractivas, conscientes del contexto y altamente accesibles. Este artículo de blog profundiza en la API de Resaltado Personalizado de CSS, explorando sus capacidades y proporcionando ejemplos prácticos para mejorar sus aplicaciones web.

Comprendiendo el Comportamiento Predeterminado de la Selección de Texto

Por defecto, los navegadores aplican estilo al texto seleccionado usando el pseudo-elemento ::selection. Puede cambiar las propiedades background-color y color para alterar la apariencia. Por ejemplo:

            ::selection {
  background-color: #b3d4fc;
  color: #000;
}

            

              
                Copy
              
            
          

Este sencillo fragmento de CSS cambia el color de fondo a un azul claro y el color del texto a negro cada vez que un usuario selecciona texto en la página. Sin embargo, el pseudo-elemento ::selection tiene limitaciones. Solo permite estilizar el fondo y el color, restringiendo la personalización. Además, carece de información semántica sobre el contexto de la selección. La API de Resaltado Personalizado de CSS supera estas limitaciones.

Introducción a la API de Resaltado Personalizado de CSS

La API de Resaltado Personalizado de CSS proporciona un enfoque más robusto y flexible para gestionar las selecciones de texto. Introduce nuevas propiedades de CSS y APIs de JavaScript que le permiten definir y estilizar resaltados personalizados basados en condiciones e interacciones específicas.

Conceptos Clave

• Herencia de Resaltado: Los resaltados se estilizan a través de un mecanismo de cascada y herencia similar a otras propiedades de CSS. Esto significa que puede definir estilos de resaltado predeterminados a nivel raíz y anularlos para elementos o contextos específicos.
• Pseudo-resaltado: El pseudo-elemento ::highlight() se utiliza para aplicar estilos a resaltados con nombre.
• API de JavaScript: APIs de JavaScript como getSelection() y los objetos Highlight le permiten crear, gestionar e interactuar con resaltados de forma programática.
• Accesibilidad: La API admite atributos ARIA y consideraciones de accesibilidad, asegurando que los resaltados personalizados sean perceptibles y comprensibles para usuarios con discapacidades.

Implementando Resaltados Personalizados: Una Guía Paso a Paso

Aquí tiene una guía práctica para implementar resaltados personalizados utilizando la API de Resaltado Personalizado de CSS:

Paso 1: Definiendo Resaltados con Nombre

Primero, necesita definir un resaltado con nombre usando CSS. Este nombre se usará para asociar estilos con selecciones específicas.

            ::highlight(custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: #000;
}

            

              
                Copy
              
            
          

En este ejemplo, hemos definido un resaltado llamado `custom-highlight` con un fondo rojo semitransparente y color de texto negro. Puede elegir cualquier valor de color CSS válido para el fondo y el texto.

Paso 2: Creando Resaltados en JavaScript

A continuación, use JavaScript para crear y aplicar el resaltado. Esto implica obtener el rango de texto seleccionado y crear un objeto `Highlight`.

            function applyCustomHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) {
    return; // No hay selección
  }

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    return; // Selección vacía
  }

  const highlight = new Highlight(range);

  // Registrar el resaltado con el documento. Es experimental y puede necesitar polyfill o una bandera del navegador
  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set('custom-highlight', highlight);
  } else {
    console.warn('CSS.highlights no está soportado. Considere usar un polyfill.');
    // Implementar un mecanismo de respaldo aquí, ej., envolviendo el texto seleccionado en un  con una clase
    // Por ejemplo:
    const span = document.createElement('span');
    span.classList.add('fallback-custom-highlight');
    span.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
    span.style.color = '#000';
    range.surroundContents(span);
  }

  selection.removeAllRanges(); // Opcional: Limpiar la selección después de resaltar
}

            

              
                Copy
              
            
          

Explicación:

• window.getSelection(): Recupera el objeto de selección actual.
• selection.rangeCount: Comprueba si hay una selección activa.
• selection.getRangeAt(0): Obtiene el rango seleccionado.
• new Highlight(range): Crea un nuevo objeto `Highlight` a partir del rango.
• CSS.highlights.set('custom-highlight', highlight): Registra el resaltado en el registro de resaltados de CSS. Este es el paso crucial que vincula el resaltado de JavaScript con los estilos de CSS definidos anteriormente.
• Mecanismo de Respaldo (Fallback): Incluye un mecanismo de respaldo crucial para navegadores que aún no soportan completamente `CSS.highlights`. Esto asegura que su funcionalidad se degrade con gracia, manteniendo la operatividad en navegadores más antiguos.
• selection.removeAllRanges(): Limpia la selección después de resaltar. Esto es opcional y depende de la experiencia de usuario que desee.

Recuerde adjuntar esta función a un detector de eventos, como el clic de un botón o un atajo de teclado.

Paso 3: Manejando Múltiples Rangos (Selecciones Superpuestas)

La API puede manejar múltiples rangos superpuestos dentro de un solo resaltado. Puede agregar múltiples rangos a un objeto `Highlight`:

            const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);

if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
  CSS.highlights.set('custom-highlight', highlight);
} else {
  console.warn('CSS.highlights no está soportado. Considere usar un polyfill.');
  // Implementar un respaldo para múltiples rangos (más complejo)
  // Esto requeriría dividir el texto en spans más pequeños y aplicar estilos
  // Esta es una implementación de respaldo más avanzada y puede no ser adecuada para todos los casos
}

            

              
                Copy
              
            
          

El estilo se aplicará a todos los rangos dentro del resaltado.

Casos de Uso y Técnicas Avanzadas

La API de Resaltado Personalizado de CSS abre una amplia gama de posibilidades para mejorar las interacciones de selección de texto. Aquí hay algunos casos de uso y técnicas avanzadas:

1. Resaltado Sensible al Contexto

Puede usar JavaScript para analizar el texto seleccionado y aplicar diferentes estilos de resaltado según su contenido o el contexto circundante. Por ejemplo, podría resaltar palabras clave en un documento con un color específico, o identificar y resaltar fragmentos de código.

            function applyContextualHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const selectedText = range.toString();

  let highlightName = 'default-highlight';

  if (selectedText.startsWith('//')) {
    highlightName = 'comment-highlight'; // Resaltar comentarios de código
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // Resaltar palabras clave de JavaScript
  }

  const highlight = new Highlight(range);

  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set(highlightName, highlight);
  } else {
    console.warn('CSS.highlights no está soportado. Considere usar un polyfill.');
    // Implementación de respaldo, potencialmente usando atributos de datos y CSS personalizado
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

Defina los estilos CSS para cada tipo de resaltado:

            ::highlight(comment-highlight) {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

::highlight(keyword-highlight) {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

.fallback-highlight[data-highlight-type="comment-highlight"] {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

.fallback-highlight[data-highlight-type="keyword-highlight"] {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

            

              
                Copy
              
            
          

2. Resaltado de Resultados de Búsqueda

Puede usar la API para resaltar términos de búsqueda dentro de un documento. Esto es particularmente útil para páginas de resultados de búsqueda o funcionalidades de búsqueda dentro de la aplicación.

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // O un elemento específico
  const regex = new RegExp(searchTerm, 'gi'); // Global, insensible a mayúsculas/minúsculas

  let match;
  while ((match = regex.exec(text)) !== null) {
    const start = match.index;
    const end = start + searchTerm.length;

    // Crear un rango para cada coincidencia
    const range = document.createRange();
    range.setStart(document.body.firstChild, start);
    range.setEnd(document.body.firstChild, end);

    const highlight = new Highlight(range);

    if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
      CSS.highlights.set('search-result-highlight', highlight);
    } else {
      console.warn('CSS.highlights no está soportado. Considere usar un polyfill.');
      // El respaldo, de nuevo, requiere un manejo cuidadoso de los nodos de texto
    }
  }
}

            

              
                Copy
              
            
          

Defina el estilo CSS para el resaltado de resultados de búsqueda:

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

            

              
                Copy
              
            
          

3. Integración con Shadow DOM

La API de Resaltado Personalizado de CSS funciona perfectamente con Shadow DOM, permitiéndole crear componentes encapsulados con estilos de resaltado personalizados. Puede definir resaltados dentro del Shadow DOM y aplicarlos a elementos dentro del componente.

4. Consideraciones de Accesibilidad

Asegúrese de que sus resaltados personalizados sean accesibles para todos los usuarios. Considere lo siguiente:

• Contraste de Color: Asegure un contraste de color suficiente entre el fondo del resaltado y el color del texto para cumplir con las directrices WCAG.
• Navegación por Teclado: Asegúrese de que los usuarios puedan navegar por el texto resaltado usando el teclado.
• Compatibilidad con Lectores de Pantalla: Pruebe sus resaltados con lectores de pantalla para asegurarse de que el texto seleccionado se anuncie correctamente.
• Indicadores de Foco: Cuando un elemento resaltado recibe el foco, proporcione un indicador visual de foco claro.

Puede usar atributos ARIA para proporcionar información semántica adicional sobre los resaltados. Por ejemplo, podría usar aria-label para describir el propósito de una sección resaltada.

5. Localización e Internacionalización

Al tratar con la selección de texto en un contexto global, considere lo siguiente:

• Dirección del Texto: Asegúrese de que sus resaltados funcionen correctamente con direcciones de texto de izquierda a derecha (LTR) y de derecha a izquierda (RTL).
• Reglas Específicas del Idioma: Tenga en cuenta las reglas específicas del idioma para la selección de texto y los límites de las palabras.
• Soporte de Fuentes: Use fuentes que soporten los caracteres utilizados en diferentes idiomas.

6. Optimización del Rendimiento

Aplicar resaltados personalizados puede afectar el rendimiento, especialmente en documentos grandes. Considere las siguientes técnicas de optimización:

• Debouncing: Aplique 'debounce' a la función de resaltado para evitar cálculos excesivos durante selecciones rápidas.
• Almacenamiento en Caché: Almacene en caché los rangos de resaltado calculados para evitar recalculaciones innecesarias.
• Virtualización: Use técnicas de virtualización para renderizar solo los resaltados que están actualmente visibles en el viewport.
• Web Workers: Descargue los cálculos de resaltado a un web worker para evitar bloquear el hilo principal.

Soporte de Navegadores y Polyfills

La API de Resaltado Personalizado de CSS es relativamente nueva y puede que no sea totalmente compatible con todos los navegadores. Verifique las últimas tablas de compatibilidad de navegadores antes de usarla en producción. Considere usar un polyfill para proporcionar soporte a navegadores más antiguos. Un polyfill agrega el código necesario para que los navegadores antiguos entiendan la nueva API. Busque en línea "CSS Custom Highlight API Polyfill" para encontrar opciones.

Conclusión

La API de Resaltado Personalizado de CSS permite a los desarrolladores crear experiencias de selección de texto atractivas, conscientes del contexto y accesibles. Al comprender las capacidades de la API y aplicar las técnicas descritas en este artículo de blog, puede elevar la experiencia de usuario de sus aplicaciones web y proporcionar una forma más intuitiva y visualmente atractiva para que los usuarios interactúen con el texto. Recuerde priorizar la accesibilidad y el rendimiento al implementar resaltados personalizados, y considerar la compatibilidad de los navegadores y las opciones de polyfill. Este control matizado de la selección de texto capacita a los desarrolladores para construir experiencias web más interactivas y amigables para el usuario, adaptadas a las necesidades específicas de la aplicación y las preferencias del usuario. A medida que crece el soporte de los navegadores, la API de Resaltado Personalizado de CSS promete convertirse en una herramienta indispensable para el desarrollo web moderno.

Exploración Adicional

• MDN Web Docs: Highlight API
• CSS Houdini: Aprenda más sobre el proyecto CSS Houdini que habilita estas características avanzadas de CSS.