---
id: 5b7d72c338cd7e35b63f3e14
title: Покращення сумісності із застосуванням резервних значень для браузера
challengeType: 0
videoUrl: ''
forumTopicId: 301087
dashedName: improve-compatibility-with-browser-fallbacks
---

# --description--

Під час роботи з CSS ви, ймовірно, в якийсь момент стикнетеся з проблемами сумісності браузерів. Ось чому важливо забезпечувати резервні значення для браузера, щоб уникнути можливих проблем.

Коли браузер аналізує CSS веб-сторінки, він ігнорує всі властивості, які він не розпізнає чи не підтримує. Наприклад, якщо ви використовуєте змінну CSS, щоб призначити колір фону на сайті, Internet Explorer проігнорує цей колір, адже він не підтримує змінні CSS. В такому випадку, браузер буде використовувати будь-яке значення, яке він має для цієї властивості. Якщо він не може знайти іншого значення, встановленого для цієї властивості, то повернеться до стандартного значення, що часто є неідеальним.

Це означає, що, якщо ви хочете забезпечити "резерв" браузера, то достатньо вказати інше, більш широко підтримуване значення безпосередньо перед об'явою. Таким чином, старому браузерові буде на що спертися, а новіший просто інтерпретує ту об'яву, що йде далі в каскаді.

# --instructions--

Схоже, що змінна використовується, щоб встановити колір фону в класі `.red-box` class. Давайте покращимо сумісність браузерів, додавши ще одну об'яву `background`, прямо перед вже існуючою і встановивши їй значення `red`.

# --hints--

Правило `.red-box` повинне включати резервне значення `background` з параметром `red`, безпосередньо перед існуючою об'явою `background`.

```js
assert(
  code
    .replace(/\s/g, '')
    .match(
      /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
    )
);
```

# --seed--

## --seed-contents--

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

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

# --solutions--

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