0Pricing
CSS Academy · Lección

El modelo de objetos tipado de CSS (OM)

Trabaje con valores CSS como objetos JavaScript tipados en lugar de cadenas mediante la API CSS Typed OM.

El modelo de objetos tipado de CSS (OM) es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.

¿Qué es CSS Typed OM?

CSS Typed Object Model (Typed OM) forma parte del proyecto CSS Houdini. Expone los valores de CSS como objetos de JavaScript tipados en lugar de cadenas simples, lo que permite una manipulación más rápida, operaciones aritméticas más completas y seguridad de tipos.

Antes y ahora

El CSSOM tradicional devuelve cadenas; Typed OM devuelve objetos con información de tipos:

<p id="demo" style="opacity: 0.5;">Typed OM demo element</p>
<p id="output">Reading style values&hellip;</p>
<script>
  const demo = document.getElementById('demo');
  const output = document.getElementById('output');

  // Old CSSOM (string)
  const oldValue = demo.style.opacity; // '0.5'

  // CSS Typed OM (typed object)
  const typed = demo.computedStyleMap().get('opacity');
  // CSSUnitValue { value: 0.5, unit: 'number' }

  output.textContent = 'old (string): "' + oldValue + '"  |  typed OM: value=' + typed.value + ', unit=' + typed.unit;
</script>

<code>computedStyleMap()</code>

Acceda a los valores tipados calculados de cualquier elemento:

<div id="box">400px wide box</div>
<p id="output">Reading computed width&hellip;</p>
<script>
  const box = document.getElementById('box');
  const output = document.getElementById('output');

  const styles = box.computedStyleMap();
  const width = styles.get('width');
  console.log(width.value); // 400
  console.log(width.unit);  // 'px'

  output.textContent = 'width.value = ' + width.value + ', width.unit = "' + width.unit + '"';
</script>

<code>attributeStyleMap</code> para estilos en línea

Establezca y obtenga valores tipados de estilos en línea mediante element.attributeStyleMap:

<div id="box">Inline-styled box</div>
<p id="output">Setting styles via attributeStyleMap&hellip;</p>
<script>
  const box = document.getElementById('box');
  const output = document.getElementById('output');

  box.attributeStyleMap.set('opacity', CSS.number(0.5));
  box.attributeStyleMap.set('margin-top', CSS.px(16));

  const opacity = box.attributeStyleMap.get('opacity');
  output.textContent = 'opacity.value = ' + opacity.value;
</script>

Métodos de fábrica numéricos de CSS

El espacio de nombres CSS proporciona métodos de fábrica para crear valores tipados:

<div id="box">Factory methods demo</div>
<p id="output">Computing&hellip;</p>
<script>
  const output = document.getElementById('output');

  const px = CSS.px(100);         // CSSUnitValue(100, 'px')
  const percent = CSS.percent(50); // CSSUnitValue(50, 'percent')
  const em = CSS.em(1.5);          // CSSUnitValue(1.5, 'em')
  const number = CSS.number(0.5);  // CSSUnitValue(0.5, 'number')
  const deg = CSS.deg(180);        // CSSUnitValue(180, 'deg')

  output.textContent = [px, percent, em, number, deg]
    .map(v => v.value + v.unit).join(', ');
</script>

Operaciones aritméticas con valores tipados

CSSMathValue permite realizar operaciones matemáticas de CSS en JavaScript sin concatenar cadenas:

<div id="box">Math on typed values</div>
<p id="output">Calculating&hellip;</p>
<script>
  const output = document.getElementById('output');

  const width = CSS.px(100).add(CSS.percent(10));
  // Equivalent to calc(100px + 10%)

  const margin = CSS.px(16).mul(2);
  // 32px

  output.textContent = 'width = ' + width.toString() + '  |  margin = ' + margin.value + margin.unit;
</script>

Ventajas de rendimiento

Typed OM es considerablemente más rápido que el CSSOM basado en cadenas para manipulaciones frecuentes (por ejemplo, en fotogramas de animación). No es necesario analizar los valores a partir de cadenas en cada acceso, ya que ya son objetos estructurados.

Tipos de <code>CSSStyleValue</code>

Entre los tipos de valores de Typed OM se incluyen:

  • CSSUnitValue: número + unidad (100px)
  • CSSKeywordValue: palabra clave (auto, none)
  • CSSImageValue: imagen (url())
  • CSSMathValue: expresiones calc
  • CSSColorValue: valores de color (experimental)

Typed OM en animaciones

En la Web Animations API, use valores tipados para controlar las animaciones con mayor precisión:

<div id="box">Animated via Typed OM</div>
<script>
  const box = document.getElementById('box');
  box.animate(
    [{ opacity: CSS.number(0) }, { opacity: CSS.number(1) }],
    { duration: 300, fill: 'forwards' }
  );
</script>

Compatibilidad de los navegadores

CSS Typed OM (nivel 1) es compatible con Chrome 66+ y Edge 79+. La compatibilidad con Firefox y Safari es parcial o requiere activar indicadores. Consulte caniuse.com antes de usarlo en producción. La superficie de la API sigue ampliándose.

Cuándo usar Typed OM

Use Typed OM cuando:

  • Desarrolle Paint Worklets o Layout Worklets de CSS (es obligatorio)
  • Anime muchos elementos por fotograma en JavaScript
  • Desarrolle herramientas o preprocesadores de CSS
  • Necesite manipular valores de CSS con comprobación de tipos

Comprobación rápida

¿Qué devuelve element.computedStyleMap().get("width") en comparación con getComputedStyle(element).width?

Resumen

CSS Typed OM sustituye el CSSOM basado en cadenas por objetos de JavaScript tipados. Use computedStyleMap() para leer valores y attributeStyleMap para escribir estilos en línea. Los métodos de fábrica de CSS (CSS.px(), CSS.percent()) crean valores tipados. La API es más rápida que la manipulación basada en cadenas y es obligatoria para los Paint Worklets y Layout Worklets.

Preguntas frecuentes

¿La lección «El modelo de objetos tipado de CSS (OM)» es gratis?

Sí — el texto completo de «El modelo de objetos tipado de CSS (OM)» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.

¿Qué aprenderé en «El modelo de objetos tipado de CSS (OM)»?

Trabaje con valores CSS como objetos JavaScript tipados en lugar de cadenas mediante la API CSS Typed OM. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar CSS Academy?

No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «El modelo de objetos tipado de CSS (OM)»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de CSS Academy?

Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. El modelo de objetos tipado de CSS (OM)
  2. API de propiedades y valores CSS (@property)
  3. API CSS Paint: worklets
  4. API CSS Layout y su alcance
← Volver a CSS Academy