Migliora la tua UI: Padroneggiare l'API CSS Custom Highlight per lo Stile della Selezione del Testo

In questo esempio, abbiamo definito un nome di evidenziazione personalizzato chiamato code-highlight. Abbiamo quindi applicato questa evidenziazione agli elementi code. Il colore di sfondo è impostato su azzurro chiaro (#ADD8E6), il colore del testo su blu scuro (#00008B) e lo spessore del carattere su grassetto. Ora, ogni volta che viene selezionato del testo all'interno di un elemento code, verrà stilizzato con questi stili personalizzati.

Uso Avanzato: Mirare a Intervalli di Testo Specifici

L'API CSS Custom Highlight può anche essere utilizzata per mirare a intervalli di testo specifici all'interno di un elemento. Ciò consente un controllo ancora più granulare sullo stile della selezione del testo.

Esempio: Evidenziare i Termini di Ricerca

Immagina di voler evidenziare i termini di ricerca all'interno di un documento. Questo spesso richiede JavaScript in combinazione con l'API CSS Highlight.

1. Usa JavaScript per Identificare i Termini di Ricerca: Usa JavaScript per trovare tutte le occorrenze del termine di ricerca all'interno del documento.
2. Crea Intervalli di Evidenziazione: Usa l'API Range in JavaScript per creare intervalli per ogni occorrenza del termine di ricerca.
3. Applica l'Evidenziazione: Usa il metodo CSS.highlights.set() per applicare l'evidenziazione agli intervalli creati.

            
// Codice JavaScript per evidenziare i termini di ricerca
function highlightSearchTerms(searchTerm) {
  // Per prima cosa, definisci l'evidenziazione personalizzata nel CSS
  const highlightName = 'search-highlight';
  const ranges = [];

  // Trova tutti i nodi di testo
  function findTextNodes(el) {
      let n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
      while(n=walk.nextNode()) a.push(n);
      return a;
  }

  const textNodes = findTextNodes(document.body);

  textNodes.forEach(node => {
    let nodeValue = node.nodeValue;
    let index = nodeValue.indexOf(searchTerm);

    while (index !== -1) {
      const range = document.createRange();
      range.setStart(node, index);
      range.setEnd(node, index + searchTerm.length);
      ranges.push(range);
      index = nodeValue.indexOf(searchTerm, index + searchTerm.length);
    }
  });

  // Applica le evidenziazioni usando CSS.highlights.set()
  if (CSS.highlights && CSS.highlights.set) {
    CSS.highlights.set(highlightName, ranges);
  } else {
    console.warn('L\'API CSS Custom Highlight non è completamente supportata in questo browser. Fornito fallback');
    // Fornisci un fallback per i browser con supporto limitato (es. Safari più vecchi)
    ranges.forEach(range => {
      const span = document.createElement('span');
      span.style.backgroundColor = '#FFA07A'; // Salmone Chiaro
      span.style.color = '#000000'; // Nero
      span.className = 'search-highlight-fallback'; // Aggiungi una classe per lo stile di fallback
      range.surroundContents(span);
    });
  }
}

// Codice CSS per lo stile dell'evidenziazione di ricerca
::highlight(search-highlight) {
  background-color: #FFA07A; /* Salmone Chiaro */
  color: #000000; /* Nero */
}

/* Stile di fallback per i browser che non supportano pienamente l'API */
.search-highlight-fallback {
 background-color: #FFA07A;
 color: #000000;
}

// Esempio di utilizzo: evidenzia il termine "example"
highlightSearchTerms("example");

            

              
                Copy
              
            
          

Questo frammento di codice dimostra come evidenziare i termini di ricerca all'interno di un documento utilizzando JavaScript e l'API CSS Custom Highlight. Il codice JavaScript identifica i termini di ricerca, crea intervalli per ogni occorrenza e applica l'search-highlight a tali intervalli. Il codice CSS quindi stilizza il testo evidenziato con uno sfondo salmone chiaro e testo nero.

Nota Importante: Questo approccio richiede JavaScript e si basa sull'API CSS.highlights. Poiché il supporto non è universale, viene dimostrato un meccanismo di fallback (come circondare il testo con uno span e applicare uno stile a quello span).

Considerazioni sull'Accessibilità

Quando si utilizza l'API CSS Custom Highlight, è fondamentale considerare l'accessibilità per garantire che il tuo sito web sia utilizzabile da tutti, compresi gli utenti con disabilità.

Suggerimenti per uno Stile di Selezione del Testo Accessibile:

• Garantire un Contrasto Sufficiente: Mantieni un contrasto sufficiente tra il colore di sfondo e del testo del testo selezionato per renderlo leggibile per gli utenti con disabilità visive. Le linee guida WCAG raccomandano un rapporto di contrasto di almeno 4.5:1 per il testo normale.
• Evita di Fare Affidamento Solo sul Colore: Non fare affidamento solo sul colore per indicare la selezione del testo. Usa segnali visivi aggiuntivi, come la sottolineatura o il grassetto, per rendere la selezione più evidente.
• Fornisci uno Stile Alternativo per la Modalità a Contrasto Elevato: Gli utenti che attivano la modalità a contrasto elevato nel loro sistema operativo potrebbero sovrascrivere i tuoi stili personalizzati. Fornisci uno stile alternativo che funzioni bene in modalità a contrasto elevato per garantire la leggibilità. Puoi usare media query come @media (forced-colors: active) per rilevare quando la modalità a contrasto elevato è abilitata.
• Testa con Tecnologie Assistive: Testa il tuo sito web con tecnologie assistive, come gli screen reader, per garantire che il testo selezionato sia annunciato e compreso correttamente.

Esempio: Garantire un Contrasto Sufficiente

            
::highlight {
  background-color: #000080; /* Blu Navy */
  color: #FFFFFF; /* Bianco */
}

            

              
                Copy
              
            
          

In questo esempio, abbiamo scelto un colore di sfondo blu navy e un colore del testo bianco, che fornisce un contrasto sufficiente per gli utenti con disabilità visive. Usa sempre un verificatore di contrasto cromatico per assicurarti che le tue scelte di colore rispettino gli standard di accessibilità. Strumenti come il Contrast Checker di WebAIM possono essere utili.

Esempi Pratici e Casi d'Uso

L'API CSS Custom Highlight offre una vasta gamma di possibilità per migliorare l'esperienza dell'utente. Ecco alcuni esempi pratici e casi d'uso:

• Evidenziazione del Codice: Come dimostrato in precedenza, è possibile utilizzare l'API per evidenziare frammenti di codice con stili personalizzati, rendendoli visivamente più accattivanti e facili da leggere.
• Evidenziazione dei Termini di Ricerca: Evidenzia i termini di ricerca all'interno di un documento per aiutare gli utenti a individuare rapidamente le informazioni che stanno cercando.
• Evidenziazione degli Errori: Evidenzia errori o avvisi nei moduli o in altre interfacce utente per attirare l'attenzione dell'utente.
• Evidenziazione delle Citazioni: Evidenzia il testo citato in documenti accademici o articoli per distinguerlo visivamente dal contenuto principale.
• Evidenziazione delle Conversazioni: Nelle applicazioni di chat, evidenzia i messaggi dell'utente o i messaggi di utenti specifici per renderli più facili da seguire.
• Gamification: Evidenzia parole o frasi specifiche in un gioco per fornire indizi o suggerimenti al giocatore.
• Riassunto del Testo: Evidenzia frasi o espressioni chiave in un documento per fornire un rapido riassunto del contenuto. Questo spesso comporta algoritmi complessi per determinare l'importanza.

Migliori Pratiche e Suggerimenti

Per sfruttare al meglio l'API CSS Custom Highlight, segui queste migliori pratiche e suggerimenti:

• Usa Nomi di Evidenziazione Descrittivi: Scegli nomi di evidenziazione descrittivi che indichino chiaramente lo scopo dell'evidenziazione. Ciò renderà il tuo codice più leggibile e manutenibile. Ad esempio, usa code-highlight invece di highlight-1.
• Mantieni la Coerenza degli Stili: Mantieni uno stile coerente in tutte le tue evidenziazioni per creare un'esperienza utente coesa. Usa un sistema di design o una guida di stile per garantire la coerenza.
• Evita l'Uso Eccessivo di Evidenziazioni: Non abusare delle evidenziazioni, poiché ciò può distrarre e sopraffare gli utenti. Usale con parsimonia e in modo strategico per attirare l'attenzione sulle informazioni più importanti.
• Testa su Diversi Dispositivi e Browser: Testa il tuo sito web su diversi dispositivi e browser per assicurarti che le tue evidenziazioni personalizzate vengano visualizzate correttamente. Presta particolare attenzione ai dispositivi mobili e ai browser più vecchi.
• Considera le Prestazioni: Sebbene l'API CSS Custom Highlight sia generalmente performante, fai attenzione al numero di evidenziazioni che stai utilizzando, specialmente su documenti di grandi dimensioni. Troppe evidenziazioni possono influire sulle prestazioni. Se stai usando JavaScript per gestire le evidenziazioni, ottimizza il tuo codice per ridurre al minimo il numero di manipolazioni del DOM.
• Usa il Progressive Enhancement: Poiché il supporto dei browser non è universale, usa tecniche di progressive enhancement. Implementa un meccanismo di fallback utilizzando lo stile CSS standard per garantire che l'esperienza rimanga utilizzabile per coloro che usano browser più vecchi. Considera l'uso del rilevamento delle funzionalità (ad esempio, controllando l'esistenza di CSS.highlights) per determinare se utilizzare l'API o il fallback.

Conclusione

L'API CSS Custom Highlight è uno strumento potente per migliorare l'esperienza dell'utente e creare selezioni di testo visivamente più accattivanti e informative. Padroneggiando questa API, puoi portare il design della tua interfaccia utente a un livello superiore e offrire agli utenti un'esperienza di navigazione più coinvolgente e accessibile. Sebbene il supporto dei browser sia ancora in evoluzione, comprendere e sperimentare con questa API ora ti posizionerà per creare esperienze web all'avanguardia man mano che l'adozione cresce. Ricorda di dare priorità all'accessibilità e di fornire fallback per i browser più vecchi per garantire un'esperienza positiva a tutti gli utenti.

Risorse

• MDN Web Docs: CSS Custom Highlight API
• Can I Use: CSS Custom Highlight API
• WebAIM Contrast Checker