توافق المتصفحات وcaniuse.com
تحقق من دعم الميزات عبر المتصفحات في caniuse.com، وافهم بادئات المورّدين، واستخدم polyfills أو البدائل عند الحاجة.
توافق المتصفحات وcaniuse.com درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
لماذا يهم التوافق؟
تطبّق المتصفحات المختلفة معايير الويب بسرعات متفاوتة. فقد تكون خاصية CSS أو واجهة JavaScript API متاحة في Chrome 130، لكنها قد لا تكون موجودة في إصدار أقدم من Safari أو Firefox. ويمنع الاختبار والتخطيط للتوافق تجارب الاستخدام المعطّلة لمستخدميكم.
caniuse.com — مرجع التوافق الخاص بكم
انتقلوا إلى caniuse.com واكتبوا أي خاصية CSS أو واجهة JavaScript API أو سمة HTML. وستظهر لكم جداول دعم ملوّنة في المتصفحات الرئيسية وإصداراتها الحديثة، إلى جانب إحصاءات الاستخدام وملاحظات حول الدعم الجزئي.
قراءة جدول caniuse
الأخضر = مدعوم. والأصفر = دعم جزئي. والأحمر = غير مدعوم. والرمادي = غير معروف. تحقّقوا من نسبة الاستخدام العالمية في الأعلى؛ فإذا كان أكثر من 97% من المستخدمين يملكون هذه الميزة، يمكنكم عادةً استخدامها من دون بديل احتياطي.
browser-compat-data وMDN
تتضمن صفحات MDN Web Docs جدولًا لتوافق المتصفحات في أسفل كل صفحة مرجعية لواجهة API. ويستخدم الجدول البيانات نفسها التي يستخدمها caniuse، ويحدّثها مورّدو المتصفحات أنفسهم باستمرار.
مبادرة Baseline
تحدّد مبادرة Baseline (web.dev/baseline) الميزات على أنها متاحة حديثًا أو متاحة على نطاق واسع، استنادًا إلى دعمها في Chrome وEdge وFirefox وSafari. وتكون الميزة المتاحة على نطاق واسع آمنة للاستخدام من دون polyfills.
Polyfills
إن polyfill هو تعليمات JavaScript برمجية تطبّق واجهة API أحدث في المتصفحات القديمة. ومن المصادر الشائعة: polyfill.io، الذي يرسل polyfills المطلوبة فقط؛ وcore-js، الذي يوفر polyfills شاملة لـ JavaScript؛ ومساعدات Babel.
// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>@supports — استعلامات الميزات في CSS
يتيح لك @supports كتابة CSS يُطبَّق فقط عند دعم خاصية معينة. ويوفّر بدائل CSS الاحتياطية، بطريقة مشابهة لتوفير استعلامات الوسائط لتعديلات التصميم المتجاوب.
/* Fallback for all browsers */
.grid {
display: flex;
flex-wrap: wrap;
}
/* Enhancement for browsers that support grid */
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}بادئات المورّدين (قديمة)
كانت ميزات CSS الأقدم تتطلب بادئات المورّدين: -webkit- و-moz- و-ms-. وأصبحت هذه البادئات مهجورة في الغالب الآن، إذ تستخدم المتصفحات الحديثة الخصائص القياسية من دون بادئات. وتضيف Autoprefixer، وهي إضافة PostCSS، هذه البادئات تلقائيًا عند استمرار الحاجة إليها.
التحويل البرمجي باستخدام Babel
يحوّل Babel JavaScript الحديثة (ES2022+) إلى ES5 يمكن للمتصفحات الأقدم تشغيلها. ويتكامل Vite وwebpack مع Babel من خلال الإضافات. اضبط المتصفحات المستهدفة في browserslist داخل package.json.
// package.json
"browserslist": [
"last 2 versions",
"not dead",
"> 0.5%"
]الاختبار في المتصفحات الفعلية
لا يُعدّ محاكاة الأجهزة في أدوات المطورين بديلًا عن اختبار المتصفح الفعلي. استخدم BrowserStack أو Sauce Labs أو متصفح Safari الفعلي، الذي يتطلب macOS أو iOS، للتحقق الحقيقي من التوافق بين المتصفحات.
مشهد المتصفحات دائمة التحديث
تُحدّث Chrome وEdge وFirefox وSafari نفسها تلقائيًا. ويتقلص ذيل المتصفحات القديمة كل عام. وبالنسبة إلى معظم المنتجات الموجهة للمستهلكين، فإن استهداف آخر إصدارين رئيسيين من كل متصفح يغطي أكثر من 95% من المستخدمين.
فحص سريع
ماذا تشير الخلية الخضراء في جدول الدعم على caniuse.com؟
مراجعة: توافق المتصفحات
تحقق من caniuse.com قبل استخدام واجهات برمجة التطبيقات الجديدة. اقرأ جداول التوافق في MDN. استهدف مجموعة متصفحات مناسبة باستخدام browserslist. استخدم @supports لاستعلامات ميزات CSS. أضف polyfill عند الحاجة فقط. حوّل JavaScript الحديثة باستخدام Babel. اختبر الميزات المهمة في المتصفحات الفعلية.
الأسئلة الشائعة
هل درس «توافق المتصفحات وcaniuse.com» مجاني؟
نعم — نص درس «توافق المتصفحات وcaniuse.com» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «توافق المتصفحات وcaniuse.com»؟
تحقق من دعم الميزات عبر المتصفحات في caniuse.com، وافهم بادئات المورّدين، واستخدم polyfills أو البدائل عند الحاجة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «توافق المتصفحات وcaniuse.com»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Chrome DevTools: Elements وConsole وNetwork
- VSCode: الإضافات واختصارات Emmet
- إعداد Prettier وESLint
- توافق المتصفحات وcaniuse.com