1. استخدم اختصارات CSS
يمكن أن يساعد استخدام الاختصارات في تقليل حجم ملفات CSS وتسهيل قراءتها. للتعرف على القواعد الرئيسية لاختصارات CSS، يرجى الرجوع إلى "ملخص بناء جملة اختصارات CSS الشائعة"، والذي لن يتم وصفه هنا.
2. قم بتعريف الوحدة بشكل واضح، إلا إذا كانت القيمة 0.
إن نسيان تحديد وحدة الحجم هو خطأ شائع بين مبتدئي CSS. في HTML يمكنك فقط كتابة العرض = "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 وفئة "update"
ص {
الهامش:1em 0;
حجم الخط: 1em؛
اللون: #333؛
}
.تحديث {
وزن الخط: غامق؛
اللون: #600؛
}
من هذين التعريفين، سيتم استخدام class = "update" لأن الفئة أقرب من p. يمكنك الاطلاع على "حساب خصوصية المحدد" الخاص بـ W3C لمعرفة المزيد.
8. تعريفات فئات متعددة
يمكن أن تحدد التسمية فئات متعددة في نفس الوقت. على سبيل المثال: قمنا أولاً بتعريف نمطين، النمط الأول له خلفية #666؛ والنمط الثاني له حدود بحجم 10 بيكسل.
.واحد{العرض:200px;الخلفية:#666;}
.اثنين{الحدود:10px الصلبة #F00؛}
في رمز الصفحة، يمكننا الاتصال بـ <div class="one two"></div> بهذا الشكل
تأثير العرض النهائي هو أن هذا div له خلفية #666 وحدود 10 بكسل. نعم، من الممكن القيام بذلك، يمكنك تجربته.
9. استخدام المحددات التابعة
لا يعلم مبتدئو CSS أن استخدام المحددات التابعة هو أحد الأسباب التي تؤثر على كفاءتهم. يمكن أن تساعدك المحددات الفرعية في حفظ الكثير من تعريفات الفئة. دعونا نلقي نظرة على الكود التالي:
<div معرف = "subnav">
<ul>
<li class="subnavitem"> <a href="#" class="subnavitem">العنصر 1</a></li>>
<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> العنصر 1</a> </li>
<li class="subnavitem"> <a href="#" class="subnavitem"> العنصر 1</a> </li>
</ul>
</div>
تعريف 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 id="subnav">
<li> <a href="#"> العنصر 1</a> </li>
<li class="sel"> <a href="#"> العنصر 1</a> </li>
<li> <a href="#"> العنصر 1</a> </li>
</ul>
تعريف النمط هو:
#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 {
عائلة الخط: "Lucida Grande"، Lucida، Arial، Helvetica، sans-serif؛
اللون: #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. على سبيل المثال:
@import url("main.css");
ومع ذلك، لم تنجح هذه الطريقة مع IE4، مما أصابني بالصداع لفترة من الوقت. فيما بعد كتبتها هكذا:
@import "main.css";
بهذه الطريقة، يمكن إخفاء CSS في IE4، كما أنه يوفر 5 بايت. إذا كنت تريد معرفة الشرح التفصيلي لبناء جملة @import، يمكنك الاطلاع هنا على "مخطط مرشح CSS المركزي"
16. تحسين IE
في بعض الأحيان، تحتاج إلى تحديد بعض القواعد الخاصة لأخطاء متصفح IE. يوجد هنا عدد كبير جدًا من تقنيات CSS (الاختراقات) بغض النظر عما إذا كانت Microsoft على وشك إصدار دعم أفضل أم لا في الإصدار التجريبي IE7، تعتبر كلتا الطريقتين الأكثر أمانًا.
1. طريقة التعليق التوضيحي (أ) تخفي تعريف CSS في IE. يمكنك استخدام محدد فرعي:
أتش تي أم أل>الجسم ص {
/* محتوى التعريف */
}
(ب) لا يمكن فهم طريقة الكتابة التالية إلا بواسطة متصفح IE (مخفي عن المتصفحات الأخرى)
* أتش تي أم أل ص {
/* الإعلانات */
}
(ج) في بعض الأحيان، تريد أن يكون IE/Win نشطًا ولكن IE/Mac مخفيًا، يمكنك استخدام خدعة "الشرطة المائلة العكسية":
/* */
* أتش تي أم أل ص {
تصريحات
}
/* */
2. طريقة التعليقات المشروطة هناك طريقة أخرى، والتي أعتقد أنها أكثر قابلية للاختبار من CSS Hacks، وهي استخدام التعليقات الشرطية الخاصة بسمة Microsoft (التعليقات المشروطة). باستخدام هذه الطريقة، يمكنك تحديد بعض الأنماط بشكل منفصل لـ IE دون التأثير على تعريف ورقة الأنماط الرئيسية. مثله:
<!--[إذا كان IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
17. مهارات تصحيح الأخطاء: ما حجم الطبقة؟
عند تصحيح أخطاء CSS، عليك أن تكون مثل الآلة الكاتبة وتحلل كود CSS سطرًا تلو الآخر. عادةً ما أقوم بتحديد لون الخلفية على الطبقة المعنية، لذلك يكون من الواضح مقدار المساحة التي تشغلها الطبقة. يقترح بعض الأشخاص استخدام border، وهو أمر ممكن بشكل عام، ولكن المشكلة تكمن في أنه في بعض الأحيان ستؤدي الحدود إلى زيادة حجم العناصر، وسيؤدي كل من border-top وboeder-bottom إلى تدمير قيمة الهامش الرأسي، لذلك يكون استخدام الخلفية أكثر أمانًا.
خاصية أخرى غالبا ما تسبب مشاكل هي الخطوط العريضة. يبدو المخطط التفصيلي مثل boeder، لكنه لا يؤثر على حجم العنصر أو موضعه. يدعم عدد قليل فقط من المتصفحات سمة المخطط التفصيلي، والمتصفحات الوحيدة التي أعرفها هي Safari وOmniWeb وOpera.
18. أسلوب كتابة كود CSS عند كتابة كود CSS، يكون لكل شخص عاداته الخاصة في الكتابة فيما يتعلق بالمسافات البادئة وفواصل الأسطر والمسافات. وبعد التدريب المستمر، قررت أن أعتمد أسلوب الكتابة التالي:
محدد 1,
محدد2 {
الخاصية:القيمة؛
}
عند استخدام التعريفات الموحدة، عادةً ما أكتب كل محدد في السطر الخاص به بحيث يسهل العثور عليه في ملف CSS. أضف مسافة بين المحدد الأخير والأقواس المتعرجة {. واكتب أيضًا كل تعريف على السطر الخاص به. ويجب وضع الفاصلة المنقوطة مباشرة بعد قيمة السمة.