Cómo Cybozu eliminó la sobrecarga de compatibilidad del navegador con Baseline

Sakura Adachi
Sakura Adachi
Yuriko Hirota
Yuriko Hirota

Publicado: 7 de noviembre de 2025

Administrar la compatibilidad del navegador para más de 38,000 clientes empresariales en todo Japón no es una tarea trivial. Cuando Kintone impulsa operaciones comerciales críticas para más de 1.5 millones de aplicaciones a diario, cada decisión de compatibilidad con el navegador es importante.

Cybozu, una empresa líder en software de trabajo colaborativo en Japón, se enfrentó a un desafío fundamental: ¿Cómo mantener estándares web coherentes en todos los productos y, al mismo tiempo, evitar la carga de mantenimiento de las matrices de compatibilidad de navegadores personalizadas?

¿Cuál es la solución? Adoptar Baseline como estándar de desarrollo, un cambio que transformó su enfoque para la adopción de funciones de la plataforma web

El desafío: Compatibilidad con navegadores sin conjeturas

Antes de Baseline, Cybozu mantenía sus propios criterios de compatibilidad con navegadores en función de los registros de acceso y el seguimiento manual de versiones. Su estándar era admitir navegadores que cubrieran el 98% superior de los registros de acceso, y a los usuarios que usaban navegadores fuera de ese umbral se les mostraba un mensaje para actualizar el navegador.

Cada trimestre, los equipos de ingeniería de Cybozu dedicaban aproximadamente una hora en total a las actualizaciones de criterios. Aun así, la integración de los criterios en el equipo de desarrollo no fue perfecta, y era bastante común tener preguntas: ¿Cuándo se podrían usar las nuevas funciones de CSS? ¿Cuándo se podrían quitar los polyfills para las nuevas APIs de JavaScript? Y, en realidad, ¿qué funciones se pueden usar ahora?

Los criterios personalizados de Cybozu no solo carecían de capacidad de mantenimiento y usabilidad para los desarrolladores, sino que también se dieron cuenta de que basarse en la detección del agente de usuario y el seguimiento manual de versiones no podía seguir el ritmo de la evolución de la Web moderna.

¿Se puede confiar en la cadena User-Agent?

El enfoque anterior de Cybozu derivaba los nombres y las versiones de los navegadores de las cadenas User-Agent y, luego, agregaba estos resultados como datos de "usuario", pero ¿esto refleja realmente la realidad de los usuarios?

User-Agent es un encabezado de solicitud HTTP, es decir, información que cualquier cliente puede afirmar que es cualquier cosa. Los registros de acceso al producto contienen grandes volúmenes de solicitudes de bots, rastreadores, atacantes y otras fuentes. Algunos clientes envían cadenas User-Agent antiguas de forma intencional por diversos motivos, como el análisis de vulnerabilidades. Por lo tanto, los registros de acceso no pueden representar a los usuarios que se deberían admitir.

User-Agent no puede reflejar las funciones disponibles

Las versiones del navegador no se asignan a las funciones. El mismo número de versión puede tener diferentes capacidades según el canal (estable, beta, para desarrolladores o Canary), las marcas de funciones, los experimentos de Finch o las políticas empresariales, por ejemplo. Además, los diferentes navegadores implementan funciones en diferentes cronogramas: el anidamiento de CSS se lanzó en Safari 16.5 (mayo de 2023), pero Chrome 112 (abril de 2023). La cadena User-Agent no indica la disponibilidad de la función.

Responsabilidad de admitir versiones del navegador por nuestra cuenta

Las actualizaciones del navegador no solo se tratan de funciones nuevas, sino que las versiones periódicas incluyen parches de seguridad críticos y correcciones de errores junto con nuevas capacidades. Cuando se admiten versiones desactualizadas, evitar el uso de funciones nuevas no es el único problema, sino que también es una decisión que afecta directamente la seguridad del usuario. En los entornos empresariales, algunos usuarios pueden enfrentar restricciones legítimas. Por ejemplo:

  • Es posible que las organizaciones tengan políticas estrictas del navegador que impidan las actualizaciones.
  • El hardware heredado no admite la actualización de navegadores modernos.
  • Usuarios de sectores regulados con procesos lentos de aprobación de cambios

