In che modo Cybozu ha eliminato l'overhead di compatibilità del browser con Baseline

Sakura Adachi

Yuriko Hirota

Data di pubblicazione: 7 novembre 2025

Gestire la compatibilità del browser per oltre 38.000 clienti aziendali in Giappone non è un'impresa semplice. Quando Kintone gestisce operazioni aziendali critiche per oltre 1,5 milioni di applicazioni al giorno, ogni decisione di supporto del browser è importante.

Cybozu, un'azienda leader di groupware in Giappone, ha dovuto affrontare una sfida fondamentale: come mantenere standard web coerenti tra i prodotti evitando l'onere di manutenzione delle matrici di supporto del browser personalizzate.

La soluzione? L'adozione di Baseline come standard di sviluppo, un cambiamento che ha trasformato il loro approccio all'adozione delle funzionalità della piattaforma web.

La sfida: supporto dei browser con la congettura

Prima di Baseline, Cybozu manteneva i propri criteri di supporto dei browser in base ai log di accesso e al monitoraggio manuale delle versioni. Il loro standard era supportare i browser che coprivano il 98% dei log di accesso e agli utenti che utilizzavano browser al di fuori di questa soglia veniva mostrato un prompt di aggiornamento del browser.

Ogni trimestre, i team di ingegneria di Cybozu hanno dedicato circa un'ora in totale agli aggiornamenti dei criteri. Tuttavia, l'integrazione dei criteri nel team di sviluppo non è stata semplice ed era abbastanza comune avere domande: quando si potevano utilizzare le nuove funzionalità CSS? Quando potrebbero essere rimossi i polyfill per le nuove API JavaScript? E quali funzionalità possono essere utilizzate ora?

I criteri personalizzati di Cybozu non solo erano difficili da gestire e utilizzare per gli sviluppatori, ma l'azienda si è anche resa conto che basarsi sul rilevamento dello user agent e sul monitoraggio manuale delle versioni non poteva tenere il passo con la velocità dell'evoluzione del web moderno.

È possibile fare affidamento alla stringa User-Agent

L'approccio precedente di Cybozu derivava i nomi e le versioni dei browser dalle stringhe User-Agent, poi aggregava questi risultati come dati "utente", ma riflette davvero la realtà degli utenti?

User-Agent è un'intestazione della richiesta HTTP, ovvero informazioni che qualsiasi client può dichiarare di essere. I log di accesso ai prodotti contengono enormi volumi di richieste provenienti da bot, crawler, malintenzionati e altre origini. Alcuni client inviano intenzionalmente stringhe User-Agent obsolete per vari scopi, ad esempio la scansione delle vulnerabilità. Pertanto, i log di accesso non possono rappresentare gli utenti che devono essere supportati.

User-Agent non può riflettere le funzionalità disponibili

Le versioni del browser non vengono mappate alle funzionalità. Lo stesso numero di versione potrebbe avere funzionalità diverse a seconda del canale (stabile/beta/dev/canary), dei flag delle funzionalità, degli esperimenti Finch o delle norme aziendali, ad esempio. Inoltre, i diversi browser implementano le funzionalità in tempi diversi: CSS Nesting è stato rilasciato in Safari 16.5 (maggio 2023) ma in Chrome 112 (aprile 2023). La stringa User-Agent non indica la disponibilità della funzionalità.

Responsabilità di supportare personalmente le versioni del browser

Gli aggiornamenti del browser non riguardano solo le nuove funzionalità: le release regolari del browser includono patch di sicurezza critiche e correzioni di bug, oltre a nuove funzionalità. Quando le versioni obsolete sono supportate, evitare di utilizzare le nuove funzionalità non è l'unico problema: è una decisione che influisce direttamente sulla sicurezza degli utenti. Negli ambienti aziendali, alcuni utenti possono essere soggetti a vincoli legittimi. Ad esempio:

• Le organizzazioni potrebbero avere criteri del browser rigorosi che impediscono gli aggiornamenti.
• L'hardware legacy non supporta l'aggiornamento dei browser moderni.
• Utenti che operano in settori regolamentati con procedure di approvazione delle modifiche lente.

