1. استخدم اختصارات CSS
يمكن أن يساعد استخدام الاختصارات في تقليل حجم ملفات CSS وتسهيل قراءتها. للتعرف على القواعد الرئيسية لاختصارات CSS، يرجى الرجوع إلى "ملخص بناء جملة اختصارات CSS الشائعة"، والذي لن يتم وصفه هنا.
2. حدد الوحدة بوضوح ما لم تكن القيمة 0
يعد نسيان تحديد وحدات البعد خطأً شائعًا بين المبتدئين في CSS. في HTML يمكنك فقط كتابة width=100، لكن في CSS عليك إعطاء وحدة محددة، على سبيل المثال: width: 100px width:100em. هناك استثناءان فقط لعدم تحديد الوحدات: ارتفاع الصف وقيمة 0. بالإضافة إلى ذلك، يجب أن تتبع القيم الأخرى الوحدة.
3. حساسية الحالة
عند استخدام CSS في XHTML، تكون أسماء العناصر المحددة في CSS حساسة لحالة الأحرف. لتجنب هذا الخطأ، أوصي باستخدام الأحرف الصغيرة لجميع أسماء التعريفات. تعد قيم الفئة والمعرف أيضًا حساسة لحالة الأحرف في HTML وXHTML. إذا كان عليك كتابة حالة مختلطة، فيرجى التأكد بعناية من أن تعريفك في CSS يتوافق مع العلامات الموجودة في XHTML.
4. قم بإلغاء قيود العنصر قبل الفصل والمعرف
عندما تكتب لتحديد فئة أو معرف لعنصر ما، يمكنك حذف مؤهل العنصر السابق، لأن المعرف فريد في الصفحة ويمكن استخدام الفئة عدة مرات في الصفحة. ليس من المنطقي بالنسبة لك أن تقوم بتأهيل عنصر ما. على سبيل المثال:
div#content { /* الإعلانات */ }
fieldset.details { /* الإعلانات */ } |
يمكن كتابتها كما
#content { /* الإعلانات */ }
.التفاصيل { /* الإعلانات */ } |
وهذا يحفظ بعض البايتات.
5. القيمة الافتراضية
عادةً ما تكون القيمة الافتراضية للحشوة هي 0، والقيمة الافتراضية للون الخلفية هي شفافة. لكن القيمة الافتراضية قد تكون مختلفة في المتصفحات المختلفة. إذا كنت خائفًا من التعارضات، يمكنك تحديد قيم الهامش والحشو لجميع العناصر لتكون 0 في بداية ورقة الأنماط، كما يلي:
* {
الهامش:0;
الحشو: 0؛
} |
6. لا حاجة لتحديد القيم القابلة للتوريث بشكل متكرر
في CSS، ترث العناصر الفرعية تلقائيًا قيم السمات للعنصر الأصل، مثل اللون والخط وما إلى ذلك، والتي تم تعريفها في العنصر الأصل، ويمكن توريثها مباشرة في العنصر الفرعي دون تكرار التعريف. لكن انتبه إلى أن المتصفح قد يتجاوز التعريف الخاص بك ببعض القيم الافتراضية.
7. المبدأ الأول الأخير
إذا كان هناك تعريفات متعددة لنفس العنصر، فسيتم إعطاء الأولوية للتعريف الأقرب (المستوى الأدنى)، على سبيل المثال، يوجد هذا الجزء من التعليمات البرمجية
تحديث: مجموعة لوريم إيبسوم دولور
في ملف CSS، قمت بتعريف العنصر p وclassupdate
ص {
الهامش:1em 0;
حجم الخط: 1em؛
اللون: #333؛
}
.تحديث {
وزن الخط: غامق؛
اللون: #600؛
} |
من بين هذين التعريفين، سيتم استخدام class=update لأن الفئة أقرب من p. يمكنك الاطلاع على "حساب خصوصية المحدد" الخاص بـ W3C لمعرفة المزيد.
8. تعريفات فئة متعددة
يمكن للعلامة تحديد فئات متعددة في نفس الوقت. على سبيل المثال: قمنا أولاً بتعريف نمطين، النمط الأول له خلفية #666؛ والنمط الثاني له حدود بحجم 10 بيكسل.
.واحد{العرض:200px;الخلفية:#666;}
.اثنين{الحدود:10px الصلبة #F00؛}
في رمز الصفحة، يمكننا تسميتها بهذا الشكل. تأثير العرض النهائي هو أن هذا div له خلفية #666 وحدود 10 بكسل. نعم، من الممكن القيام بذلك، يمكنك تجربته.
9. استخدم المحددات السليلة
لا يعلم مبتدئو CSS أن استخدام المحددات الفرعية هو أحد الأسباب التي تؤثر على كفاءتهم. يمكن أن تساعدك المحددات الفرعية في حفظ الكثير من تعريفات الفئة. دعونا نلقي نظرة على الكود التالي:
〈معرف div=subnav〉
〈أول〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉Item 1〈/a〉〈/li〉
〈li class=subnavitemｓｌｍｃｔｔ〉 〈a href=# class=subnavitemｽｌｍｃｔｔ〉 البند 1〈/a〉 〈/li〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉 البند 1〈/a〉 〈/li〉
〈/أول〉
〈/شعبة〉 |
تعريف CSS لهذا الكود هو:
div#subnav ul { /* بعض التصميمات */ }
div#subnav ul li.subnavitem { /* بعض التصميمات */ }
div#subnav ul li.subnavitem a.subnavitem { /* بعض التصميم */ }
div#subnav ul li.subnavitemselected { /* بعض التصميمات */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* بعض التصميم */ } |
يمكنك استبدال الكود أعلاه بالطريقة التالية
〈معرف ul=subnav〉
〈li〉 〈a href=#〉 العنصر 1〈/a〉 〈/li〉
〈li class=sel〉 〈a href=#〉 العنصر 1〈/a〉 〈/li〉
〈li〉 〈a href=#〉 العنصر 1〈/a〉 〈/li〉
〈/أول〉 |
تعريف النمط هو:
#subnav { /* بعض التصميمات */ }
#subnav li { /* بعض التصميمات */ }
#subnav a { /* بعض التصميمات */ }
#subnav .sel { /* بعض التصميمات */ }
#subnav .sel a { /* بعض التصميمات */ } |
استخدم المحددات الفرعية لجعل التعليمات البرمجية وCSS أكثر إيجازًا وأسهل في القراءة.
10. ليست هناك حاجة لإضافة علامات الاقتباس إلى مسار صورة الخلفية لحفظ البايتات، أوصي بعدم إضافة علامات الاقتباس إلى مسار صورة الخلفية، لأن علامات الاقتباس ليست ضرورية. على سبيل المثال:
| الخلفية:url(images/***.gif) #333; |
يمكن كتابتها كما
| الخلفية:url(images/***.gif) #333; |
إذا قمت بإضافة علامات الاقتباس، فسوف يتسبب ذلك في حدوث بعض الأخطاء في المتصفح.
11. محددات المجموعة
عندما تحتوي بعض أنواع العناصر أو الفئات أو المعرفات على بعض الخصائص المشتركة، يمكنك استخدام محددات المجموعة لتجنب التعريفات المتكررة عدة مرات. يمكن أن يوفر هذا عددًا لا بأس به من البايتات.
على سبيل المثال: لتحديد الخط واللون والهامش لجميع العناوين، يمكنك كتابة:
ح1، ح2، ح3، ح4، ح5، ح6 {
عائلة الخط: لوسيدا غراندي، لوسيدا، أريال، هلفتيكا، سانس سيريف؛
اللون: #333؛
الهامش:1em 0;
} |
إذا كانت هناك عناصر فردية تحتاج إلى تحديد أنماط مستقلة أثناء الاستخدام، فيمكنك إضافة تعريفات جديدة أو استبدال التعريفات القديمة، على سبيل المثال:
h1 { حجم الخط: 2em }
h2 { حجم الخط: 1.6em } |
12. حدد أنماط الارتباط بالترتيب الصحيح
عند استخدام CSS لتحديد أنماط حالة متعددة للرابط، انتبه إلى الترتيب الذي تمت كتابته به، الترتيب الصحيح هو: :link :visited :hover :active. الحرف الأول المستخرج هو LVHA، والذي يمكنك تذكره باسم LoVe HAte (يحب أن يكره). لماذا تم تعريفه على هذا النحو؟ يمكنك الرجوع إلى "خصوصية الارتباط" الخاصة بإريك ماير.
إذا كان المستخدمون بحاجة إلى استخدام التحكم في لوحة المفاتيح ويحتاجون إلى معرفة تركيز الارتباط الحالي، فيمكنك أيضًا تحديد سمة :focus. يعتمد تأثير السمة :focus أيضًا على الموضع الذي تكتب فيه. إذا كنت تريد أن يعرض العنصر الذي تم التركيز عليه تأثير :hover، فاكتب :focus قبل :hover إذا كنت تريد أن يحل تأثير التركيز محل تأثير :hover. قمت بوضع :التركيز بعد :تحوم.
13. تعويم واضح
إحدى مشكلات CSS الشائعة جدًا هي أنه عند استخدام العائمة لتحديد الموضع، يتم تغطية الطبقة الأساسية بالطبقة العائمة، أو أن الطبقات الفرعية المتداخلة في الطبقة تتجاوز نطاق الطبقة الخارجية.
الحل المعتاد هو إضافة عنصر إضافي خلف الطبقة العائمة، مثل div أو br، وتحديد نمطه بشكل واضح: كلاهما. هذه الطريقة بعيدة المنال بعض الشيء، ولكن لحسن الحظ هناك طريقة جيدة لحلها، يرجى الرجوع إلى هذه المقالة "كيفية مسح العوامات بدون العلامات الهيكلية" (ملاحظة: سيترجم هذا الموقع هذه المقالة في أقرب وقت ممكن).
يمكن للطريقتين المذكورتين أعلاه حل مشكلة الفائض العائم بشكل جيد للغاية، ولكن ماذا لو كنت بحاجة حقًا إلى مسح الطبقة أو الكائنات الموجودة في الطبقة؟ إحدى الطرق البسيطة هي استخدام سمة التجاوز. تم نشر هذه الطريقة في الأصل في "Simple Clearing of Floats" وتمت مناقشتها على نطاق واسع في "Clearance" و"Super Simple Clearing floats".
أي من الطرق الواضحة المذكورة أعلاه هي الأكثر ملاءمة لك تعتمد على الموقف المحدد ولن يتم مناقشتها هنا. بالإضافة إلى ذلك، فقد أوضحت بعض المقالات الممتازة كيفية تطبيق التعويم. ومن المستحسن أن تقرأ: "Floatutorial" و"Containing Floats" و"Float Layouts".
14. التمركز الأفقي
هذه خدعة بسيطة، ولكن من الجدير أن نقولها مرة أخرى لأنني أرى الكثير من أسئلة المبتدئين تطرح هذا السؤال: كيفية توسيط CSS أفقيًا؟ تحتاج إلى تحديد عرض العنصر، وتحديد الهامش الأفقي، إذا كان تخطيطك موجودًا في طبقة (حاوية)، مثل هذا:
غير محدد
يمكنك تعريفه ليكون متمركزًا أفقيًا مثل هذا:
#طَوّق {
width:760px; /* التغيير إلى عرض الطبقة الخاصة بك*/
الهامش:0 تلقائي؛
} |
لكن IE5/Win لا يمكنه عرض هذا التعريف بشكل صحيح. نستخدم خدعة مفيدة جدًا لحلها: استخدم سمة محاذاة النص. مثله:
جسم {
محاذاة النص:مركز؛
}
#طَوّق {
width:760px; /* التغيير إلى عرض الطبقة الخاصة بك*/
الهامش:0 تلقائي؛
محاذاة النص:يسار؛
} |
تحدد قاعدة text-align:center للنص الأول أن جميع عناصر النص في IE5/Win متمركزة (المتصفحات الأخرى تقوم فقط بتوسيط النص)، وقاعدة text-align:left الثانية هي توسيط النص في #warp to اليسار.
15. استيراد وإخفاء CSS
نظرًا لأن المتصفحات القديمة لا تدعم CSS، فإن الطريقة الشائعة هي استخدام تقنية @import لإخفاء CSS. على سبيل المثال:
ومع ذلك، لم تنجح هذه الطريقة مع IE4، مما أصابني بالصداع لفترة من الوقت. فيما بعد كتبتها هكذا:
بهذه الطريقة، يمكن إخفاء 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. أضف مسافة بين المحدد الأخير والأقواس المتعرجة {. واكتب أيضًا كل تعريف على السطر الخاص به. ويجب وضع الفاصلة المنقوطة مباشرة بعد قيمة السمة.
أنا معتاد على إضافة فاصلة منقوطة بعد كل قيمة سمة على الرغم من أن القواعد تسمح بعدم الحاجة إلى كتابة الفاصلة المنقوطة بعد قيمة السمة الأخيرة، إذا كنت تريد إضافة نمط جديد، فمن السهل أن تنسى إضافة الفاصلة المنقوطة و. يسبب خطأ، لذلك لا تزال إضافته أفضل.
وأخيرًا، يتم كتابة قوس الإغلاق } على سطر بمفرده، مع وجود مسافات وأسطر جديدة لتسهيل القراءة.
