freeCodeCamp

2.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
5b7d72c338cd7e35b63f3e14	Improve Compatibility with Browser Fallbacks	0		Aprimore a compatibilidade com fallbacks do navegador

Description

Ao trabalhar com o CSS, você provavelmente se deparará com problemas de compatibilidade do navegador em algum momento. É por isso que é importante fornecer fallbacks do navegador para evitar possíveis problemas. Quando seu navegador analisa o CSS de uma página da Web, ele ignora as propriedades que não reconhece ou não suporta. Por exemplo, se você usar uma variável CSS para atribuir uma cor de plano de fundo em um site, o Internet Explorer ignorará a cor do plano de fundo porque ela não suporta variáveis CSS. Nesse caso, o navegador usará qualquer valor que tenha para essa propriedade. Se não puder encontrar nenhum outro valor definido para essa propriedade, ele será revertido para o valor padrão, que normalmente não é o ideal. Isso significa que, se você quiser fornecer um retorno do navegador, será tão fácil quanto fornecer outro valor com maior suporte imediatamente antes de sua declaração. Dessa forma, um navegador mais antigo terá algo em que voltar, enquanto um navegador mais recente irá interpretar qualquer declaração que venha depois na cascata.

Instructions

Parece que uma variável está sendo usada para definir a cor de fundo da classe .red-box . Vamos melhorar nossa compatibilidade com o navegador, adicionando outra declaração de background antes da declaração existente e definindo seu valor para vermelho.

Tests

tests:
  - text: Sua regra de <code>.red-box</code> vermelha deve incluir um fallback com o <code>background</code> definido como vermelho imediatamente antes da declaração de <code>background</code> existente.
    testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), "Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.");'

Challenge Seed

<style>
  :root {
    --red-color: red;
  }
  .red-box {

    background: var(--red-color);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>

Solution

// solution required

2.7 KiB Raw Blame History Unescape Escape