Rilevamento delle funzionalità e analisi del browser a confronto
Usare il rilevamento delle funzionalità invece dell’analisi dello user agent
Rilevamento delle funzionalità e analisi del browser a confronto è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Due approcci alla compatibilità
Per sapere se il browser corrente supporta una funzionalità, può rilevare direttamente la funzionalità ("IntersectionObserver" in window) oppure analizzare la stringa dello user agent (navigator.userAgent.includes("Chrome")). Uno dei due approcci è affidabile; l'altro è una fonte di bug ormai storica.
Perché l'analisi dello user agent non funziona
Le stringhe dello user agent sono ingannevoli. Edge dichiara di essere Chrome (oltre che Safari e Firefox). Chrome su Android invia uno UA diverso da Chrome su iOS. Per motivi di privacy, i browser applicano il «congelamento» della stringa UA. Qualsiasi logica basata sulle stringhe UA si rompe ogni pochi mesi.
Pattern per il rilevamento delle funzionalità
Verifichi l'API effettivamente necessaria al codice: if ("IntersectionObserver" in window) { ... }. Se la proprietà esiste, il browser la supporta; in caso contrario, segua il percorso di fallback. Il controllo è diretto, rapido e a prova di futuro.
if ("IntersectionObserver" in window) {
const observer = new IntersectionObserver(handler);
} else {
loadPolyfill().then(() => { /* use IntersectionObserver */ });
}Rilevare e poi utilizzare
Abbini il rilevamento a un fallback reale. Rilevare una funzionalità mancante è utile solo se sa cosa fare quando manca: caricare un polyfill, visualizzare un'alternativa statica o nascondere completamente la funzionalità.
Feature query CSS
Il CSS dispone di un proprio meccanismo di rilevamento delle funzionalità: @supports (display: grid) { ... }. Il blocco viene applicato solo quando il browser comprende la coppia proprietà/valore. Lo utilizzi per distribuire layout con grid e fallback basati sui float per i browser meno recenti.
@supports (display: grid) {
.grid { display: grid; gap: 16px; }
}
@supports not (display: grid) {
.grid > * { float: left; width: 33%; }
}User Agent Client Hints
I browser moderni espongono informazioni strutturate tramite navigator.userAgentData (solo Chromium). Restituisce coppie marca+versione invece di una stringa libera. Continui comunque a preferire il rilevamento delle funzionalità: gli UA hints sono utili solo quando la capacità non può essere dedotta dal controllo di una proprietà.
Quando l'analisi dello user agent è accettabile
L'unico caso d'uso ristretto e valido per il rilevamento dello UA è escludere i browser con bug noti: ad esempio un bug noto di iOS Safari nella versione X. Anche in questo caso, preferisca esclusioni basate sulle funzionalità (CSS.supports("aspect-ratio: 1")). Il rilevamento dello UA dovrebbe essere l'ultima risorsa.
Librerie in stile Modernizr
Modernizr raggruppa numerosi rilevamenti di funzionalità e li espone come classi sull'elemento <html> (html.flexbox, html.no-flexbox). I progetti moderni ne hanno raramente bisogno: la maggior parte dei rilevamenti si risolve con una sola riga, ma rimane utile nelle migrazioni legacy.
Testare il fallback
Una volta implementato il rilevamento, testi entrambi i percorsi. Apra DevTools, imposti la funzionalità su undefined e verifichi che il fallback funzioni. I fallback non testati si deteriorano: quando un utente ne ha bisogno, spesso falliscono in modi che lo sviluppatore non aveva mai immaginato.
Rilevamento nei framework
React, Vue e gli altri framework non dispongono di un'API speciale per il rilevamento: utilizzi JavaScript standard all'interno di un effect o dell'inizializzazione del componente. Le app renderizzate dal server devono effettuare il rilevamento sul client, perché "IntersectionObserver" in window è undefined durante l'SSR.
Eviti l'analisi dello UA basata sulle capacità
Alcuni team controllano lo UA per dedurre le capacità («È un iPhone? Allora probabilmente supporta Touch»). Questo confonde due aspetti non correlati. Rilevi direttamente il touch tramite "ontouchstart" in window o, meglio ancora, preferisca gli eventi pointer, che astraggono dalla modalità di input.
Verifica delle conoscenze
Perché il rilevamento delle funzionalità è preferibile all'analisi dello user agent per gestire le capacità del browser?
Riepilogo
Preferisca il rilevamento delle funzionalità ("API" in window) all'analisi dello user agent. Il CSS offre @supports per lo stesso scopo. Abbini sempre il rilevamento a un fallback reale e testi entrambi i percorsi. Riservi l'analisi dello UA all'esclusione di versioni del browser con bug noti, mai alla deduzione delle capacità.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 40
- Lezioni
- 159
Domande Frequenti
La lezione «Rilevamento delle funzionalità e analisi del browser a confronto» è gratuita?
Sì — il testo completo di «Rilevamento delle funzionalità e analisi del browser a confronto» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Rilevamento delle funzionalità e analisi del browser a confronto»?
Usare il rilevamento delle funzionalità invece dell’analisi dello user agent Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Rilevamento delle funzionalità e analisi del browser a confronto»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- La filosofia PE: partire dall’HTML
- Rilevamento delle funzionalità e analisi del browser a confronto
- Graceful degradation e progressive enhancement a confronto
- Creare un accordion PE