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