Respond
1.4.2
حقوق الطبع والنشر 2011: سكوت جيل، scottjehl.com
مرخص بموجب ترخيص MIT.
الهدف من هذا البرنامج النصي هو توفير برنامج نصي سريع وخفيف الوزن (3 كيلو بايت مصغر / 1 كيلو بايت مضغوط) لتمكين تصميمات الويب سريعة الاستجابة في المتصفحات التي لا تدعم استعلامات وسائط CSS3 - على وجه الخصوص، Internet Explorer 8 وما دونه. لقد تمت كتابته بطريقة من المحتمل أن تؤدي إلى تصحيح الدعم للمتصفحات الأخرى غير الداعمة أيضًا (مزيد من المعلومات حول ذلك قريبًا).
إذا لم تكن على دراية بالمفاهيم المحيطة بتصميم الويب سريع الاستجابة، فيمكنك القراءة هنا وأيضًا هنا
صفحة العرض التوضيحي (تتغير الألوان لإظهار عمل استعلامات الوسائط)
@media screen and ( min-width : 480 px ){
/** ...styles for 480px and up go here **/
}قم بالإشارة إلى البرنامج النصي Response.min.js (1 كيلو بايت دقيقة/gzipped) بعد كل ملفات CSS الخاصة بك (كلما تم تشغيله مبكرًا، زادت فرصة ألا يرى مستخدمو IE وميضًا من المحتوى غير الوسائط)
قم بفتح برنامج Internet Explorer وتمتع بقبضات اليد
يعمل Respond.js عن طريق طلب نسخة أصلية من CSS الخاص بك عبر AJAX، لذلك إذا كنت تستضيف أوراق الأنماط الخاصة بك على CDN (أو نطاق فرعي)، فستحتاج إلى إعداد وكيل محلي لطلب CSS لمتصفحات IE القديمة. أوصت الإصدارات السابقة باتباع نهج x-domain مهمل، ولكن يُفضل استخدام وكيل محلي (لأسباب تتعلق بالأداء والأمان) لمحاولة التغلب على القيود عبر النطاقات.
بعض الملاحظات التي يجب وضعها في الاعتبار:
تركيز هذا البرنامج النصي ضيق جدًا عن قصد: تتم ترجمة استعلامات الوسائط ذات العرض الأدنى والحد الأقصى وجميع أنواع الوسائط (الشاشة والطباعة وما إلى ذلك) إلى متصفحات غير داعمة. أردت أن أبقي الأمور بسيطة فيما يتعلق بالحجم والصيانة والأداء، لذلك قمت عمدًا بتقييد الدعم للاستعلامات الضرورية لإنشاء تصميم سريع الاستجابة (يعطي الأولوية للجوال). في المستقبل، قد أقوم بإعادة صياغة الأمور قليلًا لتضمين رابط لتصحيح ميزات استعلام الوسائط الإضافية - تابعونا!
يتم إلغاء الاشتراك في المتصفحات التي تدعم CSS3 Media Queries في تشغيل هذا البرنامج النصي في أسرع وقت ممكن. في اختبار الدعم، تخضع جميع المتصفحات الأخرى لاختبار سريع لتحديد ما إذا كانت تدعم استعلامات الوسائط أم لا قبل متابعة تشغيل البرنامج النصي. تم تضمين هذا الاختبار الآن بشكل منفصل في الجزء العلوي، ويستخدم window.matchMedia polyfill الموجود هنا: https://github.com/paulirish/matchMedia.js . إذا كنت تقوم بالفعل بتضمين هذا polyfill عبر Modernizr أو غير ذلك، فلا تتردد في إزالة هذا الجزء.
لا يعتمد هذا البرنامج النصي على أي نصوص برمجية أو أطر عمل أخرى (بصرف النظر عن ملف matchMedia polyfill المضمن)، وهو مُحسّن للتسليم عبر الهاتف المحمول (حوالي 1 كيلو بايت إجمالي حجم الملف بالدقيقة/gzip)
كما قد تتخيل، هذا التنفيذ غبي جدًا فيما يتعلق بقواعد تحليل CSS. وهذا شيء جيد، لأن ذلك يسمح له بالعمل بسرعة كبيرة، ولكن قد يؤدي ارتخاؤه أيضًا إلى سلوك غير متوقع. على سبيل المثال: إذا قمت بتضمين استعلام وسائط بالكامل في تعليق بقصد تعطيل قواعده، فمن المحتمل أن تجد أن هذه القواعد سيتم تمكينها في المتصفحات التي لا تدعم استعلام الوسائط.
لا يقوم Respond.js بتحليل CSS المشار إليه عبر @import، ولا يعمل مع استعلامات الوسائط ضمن عناصر النمط، حيث لا يمكن إعادة طلب هذه الأنماط للتحليل.
بسبب القيود الأمنية، قد لا تسمح بعض المتصفحات لهذا البرنامج النصي بالعمل على file:// urls (لأنه يستخدم xmlHttpRequest). تشغيله على خادم الويب.
إذا كان طلب ملف CSS الذي يتضمن تصميمًا خاصًا بـ MQ خلف عملية إعادة توجيه، فسوف يفشل Respond.js بصمت. يجب أن تستجيب ملفات CSS بالحالة 200.
في الوقت الحالي، يتم دعم سمات الوسائط في عناصر الارتباط، ولكن فقط إذا كانت ورقة الأنماط المرتبطة لا تحتوي على استعلامات وسائط. إذا كانت تحتوي على استعلامات، فسيتم تجاهل سمة الوسائط وسيتم تحليل الاستعلامات الداخلية بشكل طبيعي. بمعنى آخر، تحظى عبارات @media في CSS بالأولوية.
يُقال إنه إذا تم ترميز ملفات CSS بتنسيق UTF-8 باستخدام علامة ترتيب البايت (BOM)، فلن تعمل مع Respond.js في IE7 أو IE8. تقدم في العدد رقم 97
تحذير: سيؤدي تضمين قواعد @font-face داخل استعلام الوسائط إلى توقف IE7 وIE8 أثناء التحميل. للتغلب على هذه المشكلة، ضع قواعد @font-face مفتوحة على مصراعيها، باعتبارها شقيقة لاستعلامات الوسائط الأخرى.
إذا كان لديك أكثر من 32 ورقة أنماط تمت الإشارة إليها، فسيقوم IE بإلقاء خطأ أو Invalid procedure call or argument . قم بتسلسل CSS الخاص بك ويجب أن تختفي المشكلة.
خرائط مصدر Sass/SCSS غير مدعومة؛ @media -sass-debug-info سوف يعطل ملف Response.js. تقدم في العدد رقم 148
يدعم Internet Explorer 9 استعلامات وسائط css3، ولكن ليس داخل الإطارات عندما يكون CSS الذي يحتوي على استعلام الوسائط في ملف خارجي (يبدو أن هذا خطأ في IE9 - راجع https://stackoverflow.com/questions/10316247/media-queries -فشل داخل-ie9-iframe). راجع هذا الالتزام لإصلاح إذا كنت تواجه هذه المشكلة. https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603
استعلامات الوسائط المتداخلة غير مدعومة
في الأساس، يتكرر البرنامج النصي عبر CSS المشار إليه في الصفحة ويقوم بتشغيل تعبير عادي أو اثنين على محتوياته للعثور على استعلامات الوسائط وكتل CSS المرتبطة بها. في Internet Explorer، من المستحيل استرداد محتوى ورقة الأنماط في حالتها التي تم تحليلها مسبقًا (والتي تعني في IE 8- أنه تمت إزالة استعلامات الوسائط الخاصة بها من النص)، لذلك يقوم Respond.js بإعادة طلب ملفات CSS باستخدام Ajax و يوزع الاستجابة النصية من هناك. تأكد من تكوين التخزين المؤقت لملفات CSS الخاصة بك بشكل صحيح حتى لا ينتقل طلب إعادة الطلب هذا فعليًا إلى الخادم، ويصل إلى ذاكرة التخزين المؤقت للمتصفح بدلاً من ذلك.
من هناك، يتم إلحاق كل كتلة استعلام وسائط بالرأس بالترتيب عبر عناصر النمط، ويتم تمكين عناصر النمط هذه وتعطيلها (اقرأ: يتم إلحاقها وإزالتها من DOM) اعتمادًا على كيفية مقارنة الحد الأدنى/الحد الأقصى لعرضها مع عرض المتصفح. ستتطابق سمة الوسائط الموجودة في عناصر النمط مع الاستعلام الموجود في CSS، لذلك يمكن أن تكون "شاشة" أو "جهاز عرض" أو أي شيء تريده. أي مسارات نسبية مضمنة في CSS ستتم بادئتها بـ href الخاص بورقة الأنماط الخاصة بها، وبالتالي سيتم توجيه مسارات الصور إلى وجهتها الصحيحة
بالتأكيد، زوجان:
هذا ليس البرنامج النصي الوحيد الموجود في CSS3 Media Query polyfill؛ لكنها قد تكون الأسرع.
إذا كنت تبحث عن دعم أكثر قوة لاستعلام وسائط CSS3، فيمكنك مراجعة https://code.google.com/p/css3-mediaqueries-js/. أثناء الاختبار، وجدت أن هذا البرنامج النصي بطيء بشكل ملحوظ عند تقديم تصميمات معقدة سريعة الاستجابة (سواء من حيث الحجم أو الأداء)، ولكنه يدعم بالفعل الكثير من ميزات استعلام الوسائط أكثر من هذا البرنامج النصي. نصيحة القبعة الكبيرة للمؤلفين! :)