Tuttavia, supportare questi utenti significa anche renderli vulnerabili.

Se si è verificato un incidente di sicurezza sfruttando una vulnerabilità nota in una vecchia versione del browser, non sarebbe una spiegazione ragionevole dire "questo browser era supportato perché gli utenti lo hanno richiesto". Se l'attacco si diffonde ad altri utenti che mantengono correttamente aggiornati i browser, gli sviluppatori e gli altri stakeholder del progetto si assumono la responsabilità di non aver interrotto il supporto per i browser non sicuri.

Cybozu si è resa conto che questo approccio crea rischi per la maggior parte degli utenti che mantengono aggiornati i propri browser. Il supporto dei browser basato esclusivamente sul conteggio dei log non dispone di una corretta convalida della sicurezza. Non si tratta solo di perdere nuove funzionalità, ma di non adempiere alla responsabilità di proteggere gli utenti.

La domanda passa da "Quanti utenti utilizzano questa versione?" a "Dobbiamo supportare gli utenti in base alle versioni del browser?"

Perché Baseline è la risposta giusta per Cybozu

Cybozu aveva bisogno di un nuovo approccio che affrontasse non solo il sovraccarico operativo della manutenzione dei criteri di supporto del browser, ma anche i difetti fondamentali della vecchia metodologia. Baseline ha fornito a Cybozu esattamente questo.

Criteri in evoluzione gestiti esternamente

Anziché rivalutare manualmente le versioni del browser ogni trimestre, Baseline fornisce un obiettivo mobile gestito dal WebDX Community Group del W3C, non da singole aziende che prendono decisioni arbitrarie. Ciò significa che i criteri si evolvono automaticamente con l'input dei fornitori di browser e degli enti di standardizzazione.

Kintone non ha più bisogno di gestire autonomamente le soglie di versione: la baseline si evolve senza alcun intervento. Lo stato di base delle funzionalità risponde in modo definitivo alle domande sulla disponibilità e la risposta si aggiorna man mano che la piattaforma si evolve.

Precisione a livello di funzionalità

Anziché tentare di monitorare la situazione di un singolo browser, Baseline adotta un approccio fondamentalmente diverso.

Funzionalità web ampiamente disponibili rappresenta le funzionalità web disponibili per 30 o più mesi nei principali browser. Questo periodo di tempo è stato determinato per "approssimare gli indicatori degli sviluppatori, l'adozione delle release del browser nel tempo, una stima del supporto di un'elevata quota di mercato totale e il miglior giudizio del WebDX Community Group". Impostando questa soglia, Baseline elimina l'attività di monitoraggio delle situazioni individuali del browser non osservabili.

Con Baseline, gli sviluppatori ricevono una risposta diretta sulla disponibilità di una funzionalità specifica nei vari browser. "Possiamo utilizzare le query sui container CSS?" ora è una domanda a cui è possibile rispondere. Gli sviluppatori possono controllare immediatamente lo stato di Baseline su MDN o altri documenti, senza fare riferimenti incrociati alle matrici di compatibilità.

Progettato per la sicurezza

Adottando Baseline Widely available come standard, Cybozu ha allineato le proprie norme di assistenza a un periodo di tempo che corrisponde naturalmente ai cicli di vita dell'assistenza dei fornitori di browser. I browser ancora sottoposti a manutenzione attiva supporteranno tutte le funzionalità ampiamente disponibili e riceveranno anche aggiornamenti critici della sicurezza.

I criteri basati sui log di accesso avevano il potenziale di ancorare l'assistenza a browser obsoleti, il che elimina l'incentivo per gli utenti ad aggiornarsi. Adottando Baseline, non solo possiamo utilizzare con sicurezza le funzionalità moderne, ma gli utenti che utilizzano browser obsoleti si trovano naturalmente di fronte alla necessità di eseguire l'aggiornamento man mano che la piattaforma web va avanti.

Baseline non esclude esplicitamente i browser vulnerabili, ma offre incentivi naturali agli utenti per mantenere aggiornati i propri browser.

Adozione della base di riferimento

