it-swarm.asia

الجمع بين ملفات 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 في كل مشروع دون معرفة ما يفعله ونحن خائفون من إزالته

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

5
Metalshark

هل لديك صفحة واحدة فقط ، أو هل هناك العديد من الإصدارات المختلفة للصفحات والفئات المختلفة؟

على افتراض وجود واحد فقط ، أقترح:

  • ادمج global.css و page.css في ورقة أنماط واحدة. بعد الطلب الأول ، سيكون لدى المستخدم إصدار مخبأ من هذا على أي حال.

  • دمج قواعد الطباعة الخاصة بك في ورقة أنماط أعلاه باستخدامmedia. يمكنك بعد ذلك إضافة تعليق مشروط لـ IE6 فقط لمنحه ورقة أنماط طباعة صالحة.

  • ستمنح "ورقة أنماط بديلة" المتصفحات الداعمة خيار استخدام ورقة الأنماط هذه بدلاً من الورقة الرئيسية. في حالتك ، يبدو أن هذه طريقة سهلة لمنح المستخدم "طريقة عرض قابلة للطباعة". إذا كنت تريد الاحتفاظ بهذا ، فستحتاج إلى الحفاظ على print.css منفصلة ، لذلك لا تهتم بدمج قواعد الطباعة في الملف الرئيسي.

بما أنني متأكد من أن الكتب التي قمت بربطها تقول ، ستحتاج أيضًا إلى تقديم أوراق الأنماط المضغوطة هذه مع رؤوس تنتهي صلاحيتها لزيادة الفوائد إلى الحد الأقصى.

3
Tim Fountain