3.1 KiB
3.1 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
5b7d72c338cd7e35b63f3e14 | Improve Compatibility with Browser Fallbacks | 0 | تحسين التوافق مع Fallbacks المستعرض |
Description
Instructions
.red-box
. دعونا نحسن من توافق المتصفح الخاص بنا عن طريق إضافة إعلان background
آخر قبل الإعلان الحالي وتعيين قيمته إلى اللون الأحمر. Tests
tests:
- text: يجب أن تتضمن قاعدة <code>.red-box</code> الخاصة بك احتياطيًا مع تعيين <code>background</code> إلى اللون الأحمر مباشرةً قبل بيان <code>background</code> الموجود.
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 <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.");'
Challenge Seed
<style>
:root {
--red-color: red;
}
.red-box {
background: var(--red-color);
height: 200px;
width:200px;
}
</style>
<div class="red-box"></div>
Solution
// solution required