---
id: 5b7d72c338cd7e35b63f3e14
title: Improve Compatibility with Browser Fallbacks
challengeType: 0
videoUrl: ''
localeTitle: 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
```yml
tests:
- text: Sua regra de .red-box
vermelha deve incluir um fallback com o background
definido como vermelho imediatamente antes da declaração de background
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 .red-box
rule should include a fallback with the background
set to red immediately before the existing background
declaration.");'
```
## Challenge Seed
## Solution
```js
// solution required
```