0Pricing
CSS Academy · Aula

O modelo de objetos tipados do CSS (OM)

Trabalhe com valores CSS como objetos JavaScript tipados, em vez de strings, usando a API CSS Typed OM.

O modelo de objetos tipados do CSS (OM) é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O que é o OM tipado do CSS?

O Modelo de Objetos Tipados do CSS (OM Tipado) faz parte do projeto CSS Houdini. Ele expõe valores do CSS como objetos JavaScript tipados, em vez de strings simples, permitindo manipulação mais rápida, aritmética mais avançada e segurança de tipos.

Antigo e novo

O CSSOM tradicional retorna strings; o OM tipado retorna objetos com informações de tipo:

<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>

computedStyleMap()

Acesse valores tipados calculados para qualquer 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>

attributeStyleMap para estilos incorporados

Defina e obtenha valores tipados de estilos incorporados por meio de 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érica do CSS

O namespace CSS fornece métodos de fábrica para criar 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>

Aritmética com valores tipados

CSSMathValue permite realizar operações matemáticas do CSS em JavaScript sem concatenar strings:

<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>

Benefícios de desempenho

O OM tipado é significativamente mais rápido do que o CSSOM baseado em strings para manipulações frequentes (por exemplo, em quadros de animação). Os valores não precisam ser analisados a partir de strings a cada acesso — eles já são objetos estruturados.

Tipos de CSSStyleValue

Os tipos de valores do OM tipado incluem:

  • CSSUnitValue: número + unidade (100px)
  • CSSKeywordValue: palavra-chave (auto, none)
  • CSSImageValue: imagem (url())
  • CSSMathValue: expressões calc
  • CSSColorValue: valores de cor (experimental)

OM tipado em animações

Na API de animações da Web, use valores tipados para um controle mais preciso das animações:

<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>

Compatibilidade com navegadores

O OM tipado do CSS (nível 1) é compatível com Chrome 66+ e Edge 79+. O suporte do Firefox e do Safari é parcial ou depende de sinalizadores. Consulte caniuse.com antes de usar em produção. A superfície da API continua crescendo.

Quando usar o OM tipado

Use o OM tipado ao:

  • Desenvolver Worklets de pintura ou layout do CSS (obrigatório)
  • Animar muitos elementos por quadro em JavaScript
  • Desenvolver ferramentas ou pré-processadores de CSS
  • Precisar manipular valores do CSS com verificação de tipos

Verificação rápida

O que element.computedStyleMap().get("width") retorna em comparação com getComputedStyle(element).width?

Recapitulação

O OM tipado do CSS substitui o CSSOM baseado em strings por objetos JavaScript tipados. Use computedStyleMap() para acessar valores e attributeStyleMap para escrever estilos incorporados. Os métodos de fábrica do CSS (CSS.px(), CSS.percent()) criam valores tipados. A API é mais rápida do que a manipulação baseada em strings e é obrigatória para Worklets de pintura e de layout.

Perguntas Frequentes

A aula “O modelo de objetos tipados do CSS (OM)” é grátis?

Sim — o texto completo de “O modelo de objetos tipados do CSS (OM)” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “O modelo de objetos tipados do CSS (OM)”?

Trabalhe com valores CSS como objetos JavaScript tipados, em vez de strings, usando a API CSS Typed OM. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “O modelo de objetos tipados do CSS (OM)”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O modelo de objetos tipados do CSS (OM)
  2. API de propriedades e valores CSS (@property)
  3. API CSS Paint: Worklets
  4. API CSS de layout e escopo
← Voltar para CSS Academy