على الرغم من أن حجم ملف صفحة الويب المقاس بـ K غير مهم حقًا بالنسبة لعرض النطاق الترددي الحالي، إلا أن كيفية تبسيط ملف صفحة الويب المقاسة بـ K إلى الحد الأدنى لا تزال إحدى المشكلات التي يجب على مصممي الويب أخذها في الاعتبار.
كما نعلم جميعًا، دون التأثير على بنية ووظائف صفحة الويب بأكملها، كلما كان ملف صفحة الويب أصغر، كان ذلك أفضل، لأن ملفات صفحات الويب الأصغر تساعد المتصفح على تقليل وقت الترجمة لصفحة الويب، ولا يحتاج الزوار الطبيعيون إلى ذلك لمواجهة الانزعاج الناتج عن انتظار ظهور صفحات الويب ببطء، يكون الأمر أكثر وضوحًا بالنسبة للمستخدمين ذوي النطاق الترددي المنخفض وسرعات الإنترنت البطيئة. تخيل فقط، هل ترغب في أن يظهر الموقع بأكمله أمامك فورًا عند فتح موقع ويب؟ أو هل تفضل قضاء أكثر من عشر ثوانٍ أو حتى بضع دقائق في مشاهدة الموقع بأكمله وهو يتم تفسيره بواسطة المتصفح شيئًا فشيئًا؟
في عصر تخطيط الجدول، تم تكرار الكود مرات لا تحصى مع الجدول الموجود على الصفحة، مما تسبب في تضخم ملف صفحة الويب بالكامل بشكل كبير، كما تم تقليل إمكانية قراءة الكود إلى الحد الأدنى، ووقت تفسير المتصفح بشكل طبيعي زاد كثيرا. نظرًا لأن تخطيط DIV + CSS استبدل تخطيط الجدول، فقد تم تحسين كل شيء بشكل كبير، مما يسمح للجدول بالعودة إلى موضعه الأصلي لعرض البيانات، ويتم ترك التخطيط لـ DIV + CSS، لذلك تم تحسين سهولة القراءة وإعادة الاستخدام للكود. والنقطة الأكثر أهمية في DIV + CSS هي التمييز بين أداء وبنية ملف صفحة الويب، بحيث لا تكون هناك حاجة لتغيير بنية ملف صفحة الويب بالكامل من أجل الأداء.
على الرغم من أن طريقة تخطيط DIV+CSS قد قللت من التعليمات البرمجية المتضخمة في تخطيط الجدول السابق، بالنسبة لمصممي الويب، فإن كيفية التحكم في حجم ملفات صفحة الويب إلى الحد الأدنى هو سؤال يستحق الاستكشاف والمتابعة دائمًا.
انظر إلى القطعة التالية من الكود:
#الرأس { |
مثل هذا الجزء من كود CSS واضح جدًا من حيث البنية، وواضح من حيث البنية، وسهل القراءة للغاية، ومع ذلك، لم يتم تبسيط هذا الجزء من التعليمات البرمجية، مما يعني أنه كود CSS الأكثر أصالة، دعنا نلقي نظرة على الكود المبسط أدناه :
| #الرأس { الهامش: 10 بكسل 15 بكسل؛ backgroung:#333 url(Images/header.jpg); } |
يوجد مصطلح سمة مركبة في CSS، مما يعني أنه يمكن دمج العديد من معلمات السمات معًا، على سبيل المثال، يمكن دمج "margin-top; هامش-يمين; هامش-أسفل; هامش-يسار;" أعلاه في هامش واحد " الخاصية، ثم قم بتوفير المعلمات لها.
من خلال هذا، يمكننا تبسيط التعليمات البرمجية بشكل أكبر بناءً على كود CSS الأصلي. علاوة على ذلك، فإن البنية المكتوبة بهذه الطريقة معقولة أيضًا، كما أن سهولة القراءة قوية بنفس القدر. لكن هذا لا يكفي للتبسيط إلى أقصى الحدود. لكي نجعل بنية كود CSS واضحة، نستخدم المسافات وفواصل الأسطر والأشياء الأخرى التي تشغل مساحة. ماذا لو قمنا بإزالة هذه الأشياء التي تشغل مساحة؟
| #header{margin:10px 15px;background:#333 url(Images/header.jpg);} |