XELF · TECHNOLOGY MATRIX

Capacidades Tecnológicas

Inventario documentado de tecnologías para componer experiencias sin añadir dependencias innecesarias. Este catálogo NO certifica compatibilidad universal. El registro XWCR ampliado y los resultados de pruebas por navegador siguen en evolución.

56capacidades en matriz actual

14grupos técnicos documentados

XWCRregistro de compatibilidad objetivo

Buscar por capacidad, uso o limitaciónEstado documental

56 capacidades

CSS Custom Properties / design tokens

Marca y temas sin duplicar estilos

CSS Grid/Flexbox/Fluid typography/clamp

Composiciones responsive

CSS Container Queries

Tarjetas adaptables al contenedor

CSS transitions + @keyframes

Microinteracciones sin framework

Web Animations API (Element.animate)

Animación programática reversible

IntersectionObserver

Scroll reveal, stagger, lazy mount controlado

CSS Scroll-Driven Animations

Progreso de animación ligado a scroll

F: soporte parcial, feature detect

Scroll Snap

Sliders y escenas táctiles ligeros

ResizeObserver

Gráficos/adaptadores que responden a dimensiones

View Transitions API

Transiciones entre vistas compatibles

F: fallback normal

`loading=lazy` / `decoding=async`

Carga de imágenes/video diferida

P: adoptar por estándar

ES Modules + `import()`

Funciones independientes y carga bajo demanda

requestAnimationFrame

Timers/scroll/animación calibrada

E: teleprónter scroll controlado

SVG/Canvas 2D

KPI, figuras y composición de video

E: SVG; P: composición de captura

`<dialog>` / Popover API

Paneles accesibles, confirmaciones

`<details>`/`<summary>`

FAQ/menú sin JS obligatorio

localStorage

Idioma/moneda/tema, preferencias de sesión

sessionStorage

Borradores o navegación temporal

IndexedDB

Grabación local y objetos/medios estructurados

CacheStorage

Archivos de Experience offline

Service Workers

Precaché, offline y versión de assets

Web App Manifest

Experiencia instalable cuando procede

V (documento teleprompter)

StorageManager estimate/persist

Avisos de cuota / persistencia best effort

BroadcastChannel

Sincronizar vistas del mismo origen

Web Workers

Cálculos intensivos sin bloquear interfaz

MediaDevices.getUserMedia

Micrófono/cámara con permiso

MediaDevices.enumerateDevices

Selección de cámaras / entradas permitidas

MediaRecorder

Grabar audio/video local

Blob / File / object URLs

Reproducir, descargar y compartir grabaciones

Web Share + navigator.canShare

Hoja nativa para archivos/links

V, gesto explícito

Screen Wake Lock API

Mantener pantalla activa durante presentación

V, best effort, HTTPS

`<audio>`/`<video>` HTML

Reproductores accesibles

MediaDevices.getDisplayMedia

Compartir/capturar pantalla

F, **no implementado**, permisos y soporte móvil por probar

Canvas captureStream + MediaRecorder

Mezclar pantalla+cámara en un único archivo

F, costo/compatibilidad alta

Web Audio API

Niveles, filtros de voz y forma de onda

Picture-in-Picture API

Vista flotante de video si el navegador lo permite

WebRTC

Audio/video tiempo real entre clientes

F, backend/servidor necesario

Fullscreen API

Presentaciones inmersivas con fallback iOS

Screen Orientation API

Orientación de escena cuando admita

F, no forzar móvil

Clipboard API

Copiar configuraciones/citas/resultados

File input / FileReader

Importar documentos/medios elegidos

F para biblioteca teleprompter, parser seguro

Drag and Drop API

Arrastrar archivos o ordenar tarjetas

P, alternativa táctil/teclado

File System Access API

Guardado/lectura con selector en navegadores compatibles

F, fallback descarga/importación

Print CSS / window.print

Impresión legible y guardar PDF del navegador

Web Crypto API

Hashes, integridad, cifrado local bien diseñado

P, no suple backend

Geolocation API

Mapas/rutas con permiso explícito

F, solo experiencias geográficas

Device Motion/Orientation API

Experiencias inmersivas

F, permisos y accesibilidad

Notifications API / Push API

Avisos oportunos opt-in

F, requiere arquitectura backend para push real

Speech Synthesis / Recognition

Narración y dictado donde se admita

F, revisar privacidad/idioma

Fetch API / streaming

Leer servicios autorizados y contenido remoto

P, secretos solo backend

WebSocket / EventSource

Paneles en tiempo real

F, servidor y permisos L3

Permissions API / Permissions Policy

Detectar y gobernar accesos sensibles

P, soporte y políticas por API

WebGL / WebGPU

Visualización 3D/gráficos intensivos

F, carga lazy y alternativas

`prefers-reduced-motion`, `color-scheme`, `focus-visible`

Accesibilidad visual y respetar preferencias

E, baseline obligatorio

CSS `content-visibility`, `contain`

Optimizar render secciones largas

P, no ocultar contenido esencial

Intl.* + locale-aware formatting

Formatos de número/fecha/moneda

E, tarifa USD propia ≠ FX automática