Sin embargo, brindar asistencia a esos usuarios también significa que se les permite seguir siendo vulnerables.

Si se produjo un incidente de seguridad por explotar una vulnerabilidad conocida en una versión anterior del navegador, no sería una explicación razonable decir "este navegador era compatible porque los usuarios lo solicitaron". Si el ataque se propaga a otros usuarios que mantienen sus navegadores actualizados correctamente, los desarrolladores y otros interesados del proyecto son responsables de no haber interrumpido la compatibilidad con los navegadores no seguros.

Cybozu se dio cuenta de que este enfoque crea riesgos para la mayoría de los usuarios que mantienen sus navegadores actualizados. La compatibilidad con navegadores basada únicamente en el recuento de registros carece de una validación de seguridad adecuada. No se trata solo de perderse las funciones nuevas, sino de no cumplir con la responsabilidad de proteger a los usuarios.

La pregunta cambia de "¿Cuántos usuarios usan esta versión?" a "¿Deberíamos brindar asistencia a los usuarios según las versiones del navegador?".

Por qué Baseline es la respuesta correcta para Cybozu

Cybozu necesitaba un nuevo enfoque que abordara no solo la sobrecarga operativa de mantener los criterios de compatibilidad con el navegador, sino también las fallas fundamentales de la metodología anterior. Baseline le proporcionó a Cybozu exactamente eso.

Criterios en evolución que se mantienen de forma externa

En lugar de reevaluar manualmente las versiones del navegador cada trimestre, Baseline proporciona un objetivo en movimiento que mantiene el Grupo de la Comunidad WebDX del W3C, no las empresas individuales que toman decisiones arbitrarias. Esto significa que los criterios evolucionan automáticamente con las opiniones de los proveedores de navegadores y los organismos de estándares.

Kintone ya no necesitaba administrar los umbrales de versiones por sí mismo: Baseline evolucionaba sin ninguna acción. El estado de Baseline para las funciones responde las preguntas sobre disponibilidad de forma definitiva, y la respuesta se actualiza a medida que evoluciona la plataforma.

Precisión a nivel de la función

En lugar de intentar hacer un seguimiento de la situación de un navegador individual, Baseline adopta un enfoque fundamentalmente diferente.

La opción Baseline Widely available representa las funciones web disponibles durante 30 meses o más en los principales navegadores. Este período se determinó para "aproximar los indicadores de los desarrolladores, la adopción de las versiones del navegador a lo largo del tiempo, una estimación de la compatibilidad con una alta participación total de mercado y el mejor criterio del Grupo de la comunidad de WebDX". Si se establece este umbral, Baseline elimina la tarea de hacer un seguimiento de las situaciones individuales del navegador que no se pueden observar.

Con Baseline, los desarrolladores obtienen una respuesta directa sobre la disponibilidad de esa función específica en los distintos navegadores. "¿Podemos usar consultas de contenedor de CSS?" ahora es una pregunta que se puede responder. Los desarrolladores pueden verificar el estado de Baseline en MDN o en otros documentos de forma instantánea, sin necesidad de consultar matrices de compatibilidad.

Diseño centrado en la seguridad

Al adoptar Baseline Widely available como nuestro estándar, Cybozu alineó nuestra política de asistencia con un período que se correlaciona de forma natural con los ciclos de vida de asistencia de los proveedores de navegadores. Los navegadores que aún se mantienen de forma activa admitirán todas las funciones disponibles de forma general y también recibirán actualizaciones de seguridad críticas.

Los criterios basados en los registros de acceso tenían el potencial de anclar la compatibilidad a navegadores desactualizados, lo que elimina el incentivo para que los usuarios realicen actualizaciones. Al adoptar Baseline, no solo podemos usar con confianza las funciones modernas, sino que los usuarios de navegadores desactualizados naturalmente se encuentran con la necesidad de actualizar a medida que avanza la plataforma web.

