تخصيص قيم CSS باستخدام سمات بيانات HTML5

في مجال تطوير الويب، أصبحت إمكانية استخدام سمات بيانات HTML5 لتعديل قيم CSS أثار الفضول. تحاكي هذه التقنية الطريقة التي يمكن بها تغيير محتوى CSS من خلال خصائص المحتوى.

استكشاف نهج سمات بيانات HTML5

خذ بعين الاعتبار مقتطف HTML وCSS التالي:

div { width: attr(data-width); }

قيود التنفيذ الحالية

في وقت كتابة هذا التقرير، لا يعمل هذا النهج على النحو المنشود. يفسر المتصفح سمة عرض البيانات كسلسلة، بدلاً من قيمة رقمية للعرض.

الميزة القادمة: خصائص مخصصة

div { width: attr(data-width); }

لسوء الحظ، هذه الميزة لا تزال قيد التطوير وغير مدعومة بشكل كامل من قبل المتصفحات الرئيسية.

بديل للـ Pseudo- العناصر

على الرغم من أن القدرة على تعيين قيم CSS مباشرة ليست متاحة بعد، إلا أنه يمكنك الاستفادة منها عناصر زائفة لمعالجة المحتوى:

تتيح لك هذه التقنية عرض قيمة سمة عرض البيانات كمحتوى العنصر الزائف.