IE Hacking

عندما تستعمل ul لإنشاء قائمة أفقية وتستعمل float سواء right أو left، أضف overflow بالشكل التالي:

ul li {
	float: right;
	display: block;
}

ثم أضف:

ul {
	overflow: auto;
}

وبالنسبة لمتصفح IE عليك اضافة height بارتفاع معين:

* html ul {
	height: 20px;
}

وعندما تستعمل صور أو إيقونات مع li قد تظهر مكررة اكثر من مرة في IE رغم انك استعملت no-repeat في هذه الحالة أضف ارتفاع  1% ل li كما يلي:

* html ul li  {
	height: 1%
}

أخيرا انتبه عندما تستعمل ملف IE7-js من Google للحصول على الشفافية لأن الصور قد تتغير أماكنها من اليمين إلى اليسار وأحيانا قد تجد مشكلة في ارتفاع صفحة،  وهذا مع IE.

CSS Tips

  1. التعليقات في ملف CSS غير مهمة، لكن اجعلها آخر خطوة، خاصة إن كنت ستستعمل خدمة Optimization.
  2. ضع الوسوم Tags مرتبة أسفل الوسم body ك h1, h2, h3, a, img, p.
  3. ان كنت تكتب ملفات CSS لتطبيق ويب، من الأفضل أن تنشئ عدة ملفات global – dashboard – backend – asset – login.
  4. استعمل الصور والإيقونات كخلفيات background باستعمال CSS ما أمكن، ما عدا طبعا صور المواضيع الخاصة بالعرض.

Ul & Li tags

  • استعمل ul في كل موضع تحتاج فيه لعرض بيانات متتالية كمعرض صور Gallery أو قوائم Tabs.
  • لا تنس إضافة overflow للوسم ul في حال استعملت float للوسم li.
  • ربما تحتاج لاضافة ترقيع height: 1% ل li عندما تستعمل الإيقونات وذلك مع متصفح IE.
  • الروابط و pagination أكثر الأماكن التي يمكن استغلال الوسمين ul و li فيهما.

Translating WordPress

ان كان لديك theme Wordpress تريد تعريبه، يكفي أن تنشئ ملف rtl.css وتضعه في مسار Theme جنبا إلى جنب مع style.css ثم تقوم بتغيير الاتجاهات والقيم من اليسار إلى اليمين (وقلب الصور ان كان تمة صور تحتاج لقلب).

مثال:

ul li {
	float: left;
	padding: 1px 5px 0 0
}

تتغير إلى:

ul li {
	float: right;
	padding: 1px 0 0 5px
}

أو:

div {
	position: relative;
	left: 15px
}

إلى:

div {
	right: 15px
}

لا حاجة أن تكرر الخصائص التي لا تتغير، يجب الانتباه أيضا إلى أن يكون ملف rtl.css مدرج بعد ملف style.css في ملف header.php.

انتبه الى ملف header.php فبعض themes لا تضيف دالة language_attributes المسؤولة عن وصف اللغة والاتجاه.

Tables vs CSS

استخدام الجداول يجب أن يتقصر على البيانات التي تعرض بشكل Tabular data، ولا يجب استعمال tables في تقسيم الصفحة إلى sidebar و content وإنما يتم ذلك عن طريق division.