في هذا الدرس 8تصفّح المواضيع
تحمل عناصر HTML بطبيعتها معلومات دلالية غنية داخل سماتها مثل type="email" وdir="rtl" وhref وdisabled وaria-expanded. وتتيح محددات السمات المكتوبة بين قوسين مربعين [attr] تنسيق العناصر مباشرة بالاعتماد على هذه السمات دون اختراع أصناف مكررة.
يبدأ هذا النظام بصيغتين أساسيتين: مطابقة وجود السمة مثل [disabled] التي تستهدف أي عنصر يمتلك السمة بغض النظر عن قيمتها، والمطابقة التامة للقيمة مثل input[type="email"] أو [dir="rtl"] التي تشترط تطابق القيمة حرفاً بحرف.
عندما تحتوي السمة على قائمة كلمات مفصولة بمسافات مثل data-tags="css layout featured" أو rel="noopener external"، يطابق محدد الكلمة المستقلة [data-tags~="featured"] الكلمة التامة featured بدقة دون أن يطابق بالخطأ كلمة ملتصقة مثل unfeatured.
أما مع رموز اللغات الإقليمية المكتوبة بشرطة مثل lang="ar" أو lang="ar-SA" أو lang="ar-EG"، فيطابق محدد رمز اللغة الفرعي [lang|="ar"] القيمة "ar" المنفردة وكل قيمة تبدأ بالمقطع "ar-" متبوعاً بشرطة مباشرة.
[data-tags~="featured"] {
border: 2px solid #7750b2;
background-color: #f2ebf9;
}
[lang|="ar"] {
border-right: 4px solid #0f766e;
padding-right: 12px;
}يوفر محدد البداية ومحدد النهاية طريقة تلقائية ذكية لتنسيق الروابط والملفات: محدد البداية برمز السهم العلوي [attr^="val"] يفحص المقطع الذي تبدأ به قيمة السمة، بينما يفحص محدد النهاية برمز الدولار [attr$="val"] المقطع الذي تنتهي به.
فمن خلال a[href^="https://"] أو a[href^="mailto:"] تميز الروابط المشفرة وروابط البريد الإلكتروني تلقائياً، ومن خلال a[href$=".pdf"] أو a[href$=".zip"] تمنح روابط المستندات والملفات المضغوطة تنسيقاً بصرياً واضحاً بمجرد قراءة امتدادها.
a[href^="https://"] {
color: #0f766e;
font-weight: 700;
}
a[href$=".pdf"] {
background-color: #f2ebf9;
border: 1px solid #7750b2;
padding: 4px 10px;
border-radius: 6px;
}يطابق محدد الاحتواء الجزئي برمز النجمة [attr*="val"] العنصر متى ظهر المقطع النصي في أي موضع داخل قيمة السمة سواء في البداية أو المنتصف أو النهاية؛ فالمحدد a[href*="docs"] يطابق أي رابط يضم المقطع docs أينما ورد في المسار.
وفي المواقع الفعلية قد يرفع المحررون ملفات بامتدادات كبيرة مثل REPORT.PDF أو مختلطة مثل Guide.Pdf؛ لذا تضمن إضافة راية تجاهل حساسية الأحرف i قبل إغلاق القوس كما في a[href$=".pdf" i] مطابقة جميع حالات الأحرف بثبات.
مختبر مطابقة محددات السمات وراية الأحرف
من أرقى ممارسات الوصول الشامل في CSS الحديثة ربط المظهر البصري للمكونات مباشرة بسمات حالة ARIA مثل button[aria-expanded="true"] وa[aria-current="page"]، وكذلك سمات البيانات الدلالية المخصصة مثل [data-status="verified"].
فعندما يعتمد التلوين والإظهار مباشرة على aria-expanded="true" بدلاً من صنف منفصل مثل .is-open، يستحيل أن يتغير شكل الزر على الشاشة مع نسيان تحديث حالته لقارئات الشاشة؛ وبذلك يشترك التصميم البصري وإمكانية الوصول في مصدر حقيقة واحد.
button[aria-expanded="true"] {
background-color: #6d44a8;
color: #ffffff;
}
.status-pill[data-state="online"] {
background-color: #ccfbf1;
color: #115e59;
}في ميزان أولوية CSS، يُحسَب كل محدد سمة في نفس خانة الصنف تماماً بوزن 0-1-0؛ فالمحدد [disabled] يملك وزن 0-1-0، بينما يجمع input[type="email"] عنصراً واحداً وسمة واحدة بوزن 0-1-1.
ويمكنك كذلك تركيب أكثر من شرط سمة متلاصقين بلا مسافة على العنصر نفسه مثل a[href^="https://"][target="_blank"]، مما يشترط تحقق الشرطين معاً في آن واحد ويرفع وزن الأولوية إلى 0-2-1.
تعمل محددات السمات كطبقة تدقيق بصري تلقائية في صفحات التوثيق ولوحات التحكم؛ فقاعدة مثل a[href^="http://"] بإطار تحذيري كهرماني تكشف فوراً أي رابط غير مشفر قبل نشر المحتوى، بينما تميز a[target="_blank"] الروابط التي تفتح في لسان متصفح جديد.
وبالطريقة ذاتها، يمنح استهداف input[readonly] وbutton[disabled] خلفية هادئة ومؤشر cursor: not-allowed تلقائياً فور قفل الحقل أو تعطيل الزر في الكود.
يجمع الجدول المرجعي الشامل التالي صيغ محددات السمات السبع المعتمدة وراية تجاهل حالة الأحرف مع أمثلتها العملية:
| الصيغة | قاعدة المطابقة | مثال تطبيقي |
|---|---|---|
[attr] | مجرد وجود السمة على العنصر | input[readonly]، button[disabled] |
[attr="val"] | تطابق تام وكامل للنص | input[type="email"]، [dir="rtl"] |
[attr~="val"] | كلمة مستقلة ضمن قائمة مفصولة بمسافات | [data-tags~="featured"] |
[attr|="val"] | تطابق تام أو متبوع بشرطة رمز لغة | [lang|="ar"] يطابق ar وar-SA |
[attr^="val"] | تبدأ القيمة بالمقطع المحدد | a[href^="https://"]، a[href^="http://"] |
[attr$="val"] | تنتهي القيمة بالمقطع المحدد | a[href$=".pdf"]، a[href$=".zip"] |
[attr*="val"] | تحتوي القيمة على المقطع في أي موضع | a[href*="closetag"] |
[attr="val" i] | مطابقة تتجاهل فرق الأحرف الكبيرة والصغيرة | a[href$=".pdf" i] |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت صيغ محددات السمات السبع وراية تجاهل حالة الأحرف وتنسيق سمات الوصول الدلالية وتركيب الشروط بوزن الصنف العادي. وفي الخطوة التالية سننتقل إلى درس تحديد العناصر عن طريق الحالة في لغة CSS لاحتراف الفئات الوهمية التفاعلية والبنيوية والمنطقية.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Attribute Presence Selector محدد وجود السمة
- صيغة الأقواس المربعة [attr] التي تطابق أي عنصر يحمل السمة المذكورة بغض النظر عن قيمتها.
- للمراجعة
- 02 Prefix and Suffix Attribute Matchers محددا البداية والنهاية للسمة
- معاملا ^= و $= اللذان يستهدفان بداية قيمة السمة كبروتوكول الرابط أو نهايتها كامتداد الملف.
- للمراجعة
- 03 Hyphen Subcode Attribute Selector محدد رمز اللغة الفرعي
- المعامل |= الذي يطابق رمز اللغة المنفرد مثل ar أو الرمز الإقليمي المتبوع بشرطة مثل ar-EG.
- للمراجعة
- 04 Case-Insensitive Attribute Flag راية تجاهل حساسية الأحرف
- إضافة الحرف i قبل إغلاق القوس المربع لكي تطابق السمة الأحرف الكبيرة والصغيرة على السواء.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ARIA ARIA
- Accessible Rich Internet Applications
- سمات الوصول القياسية مثل aria-expanded التي يرتبط بها المظهر البصري مباشرة عبر محددات السمات.
- للمراجعة
- 02 HTTPS HTTPS
- Hypertext Transfer Protocol Secure
- بروتوكول الويب المشفر الذي يمكن تمييزه تلقائياً عن الروابط غير المشفرة بمحدد البداية.
- للمراجعة
- 03 URL URL
- Uniform Resource Locator
- عنوان المورد داخل سمات الروابط الذي تفحص محددات السمات بدايته ونهايته ومحتواه.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
اكتب قاعدة a[href$=".pdf" i] لمنح روابط الملفات المنتهية بامتداد .pdf أو .PDF إطاراً بنفسجياً موحداً.
-
استهدف المحدد button[aria-expanded="true"] لتبديل لون الخلفية والنص تلقائياً عندما تكون القائمة مفتوحة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.