إضافة بادئات CSS
إضافة بادئات المورّد تلقائياً إلى CSS
CSS المدخل
CSS مع البادئات
أمثلة إضافة بادئات CSS
بادئات المورّد تضمن دعم المتصفحات المختلفة. مثال:
Flexbox والتحويلات
الإدخال (بدون بادئات):
المخرجات مع البادئات:
استخدم تحميل مثال أعلاه لتحميل المزيد من البيانات النموذجية.
ما هو إضافة بادئات CSS؟
المتصفحات أحياناً تطبّق ميزات CSS ببادئات المورّد قبل التقنين: -webkit- (Chrome, Safari)، -moz- (Firefox)، -ms- (IE/Edge القديم). تضيف أداة البادئات هذه البادئات تلقائياً حتى تعمل الأنماط في جميع المتصفحات. مواصفات W3C CSS تحدد اللغة؛ Can I Use يتتبع دعم المتصفحات.
تحلل هذه الأداة CSS وتضيف بادئات المورّد حيث تكون مطلوبة. تعمل بالكامل في المتصفح. لا يتم إرسال أي شيء إلى خادم. المتصفحات الحديثة تحتاج بادئات أقل من قبل، لكن بعض الخصائص (مثل user-select) لا تزال تستفيد منها. للتنسيق استخدم منسق CSS. للضغط استخدم مضغط CSS.
كيفية استخدام هذه الأداة
لصق أو رفع CSS
انسخ CSS والصقه في المحرر الأيسر. يمكنك أيضاً النقر على رفع الملف لتحميل ملف .css. زر تحميل مثال يحمّل بيانات نموذجية. سيظهر خطأ إذا كان CSS غير صالح.
مراجعة المخرجات مع البادئات
تعرض اللوحة اليمنى CSS مع بادئات المورّد المضافة. خصائص مثل display: flex وuser-select وtransform تحصل على البادئات المناسبة للمتصفحات القديمة.
نسخ أو تنزيل
استخدم نسخ أو تنزيل. لـ SCSS أو Less حوّل أولاً بـ SCSS إلى CSS أو Less إلى CSS ثم أضف البادئات. للتحقق استخدم التحقق من CSS.
متى تفيد إضافة بادئات CSS
عند دعم المتصفحات القديمة (Safari، Chrome القديم، IE القديم) أو استخدام ميزات CSS الأحدث غير المُقنَّنة بالكامل بعد، تضمن الإضافة التوافق. أدوات البناء مثل Autoprefixer وPostCSS تتولى هذا في الإنتاج، لكن هذه الأداة مفيدة للملفات الفردية أو الفحوصات السريعة.
CSS لرسائل البريد الإلكتروني أو الأنماط المضمّنة أو CSS المستضاف على CDN قد يحتاج إضافة بادئات يدوية. تمرير ورقة الأنماط عبر هذه الأداة يعطي مخرجات جاهزة للمتصفحات. للتحويل إلى أنماط inline (مثلاً للبريد الإلكتروني) استخدم CSS إلى Inline بعد إضافة البادئات.
الأسئلة الشائعة
هل أحتاج بادئات في 2024؟
كثير من الخصائص لها دعم بدون بادئات الآن. لـ Safari القديم أو iOS أو المتصفحات الأقدم بعض الخصائص (مثل -webkit-backdrop-filter) لا تزال تحتاج بادئات. تحقق من Can I Use للمتصفحات المستهدفة.
هل بياناتي خاصة؟
نعم. يتم إضافة البادئات بالكامل في المتصفح. لا يتم إرسال أي بيانات إلى أي خادم.
لماذا استخدام هذه الأداة بدلاً من Autoprefixer؟
Autoprefixer يعمل في خط أنابيب البناء. هذه الأداة تعمل في المتصفح — لا تحتاج Node.js أو خطوة بناء. استخدمها للفحوصات السريعة أو الملفات الفردية.
هل يدعم جميع الخصائص؟
تضيف الأداة بادئات للخصائص الشائعة. للتغطية الشاملة استخدم Autoprefixer في بنائك. في معظم الحالات تغطي هذه الأداة الأهم.
ما حال @keyframes؟
قد تحتاج أسماء الإطارات الرئيسية بادئات في بعض السياقات. تتعامل الأداة مع الحالات الشائعة. للرسوم المتحركة المعقدة تحقق في المتصفحات المستهدفة.
أدوات ذات صلة
مواصفة CSS: W3C CSS. MDN CSS مرجع أساسي. Can I Use لدعم المتصفحات. Autoprefixer لخطوط أنابيب البناء.