freeCodeCamp/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

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

--description--

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

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

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

--instructions--

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

--hints--

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

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

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

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

--solutions--

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