الجمع بين ملفات CSS فيما يتعلقmedia

لدينا موقع على شبكة الإنترنت حيث السرعة المعتادة من مواقع عالية الأداء و حتى مواقع ويب أسرع أرباح مدفوعة.

ومع ذلك ، فقد أهملنا صفحات الأنماط (بسبب الصعوبات الموضحة أدناه) وقد وصلنا أخيرًا لدغنا ، حيث يمثل CSS 500 مللي ثانية من تحميل صفحة 1600 مللي ثانية لدينا (نسبة كل من النتائج متسقة تمامًا عبر المعايير - الأرقام الفعلية صورت هنا هي من المعيار الأكثر ملاءمة لدينا لتسليم).

بالتوازي مع جعل المحددات أكثر كفاءة ، يجب تخفيض العدد الإجمالي لطلبات HTTP. فيما يلي مثال (بدون text="text/css" charset="utf-8" للإيجاز):

<link rel="stylesheet" href="global.css" media="all" />
<link rel="stylesheet" href="page.css" media="all" />
<link rel="stylesheet" href="print.css" media="print" />
<link rel="alternative stylesheet" href="print.css" media="all" title="Print" />

قد يبدو هذا كإعداد شائع (ورقة أنماط عالمية ، لكل صفحة/صفحة أنماط وتخطيط طباعة) ، لكننا نواجه مشكلات حقيقية في إيجاد حل عملي نظرًا لأن لكل خيار سيف ذو حدين:

• يمكن الجمع بين global.css و page.css ، ولكن سيتم تنزيل global.css مرارًا وتكرارًا بجانب page.css (مثل page.css لكل فئة/صفحة خاصة) إذا استمر المستخدم في القفز إلى صفحات/فئات خاصة ويجب أن يكون خدم من تلقاء نفسه

• يمكن دمج ملف print.css واستخدام قواعد CSS2media ، لكن هذا لن يعمل مع متصفحات CSS1 (يجب أن يعمل هذا الموقع مع IE6)

• لا يبدو أن إصدار print.css المرتبط باستخدام rel="alternative stylesheet" media="all" title="Print" ضروري ، إلا أن المطورين لديهم Cargo Culted في كل مشروع دون معرفة ما يفعله ونحن خائفون من إزالته

لأن هذا يبدو كإعداد شائع ما قام به الآخرون عند مواجهة إعداد مشابه؟ ، هل يمكن لأي شخص إلقاء بعض الضوء على أوراق أنماط بديلة للطباعة؟