HTML وCSS / أنظمة عرض قابلة للصيانة / الدرس 14
الخصائص المخصصة والثيمات المتكيفة
استخدم الخصائص المخصصة قيما تصميمية سياقية مع فهم الوراثة والبدائل وتباين الثيمات.
في هذه الصفحة
أهداف الدرس
- تسمية المعنى لا المظهر العرضي
- حصر الثيمة في مكون
- احترام المستخدم في الثيمة
تسمية المعنى لا المظهر العرضي
تقدم الخصائص المخصصة قيما مسماة تشارك في التتالي وتستخدم عبر var(). يصف --surface الدور أفضل من --light-gray إذا صار داكنا بثيمة أخرى. ميز لوحة الألوان والأدوار وتعديلات المكونات عند الحاجة، لكن لا تكثر الأسماء التي تخفي قيمة بسيطة. لا تضمن الرموز صحة التصميم؛ يجب توافق النص والخلفية والتركيز والخطأ في كل تركيب.
فهم الوراثة والاستبدال
ترث الخصائص ذات الشرطتين افتراضيا وتحل في سياق القيمة المحسوبة، وأسماؤها حساسة للحروف. يخصص ضبطها في المكون أبناءه دون تكرار التصريحات. تستخدم var البديل عند غياب الخاصية أو عدم صلاحيتها بوصفها مخصصة، ولا تتحقق عموما من نوع الوجهة. إذا كانت --tone تساوي 16px فلن يختار color: var(--tone, blue) الأزرق لمجرد أنها ليست لونا؛ قد يصبح التصريح غير صالح عند الحساب وفق قواعد الخاصية.
حصر الثيمة في مكون
يحدد المثال دوري الخلفية والنص ثم يغيرهما في لوحة داكنة، وتستهلك التصريحات نفسها الدورين. لا يحتاج العرض JavaScript ولا ينفذ مبدل تفضيل أو حفظا. يحتاج المبدل الحقيقي تحكما ميسرا وسياسة أولية وتطبيقا دون ومضة مزعجة. اختبر الروابط والنماذج والصور والاختيار والتركيز لا الفقرات فقط؛ فقد تفشل أطراف الثيمة رغم جمال اللوحة.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scoped theme</title>
<style>
:root { --surface: #fff; --text: #17212b; } .panel { background: var(--surface); color: var(--text); padding: 1rem; margin-block: 1rem; } .dark { --surface: #17212b; --text: #fff; }
</style>
</head>
<body>
<main><h1>Scoped themes</h1><section class="panel"><h2>Default panel</h2><p>Shared component styling.</p></section><section class="panel dark"><h2>Dark panel</h2><p>The same roles have different values.</p></section></main>
</body>
</html>
One light panel and one dark panel share a component contract.تستهلك اللوحتان الأدوار نفسها وتغير الداكنة القيم محليا ويرث الأبناء اللون. النتيجة المتوقعة: لوحتان فاتحة وداكنة بعقد مكون واحد.
استخدام البدائل والحساب عن قصد
يشير المثال إلى رمز تباعد اختياري ببديل ويشتق مسافة بـcalc. يغيب الرمز في لوحة ويوجد في الأخرى فيتوقع الفرق. قد يحتوي البديل var أخرى لكن السلاسل العميقة تصعب المراجعة. وثق الوحدات والأشكال المقبولة؛ فلا تتكافأ 2 و2rem في كل وجهة. لا تنشئ المراجع الدائرية حلقة حساب مفيدة بل تبطل دورة الاعتماد وفق القواعد.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Token fallback</title>
<style>
.panel { padding: var(--space, 1rem); margin-block: 1rem; border-inline-start: calc(var(--space, 1rem) / 4) solid #174e9a; } .roomy { --space: 2rem; }
</style>
</head>
<body>
<main><h1>Spacing fallback</h1><div class="panel">Fallback spacing.</div><div class="panel roomy">Explicit spacing token.</div></main>
</body>
</html>
The roomy panel has twice the declared padding and border thickness.تستخدم الأولى حشوا 1rem وحدا ربع rem والثانية 2rem ونصف rem لأن الرمز موجود. النتيجة المتوقعة: للوحة الموسعة ضعف الحشو وسمك الحد المعلنين.
احترام المستخدم في الثيمة
قد يرشد تفضيل المخطط اللوني العرض الأولي ولا يعوض الاختبار والسياسة. تعلم color-scheme المتصفح بالمخططات المدعومة ويجب توافقها مع السطح. قد يعتمد مستخدم الألوان القسرية ألوان النظام فلا تتجاوزها عشوائيا. تختلف الحركة والتباين والخط عن الداكن. احفظ المعنى خارج اللون؛ يحتاج خطأ danger رسالة. راجع حدود الوراثة فقد يرث ودجت رموزا لا يستهلكها بأمان.
الأخطاء الشائعة وإصلاحها
لا يستبدل بديل اللون رمزا طوليا
- لماذا يحدث؟
- الرمز موجود لكنه ليس لونا بعد الاستبدال.
- كيف تصلحه؟
- تحقق من عقد الرمز وقيمه.
- كيف تتجنب تكراره؟
- اختبر النوع الخاطئ والغياب.
يتغير مكون داخلي فجأة
- لماذا يحدث؟
- ورث رمزا غير موثق.
- كيف تصلحه؟
- احصر الرمز أو غير اسمه ووثق مستهلكيه.
- كيف تتجنب تكراره؟
- راجع التركيبات مع الثيمة.
يخفي الداكن مؤشر التركيز
- لماذا يحدث؟
- رُوجع السطح والنص فقط.
- كيف تصلحه؟
- حدد أدوار التفاعل واختبرها.
- كيف تتجنب تكراره؟
- ضم التركيز والخطأ للقبول.
اختبر فهمك
1. هل تصبح color: var(--ink, red) حمراء إذا كانت --ink تساوي 12px؟
اعرض الحل المشروح
لا؛ توجد الخاصية فتستبدل رموزها، ويصبح تصريح اللون غير صالح عند الحساب بدلا من اختيار البديل. أصلح عقد قيمة الرمز ولا تفترض فحص نوع الوجهة.
2. صمم رموزا دلالية لإشعار في ثيمتين.
اعرض الحل المشروح
استخدم أدوار السطح والنص والحد والتركيز عند التفاعل، وحدد أزواجا متماسكة واحفظ الرسالة وافحص التباين مع الجوار. تغير الرموز العرض لا المعنى أو التحكم.
أهم ما تعلمته
- تشارك المخصصة في التتالي والوراثة.
- ليس بديل var تحقق أنواع عاما.
- نسق كل حالة لا الخلفية فقط.