> For the complete documentation index, see [llms.txt](https://docs.allout.game/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.allout.game/all-out-docs/docs-es/ui/uidoc-html-css-support.md). # Compatibilidad con HTML y CSS de UIDoc Las funciones de HTML, CSS, diseño adaptable, interacción, desplazamiento y enlaces compatibles con UIDoc, además de las importantes funciones del navegador que omite. *** UIDoc implementa intencionalmente un subconjunto práctico similar al de un navegador para la interfaz de juego. Compila los recursos por adelantado y los renderiza a través del motor; no ejecuta un navegador, JavaScript ni un DOM en vivo. Para una primera pantalla funcional, empieza con [Inicio rápido de UIDoc](/all-out-docs/docs-es/ui/uidoc-quick-start.md). La referencia generada del repositorio, `docs/uidoc_supported_css.md`, es la lista exhaustiva de propiedades/valores. La emite `UIDoc::debug_supported_css_reference()` y la comprueban las pruebas de UIDoc. Esta página explica ese contrato a nivel de autoría. Las declaraciones desconocidas, los valores rechazados, los selectores no admitidos, el HTML mal formado, las consultas de medios no admitidas y los atributos de vinculación no admitidos son errores de compilación. El analizador puede seguir recopilando diagnósticos, pero el recurso no es válido hasta que se corrijan los errores. Las reglas at-rules de bloque CSS no admitidas se omiten silenciosamente; no dependas del comportamiento de at-rules del navegador. Para depuración en tiempo de ejecución, `uidoc_runtime_inspect` informa cada documento dibujado como un árbol de nodos maquetados con texto resuelto, pantalla `rect`, manejador de clic y tecla, claves por fila para listas, los enlaces enviados y los problemas que el tiempo de ejecución puede demostrar (un `data-if`, una lista que nunca fue enviada); las ramas ocultas por `data-if` o `display:none` se contraen a una sola entrada. Mientras Start Game se está ejecutando, su ámbito predeterminado es el cliente activo; sin un cliente en ejecución, pasa `scope: "editor"` explícitamente para inspeccionar el tiempo de ejecución del editor. Cada respuesta del tiempo de ejecución indica su `reino`, por lo que un resultado del reino del editor no describe al cliente. Su `rect`, `client_ui_tree`, y `client_input` `click_at` usan coordenadas de viewport del motor con origen en la esquina inferior izquierda; los píxeles de captura de pantalla usan un origen en la esquina superior izquierda. La herramienta `compile` preverifica cada `.uidoc` directorio de origen actual bajo `res` antes de compilar scripts o permitir que Start Game se inicie. Una preverificación fallida informa `fase`, `archivo`, `línea`, y `columna`, además de los diagnósticos estructurados completos. `uidoc_diagnostics` informa resultados de autoría de los archivos actuales del proyecto en el reino del editor; las advertencias específicas de nodos incluyen el `index.html` `línea` y un `elemento` selector. Usa la herramienta separada `uidoc_runtime_inspect` para los detalles del DOM en vivo. Con `viewportMatrix: true`, cada recurso informa `viewport_matrix.entries` (casos de perfil/escala); `las advertencias`, `de fallo`y los `problemas` agrupados aparecen solo cuando se encontró algo. Audita solo las declaraciones, no el recorte, el solapamiento ni los límites fuera de pantalla. Los recursos sin diagnósticos se enumeran juntos bajo `clean`. Solo los errores hacen fallar un perfil; las advertencias siguen siendo orientativas. La salida detallada coloca los perfiles con error en `failing_entries` y los perfiles solo con advertencias en `warning_entries`. Los grupos compactos de problemas informan solo `profiles_affected`; establece `viewportMatrixVerbose: true` cuando las entradas de viewport/escala con nombre sean útiles. Los nodos de origen distintos no se fusionan ni siquiera cuando comparten un selector o una línea de origen CSS, así que un problema de regla compartida puede seguir apareciendo como varios grupos; corrige la regla una vez y vuelve a ejecutar los diagnósticos. Dos advertencias de autoría comunes necesitan contexto: * `dynamic_text_intrinsic_layout` significa que un texto que cambia con frecuencia puede modificar una caja con tamaño intrínseco e invalidar el diseño en caché. Añade `data-text-reserve` con la muestra más ancha esperada, teniendo en cuenta la localización, o dale al elemento un ancho y alto definitivos. No es un error de texto duplicado ni de renderizado. * `image_aspect_drift` significa que una imagen tiene ancho y alto independientes con `object-fit: fill`. Usa `contain`, `cover`, o `aspect-ratio` para el arte normal. Los rellenos lineales `image-fill-direction` están exentos. ## Atributos de HTML y UIDoc Los nombres de elementos se aceptan como nodos genéricos de diseño. Estos elementos tienen un comportamiento especial en tiempo de ejecución: | Elemento | Comportamiento | | -------- | ----------------------------------------------- | | `span` | Contenido de texto en línea | | `img` | Imagen de recurso del motor cargada desde `src` | | `button` | Interacción de puntero y eventos de clic | | `input` | Texto editable enlazado con `data-bind-value` | El contenido de texto no vacío crea nodos de texto. Usa `{{name}}` para un enlace de texto de nivel superior y `{{item.name}}` dentro de una lista repetida. Los valores de imagen también admiten esta interpolación. Los nombres de clase y `src` también admiten esta interpolación. Los nombres de clase y `data-key` son estáticos. | Atributo | Propósito | | ---------------------------------- | -------------------------------------------------------------------------------------------------------------- | | `id`, `class`, `style` | coincidencia CSS y estilo en línea | | `src`, `width`, `height` | origen y dimensiones de la imagen | | `value`, `placeholder`, `disabled` | estado de entrada y control | | `data-if="binding"` | Incluye un subárbol mientras un enlace booleano de nivel superior sea verdadero; opcional `!` lo invierte | | `data-for="item in items"` | Repite un subárbol para una lista vinculada por CSL | | `data-for-key="item.id"` | Resuelve la `event.key` del clic repetido a partir de una expresión directa | | `data-key="role"` | Da a un nodo un rol estático de interacción/entrada | | `data-bind-value="name"` | Conecta una entrada a un valor de texto de UIDoc | | `data-text-reserve="00:00"` | Mide una muestra literal estable mientras se pinta el texto enlazado en vivo | | `data-on-click="event:name"` | Envía un evento de clic al callback de CSL; `event.handler` recibe el valor completo exacto, incluido `event:` | | `data-style-transform-x/y` | Enlaza una traslación numérica sin reajuste de diseño | | `data-style-transform-scale` | Enlaza una escala visual numérica | | `data-style-opacity` | Enlaza una opacidad numérica | | `data-style-color` | Enlaza una cadena de color CSS admitida sin cambiar la estructura | | `data-style-image-fill-amount` | Enlaza una cantidad de relleno de imagen | | `data-scroll-zoom` | Enlaza el zoom completo del contenido en un viewport con desplazamiento | Los nombres de atributo distinguen mayúsculas y minúsculas. Cualquier otro nombre bajo `data-style-`, `data-on-`, `data-bind-`, `data-for-`, `data-scroll-`, o `data-text-`, y una variante en mayúsculas y minúsculas de un nombre admitido como `data-style-Color`, es un `unknown_binding_attribute` error de compilación. Los demás `data-*` atributos producen una advertencia: UIDoc no ejecuta scripts y no tiene selectores de atributo, así que no tienen efecto. No existe `data-style-background-color`. Para un fondo dependiente del estado, dale a un elemento hijo de capa de fondo `background-color: currentColor` y enlaza el color de ese hijo `data-style-color`. En el propio elemento, `data-style-color` también recolorearía su texto. Los atributos de expresión de vinculación contienen expresiones directas, por ejemplo `data-for-key="item.id"`, `data-style-opacity="item.opacity"`, y `data-scroll-zoom="zoom"`. No pongas esas expresiones dentro de `{{...}}`. La interpolación Mustache se limita al texto y a los valores `src` de imagen. `data-if` es más estrecho que los otros atributos de enlace que conocen listas: busca un booleano de nivel superior y no resuelve un alias repetido como `item.visible`. Para el estado visual no interactivo en un subárbol repetido, enlaza `item.opacity` o `item.color`. La opacidad no deshabilita la prueba de impacto, así que filtra las filas estructurales o interactivas al construir la lista CSL en lugar de dejar un botón invisible en su sitio. ### Identidad y pruebas de controles repetidos `data-for-key` determina la clave del clic repetido `event.key`. La identidad del control en tiempo de ejecución es independiente: empieza con lo estático `data-key` (luego HTML `id`, luego un fallback de etiqueta anónima) y añade `#key:index` para cada bucle contenedor. Aquí `key` es el valor suministrado a `UI.uidoc_list_item(...)`; normalmente debería ser el mismo ID estable resuelto por `data-for-key`. Por lo tanto, un botón repetido puede aparecer en `client_ui_tree` como: ``` UI/board.uidoc:seed-cell#seed-42:7/__widget ``` `client_ui_tree` devuelve el selector único más corto aceptado por `Test.click_button`, sin el opcional `/__widget`, así que un resultado como `seed-cell#seed-42:7` puede pasarse directamente. Una consulta solo por rol es ambigua y falla cuando hay varias instancias visibles. Las listas anidadas añaden múltiples `#key:index` pares. Las cadenas de controladores y las etiquetas visibles no son selectores de identidad. Sin procesar `style` y `script` en el HTML son errores de compilación. Pon el CSS de autoría en `index.css`; no existe un runtime de JavaScript. ## Selectores CSS y cascada Los selectores admitidos incluyen: * Nombres de elemento, `.class`, `#id`, y `*`. * Combinadores de descendiente y de hijo directo (`>`). * Listas de selectores separadas por comas. * `:hover`, `:focus`, `:active`, `:pressed`, `:mouse-down`, `:dragging`, `:scroll-state`, y `:disabled`. UIDoc usa la especificidad normal de id/class/type y el orden de origen como desempate. El estilo en línea `style` se aplica al final. El orden de pintado usa `z-index`, luego el orden del documento. Las declaraciones que afectan al diseño dentro de reglas de pseudoeestado de interacción son errores de compilación. Pasar el cursor sobre un botón puede cambiar con seguridad su color u opacidad, pero no debería cambiar su tamaño ni el diseño circundante. Los selectores compuestos como `.row.upper`, `#panel.open`, y `button.primary` no están admitidos; añade una clase dedicada en su lugar. Los selectores no admitidos producen errores de compilación, incluidos los combinadores de hermanos, los selectores de atributos, los pseudoelementos, `:not()`, `:nth-*`, `:is()`, `:where()`, y `:has()`. ## Diseño CSS UIDoc admite `display: block`, `display: flex`, y `display: none`. Los demás valores de display se diagnostican y recurren a block. Sus propiedades de diseño son: * `width`, `height`, `min-*`, `max-*`, `aspect-ratio`, y `box-sizing`. * `margin`, `padding`, `gap`, `row-gap`, y `column-gap`. * `flex`, `flex-direction`, `flex-wrap`, `flex-grow`, `flex-shrink`, y `flex-basis`. * `align-items`, `align-self`, `align-content`, y `justify-content`. * `position: static`, `relative`, `absolute`, o `fixed`, con `inset`, `top`, `right`, `bottom`, y `left`. * `overflow`, `overflow-x`, y `overflow-y` usando `visible`, `hidden`, `auto`, o `scroll`. Las longitudes admiten las combinaciones relevantes de píxeles sin unidad, `px`, `rem`, `em`, `%`, `vw`, `vh`, safe-area `env(...)`, y `calc(...)` aditivo o sustractivo con hasta ocho términos. El padding y margin porcentuales se diagnostican y se ignoran. Los porcentajes y las unidades de viewport también son inválidos para los gaps, pero sí se admiten en tamaños, flex basis y los `top`/`right`/`bottom`/`left` desplazamientos individuales. `padding`, `margin`, y `inset` aceptan las formas estándar de uno, dos, tres y cuatro valores. Los valores porcentuales no están admitidos en la `inset` abreviatura; usa las propiedades de desplazamiento individuales cuando se requieran porcentajes. Las palabras clave y la matemática CSS se comprueban por propiedad, no se aceptan globalmente solo porque un navegador las aceptaría en algún sitio. En particular: * `auto` solo es válida para las filas de propiedades que la enumeran, como tamaños, flex basis, desplazamientos, `align-self`, y overflow. * `ninguno` es válido solo donde se indica, como `display`, restablecimientos admitidos de pintura/filtro, `pointer-events`, y `image-fill-direction`. * `calc(...)` está disponible solo en campos de longitud documentados. Permite suma y resta de como máximo ocho términos de longitud simples. La multiplicación, la división, las matemáticas anidadas, `min()`, `max()`, y `clamp()` no son compatibles, y los términos porcentuales requieren un bloque contenedor definido. En caso de duda, consulta la fila exacta de la propiedad en `docs/uidoc_supported_css.md`; los valores aceptados de otra propiedad no son prueba de que el mismo token funcione aquí. ## Texto, imágenes y pintura Las funciones de presentación admitidas incluyen: * `color`, `background`, `background-color`, y un único lineal, radial o cónico `background-image` degradado. * `border`, `border-width`, `border-color`, y un único `border-radius` valor uniforme. Los bordes específicos de cada lado, como `border-bottom`, los radios por esquina y los radios porcentuales no son compatibles. Usa un divisor hijo explícito con altura/ancho fijos y color de fondo cuando solo se necesite un borde. * Hasta ocho `box-shadow` o `text-shadow` capas; las sombras de caja pueden ser internas. * Una `filter: blur(...)` o `filter: drop-shadow(X Y [blur] [color])`, además de `backdrop-filter: blur(...)`. * `opacity`, `z-index`, y `pointer-events`. * `font-family`, `font-size`, `font-style`, `font-weight`, `line-height`, `letter-spacing`, `text-align`, `white-space`, `overflow-wrap`, y `word-break`. * Texto `outline-color` y `outline-width`. * `object-fit: cover`, `contain`, o `relleno` para imágenes. * `image-tint`, `image-grayscale`, `image-fill-amount`, y `image-fill-direction`. * `translate`, `scale`, y el `translate(...)`, `translateX(...)`, `translateY(...)`, y `scale(...)` subconjunto de transform. Los porcentajes de translate se resuelven respecto a la caja de borde del propio elemento; las unidades de translate del viewport siguen sin ser compatibles. Los colores admiten formas CSS comunes, incluidos hex, `rgb()`/`rgba()`, `hsl()`/`hsla()`, colores con nombre, `transparent`, y `currentColor` cuando corresponda. Los degradados admiten hasta ocho paradas de color, direcciones/ángulos y posiciones CSS, `currentColor`, y `en oklab` o `en srgb`; Oklab es el valor predeterminado. Las capas de fondo múltiples y las URL de imágenes CSS no son compatibles. Usa un `img` con una ruta de recurso del motor para fondos de mapa de bits. `box-shadow` sigue la caja de borde rectangular del elemento. `filter: drop-shadow(X Y [blur] [color])` sigue el alfa pintado del elemento filtrado, incluidas las esquinas transparentes de la imagen. Su color omitido usa por defecto el `currentColor`. Colócalo en el `img` para un mapa de bits irregular o de nueve fragmentos; colocarlo en un contenedor también incluye los descendientes pintados del contenedor en la silueta de la sombra. ### Rellenos de imagen de progreso Para una barra de progreso continua, coloca una `img` dentro de una pista de tamaño fijo, vincula un `0..1` valor normalizado con `data-style-image-fill-amount`, y establece `image-fill-direction: right` más `object-fit: fill`. Usa una textura rectangular o con degradado sin huecos transparentes no deseados en el interior de la barra. No reutilices un icono ni otra imagen transparente decorativa para el relleno. `image-tint` es multiplicativo y preserva el alfa de origen; no vuelve opacos los píxeles transparentes. `object-fit: cover` también recorta el arte cuadrado de forma agresiva cuando la pista es delgada. En conjunto, esas opciones pueden producir espacio vacío al inicio o cuñas diagonales incluso cuando el recorte de relleno de UIDoc funciona correctamente. Actualmente, los diagnósticos no inspeccionan el alfa de la textura ni marcan `object-fit: cover` en los rellenos de progreso. Verifica visualmente las barras de progreso en `0`, `0.25`, `0.5`, y `1`. UIDoc usa por defecto la familia integrada AllIn, con variantes reales 400, 700 y 900. `@font-face` puede declarar recursos de fuente TTF u OTF del proyecto por ID de recurso. El estilo y el peso seleccionan la variante declarada más cercana; el negrita o la inclinación que falten pueden sintetizarse. Las fuentes se cargan de forma asíncrona, así que UIDoc usa la siguiente familia o AllIn hasta que la variante solicitada esté lista y luego invalida el diseño del texto. Omite `line-height` para la altura de línea predeterminada que escala con el tamaño de la fuente. El `line-height: normal` explícito no se acepta. Los valores sin unidad son multiplicadores; los valores de longitud son longitudes heredadas fijas. `letter-spacing` se hereda y acepta `normal`, píxeles sin unidad, `px`, `rem`, o `em`. `normal` se resuelve a cero. El subconjunto de transform no incluye rotación, sesgado, transformaciones 3D ni `scale` valores de varios tokens. Un valor de filtro contiene un `blur(...)` o un `drop-shadow(...)`; las cadenas de filtros y otras funciones de filtro no son compatibles. Los ámbitos del compositor de filter y backdrop-filter pueden anidarse hasta cuatro niveles. ## Estilos adaptativos y áreas seguras Las consultas de medios son compatibles, pero solo para esta lista explícita de condiciones permitidas: * `(min-width: N)` y `(max-width: N)`. * Consultas combinadas de ancho mínimo y máximo. * Estilo Tailwind `(width >= N)` y `(width <= N)`. * `(hover: hover)`. Los valores de ancho aceptan píxeles sin unidad, `px`, y `rem`. Los bloques de medios no compatibles se descartan con un diagnóstico. Usa estos valores donde se acepten longitudes de área segura: ```css env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) ``` El inset superior de área segura de UIDoc también reserva la banda superior de la barra del juego. ## Desplazamiento y zoom `overflow-x` y `overflow-y` son independientes, de modo que una ventana gráfica puede desplazarse horizontalmente, verticalmente o en ambos ejes. Una ventana gráfica de dos ejes desplaza ambos ejes al arrastrarla. La rueda del ratón se desplaza verticalmente cuando el desplazamiento vertical está habilitado; una ventana gráfica de solo horizontal asigna la rueda al desplazamiento horizontal. En este momento, el runtime dibuja un pulgar de barra de desplazamiento vertical. El contenido horizontal sigue siendo accesible arrastrando, aunque no se dibuje un pulgar horizontal. `data-scroll-zoom="zoomBinding"` añade un zoom de contenido similar al del navegador a una ventana gráfica de desplazamiento interactiva. Escala la geometría, el texto, las imágenes, las transformaciones, el hit testing y los extents de desplazamiento de los descendientes mientras la ventana gráfica y sus elementos hermanos permanecen fijos. Cuando cambia la vinculación, el motor conserva el área visualizada alrededor del centro de la ventana gráfica y vuelve a limitar la posición de desplazamiento. El rango de seguridad del motor es `0.05` hasta `20`; las aplicaciones normalmente deberían usar límites más estrechos. ## Clases al estilo Tailwind Los recursos de UIDoc pueden usar clases utilitarias compatibles al estilo Tailwind. Las utilidades se resuelven y se convierten en CSS de UIDoc durante el procesamiento del recurso; Tailwind no se ejecuta en el juego. Las áreas cubiertas incluyen display, position, flex, sizing, spacing, inset, alignment, text, color, border, radius, overflow, pointer events, opacity, z-index, aspect ratio, shadows, transforms y propiedades arbitrarias de efectos de imagen. El paso de conversión admite `hover:`, `focus:`, `active:`, `disabled:`, adaptativo `sm:`/`md:`/`lg:`/`xl:`/`2xl:`, valores entre corchetes como `w-[320px]`, y CSS `@apply`. Tailwind preflight/base reset no está incluido. La salida que no pueda representarse con UIDoc falla al hornearse como recurso. ## Funciones destacadas del navegador no compatibles | Función del navegador | Enfoque de UIDoc | | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | JavaScript y API del DOM | Controla el estado con enlaces CSL, `data-if`, `data-for`y devoluciones de llamada de eventos. | | CSS Grid | Usa flexbox, diseño de bloque o posicionamiento explícito. | | Variables CSS y propiedades personalizadas | Vincula valores desde CSL o usa clases compartidas normales. | | Transiciones, fotogramas clave y animaciones CSS | Anima enlaces CSL como opacity, translation, scale o scroll zoom. | | Pseudoelementos y selectores avanzados | Añade elementos y clases explícitos al documento. | | Consultas de contenedor y la mayoría de las características de medios | Usa las consultas compatibles de ancho de viewport y hover. | | Fondos con URL CSS y varias capas de fondo | Usa un degradado compatible o un `img` recurso del motor. | | Radios por esquina y más de ocho sombras | Usa los límites compatibles de radio único/ocho sombras o elementos anidados explícitos. | | `min()`, `max()`, y `clamp()` Funciones matemáticas de CSS | Combina `width`/`height` con las `min-*` y `max-*` propiedades admitidas. | | Rotación, sesgado, transformaciones 3D, cadenas de filtros y otras funciones de filtro | Prepara lo visual como un recurso o usa los efectos admitidos de translate/scale/blur/drop-shadow. | | Formularios web, navegación, fetch, iframes, canvas, DOM de SVG, audio y vídeo | Usa CSL y los sistemas correspondientes del motor. | | Comportamiento semántico y de accesibilidad del navegador | Los elementos de UIDoc son nodos de interfaz de usuario del juego; los nombres de etiquetas HTML no implican comportamiento de navegador. | UIDoc pretende facilitar la creación de interfaces de usuario comunes para juegos, no reproducir todas las funciones de HTML y CSS. Mantén el diseño dentro de este subconjunto para que los recursos se horneen de forma predecible y la simulación de la interfaz de usuario en cliente/servidor siga siendo determinista.