71 lines
3.2 KiB
Markdown
71 lines
3.2 KiB
Markdown
---
|
||
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>
|
||
```
|