Baseline no excluye explícitamente los navegadores vulnerables, sino que ofrece incentivos naturales para que los usuarios mantengan sus navegadores actualizados.

Adopta el modelo de referencia

La adopción de Baseline requirió un cambio en la administración de versiones heredada de Cybozu. Esto significaba que Cybozu necesitaba tener la certeza de que Baseline funcionaría sin inconvenientes significativos. Saber qué porcentaje de usuarios se vería afectado era fundamental para la adopción a nivel empresarial.

Google Analytics Baseline Checker es una herramienta que analiza los datos exportados de Google Analytics para mostrar qué porcentaje de tus usuarios admite las funciones de cada año de la versión de Baseline. Esta herramienta ayudó a Cybozu a verificar el impacto real de elegir un objetivo de referencia en sus usuarios. Después de ejecutar Baseline Checker, Cybozu descubrió algo notable:

La herramienta Baseline Checker de Google Analytics toma una exportación de TSV de Google Analytics y proporciona datos de asistencia para cada uno de los umbrales de referencia.

El verificador de Baseline reveló que el 98.8% de los usuarios de Cybozu usaban navegadores que admiten el objetivo de Baseline Ampliamente disponible. Esta cobertura es más amplia que el estándar interno anterior de Cybozu, que era de al menos el 98% de los usuarios. Se podrían analizar tres puntos clave en función de los datos proporcionados:

  • Los navegadores que se admitían anteriormente no se verán afectados.
  • Navegadores que antes no eran compatibles: Representan aproximadamente el 0.8% que cumple con los criterios de Baseline Widely available, pero ya no ven el mensaje de actualización del navegador.
  • Los navegadores restantes seguirán recibiendo el mensaje de actualización del navegador como antes.

En particular, esto significó que se pudieron eliminar los falsos positivos, es decir, el ~0.8% de los usuarios a los que se les habían mostrado advertencias innecesarias a pesar de que usaban navegadores compatibles. Al mismo tiempo, no se podrían introducir falsos negativos advirtiéndoles a los usuarios que antes recibían asistencia.

Con estos datos, Cybozu pudo adoptar con confianza Baseline Widely available como objetivo.

El impacto de Baseline en la práctica

Adoptar Baseline como política fue una cosa, pero hacerla operativa requirió crear herramientas y procesos. Era necesario asegurarse de que los desarrolladores no pudieran usar accidentalmente funciones no admitidas sin verificar manualmente el estado de Baseline.

Análisis estático basado en la configuración de ESLint

@cybozu/eslint-config es una configuración basada en OSS que se usa en todos los productos de Cybozu. Se admitió a partir del ajuste predeterminado css-baseline que verifica las funciones de CSS en comparación con Baseline en el momento de la compilación:

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

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

Cuando los desarrolladores usan funciones que aún no están disponibles de forma general en Baseline, ESLint les proporciona comentarios inmediatos:

El anidamiento de CSS no estaba disponible de forma general como Baseline, pero se usaba en el código de producción. Aquí ESLint advierte sobre su uso.

Esto evita que los problemas de compatibilidad lleguen a la producción. Los desarrolladores pueden tomar decisiones fundamentadas al principio del proceso de desarrollo: esperar a que la función esté disponible de forma general o implementar la mejora progresiva sabiendo exactamente qué usuarios se verán afectados. (Obtén más información sobre la compatibilidad de ESLint con CSS y Baseline).

Configura los transpiladores para que se orienten a Baseline Widely available

Las herramientas de compilación modernas comenzaron a admitir Baseline como destino. Por ejemplo, Vite segmenta automáticamente Baseline Widely Available en producción sin configuración adicional. Browserslist ahora también admite Baseline.

El uso de varios parámetros de configuración del compilador garantiza que nuestro JavaScript y CSS solo se transpilen cuando sea necesario, lo que evita transformaciones y polyfills innecesarios para las funciones que ya son ampliamente compatibles.

Eliminamos el mantenimiento manual de los criterios y el sistema de detección de navegadores para los comentarios de los usuarios.

