تاريخ النشر: 31 آذار/مارس 2014
يتم تلقائيًا التعامل مع CSS كمورد يحظر العرض، ما يعني أنّ المتصفّح لن يعرض أي محتوى تمت معالجته إلى أن يتم إنشاء CSSOM. احرص على أن يكون CSS بسيطًا، وأن يتم عرضه بأسرع ما يمكن، واستخدِم أنواع الوسائط والاستعلامات لإتاحة العرض.
في إنشاء شجرة العرض، رأينا أنّ مسار العرض الحرج يتطلّب كلاً من نموذج المستند (DOM) ونموذج CSSOM لإنشاء شجرة العرض. ينتج عن ذلك تأثير مهم في الأداء: كلّ من HTML وCSS هما موارد تحظر العرض. إنّ HTML واضح، لأنّه بدون DOM لن يكون لدينا أي شيء لعرضه، ولكن قد يكون شرط CSS أقل وضوحًا. ماذا سيحدث إذا حاولنا عرض صفحة نموذجية بدون حظر العرض على CSS؟
ملخّص
- يتم تلقائيًا التعامل مع CSS على أنّه مورد يحظر العرض.
- تسمح لنا أنواع الوسائط وطلبات البحث عن الوسائط بوضع علامة على بعض موارد CSS باعتبارها غير حاصرة للعرض.
- ينزّل المتصفّح جميع موارد CSS، بغض النظر عن سلوك الحظر أو عدم الحظر.
يوضّح المثال السابق، الذي يعرض موقع New York Times الإلكتروني مع CSS وبدونه، سبب حظر العرض إلى أن يصبح CSS متاحًا، إذ تكون الصفحة غير قابلة للاستخدام نسبيًا بدون CSS. يُشار غالبًا إلى التجربة على اليسار باسم وميض المحتوى غير المصمّم (FOUC). يحظر المتصفّح العرض إلى أن يتوفّر لديه كلّ من نموذج المستند (DOM) ونموذج CSS (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، ولكن بأولوية أقل للموارد غير الحاصرة.