استخدام data-* مع محددات السمات في CSS
تنسيق العناصر بصورة مشروطة استنادًا إلى قيم سمات data
استخدام data-* مع محددات السمات في CSS درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
محددات السمات في CSS
تطابق محددات سمات CSS العناصر استنادًا إلى وجود السمة وقيمتها: يطابق [data-state] أي عنصر يملك سمة data-state؛ بينما يطابق [data-state="active"] العناصر التي تساوي قيمتها «active» فقط.
محدد الوجود
يطابق [data-tooltip] العناصر التي تملك سمة data-tooltip، بغض النظر عن قيمتها. استخدمه لتطبيق أنماط التلميح الأساسية على أي عنصر مرفقة به بيانات تلميح، قبل النظر في محتوى التلميح.
محدد المطابقة التامة
يطابق [data-theme="dark"] العناصر التي تساوي فيها data-theme القيمة «dark» تمامًا. يتيح ذلك تطبيق الأنماط المستندة إلى السمة: طبّق رموز الألوان الداكنة عندما تكون للسمة html قيمة data-theme="dark" عيّنها JavaScript.
محددات المطابقة الجزئية
يطابق [data-icon^="arrow"] القيم التي تبدأ بـ «arrow». ويطابق [data-label$="ing"] القيم التي تنتهي بـ «ing». أما [data-tag*="feature"] فيطابق القيم التي تحتوي على «feature». وتتيح هذه المحددات تطبيق الأنماط المستندة إلى الأنماط المتكررة من دون إضافة عدد كبير من الأصناف.
آلة حالات باستخدام data-*
نمذج حالة المكوّن باستخدام سمات data-state: [data-state="idle"] و[data-state="loading"] و[data-state="error"]. تستبدل قواعد CSS الخاصة بكل حالة عدة أسماء أصناف شرطية، فتحفظ الحالة في سمة واحدة وتفصل الأنماط بوضوح.
[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }خصوصية محددات السمات
لمحددات السمات درجة الخصوصية نفسها التي لمحددات الأصناف (0,1,0). وعند دمجها مع محددات العناصر، تكون خصوصية button[data-variant="primary"] هي (0,1,1). خطّط لخصوصية محددات السمات إلى جانب القواعد المعتمدة على الأصناف لتجنب التعارضات.
نمط التلميح
يمكن إنشاء تلميح باستخدام CSS فقط وdata-tooltip: طبّق ::after { content: attr(data-tooltip) } عند التمرير. تقرأ الدالة content: attr() قيمة السمة وتستخدمها كمحتوى للعنصر الزائف، من دون الحاجة إلى JavaScript أو عناصر HTML إضافية.
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
}data-* مقابل الصنف للتنسيق
استخدم الأصناف للتعبير عن الغرض التنسيقي (is-active, has-error)، وسمات البيانات لحمل البيانات (data-user-id, data-count). عندما تقود السمة نفسها السلوك، إذ يقرأها JavaScript، والتنسيق، إذ يحددها CSS، فإن data-* تلغي التكرار بين JavaScript وCSS.
دمج محددات data-*
اربط عدة محددات سمات: [data-type="button"][data-size="large"] يطابق العناصر التي عُيّنت لها السمتان. ينشئ ذلك مطابقة مركبة من دون الحاجة إلى صنف مدمج مثل .button-large، ما يقلل كثرة الأصناف.
ملاحظة حول الأداء
تكون محددات السمات أبطأ قليلًا من محددات الأصناف عند تحديد الأنماط. بالنسبة إلى الأنماط الثابتة، فضّل الأصناف. واستخدم محددات السمات عندما تقود قيمة السمة النمط، مثل data-state أو data-theme، وتتغير أثناء التشغيل؛ إذ تستبدل سمة واحدة عدة أصناف يجري تبديلها.
حساسية حالة الأحرف
تكون مطابقة قيم السمات حساسة لحالة الأحرف افتراضيًا في HTML، لكنها ليست كذلك لرموز اللغات في XHTML. أضف العلم i للمطابقة غير الحساسة لحالة الأحرف: يطابق [data-state="Active" i] القيم «active» و«Active» و«ACTIVE».
تحقق من المعرفة
ماذا يفعل محدد CSS [data-state="loading"] .spinner؟
الملخص
تطابق محددات سمات CSS سمات data-* استنادًا إلى وجودها أو قيمتها التامة أو أنماطها الجزئية. وبالاقتران مع content: attr() للتلميحات وdata-state لآلات حالات المكوّنات، تعمل سمات data-* كحاملات للبيانات ونقاط ربط لتنسيق CSS من دون الإكثار من الأصناف.
الأسئلة الشائعة
هل درس «استخدام data-* مع محددات السمات في CSS» مجاني؟
نعم — نص درس «استخدام data-* مع محددات السمات في CSS» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «استخدام data-* مع محددات السمات في CSS»؟
تنسيق العناصر بصورة مشروطة استنادًا إلى قيم سمات data تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «استخدام data-* مع محددات السمات في CSS»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- صياغة data-* واصطلاحات التسمية
- الوصول إلى data-* باستخدام dataset في JavaScript
- استخدام data-* مع محددات السمات في CSS
- أنماط عملية: التلميحات وتتبع الحالة