لدينا موقع على شبكة الإنترنت حيث السرعة المعتادة من مواقع عالية الأداء و حتى مواقع ويب أسرع أرباح مدفوعة.
ومع ذلك ، فقد أهملنا صفحات الأنماط (بسبب الصعوبات الموضحة أدناه) وقد وصلنا أخيرًا لدغنا ، حيث يمثل 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 في كل مشروع دون معرفة ما يفعله ونحن خائفون من إزالته
لأن هذا يبدو كإعداد شائع ما قام به الآخرون عند مواجهة إعداد مشابه؟ ، هل يمكن لأي شخص إلقاء بعض الضوء على أوراق أنماط بديلة للطباعة؟
هل لديك صفحة واحدة فقط ، أو هل هناك العديد من الإصدارات المختلفة للصفحات والفئات المختلفة؟
على افتراض وجود واحد فقط ، أقترح:
ادمج global.css و page.css في ورقة أنماط واحدة. بعد الطلب الأول ، سيكون لدى المستخدم إصدار مخبأ من هذا على أي حال.
دمج قواعد الطباعة الخاصة بك في ورقة أنماط أعلاه باستخدامmedia. يمكنك بعد ذلك إضافة تعليق مشروط لـ IE6 فقط لمنحه ورقة أنماط طباعة صالحة.
ستمنح "ورقة أنماط بديلة" المتصفحات الداعمة خيار استخدام ورقة الأنماط هذه بدلاً من الورقة الرئيسية. في حالتك ، يبدو أن هذه طريقة سهلة لمنح المستخدم "طريقة عرض قابلة للطباعة". إذا كنت تريد الاحتفاظ بهذا ، فستحتاج إلى الحفاظ على print.css منفصلة ، لذلك لا تهتم بدمج قواعد الطباعة في الملف الرئيسي.
بما أنني متأكد من أن الكتب التي قمت بربطها تقول ، ستحتاج أيضًا إلى تقديم أوراق الأنماط المضغوطة هذه مع رؤوس تنتهي صلاحيتها لزيادة الفوائد إلى الحد الأقصى.