Questionário sobre variáveis no CSS

Qual dos seguintes NÃO é um descritor válido na regra @property?

No código a seguir, qual valor color terá se --main-color não estiver definido?

p {
  color: var(--main-color, pink);
}

Qual das seguintes é uma forma válida de declarar uma propriedade personalizada em CSS?

Qual é o principal propósito de usar custom properties em CSS?

O que o seletor :root representa?

Como você aplica uma propriedade customizada --foreground como o color no CSS?

Qual é o propósito da regra @property no CSS?

Ao declarar uma @property personalizada, qual é o propósito do syntax em sua definição?

Com o que você deve ter cuidado ao usar propriedades customizadas?

Qual é o propósito de fornecer um valor de fallback na função var() para propriedades personalizadas CSS?

Ao definir uma variável --foreground dentro de uma media query, o que acontece quando a media query não corresponde mais à viewport atual?

Como a seguinte declaração se comportaria?

color: var(--main-color, var(--fallback-color, #000));

Qual é um benefício de usar @property em CSS?

O que a propriedade inherits em uma declaração personalizada de @property controla?

Na declaração de um @property personalizado, o que o initial-value especifica?

Dado o seguinte código HTML e CSS, qual será o valor da propriedade color para o elemento .box?

<div class="container">
  <div class="box">Text</div>
</div>

:root {
  --main-color: red;
}

.container {
  --main-color: blue;
}

.box {
  color: var(--main-color, black);
}

A qual propriedade um gradiente CSS deve ser aplicado?

Qual é o propósito dos color stops em gradientes CSS?

O que acontece se nenhum ângulo ou direção for especificado em um gradiente linear CSS?

Qual função de gradiente CSS permite criar um gradiente que irradia para fora a partir de um ponto central?

Qual das seguintes é uma maneira correta de declarar uma propriedade personalizada CSS?

Qual seletor é tipicamente usado para definir propriedades personalizadas globais de CSS?

Ao usar var(), por que é recomendado incluir um valor de fallback?

Qual é a sintaxe correta para aplicar uma propriedade customizada como cor de fundo?

Qual regra CSS permite que desenvolvedores definam propriedades customizadas com maior controle sobre seu comportamento?

O que o campo inherits em uma definição de @property controla?

Ao definir um ângulo de gradiente animado usando @property, qual sintaxe deve ser usada?

O que distingue uma propriedade customizada CSS de uma propriedade CSS padrão em termos de como ela é definida?

Qual destes é um benefício de usar propriedades personalizadas do CSS?

Qual propriedade CSS pode mudar dinamicamente com base em media queries usando propriedades customizadas?

No contexto das variáveis CSS, qual é o papel de initial-value em uma regra @property?

Considere o seguinte HTML e CSS. Qual cor de fundo será aplicada ao elemento .card?

<div class="dark-theme">
  <div class="card">Content</div>
</div>

:root {
  --bg-color: white;
}

.dark-theme {
  --bg-color: #333;
}

.card {
  background: var(--bg-color);
}

No CSS a seguir, o que acontece se um usuário tentar atribuir um valor inválido para --padding (por exemplo, uma cor em vez de um comprimento)?

@property --padding {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

Qual é o propósito da propriedade customizada --gradient-angle neste exemplo?

@property --gradient-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.gradient {
  width: 100px;
  height: 100px;
  background: linear-gradient(var(--gradient-angle), red, blue);
  transition: --gradient-angle 0.5s;
}

.gradient:hover {
  --gradient-angle: 90deg;
}

Qual cenário melhor mostra a vantagem de usar custom properties para temas?

Por que os desenvolvedores podem preferir usar :root para definir variáveis CSS?

O que o seguinte CSS faria se --secondary-color não estiver definido?

h1 {
  color: var(--secondary-color, orange);
}

Que tipo de valores <color> representa em um campo de sintaxe @property?

Qual é o principal benefício de usar propriedades personalizadas em combinação com @property?

O que var(--undefined-property, fallback) faz quando a propriedade customizada não está definida?

Questionário sobre variáveis no CSS

Concluído!