تاريخ النشر: 31 آذار (مارس) 2014
تتم معاملة CSS بشكل تلقائي كمورد لحظر العرض، ما يعني أنّ لن يعرض المتصفّح أي محتوى تمت معالجته إلى أن يتم ضبط واجهة CSSOM البيانات التي تم إنشاؤها. احرص على تقديم محتوى CSS في أسرع وقت ممكن واستخدام أنواع الوسائط وطلبات البحث لإلغاء حظر العرض.
خلال عملية إنشاء شجرة العرض، لاحظنا أنّ مسار العرض الحرج يتطلب كلاً من DOM وCSSOM لإنشاء شجرة العرض. ويؤدي ذلك إلى تأثير مهم في الأداء: كلّ من HTML وCSS هما موردان يوقفان عرض الصفحة. إنّ لغة HTML واضحة، لأنّه بدون عنصر DOM لن يكون لدينا أي محتوى لعرضه، ولكن قد يكون شرط CSS أقل وضوحًا. ماذا يحدث إذا حاولنا عرض صفحة عادية بدون حظر العرض على CSS؟
ملخّص
- يتم التعامل مع CSS تلقائيًا كمورد يمنع العرض.
- تتيح لنا أنواع الوسائط والاستعلامات عن الوسائط وضع علامة على بعض موارد CSS تفيد بأنّه لا يتم حظر العرض.
- ينزّل المتصفح جميع موارد CSS، بغض النظر عن سلوك الحظر أو عدم الحظر.
يوضّح المثال السابق، الذي يعرض موقع صحيفة New York Times الإلكتروني مع ملف CSS وبدونه، سبب حظر العرض إلى أن يصبح ملف CSS متاحًا، فبدونه تكون الصفحة غير قابلة للاستخدام نسبيًا. يُشار إلى التجربة على اليسار غالبًا باسم ومضة محتوى غير منسق (FOUC). يحظر المتصفّح العرض إلى أن يحصل على نموذج DOM وCSSOM.
خدمة CSS هي مورد لحظر العرض. أرسِله إلى العميل في أقرب وقت ممكن لتحسين الوقت اللازم للعرض لأول مرة.
ولكن ماذا لو كانت لدينا بعض أنماط CSS لا يتم استخدامها إلا في ظلّ ظروف معيّنة، مثلاً عند طباعة الصفحة أو عرضها على شاشة كبيرة؟ سيكون من الرائع ألا نضطر إلى حظر العرض في هذه الموارد.
"أنواع الوسائط" في CSS و"طلبات البحث عن الوسائط" معالجة حالات الاستخدام التالية:
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
يتألف الاستعلام عن الوسائط من نوع وسائط وصفر أو أكثر من التعبيرات التي تتحقق من شروط ميزات وسائط معيّنة. على سبيل المثال، لا يوفر إعلان ورقة الأنماط الأول نوع الوسائط أو استعلامًا، وبالتالي ينطبق على جميع الحالات؛ وهذا يعني أنه يتم دائمًا حظر عرض المحتوى. من ناحية أخرى، لا ينطبق بيان جدول الأنماط الثاني إلا عند طباعة المحتوى، فربما تريد إعادة ترتيب التنسيق وتغيير الخطوط وغيرها من الاعتبارات المهمة للتصميم المخصّص للطباعة. وبالتالي، لا يحتاج إعلان ورقة الأنماط هذا إلى حظر عرض الصفحة عند تحميلها لأول مرة. أخيرًا، يقدّم بيان جدول الأنماط الأخير "طلب بحث عن الوسائط"، الذي ينفّذه المتصفّح: في حال تطابق الشروط، يحظر المتصفّح العرض إلى أن يتم تنزيل جدول الأنماط ومعالجته.
باستخدام طلبات البحث عن الوسائط، يمكننا تخصيص العرض التقديمي لحالات استخدام معيّنة، مثل العرض على الشاشة مقابل الطباعة، وكذلك للظروف الديناميكية، مثل التغييرات في اتجاه الشاشة وأحداث تغيير الحجم وغير ذلك. عند الإعلان عن مواد عرض أوراق الأنماط، انتبه جيدًا لنوع الوسائط وطلبات البحث. تؤثر بشكل كبير في أداء مسار العرض الحرج
فكِّر في الأمثلة التالية:
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- التعريف الأول هو حظر العرض ويتطابق في جميع الحالات.
- التعريف الثاني هو أيضًا حظر عرض المحتوى:
"all"هو النوع التلقائي، لذلك إذا لم تحدّد نوعًا، سيتم ضبطه ضمنيًا على"all". وبالتالي، فإنّ البيانَين الأول والثاني متكافئان في الواقع. - يحتوي البيان الثالث على طلب بحث ديناميكي للوسائط يتم تقييمه عند تحميل الصفحة. بناءً على اتجاه الجهاز أثناء تحميل الصفحة، قد يتم عرض محتوى
portrait.cssأو لا يتم عرضه. - لا يتم تطبيق التعريف الأخير إلا عند طباعة الصفحة (
"print")، وبالتالي لا يتم حظر عرض الصفحة عند تحميل الصفحة لأول مرة في المتصفّح.
أخيرًا، يُرجى العِلم أنّ "حظر العرض" يشير فقط إلى ما إذا كان على المتصفّح تعليق العرض الأوّلي للصفحة على هذا المورد. وفي كلتا الحالتين، سيستمر المتصفّح في تنزيل مادة عرض CSS، حتى لو كانت أولوية أقل للموارد التي لا تحظر المحتوى.