L'adozione di Baseline ha richiesto un cambiamento rispetto alla gestione delle versioni legacy di Cybozu. Ciò significava che Cybozu doveva avere la certezza che Baseline avrebbe funzionato senza inconvenienti significativi. Sapere la percentuale di utenti interessati era fondamentale per l'adozione a livello aziendale.

Google Analytics Baseline Checker è uno strumento che analizza i dati esportati da Google Analytics per mostrare la percentuale di utenti che supportano le funzionalità di ogni anno di base. Questo strumento ha aiutato Cybozu a verificare l'impatto effettivo della scelta di un target di base sui suoi utenti. Dopo aver eseguito Baseline Checker, Cybozu ha scoperto qualcosa di straordinario:

Baseline Checker ha rivelato che il 98,8% degli utenti di Cybozu utilizzava browser che supportano la funzionalità di destinazione Baseline ampiamente disponibile. Si tratta di una copertura più ampia rispetto al precedente standard interno di Cybozu di almeno il 98% degli utenti. In base ai dati forniti, è possibile analizzare tre punti chiave:

• I browser supportati in precedenza non sono interessati.
• Browser precedentemente non supportati: rappresentano circa lo 0,8% dei browser che soddisfano i criteri di base ampiamente disponibili, ma non visualizzano più il prompt di aggiornamento del browser.
• I browser rimanenti continuano a ricevere la richiesta di aggiornamento del browser come prima.

In particolare, ciò ha consentito di eliminare i falsi positivi, ovvero lo 0,8% circa degli utenti a cui erano stati mostrati avvisi inutili nonostante utilizzassero browser idonei. Allo stesso tempo, non è possibile introdurre falsi negativi avvisando gli utenti precedentemente supportati.

Con questi dati, Cybozu ha potuto adottare con sicurezza Baseline ampiamente disponibile come target.

L'impatto della base di riferimento nella pratica

Adottare Baseline come policy è stato un passo, ma renderla operativa ha richiesto la creazione di strumenti e processi. Era necessario garantire che gli sviluppatori non potessero utilizzare accidentalmente funzionalità non supportate senza controllare manualmente lo stato di Baseline.

Analisi statica basata sulla configurazione ESLint

@cybozu/eslint-config è una configurazione basata su OSS utilizzata in tutti i prodotti Cybozu. È stato supportato a partire dal preset css-baseline che verifica le funzionalità CSS rispetto a Baseline al momento della build:

// eslint.config.mjs
import cybozuEslintConfigBaseline from '@cybozu/eslint-config/flat/presets/css-baseline.js';

export default [
  ...cybozuEslintConfigBaseline.map((config) => ({
    ...config,
    files: ['**/*.css']
  })),
];

Quando gli sviluppatori utilizzano funzionalità non ancora disponibili in Baseline, ricevono un feedback immediato da ESLint:

In questo modo, i problemi di compatibilità non raggiungono la produzione. Gli sviluppatori possono prendere decisioni informate all'inizio del processo di sviluppo: attendere che la funzionalità diventi disponibile a livello generale o implementare il miglioramento progressivo sapendo esattamente quali utenti saranno interessati. Scopri di più sul supporto di ESLint per CSS e Baseline.

Configurare i transpiler in modo che abbiano come target Baseline Widely available

I moderni strumenti di compilazione hanno iniziato a supportare Baseline come target. Ad esempio, Vite ha come target automatico Baseline Widely Available in produzione senza configurazione aggiuntiva. Browserslist ora supporta anche Baseline.

L'utilizzo di varie impostazioni del compilatore garantisce che JavaScript e CSS vengano transpilati solo quando necessario, evitando trasformazioni e polyfill non necessari per le funzionalità già ampiamente supportate.

Eliminare la manutenzione manuale dei criteri e il sistema di rilevamento del browser per il feedback degli utenti

Il vantaggio principale della manutenzione è stato l'eliminazione del monitoraggio manuale della versione del browser. Invece di riunioni trimestrali per decidere quali versioni del browser supportare, ora Cybozu si affida al pacchetto @web-platform-dx/baseline-browser-mapping gestito pubblicamente per rispondere a queste domande.

Cybozu ha anche creato un rilevamento automatico del browser per mostrare agli utenti messaggi di richiesta di aggiornamento sui browser obsoleti.