El mayor logro en cuanto al mantenimiento fue eliminar el seguimiento manual de las versiones del navegador. En lugar de tener reuniones trimestrales para debatir qué versiones del navegador admitir, Cybozu ahora se basa en el paquete @web-platform-dx/baseline-browser-mapping que se mantiene de forma abierta para responder estas preguntas.

Cybozu también creó una detección automática del navegador para mostrar mensajes de actualización a los usuarios que usan navegadores desactualizados.

Se les solicita a los usuarios de Kintone que actualicen el navegador si usan navegadores que no cumplen con los requisitos de Baseline Widely Available.

Su detección de navegador recupera versiones de navegador compatibles directamente desde el paquete @web-platform-dx/baseline-browser-mapping.

Esto se ejecuta durante nuestro proceso de compilación y genera banners de advertencia que se comparten en todos los equipos de productos. A medida que la ventana de Baseline Widely available se mueve para incluir navegadores más nuevos, nuestro sistema detecta automáticamente los cambios sin necesidad de intervención manual.

Comunicación optimizada

Uno de los beneficios más significativos y, a la vez, inesperados fue la forma en que Baseline simplificó la comunicación entre los equipos. Antes, las conversaciones sobre la compatibilidad con navegadores requerían conocimientos específicos de la empresa, como qué navegadores admitimos, qué versiones y qué funciones están disponibles ahora. Los recién llegados necesitaban tiempo para aprender nuestros estándares internos. Con Baseline, ahora hacemos referencia a los mismos criterios de compatibilidad que se reconocen ampliamente en la comunidad web.

Esto también crea un vocabulario compartido dentro de nuestros equipos de ingeniería y con la comunidad web en general. Cuando se habla de la adopción de funciones, todos hacen referencia a los mismos datos de la misma fuente, lo que elimina la necesidad de explicar las políticas internas o traducir entre diferentes marcos de compatibilidad.

Las herramientas de desarrollo también se actualizaron: Visual Studio Code y el panel Style en las Herramientas para desarrolladores de Chrome ahora muestran la información de compatibilidad con Baseline directamente. Los desarrolladores ya no necesitan consultar constantemente MDN o Can I use para verificar si una función es segura de usar. La herramienta se lo indica de inmediato.

Hacer que el producto funcione para todos con confianza

Con Baseline, pudimos cambiar fundamentalmente nuestra forma de pensar sobre la compatibilidad con el navegador, de una carga que administramos a una base en la que confiamos. Nuestra estrategia de implementación se centró en la automatización en cada etapa:

  1. Comentarios durante el desarrollo: Tarjeta de estado de análisis estático y de referencia.
  2. Validación en tiempo de compilación: Los transcompiladores segmentan automáticamente los anuncios para que se publiquen en la versión de referencia ampliamente disponible.
  3. Detección en el entorno de ejecución: Advertencias para el usuario en navegadores no compatibles que usan baseline-browser-mapping.
  4. Actualizaciones continuas: La sincronización automática con los datos de referencia elimina el mantenimiento manual.

Los resultados hablan por sí solos:

  • Cero horas dedicadas al mantenimiento de la versión del navegador
  • Se mantiene una cobertura de usuarios superior al 98.8% con certeza a nivel de la función.
  • Respuestas instantáneas y espontáneas a las preguntas frecuentes, que responden la pregunta "¿Podemos usar esta función en esta versión del navegador?"
  • Vocabulario compartido entre los equipos de ingeniería
  • Ruta más clara para la adopción de funciones: Solicita a los equipos que analicen la integración de funciones nuevas y el momento de quitar los polyfills, si es necesario.

Para las organizaciones que consideran adoptar Baseline, es fundamental saber cómo afectará el cambio a los usuarios. Herramientas como el Verificador de comparativas de Google Analytics hacen que esta medición sea más sencilla y explicativa. Una vez que confíes en los datos y decidas adoptar Baseline, podrás usar el creciente ecosistema de Baseline para organizar tu flujo de trabajo de desarrollo.

La plataforma web es más potente, coherente, confiable y evoluciona más rápido que en el pasado. Con Baseline, podemos aprovechar esa potencia en producción con confianza.

Recursos