Crea un link che scorre fino a una frase di qualsiasi pagina e la evidenzia usando #:~:text=. Sintassi, regole di codifica, supporto dei browser, stile con ::target-text e un generatore di link.
Un text fragment è un'aggiunta a un indirizzo web, #:~:text= seguito da parole della pagina, che fa scorrere il browser fino a quelle parole e le evidenzia. La voce di menu Copia link all'evidenziazione di Chrome ne crea uno per te, e puoi costruirli a mano con parti facoltative di inizio, fine, prefisso e suffisso.
Prime versioni dei browser che supportano i text fragment (caniuse, ottobre 2026)
Mandare un cliente alla riga esatta della tua politica di reso, o indicare a un committente un paragrafo di una lunga proposta, è meglio che dire "scorri un po' più giù". I link text fragment lo fanno con nient'altro che un URL più lungo; il proprietario della pagina non deve aggiungere ancore. Incolla nel generatore l'indirizzo di una pagina e un passaggio per crearne uno.
Seleziona il testo nella pagina, fai clic con il tasto destro e scegli Copia link all'evidenziazione. La guida di Chrome segnala che, se non riesci a selezionare questa opzione, la funzione potrebbe non funzionare per quel contenuto.
Sì, nelle versioni attuali. caniuse indica il supporto da Safari 16.1 e Firefox 131, oltre a Chrome 81 ed Edge 83. I browser più vecchi aprono semplicemente la pagina dall'inizio.
Le parole potrebbero non comparire esattamente come le hai scritte, una parte potrebbe estendersi su due paragrafi, oppure un trattino nel testo non è stato codificato con la percentuale. Secondo MDN, il testo dentro un iframe non viene mai cercato.
No. MDN spiega che i browser rimuovono la direttiva :~: dall'URL durante il caricamento, quindi gli script della pagina non possono leggerla. Puoi rilevare il supporto con document.fragmentDirective.
Secondo MDN, i browser basati su Chromium rispettano l'header di risposta Document-Policy: force-load-at-top, che esclude una pagina dallo scorrimento ai text fragment.
Forme di text fragment e cosa evidenziano
I browser scelgono un colore di evidenziazione predefinito. Lo pseudo-elemento ::target-text ti permette di adattarlo al tuo brand.
Mantieni un contrasto forte tra il testo e il colore di evidenziazione.
document.fragmentDirective è un oggetto nei browser che lo supportano e undefined negli altri.
Indirizzo della pagina
Parole da evidenziare (o l'inizio di un passaggio lungo)
Fine del passaggio (facoltativa)
Parole subito prima (facoltative)
Parole subito dopo (facoltative)
Il tuo link
Apri il link in una nuova scheda
Inserisci un indirizzo completo che inizi con https://
Inserisci le parole da evidenziare.
Inizia gratis · Nessuna carta di credito richiesta