
Case study
ruby-align è ora disponibile come valore di base
ruby-align ora fa parte di Baseline
Scaricare modelli di IA con l'API Background Fetch
Pubblicata il 20 febbraio 2025 Scaricare in modo affidabile modelli di IA di grandi dimensioni è un'attività impegnativa. Se gli utenti perdono la connessione a internet o chiudono il tuo sito web o la tua applicazione web, perdono i file del modello
Precarica le risorse per velocizzare le navigazioni future
Scopri di più sul suggerimento relativo alla risorsa rel=prefetch e su come utilizzarlo.
Ottimizza Cumulative Layout Shift
Cumulative Layout Shift (CLS) è una metrica che quantifica la frequenza con cui gli utenti riscontrano cambiamenti improvvisi nei contenuti della pagina. In questa guida illustreremo l'ottimizzazione delle cause comuni della metrica CLS, come immagini e iframe senza dimensioni o contenuti dinamici.
Esegui il debug delle variazioni del layout
Scopri come identificare e correggere le variazioni del layout.
I CSS scrollbar-color e scrollbar-gutter sono ora disponibili come base di riferimento
I CSS scrollbar-color e scrollbar-gutter sono stati implementati in tutti i principali motori dei browser, quindi sono disponibili come base di riferimento.
Riepilogo mensile della base di riferimento di gennaio 2025
In questa prima edizione, il digest mensile di Baseline illustra gli eventi di Baseline sia in Google che nella community di sviluppatori web a gennaio 2025.
Le ottimizzazioni WasmGC e delle chiamate al termine Wasm sono ora disponibili come base di riferimento
Le ottimizzazioni della garbage collection e delle chiamate al termine di Wasm di WebAssembly sono ora disponibili in tutti i principali motori dei browser, il che le rende di nuova disponibilità come base di riferimento.
Largest Contentful Paint (LCP)
Questo post presenta la metrica Largest Contentful Paint (LCP) e spiega come misurarla
Promise.try è ora disponibile come baseline
Promise.try è ora disponibile in tutti i principali motori dei browser, quindi è stato inserito nella categoria Base: appena disponibile.
Creare chatbot locali e compatibili con l'offline
Data di pubblicazione: 13 gennaio 2024 Esistono molti progetti straordinari che puoi realizzare con l'IA, con i classici modelli di machine learning e i più recenti modelli linguistici di grandi dimensioni (LLM). Con gli LLM, i computer possono
Ottimizza le attività lunghe
Ti è stato detto di "non bloccare il thread principale" e di "interrompere le tue attività lunghe", ma cosa significa fare quelle cose?
Applicare effetti alle immagini con la proprietà mask-image CSS
Il mascheramento CSS offre la possibilità di utilizzare un'immagine come livello maschera. Ciò significa che puoi utilizzare un'immagine, un SVG o un gradiente come maschera per creare effetti interessanti senza un editor di immagini.
Base di riferimento 2024: più strumenti per aiutare gli sviluppatori web
set di dati delle funzionalità web, dashboard dello stato della piattaforma web, widget dello stato del valore di riferimento e altro ancora. Dai un'occhiata al 2024 di Baseline.
Caricamento lento del video
Questo post spiega il caricamento lento e le opzioni a tua disposizione per implementarlo nei video.
Precarica i moduli
Il precaricamento dei moduli offre un modo per caricare preventivamente i moduli JavaScript in modo dichiarativo.
Misurare la compilazione automatica del browser nei tuoi moduli
Per ottimizzare l'esperienza utente, è essenziale capire in che modo gli utenti interagiscono con i tuoi moduli. La compilazione automatica del browser svolge un ruolo significativo in questo processo. Scopri come raccogliere e analizzare i dati sul modo in cui gli utenti utilizzano la compilazione automatica nei tuoi moduli.
Parte 2: crea un sistema di rilevamento della tossicità basato sull'IA lato client
Il rilevamento della tossicità protegge gli utenti e crea un ambiente online più sicuro. Nella seconda parte, impariamo a creare uno strumento di AI lato client per rilevare e mitigare la tossicità alla fonte.
Tempo di blocco totale (TBT)
Questo post descrive la metrica Tempo di blocco totale (TBT) e spiega come misurarla
Iniziare a misurare Web Vitals
Scopri come misurare i Web Vitals del tuo sito sia in ambienti reali che di laboratorio.
I modi più efficaci per migliorare Core Web Vitals
Una raccolta di best practice che Chrome ha identificato come le maggiori opportunità per ottimizzare il rendimento del web e migliorare i Core Web Vitals
Web Vitals
Metriche essenziali per un sito sano
Ottimizza visualizzazione elemento Largest Contentful
Una guida passo passo su come suddividere l'LCP e identificare le aree chiave da migliorare.
La proprietà CSS content-visibility è ora disponibile come riferimento
La proprietà CSS content-visibility è ora disponibile come riferimento.
Come sono state definite le soglie delle metriche di Core Web Vitals
La ricerca e la metodologia alla base delle soglie dei Segnali web essenziali
Diagnostica manuale delle interazioni lente nel lab
Hai esaminato i dati sul campo e hai scoperto che le tue interazioni sono lente. Il passaggio successivo consiste nell'ottenere ulteriori informazioni su come testare manualmente queste interazioni e identificare le cause alla base.
Flussi di lavoro di Segnali web essenziali con gli strumenti Google
Data la crescente importanza di Core Web Vitals, i proprietari di siti e gli sviluppatori si concentrano sempre di più sulle prestazioni e sulle esperienze utente chiave. Google offre molti strumenti per valutare, ottimizzare e monitorare le pagine, ma gli utenti spesso sono confusi dalle diverse fonti di dati e da come utilizzarle in modo efficace. Questa guida propone un flusso di lavoro che combina diversi strumenti e chiarisce dove e come hanno senso durante il processo di sviluppo.
Baseline
Questo articolo spiega la storia di Baseline, il coinvolgimento di Google e la proprietà del gruppo della community WebDX.
Cache back-forward
Scopri come ottimizzare le tue pagine per i caricamenti istantanei quando utilizzi i pulsanti Avanti e Indietro del browser.
Il nidificazione CSS migliora con CSSNestedDeclarations
La nidificazione CSS sta migliorando notevolmente.
Prestazioni del debug sul campo
Scopri come attribuire i dati sulle prestazioni con informazioni di debug che ti aiutano a identificare e risolvere i problemi degli utenti reali con l'analisi
First Input Delay (FID)
Questo post introduce la metrica First Input Delay (FID) e spiega come misurarla
Benchmarking del rendimento della proprietà @CSS
Che impatto ha @property sul rendimento del CSS?
Correlare i Core Web Vitals e le entrate pubblicitarie con gli strumenti Google
Scopri come utilizzare gli strumenti Google per correlare Core Web Vitals alle entrate pubblicitarie.
Spazio di archiviazione per il Web
Sono disponibili molte opzioni diverse per l'archiviazione dei dati nel browser. Qual è il più adatto alle tue esigenze?
È ora di eseguire il caricamento lento degli iframe fuori schermo.
Questo post spiega l'attributo di caricamento e come utilizzarlo per controllare il caricamento degli iframe.
Creare più applicazioni web progressive nello stesso dominio
Scopri i modi consigliati e non consigliati per creare più PWA riutilizzando lo stesso dominio con i relativi pro e contro.
Il protocollo Web Push
Un tutorial interattivo passo passo che mostra come creare un server per gestire le iscrizioni alle notifiche push e inviare richieste di protocollo web push a un servizio push.
Modalità di gestione degli aggiornamenti del file manifest dell'app web in Chrome
Cosa serve per modificare icone, scorciatoie, colori e altri metadati nel file manifest dell'app web per la tua PWA.
Cosa serve per essere installabile?
Criteri di installabilità delle app web progressive.
Quali sono le caratteristiche di una buona app web progressiva?
Quali sono le caratteristiche di un'app web progressiva di qualità o di qualità?
Aggiungi un file manifest di un'app web
Il file manifest dell'app web è un semplice file JSON che indica al browser come dovrebbe comportarsi l'app web.
Mitiga il cross-site scripting (XSS) applicando un criterio di sicurezza del contenuto (CSP) rigoroso.
Scopri come eseguire il deployment di un CSP basato su nonce o hash di script come difesa in profondità contro il cross-site scripting.
Accesso a dispositivi hardware sul Web
Questo articolo aiuta gli sviluppatori web a scegliere l'API hardware giusta in base a un determinato dispositivo.
Consenti il riutilizzo delle passkey sui tuoi siti con richieste di origini correlate
Scopri come utilizzare le richieste di origine correlata per consentire il riutilizzo delle passkey nei tuoi siti.
Caricamento lento delle immagini a livello di browser per il Web
Questo post illustra l'attributo di caricamento e come può essere utilizzato per controllare il caricamento delle immagini.
Scegli il formato dell'immagine corretto
La selezione del formato dell'immagine giusto è il primo passo per pubblicare immagini ottimizzate sul tuo sito web. Questo post ti aiuta a fare la scelta giusta.
Metriche personalizzate
Le metriche personalizzate ti consentono di misurare e ottimizzare gli aspetti dell'esperienza del tuo sito unici per il tuo sito.
Misura e debugga il rendimento con Google Analytics 4 e BigQuery
Scopri come inviare i dati Web Vitals alle proprietà Google Analytics 4 ed esportarli a fini di analisi in BigQuery e Looker Studio.
Best practice per le autorizzazioni web
Questa guida illustra le best practice da seguire per i siti web quando chiedono agli utenti l'autorizzazione ad accedere a funzionalità sensibili (come la fotocamera, il microfono e la posizione) per ridurre al minimo i prompt non necessari e il blocco dell'accesso.
Best practice per le notifiche sui cookie
Scopri in che modo le notifiche relative ai cookie influiscono sul rendimento, sulla misurazione del rendimento e sull'esperienza utente.
Personalizza le notifiche multimediali e i controlli di riproduzione con l'API Media Session
Gli sviluppatori web possono personalizzare le notifiche dei contenuti multimediali e rispondere a eventi relativi ai contenuti multimediali, come la ricerca o il cambio di traccia, con l'API Media Session.
Utilizzare tabindex
Utilizza l'attributo tabindex per impostare esplicitamente la posizione della scheda di un elemento.
Trova interazioni lente sul campo
Prima di poter riprodurre le interazioni lente in laboratorio per ottimizzare l'interazione con Next Paint del tuo sito web, dovrai fare affidamento sui dati sul campo per trovarle. Scopri come farlo in questa guida.
Tempo per primo byte (TTFB)
Questo post presenta la metrica Time to First Byte (TTFB) e spiega come misurarla.
Ingegneria pratica del prompt per LLM più piccoli
Scopri come regolare i prompt per ottenere i tuoi risultati preferiti su modelli LLM, dimensioni e modelli diversi.
Interaction to Next Paint (INP)
Questo post presenta la metrica Interaction to Next Paint (INP), spiega come funziona e come misurarla, oltre a offrire suggerimenti su come migliorarla.
Colori CSS dipendenti dallo schema di colori con light-dark()
descrizione: definisci i colori che reagiscono allo schema di colori utilizzato con la funzione light-dark().
Pattern delle prestazioni di WebAssembly per le app web
In questa guida, rivolta agli sviluppatori web che vogliono trarre vantaggio da WebAssembly, imparerai a utilizzare Wasm per esternalizzare attività ad alta intensità di CPU con l'aiuto di un esempio in esecuzione.
Layout griglia animati CSS
Nella griglia CSS, le proprietà "grid-template-columns" e "grid-template-rows" ti consentono di definire i nomi delle linee e il dimensionamento delle righe e delle colonne della griglia, rispettivamente. Il supporto dell'interpolazione per queste proprietà consente ai layout della griglia di passare facilmente da uno stato all'altro, invece di agganciarsi al punto a metà di un'animazione o transizione.
Gioca a Dino di Chrome con il tuo gamepad
Scopri come controllare i giochi web con l'API Gamepad.
L'attributo inerte
La proprietà inerte è un attributo HTML globale che semplifica la procedura di rimozione e ripristino degli eventi di input utente per un elemento, inclusi gli eventi di focus e gli eventi delle tecnologie per la disabilità.
Determina il provider di passkey con AAGUID
Le parti affidabili possono determinare la provenienza della passkey esaminando AAGUID. Scopri come funziona.
Compilazione e ottimizzazione di Wasm con Binaryen
Utilizzando l'esempio di un linguaggio giocattolo sintetico chiamato ExampleScript, scopri come scrivere e ottimizzare moduli WebAssembly in JavaScript utilizzando l'API Binaryen.js.
Il componente web <model-viewer>
Il componente web <model-viewer> ti consente di utilizzare modelli 3D su una pagina web in modo dichiarativo.
Acquisisci audio e video in HTML5
La registrazione audio/video è stata il "Santo Graal" dello sviluppo web per molto tempo. Per molti anni abbiamo dovuto fare affidamento su plug-in per browser ( Flash o Silverlight ) per svolgere il nostro lavoro. Dai! HTML5 viene in soccorso.
Approfondimento su user Verification
Scopri come utilizzare "userVerification" in WebAuthn
Perché i dati CrUX sono diversi da quelli RUM?
Scopri i motivi per cui i dati RUM possono mostrare valori di Segnali web essenziali diversi da quelli di CrUX.
Accessibilità per gli sviluppatori web
È importante creare siti inclusivi e accessibili a tutti. Ci sono almeno sei aree chiave di disabilità che possono essere ottimizzate: visiva, uditiva, mobilità, cognitiva, vocale e neurale.
Carica JavaScript di terze parti
Gli script di terze parti offrono una vasta gamma di funzionalità utili, rendendo il web più dinamico. Scopri come ottimizzare il caricamento degli script di terze parti per ridurne l'impatto sul rendimento.
Impedisci la creazione di una nuova passkey se ne esiste già una
Scopri come impedire la creazione di una nuova passkey se ne esiste già una nel gestore delle password dell'utente.
Utilizza IndexedDB
Una guida alle nozioni di base su IndexedDB.
5 snippet CSS che ogni sviluppatore front-end dovrebbe conoscere nel 2024
CSS affidabile, potente e stabile al primo posto.
Ottimizza il tempo per il primo byte
Scopri come eseguire l'ottimizzazione in base alla metrica Time to First Byte.
Quali sono le parti di un URL?
Qual è la differenza tra host, sito e origine? Che cos'è un eTLD+1? Questo articolo spiega.
Approfondimento sulle credenziali rilevabili
Scopri cosa sono le credenziali rilevabili e come creare esperienze utente adatte al tuo caso d'uso.
Prestazioni di rendering
Gli utenti notano se siti e app non funzionano correttamente, quindi ottimizzare le prestazioni del rendering è fondamentale.
RidimensionaObservationr: è come document.onresize per gli elementi
"RidimensionaObservationr" ti avvisa quando il rettangolo dei contenuti di un elemento cambia dimensione, in modo che tu possa reagire di conseguenza.
Ottimizza la codifica e le dimensioni di trasferimento degli asset basati su testo
Oltre a eliminare i download di risorse non necessarie, la soluzione migliore per migliorare la velocità di caricamento della pagina è ridurre al minimo le dimensioni di download complessive ottimizzando e comprimendo le risorse rimanenti.
OffscreenCanvas: velocizza le operazioni del canvas con un worker web
Questo documento spiega come utilizzare l'API OffscreenCanvas per ottenere miglioramenti delle prestazioni durante il rendering delle immagini nella tua app web.
First Contentful Paint (FCP)
Questo post presenta la metrica First Contentful Paint (FCP) e spiega come misurarla
Reti CDN (Content Delivery Network)
Questo articolo fornisce una panoramica completa delle reti CDN (Content Delivery Network). Spiega, inoltre, come scegliere, configurare e ottimizzare una configurazione CDN.
Cosa favorisce una buona esperienza di uscita?
Indicazioni pratiche per gli sviluppatori su cosa fare quando un utente si disconnette dal sito web.
Tempo all'interattività (TTI)
Questo post presenta la metrica Tempo all'interattività (TTI) e spiega come misurarla
Ottimizza il caricamento delle risorse con l'API Fetch Priority
L'API Fetch Priority indica la priorità relativa delle risorse rispetto al browser. Può consentire un caricamento ottimale e migliorare i Segnali web essenziali.
Le pseudo-classi :user-valid e :user-invalid
Informazioni sulle pseudo-classi :user-valid e :user-invalid e su come utilizzarle per migliorare l'esperienza utente della convalida dell'input.
Ottimizza Core Web Vitals per i responsabili delle decisioni aziendali
Scopri in che modo i responsabili delle decisioni aziendali e i non sviluppatori possono migliorare i Segnali web essenziali.
Le sfumature delle stringhe di codifica Base64 in JavaScript
Comprendi ed evita i problemi comuni relativi all'applicazione della codifica e decodifica Base64 alle stringhe.
Griglia CSS
La griglia consente la condivisione della griglia, consentendo l'allineamento delle griglie nidificate ai predecessori e ai livelli di pari livello.
Caricamento efficace degli annunci senza influire sulla velocità della pagina
Nel mondo digitale di oggi, la pubblicità online è una parte fondamentale del web senza costi di cui tutti usufruiamo. Tuttavia, gli annunci implementati in modo inadeguato possono rallentare l'esperienza di navigazione, frustrare gli utenti e ridurre il coinvolgimento. Scopri come caricare gli annunci in modo efficace senza influire sulla velocità della pagina, garantendo un'esperienza utente ottimale e massimizzando le opportunità di entrate per i proprietari di siti web.
Quattro tipi comuni di copertura del codice
Scopri cos'è la copertura del codice e i quattro modi comuni per misurarla.
Testare o meno, una prospettiva tecnica
Determina gli elementi da testare e quelli da escludere.
Definizione di scenari di test e priorità
Stabilisci gli elementi da testare, definisci gli scenari di test e dai priorità.
Metriche sul rendimento incentrate sull'utente
Le metriche sul rendimento incentrate sull'utente sono uno strumento fondamentale per comprendere e migliorare l'esperienza sul tuo sito a vantaggio degli utenti reali.
Precarica le immagini adattabili
Scopri le nuove ed entusiasmanti possibilità di precaricamento delle immagini adattabili al fine di garantire un'esperienza utente ottimale.
Adattare gli aspetti tipografici alle preferenze degli utenti con i CSS
Un metodo per adattare un carattere alle preferenze degli utenti, in modo che possano leggere i tuoi contenuti al massimo.
Piramide o granchio? Trova una strategia di test adatta
Scopri come combinare diversi tipi di test in una strategia ragionevole che si adatti al tuo progetto.
Tre tipi comuni di automazione dei test
Iniziamo dalle basi. Esplorazione delle due modalità di test generali e dei tre tipi comuni di automazione dei test.
Eliminazione dei download non necessari
Dovresti controllare periodicamente le risorse per assicurarti che ciascuna contribuisca a offrire un'esperienza utente migliore.
Compilazione di mkbitmap in WebAssembly
Il programma mkbitmap C legge un'immagine e vi applica una o più delle seguenti operazioni, in questo ordine: inversione, filtro passa-alto, scalabilità e soglia. Ogni operazione può essere controllata e attivata o disattivata singolarmente. Questo articolo mostra come compilare mkbitmap in WebAssembly.
Che cos'è WebAssembly e da dove viene?
Un'introduzione a WebAssembly (a volte abbreviata Wasm), il formato di codice binario portatile e il formato di testo corrispondente per i programmi eseguibili, nonché le interfacce software per facilitare le interazioni tra questi programmi e l'ambiente host.
Il file system privato di origine
Lo standard File System introduce un file system privato dell'origine (OPFS) come endpoint di archiviazione privato dell'origine della pagina e non visibile all'utente che fornisce l'accesso facoltativo a un tipo speciale di file altamente
Hosting sicuro dei dati utente nelle moderne applicazioni web
Come visualizzare in modo sicuro i contenuti controllati dagli utenti su applicazioni web.
Implementazione di AVIF per siti web più reattivi
Una panoramica su come AVIF viene adottato nell'ecosistema e sui vantaggi in termini di prestazioni e qualità che gli sviluppatori possono aspettarsi da AVIF per immagini statiche e animazioni.
Ottimizza l'interazione con la prossima visualizzazione
Scopri come ottimizzare l'interazione con Next Paint del tuo sito web.
Funzionalità di riferimento che puoi usare oggi
Scopri alcune delle funzionalità che fanno parte di Baseline.
Ottimizza ritardo input
Il ritardo di input può contribuire in modo significativo alla latenza totale di interazione e influire negativamente sull'INP della tua pagina. In questa guida scoprirai cos'è il ritardo dell'input e come puoi ridurlo per un'interattività più rapida.
In che modo le dimensioni DOM di grandi dimensioni influiscono sull'interattività e che cosa puoi fare a riguardo
Le grandi dimensioni del DOM possono essere un fattore determinante per determinare se le interazioni sono rapide o meno. Scopri di più sulla relazione tra le dimensioni del DOM e l'INP, su cosa puoi fare per ridurre le dimensioni del DOM e su altri modi per limitare il lavoro di rendering quando la pagina ha molti elementi DOM.
Rendering lato client di HTML e interattività
Il rendering del codice HTML con JavaScript è diverso dal rendering dell'HTML inviato dal server, che può influire sulle prestazioni. Scopri le differenze in questa guida e cosa puoi fare per preservare il rendimento del rendering del tuo sito web, in particolare per quanto riguarda le interazioni.
Valutazione degli script e attività lunghe
Durante il caricamento degli script, il browser impiega del tempo per valutarli prima dell'esecuzione, il che può causare attività lunghe. Scopri come funziona la valutazione degli script e cosa puoi fare per evitare che causi attività lunghe durante il caricamento della pagina.
Crea esperienze WordPress nel browser con WordPress Playground e WebAssembly
L'intero WordPress basato su PHP in esecuzione esclusivamente nel browser con WebAssembly
Cumulative Layout Shift (CLS)
Questo post presenta la metrica Cumulative Layout Shift (CLS) e spiega come misurarla.
Nuove funzionalità per gli sviluppatori offerte da WebAssembly
Una presentazione degli strumenti ora disponibili sul web grazie a WebAssembly.
Che cosa sono le mappe di origine?
Migliora l'esperienza di debug web con le mappe di origine.
PWA negli store
Le app web progressive possono essere inviate ad app store come il Play Store Android o Microsoft Store e altri ancora.
6 snippet CSS che ogni sviluppatore front-end dovrebbe conoscere nel 2023
CSS affidabile, potente e stabile al primo posto.
Funzioni trigonometriche in CSS
Calcola il seno, il coseno, la tangente e altro in CSS.
Esegui operazioni efficienti per frame video sul video con requestVideoFrameCallback()
Il metodo requestVideoFrameCallback() consente agli autori web di registrare un callback che viene eseguito nei passaggi di rendering quando un nuovo frame video viene inviato al compositore.
In evidenza per la community GDE: Lars Knudsen
Una serie di interviste con i membri del programma Google Developers Interop (GDE).
Nuovi pattern per le app multimediali
Questo post del blog annuncia una nuova raccolta di pattern per le app multimediali.
Suggerimento CSS veloce. Testo sfumatura animato
Creiamo l'effetto di testo con sfumatura animata con proprietà personalizzate basate sugli ambiti e background-clip Vai su CodePen e crea un nuovo pen. Crea il markup per il testo. Utilizziamo un titolo con la parola "Veloce": Poi, diamo al nostro
Creo Chrometober!
Come ha preso vita il libro a scorrimento grazie alla condivisione di suggerimenti e trucchi divertenti e paurosi su questa Chrome.
Creazione di un componente della descrizione comando
Una panoramica di base su come creare un elemento personalizzato con descrizione comando adattabile e accessibile al colore.
Crea una passkey per gli accessi senza password
Le passkey rendono gli account utente di un sito web più sicuri, semplici, facili da usare e senza password. Questo articolo spiega come consentire agli utenti di creare passkey per il tuo sito web.
Accedere con una passkey tramite la compilazione automatica dei moduli
Le passkey rendono gli account utente di un sito web più sicuri, semplici, facili da usare e senza password. Questo articolo spiega come progettare un accesso senza password con passkey al fine di supportare gli utenti con password esistenti.
Creazione di un componente Pulsante di azione floating (FAB)
Una panoramica fondamentale su come creare componenti FAB adattabili al colore, reattivi e accessibili.
Best practice per i caratteri
Scopri come ottimizzare i caratteri web per i Segnali web essenziali.
Testare il contrasto di colore del web design
Una panoramica di tre strumenti e tecniche per testare e verificare il contrasto di colore accessibile del design.
In evidenza per la community GDE: Alba Silvente Fuentes
Una serie di interviste con i membri del programma Google Developers Interop (GDE).
Suggerimento CSS veloce. Caricatore animato
Creiamo un caricamento CSS animato con proprietà personalizzate basate sugli ambiti e animation-timing-function Vai su CodePen e crea un nuovo pen. Crea il markup per il nostro caricatore. Tieni presente l'utilizzo delle proprietà personalizzate in
Creare la navigazione principale di un sito web
Questo tutorial descrive come creare una navigazione principale accessibile in un sito web. Scoprirai l'HTML semantico, l'accessibilità e come l'utilizzo degli attributi ARIA a volte può fare più male che bene.
È :modal?
Questo pratico pseudo-selettore CSS offre un modo per selezionare elementi modali.
Creazione di un'illusione a griglia storta
Una divertente esplorazione dei modi per ricreare un'illusione ottica con CSS.
Best practice per tag e gestori tag
Ottimizza tag e tag manager per Core Web Vitals.
Stili elenco creatività
Ecco alcuni modi utili e creativi per definire un elenco.
In che modo Nordhealth utilizza proprietà personalizzate nei componenti web
Vantaggi dell'utilizzo di proprietà personalizzate nei sistemi di progettazione e nelle librerie dei componenti.
Controllo più granulare sulle trasformazioni CSS con proprietà di trasformazione individuali
Scopri come utilizzare le singole proprietà CSS di traslazione, rotazione e scalabilità per affrontare le trasformazioni in modo intuitivo.
Animazioni dei bordi CSS
Vediamo diversi modi per animare un bordo in CSS
Scopri in che modo la BBC sta implementando HSTS per migliorare la sicurezza e le prestazioni.
La BBC sta implementando HSTS per il proprio sito web al fine di migliorare la sicurezza e le prestazioni. Scopri cosa significa e in che modo HSTS può aiutarti.
Perché i dati di prova controllati e sul campo possono essere diversi (e cosa fare al riguardo)
Scopri perché gli strumenti che monitorano le metriche di Segnali web essenziali possono indicare numeri diversi e come interpretare tali differenze.
Una situazione vantaggiosa per tutti
La GDE Enrique Fernandez Guerra sull'open sourcing della sua ONG HelpDev.
La fine di Internet Explorer
Cosa comportava l'interruzione del supporto di Internet Explorer per i clienti e gli sviluppatori di Maersk.com.
Addio a HTML5Rocks
Per quanto tempo HTML5Rocks, è stato bello conoscerti.
Ricette di biscotti originali
Scopri come impostare i cookie proprietari per garantire la sicurezza, la compatibilità tra i browser e ridurre al minimo le possibilità di interruzione una volta eliminati i cookie di terze parti.
Sincronizzare la riproduzione di audio e video sul Web
L'API Web Audio consente di ottenere correttamente la sincronizzazione AV.
Utilizza gradienti conici per creare un bordo freddo
I gradienti conici possono essere utilizzati per creare effetti interessanti, come questo bel bordo. Questo CodePen creato da Adam Argyle, originariamente condiviso tramite questo tweet su Twitter, mostra come utilizzare un gradiente conico
Scegli una libreria o un framework JavaScript
Scopri le decisioni relative all'utilizzo di una libreria o un framework JavaScript.
Differenza tra librerie e framework JavaScript
Comprendi le differenze tra framework e librerie nel contesto di un ambiente JavaScript lato client.
Implementa la gestione degli errori durante l'utilizzo dell'API Fetch
Rilevamento di errori durante l'utilizzo dell'API Fetch.
Un'API per caratteri web accattivanti e veloci
Un aggiornamento sull'API CSS di Google Fonts: come funziona, come usarla e come può pubblicare in modo efficiente i tuoi caratteri web.
Guida al terminale per gli sviluppatori front-end
Questa risorsa può aiutarti a orientarti rapidamente all'interno del terminale.
GOV.UK elimina jQuery dal front-end.
GOV.UK ha eliminato la dipendenza jQuery dal front-end. Non indovinerai mai cosa è successo. (Sì.)
Creazione di un componente di un pulsante
Una panoramica di base su come creare componenti adattabili al colore, adattabili e accessibili.
Non combattere lo scanner di precaricamento del browser
Scopri cos'è lo scanner di precaricamento del browser, in che modo migliora le prestazioni e come puoi evitare di intralciarlo.
Annullare le distanze
Semplificare la creazione per il Web.
Best practice per la misurazione dei Segnali web sul campo
Come misurare i Segnali web con il tuo attuale strumento di analisi
Trovare coraggio e ispirazione nella community di sviluppatori
Esperti di Google Developers sul Web che spiegano come i programmi di mentoring hanno permesso loro di diventare leader.
Caratteri variabili nella vita reale
Una guida pratica ai caratteri variabili, con molti esempi.
Crea rapidamente piacevoli gradienti CSS con CSS Gradient Creator
Questo strumento di Josh W Comeau rende estremamente semplice creare sfumature dall'aspetto accattivante.
Approfondire i principali punti deboli degli sviluppatori web
Una raccolta di approfondimenti sui principali punti deboli, raccolti da una serie di conversazioni individuali con gli sviluppatori web.
Perfeziona il tuo sito con images.tooling.report
Controlla lo stato degli strumenti per le immagini.
Ambito della variabile globale e locale
Scopri di più sull'ambito e su come funziona in JavaScript.
Creazione di un componente di dialogo
Una panoramica di base su come creare mini e mega modali adattabili al colore, adattabili e accessibili con l'elemento ".
Eseguire il debug degli errori di riproduzione di contenuti multimediali sul web
Scopri come eseguire il debug degli errori di riproduzione dei contenuti multimediali sul web.
In evidenza per la community GDE: Nishu Goel
Una serie di interviste con i membri del programma Google Developers Interop (GDE).
Effetti sulle prestazioni di un caricamento lento eccessivo
Il caricamento delle immagini all'interno dell'area visibile iniziale, con il caricamento lento del resto, può migliorare i Core Web Vitals caricando meno byte.
Creazione di un componente della barra di caricamento
Una panoramica di base su come creare una barra di caricamento adattivo e accessibile per i colori con l'elemento "".
Salva le credenziali da Moduli
Mantieni i moduli di registrazione e di accesso il più semplici possibile. Salva le credenziali dai moduli di accesso in modo che gli utenti non debbano accedere di nuovo quando tornano. Per memorizzare le credenziali utente dai moduli: Prima di
A breve Chrome e Firefox raggiungeranno la versione principale 100
Le modifiche alla stringa dello user agent, le strategie che Chrome e Firefox stanno adottando per mitigare l'impatto e come puoi aiutare.
Creare una favicon adattiva
Una panoramica di base su come creare una favicon adattiva.
Disegno su canvas in Emscripten
Scopri come eseguire il rendering di grafica 2D su un canvas sul Web da WebAssembly con Emscripten.
Migliora la sicurezza e la privacy aggiornando la cache HTTP
Dimenticare o utilizzare in modo improprio l'intestazione Cache-Control potrebbe influire negativamente sulla sicurezza del tuo sito web e sulla privacy dei tuoi utenti. Ricevi consigli per siti web di alto valore.
Elementi HTML aggiuntivi
Metriche essenziali per un sito sano
Portare le applicazioni USB sul Web. Parte 2: gPhoto2
Scopri come gPhoto2 è stato trasferito in WebAssembly per controllare le fotocamere esterne tramite USB da un'app web.
Registrazione degli errori di rete (NEL)
Utilizza il logging degli errori di rete (NEL) per raccogliere gli errori di rete lato client.
Rilevamento delle funzionalità di WebAssembly
Scopri come utilizzare le funzionalità più recenti di WebAssembly e supportare gli utenti su tutti i browser.
Portare le applicazioni USB sul Web. Parte 1: libusb
Scopri come il codice che interagisce con dispositivi esterni può essere portato sul web con le API WebAssembly e Fugu.
Creazione di un componente per il cambio di tema
Una panoramica di base su come creare un componente per il cambio di tema adattivo e accessibile.
Incorporare snippet JavaScript in C++ con Emscripten
Scopri come incorporare codice JavaScript nella tua libreria WebAssembly per comunicare con il mondo esterno.
PWA su Oculus Quest 2
Oculus Quest 2 è un visore per la realtà virtuale (VR) creato da Oculus, una divisione di Meta. Ora gli sviluppatori possono creare e distribuire app web progressive (PWA) 2D e 3D che sfruttano la funzionalità multitasking di Oculus Quest 2. Questo articolo descrive l'esperienza e come creare, installare tramite sideload e testare la tua PWA in Oculus Quest 2.
Progettazione edifici
Uno sguardo al processo e agli strumenti utilizzati per creare l'esperienza di Designcember in stile calendario festivo.
Calcolatore Designcember
Un tentativo stravagante di ricreare sul web un calcolatore solare che utilizzi il sensore della luce ambientale e la funzionalità di sovrapposizione dei controlli delle finestre.
Deep-copying in JavaScript utilizzando structuredClone
Per molto tempo, hai dovuto ricorrere a soluzioni alternative e librerie per creare una copia completa di un valore JavaScript. La piattaforma ora include "StructuredClone()", una funzione integrata per il deep-copy.
Creazione di un componente toast
Una panoramica di base su come creare un componente toast adattivo e accessibile.
Fondo UI
Annuncio del fondo per l'UI di Chrome, progettato per fornire sovvenzioni alle persone che lavorano su strumenti di design, CSS e HTML.
Creazione di un componente del menu di un gioco 3D
Una panoramica di base su come creare un menu 3D reattivo, adattivo e accessibile.
Verso una metrica di fluidità dell'animazione
Scopri come misurare le animazioni, come valutare i frame dell'animazione e come regolare l'uniformità della pagina.
Tutto annunciato al Chrome Dev Summit 2021
Una raccolta di tutte le principali comunicazioni del Chrome Dev Summit 2021, con i link per saperne di più.
Novità di PageSpeed Insights
Scopri le ultime novità di PageSpeed Insights per poter misurare e ottimizzare meglio la qualità della tua pagina e del tuo sito.
Flussi utente di Lighthouse
Prova una nuova API Lighthouse per misurare le prestazioni e le best practice in un flusso utente.
Il viaggio di Photoshop sul Web
Negli ultimi tre anni, Chrome ha lavorato per supportare le applicazioni web che vogliono superare i limiti di ciò che è possibile fare nel browser. Una di queste applicazioni web è stata Photoshop. Solo pochi anni fa sarebbe stato difficile eseguire software complessi come Photoshop direttamente nel browser. Tuttavia, grazie all'utilizzo di varie nuove tecnologie web, Adobe ha ora reso disponibile sul web una versione beta pubblica di Photoshop.
Creare un componente a selezione multipla
Una panoramica di base su come creare un componente a selezione multipla, adattabile, adattivo e accessibile per ordinare e filtrare le esperienze utente.
Come valutare le prestazioni di caricamento sul campo con Navigation Timing e Resource Timing
Apprendi le nozioni di base sull'utilizzo delle API Navigation e Resource Timing per valutare le prestazioni di caricamento sul campo.
Manipolazione sicura del DOM con l'API Sanitizer
La nuova API Sanitizer mira a creare un processore robusto per stringhe arbitrarie da inserire in modo sicuro in una pagina. Questo articolo presenta l'API e ne spiega l'utilizzo.
Best practice per l'utilizzo di incorporamenti di terze parti
Questo documento illustra le best practice per le prestazioni che puoi utilizzare durante il caricamento di incorporamenti di terze parti, tecniche di caricamento efficienti e lo strumento Terminatore della variazione del layout, che aiuta a ridurre le variazioni del layout per gli incorporamenti più diffusi.
In che modo le architetture SPA influiscono sui Segnali web essenziali
Risposte alle domande più comuni su SPA, Segnali web essenziali e sul piano di Google per affrontare gli attuali limiti di misurazione.
Approfondimento sugli eventi JavaScript
preventDefault e stopPropagation: quando utilizzarli e che cosa fa esattamente ciascun metodo. La gestione degli eventi JavaScript è spesso semplice. Questo è particolarmente vero quando si ha a che fare con una struttura HTML semplice (relativamente
Raggruppamento di risorse non JavaScript
Scopri come importare e raggruppare vari tipi di asset da JavaScript in un modo che funzioni sia nei browser sia nei bundle.
Creazione di un componente Pulsante di suddivisione
Una panoramica di base su come creare un componente Pulsante di suddivisione accessibile.