1.9 KiB
1.9 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
5b7d72c338cd7e35b63f3e14 | 通過瀏覽器降級提高兼容性 | 0 | 301087 | improve-compatibility-with-browser-fallbacks |
--description--
使用 CSS 時可能會遇到瀏覽器兼容性問題。 提供瀏覽器降級方案來避免潛在的問題會顯得很重要。
當瀏覽器解析頁面的 CSS 時,會自動忽視不能識別或者不支持的屬性。 舉個例子,如果使用 CSS 變量來指定站點的背景色,IE 瀏覽器由於不支持 CSS 變量而會忽略背景色。 此時,瀏覽器會嘗試使用其它值。 但如果沒有找到其它值,則會使用默認值,也就是沒有背景色。
這意味着如果想提供瀏覽器降級方案,在聲明之前提供另一個更寬泛的值即可。 這樣老舊的瀏覽器會降級使用這個方案,新的瀏覽器會在後面的聲明裏覆蓋降級方案。
--instructions--
我們使用了 CSS 變量來定義 .red-box
的背景色。 現在,我們通過在現有的聲明之前添加另一個 background
聲明,並將它的值設置爲 red
,來提升瀏覽器的兼容性。
--hints--
.red-box
規則應在現有的 background
聲明之前有一個 background
的備用屬性,其值爲 red
。
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>