تعريف CSS لهذا الكود هو:





شعبة#subnavul { }
div#subnavulli.subnavitem { }
div#subnavulli.subnavitem a.subnavitem { }
div#subnavulli.subnavitemselected { }
div#subnavulli.subnavitemselected a.subnavitemselected { }

يمكنك استبدال الكود أعلاه بالطريقة التالية

• العنصر 1


• العنصر 1


• العنصر 1

تعريف النمط هو:



#subnav { }
#سوبنافلي { }
#subnav أ { }
#subnav .sel { }
#subnav .sel أ { }


استخدم المحددات الفرعية لجعل التعليمات البرمجية وCSS أكثر إيجازًا وأسهل في القراءة.

10. لا حاجة لإضافة علامات الاقتباس إلى مسار صورة الخلفية

لحفظ البايتات، أوصي بعدم اقتباس مسار صورة الخلفية، لأن علامات الاقتباس ليست ضرورية. على سبيل المثال:

الخلفية: رابط (صور
الهامش:0 تلقائي؛
}



لكن IE5/Win لا يمكنه عرض هذا التعريف بشكل صحيح. نستخدم خدعة مفيدة جدًا لحلها: استخدم سمة محاذاة النص. مثله:



جسم {
محاذاة النص:مركز؛
}
#طَوّق {
العرض: 760 بكسل؛
الهامش:0 تلقائي؛
محاذاة النص:يسار؛
}


تحدد قاعدة text-align:center للنص الأول أن جميع عناصر النص في IE5/Win متمركزة (المتصفحات الأخرى تقوم فقط بتوسيط النص)، وقاعدة text-align:left الثانية هي توسيط النص في #warp to اليسار.

15. استيراد وإخفاء CSS

نظرًا لأن المتصفحات القديمة لا تدعم CSS، فإن الطريقة الشائعة هي استخدام تقنية @import لإخفاء CSS. على سبيل المثال:

@import url(main.css);

ومع ذلك، لم تنجح هذه الطريقة مع IE4، مما أصابني بالصداع لفترة من الوقت. فيما بعد كتبتها هكذا:

@import main.css;

بهذه الطريقة، يمكن إخفاء CSS في IE4، كما أنه يوفر 5 بايت. إذا كنت تريد معرفة الشرح التفصيلي لبناء جملة @import، يمكنك الاطلاع هنا على "مخطط مرشح CSS المركزي"

16. الأمثل لشركة آي إي

في بعض الأحيان، تحتاج إلى تحديد بعض القواعد الخاصة لأخطاء متصفح IE. هناك عدد كبير جدًا من اختراقات CSS هنا، وأنا أستخدم اثنتين منها فقط، بغض النظر عما إذا كانت Microsoft أفضل في الإصدار التجريبي القادم من IE7، فكلا الطريقتين كذلك الأكثر أمانا.

1. طريقة الشرح

(أ) لإخفاء تعريف CSS في IE، يمكنك استخدام محدد فرعي:



أتش تي أم أل>الجسم ص {

}


(ب) لا يمكن فهم طريقة الكتابة التالية إلا بواسطة متصفح IE (مخفي عن المتصفحات الأخرى)



* أتش تي أم أل ص {

}


(ج) في بعض الأحيان، تريد أن يكون IE/Win نشطًا ولكن IE/Mac مخفيًا، يمكنك استخدام خدعة الشرطة المائلة العكسية:




* أتش تي أم أل ص {
تصريحات
}



2. طريقة التعليقات الشرطية

هناك طريقة أخرى، والتي أعتقد أنها تم اختبارها عبر الزمن أكثر من CSS Hacks، وهي استخدام التعليقات الشرطية الخاصة بالسمة الخاصة لـ Microsoft (التعليقات الشرطية). باستخدام هذه الطريقة، يمكنك تحديد بعض الأنماط بشكل منفصل لـ IE دون التأثير على تعريف ورقة الأنماط الرئيسية.

17. نصائح التصحيح: ما هو حجم الطبقات؟

عند تصحيح أخطاء CSS، عليك أن تكون مثل الآلة الكاتبة وتحلل كود CSS سطرًا تلو الآخر. عادةً ما أقوم بتحديد لون الخلفية على الطبقة المعنية، لذلك يكون من الواضح مقدار المساحة التي تشغلها الطبقة. يقترح بعض الأشخاص استخدام border، وهو أمر ممكن بشكل عام، ولكن المشكلة تكمن في أنه في بعض الأحيان ستؤدي الحدود إلى زيادة حجم العناصر، وسيؤدي كل من border-top وboeder-bottom إلى تدمير قيمة الهامش الرأسي، لذلك يكون استخدام الخلفية أكثر أمانًا.

خاصية أخرى غالبا ما تسبب مشاكل هي الخطوط العريضة. يبدو المخطط التفصيلي مثل boeder، لكنه لا يؤثر على حجم العنصر أو موضعه. يدعم عدد قليل فقط من المتصفحات سمة المخطط التفصيلي، والمتصفحات الوحيدة التي أعرفها هي Safari وOmniWeb وOpera.

18. أسلوب كتابة كود CSS

عند كتابة تعليمات برمجية CSS، يكون لكل شخص عاداته الخاصة في الكتابة فيما يتعلق بالمسافات البادئة وفواصل الأسطر والمسافات. وبعد التدريب المستمر، قررت أن أعتمد أسلوب الكتابة التالي:



محدد 1,
محدد2 {
الخاصية:القيمة؛
}


عند استخدام التعريفات الموحدة، عادةً ما أكتب كل محدد في السطر الخاص به بحيث يسهل العثور عليه في ملف CSS. أضف مسافة بين المحدد الأخير والأقواس المتعرجة {. واكتب أيضًا كل تعريف على السطر الخاص به. ويجب وضع الفاصلة المنقوطة مباشرة بعد قيمة السمة.

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

وأخيرًا، يتم كتابة قوس الإغلاق } على سطر بمفرده.

المسافات وفواصل الأسطر تساعد على القراءة.