Il rilevamento del browser recupera le versioni del browser compatibili direttamente dal pacchetto @web-platform-dx/baseline-browser-mapping.

Viene eseguito durante la procedura di compilazione e genera banner di avviso che vengono condivisi tra tutti i team di prodotto. Man mano che la finestra Baseline Widely available si sposta per includere browser più recenti, il nostro sistema rileva automaticamente le modifiche senza richiedere alcun intervento manuale.

Comunicazione semplificata

Uno dei vantaggi più significativi, ma inaspettati, è stato il modo in cui Baseline ha semplificato la comunicazione tra i team. In precedenza, le discussioni sulla compatibilità dei browser richiedevano conoscenze specifiche del dominio dell'azienda: quali browser supportiamo, quali versioni e quali funzionalità sono disponibili ora. I nuovi arrivati avevano bisogno di tempo per apprendere i nostri standard interni. Con Baseline, ora facciamo riferimento agli stessi criteri di compatibilità ampiamente riconosciuti dalla community web.

In questo modo, si crea un vocabolario condiviso sia all'interno dei nostri team di ingegneria sia con la community web più ampia. Quando si parla di adozione delle funzionalità, tutti fanno riferimento agli stessi dati della stessa origine, eliminando la necessità di spiegare le norme interne o di tradurre tra diversi framework di compatibilità.

Anche gli strumenti di sviluppo sono stati aggiornati: Visual Studio Code e il riquadro Stile in Chrome DevTools ora mostrano direttamente le informazioni sulla compatibilità di Baseline. Gli sviluppatori non devono più controllare costantemente MDN o Can I use per verificare se una funzionalità è sicura da usare. Gli strumenti lo comunicano immediatamente.

Rendere il prodotto adatto a tutti con sicurezza

Con Baseline, abbiamo potuto cambiare radicalmente il nostro modo di pensare alla compatibilità dei browser, trasformandola da un peso da gestire in una base su cui fare affidamento. La nostra strategia di implementazione è incentrata sull'automazione in ogni fase:

1. Feedback in fase di sviluppo: analisi statica e scheda di stato della baseline.
2. Convalida in fase di compilazione: i transpiler hanno automaticamente come target Baseline Widely available.
3. Rilevamento in runtime: avvisi rivolti agli utenti per i browser non supportati che utilizzano baseline-browser-mapping.
4. Aggiornamenti continui: la sincronizzazione automatica con i dati di base elimina la manutenzione manuale.

I risultati parlano da soli:

• Zero ore dedicate alla manutenzione della versione del browser.
• La copertura di oltre il 98,8% degli utenti viene mantenuta con certezza a livello di funzionalità.
• Risposte immediate e spontanee alle domande frequenti, che risponde alla domanda "Possiamo utilizzare questa funzionalità in questa versione del browser?"
• Vocabolario condiviso tra i team di ingegneria.
• Un percorso più chiaro per l'adozione delle funzionalità spinge i team a discutere l'integrazione di nuove funzionalità e la tempistica della rimozione dei polyfill, se necessario.

Per le organizzazioni che prendono in considerazione l'adozione di Baseline, è fondamentale sapere in che modo il cambiamento influirà sugli utenti. Strumenti come Google Analytics Baseline Checker rendono questa misurazione più semplice e chiara. Una volta che hai fiducia nei dati e decidi di adottare Baseline, puoi utilizzare l'ecosistema in crescita di Baseline per organizzare il flusso di lavoro di sviluppo.

La piattaforma web è più potente, coerente, affidabile e in continua evoluzione rispetto al passato. Con Baseline, possiamo sfruttare questa potenza in produzione in tutta sicurezza.

Risorse

• Articolo originale in giapponese: プロダクト開発の基準に Baseline を取り入れるまで - Cybozu Inside Out
• Configurazione ESLint di Cybozu: @cybozu/eslint-config su GitHub
• Strumento di controllo della baseline di Google Analytics: Google Analytics Baseline Checker
• Mappatura del browser di base: @web-platform-dx/baseline-browser-mapping
• Scopri di più su Baseline: Baseline su MDN