ظ‡ظ„ ط³ظ…ط¹طھ ط¹ظ† ط§ظ„ط§ط®طھطµط§ط± ظپظٹ CSS ط§ط®طھطµط± طŒ ط³ط±ط¹ طŒ ط¬ظ…ظ„ !


الحديث في هذا الموضوع فكرة عامة عن كيفية إنشاء ملفات css أصغر، أصغر في الحجم "كيلو بايت".. قد يقول أحد أن ملفات css الناتجة أصلاً تكون صغيرة الحجم ولن تؤثر في سرعه التحميل ــ صحيح كلامك ــ ولكن بالتأكيد سوف تلاحظ فرق ولو نسبياً في السرعة لملف حجمه (5kb) عن لو كان مثلاً (25kb)، وبالأحرى فهي خطوة تنظيمية للملف وتضمن لك زيادة في سرعة التحميل بنسبه 20%.

والفكرة تكمن في تقليل عدد الحروف داخل ملف css بقدر الإمكان وإختصارها، فكلما قلت الحروف كلما صغر حجم الملف.

• دمج جميع العناصر في واحد: عند وجود أكثر من وسم ( أو فئة class. أو معرف id# ) يأخذ نفس القيم اختصر الجميع بتعريفهم في شكل عنصر واحد فقط.

رمز Code:
h1 { margin:0; padding:0; } h2 { margin:0; padding:0; } h3 { margin:0; padding:0; }
ليصبح هكذا..

رمز Code:
h1, h2, h3 { margin:0; padding:0; }
• اختصر الألوان: في الألوان الأساسية يمكنك أختصار كود code اللون كما بالمثال التالي..

رمز Code:
color: #00FF00; ››› color: #0F0; color: #FF0000; ››› color: #F00; color: #0000FF; ››› color: #00F;
• Margin & padding وإستخدام سطر واحد لجميع الخصائص بدلاً من عدة أسطر: وهناك 4 طرق مختلفة يمكن أن تختصر الخواص بها...




4 قيم في سطر واحد.
رمز Code:
padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;
/* To */

رمز Code:
padding: 10px 10px 5px 10px; (top, right, bottom, left)
3 قيم في سطر واحد.

رمز Code:
padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;
/* To */
رمز Code:
padding: 10px 10px 5px; (top, right and left, bottom)
قيمتين في سطر واحد.

رمز Code:
padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;
/* To */

رمز Code:
padding: 5px 10px; (top and bottom, right and left)
قيمة واحدة فقط.

رمز Code:
padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;
/* To */

رمز Code:
padding: 10px; (top and bottom and right and left)
• الخطوط:

رمز Code:
font-style: italic; font-weight: bold; font-variant: small-caps; font-size: 16px; line-height: 22px; font-family: Arial;
/* To */

رمز Code:
font: italic bold small-caps 16px/22px Arial;
هذا الإختصار لن يؤدي عمله ويتم تجاهله بدون تحديد font-family والـ font-size فالإختصار متوقف على هذين الخاصتين، وفي حالة عدم تحديد الـ font-weight و font-style و font-varient هاتكون القيمة الإفتراضية لهم هي normal ويتم الأختصار في واحدة فقط.

• الخلفيات:

رمز Code:
background-color: #FFF; background-image: url(image.gif); background-attachment: fixed; background-repeat: no-repeat; background-position: right top;
/* To */

رمز Code:
background: #FFF url(image.gif) no-repeat fixed right top;
بحذف أي خاصية من تلك الخواص سوف يأخذ المتصفح ويطبق القيمة الإفتراضية لها، بمعنى لو كان هناك خلفية دون تحديد موضعها سوف توضع إفتراضيا في الأعلي جهه اليسار، وإن لم يحدد للخلفية شكل التكرار سوف تتكرر بكامل المحيط الموجودة داخله.

• القوائم:

رمز Code:
list-style-type: disc; list-style-position: outside; list-style-image: url(image.gif);
/* To */

رمز Code:
list-style: disc outside url(image.gif);
أيضا في حالة إستثناء أي من هذه الخواص سوف تستخدم القيمة الإفتراصية لها.

• الحدود:

رمز Code:
border-width: 5px; border-style: solid; border-color: #F00;
/* To */

رمز Code:
border: 5px solid #F00;


رمز Code:
border-right-width: 5px; border-right-color: #000; border-right-style: solid;
/* To */

رمز Code:
border-right: 5px #000 solid;
يمكنك أن تضع خواص الحدود أيضا بهذا الشكل لتتحكم في كل حد وسمكة ولونه على حده أو للجميع.








©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©