اكتشاف الميزات في مقابل التعرف على المتصفح
استخدام اكتشاف الميزات بدلًا من تحليل user-agent
اكتشاف الميزات في مقابل التعرف على المتصفح درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
نهجان للتوافق
لمعرفة ما إذا كان المتصفح الحالي يدعم ميزة معينة، يمكنك إما اكتشاف الميزة مباشرةً ("IntersectionObserver" in window) أو فحص سلسلة وكيل المستخدم (navigator.userAgent.includes("Chrome")). أحد النهجين موثوق، أما الآخر فهو مصدر مستمر للأخطاء منذ سنوات.
لماذا يفشل الفحص؟
سلاسل وكيل المستخدم مضللة. إذ يدّعي Edge أنه Chrome (وكذلك Safari وFirefox). ويصدر Chrome على Android سلسلة UA مختلفة عن Chrome على iOS. كما تحترم المتصفحات «تجميد» سلسلة UA لأغراض الخصوصية. لذلك تتعطل أي منطقية تعتمد على سلاسل UA كل بضعة أشهر.
نمط اكتشاف الميزات
تحقق من واجهة API الفعلية التي تحتاج إليها التعليمات البرمجية: if ("IntersectionObserver" in window) { ... }. إذا كانت الخاصية موجودة، فالمتصفح يدعمها؛ وإذا لم تكن موجودة، فاتبع مسار البديل. هذا الفحص مباشر وسريع ومحصّن ضد تغيّرات المستقبل.
if ("IntersectionObserver" in window) {
const observer = new IntersectionObserver(handler);
} else {
loadPolyfill().then(() => { /* use IntersectionObserver */ });
}اكتشف الميزة ثم استخدمها
اربط الاكتشاف ببديل حقيقي. لا يكون اكتشاف ميزة مفقودة مفيدًا إلا إذا كان لديك إجراء تنفذه عند غيابها — مثل تحميل polyfill، أو عرض بديل ثابت، أو إخفاء الميزة بالكامل.
استعلامات ميزات CSS
يمتلك CSS آلية اكتشاف ميزات خاصة به: @supports (display: grid) { ... }. تُطبَّق الكتلة فقط عندما يفهم المتصفح زوج الخاصية/القيمة. استخدمها لتقديم تخطيطات الشبكة مع بدائل تعتمد على float للمتصفحات القديمة جدًا.
@supports (display: grid) {
.grid { display: grid; gap: 16px; }
}
@supports not (display: grid) {
.grid > * { float: left; width: 33%; }
}تلميحات عميل وكيل المستخدم
تعرض المتصفحات الحديثة معلومات منظمة عبر navigator.userAgentData (في Chromium فقط). وتعيد أزواج العلامة التجارية والإصدار بدلًا من سلسلة حرة التنسيق. ومع ذلك، يظل اكتشاف الميزات هو الخيار المفضل — فتلميحات UA مفيدة فقط عندما يتعذر استنتاج القدرة من فحص خاصية.
متى يكون الفحص مقبولًا؟
حالة الاستخدام الضيقة والمشروعة لاكتشاف UA هي استثناء المتصفحات التي تحتوي على أخطاء معروفة، مثل خطأ معروف في iOS Safari في الإصدار X. وحتى حينها، فضّل الاستثناءات القائمة على الميزات (CSS.supports("aspect-ratio: 1")). يجب أن يكون اكتشاف UA خيارك الأخير.
مكتبات على نمط Modernizr
تجمع Modernizr العديد من عمليات اكتشاف الميزات، وتعرض نتائجها كأصناف على عنصر <html> (html.flexbox، html.no-flexbox). نادرًا ما تحتاج إليها المشاريع الحديثة — فمعظم عمليات الاكتشاف لا تتطلب سوى سطر واحد — لكنها تظل مفيدة في عمليات الترحيل القديمة.
اختبار البديل
بعد تنفيذ الاكتشاف، اختبر المسارين معًا. افتح أدوات المطور، واجعل الميزة undefined، ثم تحقق من عمل البديل. تذبل البدائل غير المختبرة — وعندما يحتاج إليها مستخدم فعلًا، غالبًا ما تفشل بطرق لم يتخيلها المطور قط.
الاكتشاف في أطر العمل
لا توفر React وVue وغيرهما واجهة API خاصة للاكتشاف — استخدم JavaScript العادي داخل effect أو أثناء تهيئة المكوّن. يجب على التطبيقات المعروضة من الخادم إجراء الاكتشاف على العميل، لأن "IntersectionObserver" in window تكون undefined أثناء SSR.
تجنب فحص UA القائم على القدرة
تفحص بعض الفرق UA لتخمين القدرة («هل هذا iPhone؟ إذن يُحتمل أن يدعم Touch»). ويؤدي ذلك إلى الخلط بين أمرين لا علاقة بينهما. اكتشف دعم اللمس مباشرةً عبر "ontouchstart" in window، أو فضّل، على نحو أفضل، أحداث المؤشر التي تتعامل مع اختلاف وسيلة الإدخال.
اختبار المعرفة
لماذا يُفضَّل اكتشاف الميزات على فحص وكيل المستخدم عند التعامل مع قدرات المتصفح؟
الملخص
فضّل اكتشاف الميزات ("API" in window) على فحص وكيل المستخدم. يوفر CSS @supports للغرض نفسه. اربط الاكتشاف دائمًا ببديل حقيقي، واختبر المسارين معًا. يجب حصر فحص UA في استثناء إصدارات المتصفحات التي تحتوي على أخطاء معروفة، وليس في تخمين القدرات.
الأسئلة الشائعة
هل درس «اكتشاف الميزات في مقابل التعرف على المتصفح» مجاني؟
نعم — نص درس «اكتشاف الميزات في مقابل التعرف على المتصفح» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «اكتشاف الميزات في مقابل التعرف على المتصفح»؟
استخدام اكتشاف الميزات بدلًا من تحليل user-agent تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «اكتشاف الميزات في مقابل التعرف على المتصفح»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- فلسفة PE: ابدؤوا بـ HTML
- اكتشاف الميزات في مقابل التعرف على المتصفح
- التدهور السلس في مقابل التحسين التدريجي
- إنشاء Accordion وفق PE