في هذا المقال نتحدث عن كيفية تحسين أداء CSS باستخدام مميزات jQuery الهائلة .

1- مشكلة Overflow مع Internet Explorer

يقوم Internet Explorer بتكوين عنصر overflow بقيمتين فقط و هما auto و scroll و أحياناً ما يظهر الشريط المتحرك في حالة لا يجب أن يظهر فيها كما في المتصفحات الأخرى . يمكن حل تلك المشكلة بواسطة تعديلات بسيطة في CSS أو jQuery  يمكن قراءتها في هذه التدوينة .

2- الشفافية Opacity

من الخواص الهامة التي أتت بها CSS هي خاصية الشفافية Opacity و التي أصبحت بشكل كبير مدعومة في أغلب المتصفحات و لكن لكل متصفح طريقة في التعبير عن عملية الشفافية . بينما يمكن بسهولة استخدام خاصية الشفافية بمساعدة jQuery حيث ستظهر بشكل موحد و بطريقة أفضل مما تقدمها CSS و ذلك باستخدام كود jQuery التالي :

1

$("selector").css("opacity", 0.5);

3- ظل النصوص Text Shadow

مع ظهور CSS 3 بدأ دعم خاصية ظل النصوص Text Shadow بشكل أكبر فأصبحت في المتصفحات الشهيرة ما عدا في Internet Explorer . و بمساعدة jQuery يمكن القيام بعمل ظل النصوص في Internet Explorer بسهولة باستخدام إضافة jQuery لظل النصوص بواسطة Kilian Valkhof .

4- الحواف الدائرية Rounded Corners

أيضاً كما هو الحال مع ظل النصوص , فهو نفس الحال مع الحواف الدائرية , فهي مدعومة في أغلب المتصفحات و لم يتم دعمها في Internet Explorer أو Opera . و يوجد العديد من الإضافات التي تمكن من عمل الحواف الدائرية باستخدام jQuery و لكن jQuery Curvy Corners تعتبر الأسهل و تقدم تأثيرها بشكل أقضل .

5- توضيح الحقول الحالية Highlighting

من الإضافات التي تزيد من جماليات الموقع و هي عملية توضيح الحقول الحالية التي يتم الكتابة فيها Highlighting و يمكن بسهولة عمل التأثير المطلوب باستخدام خاصية focus في CSS و لكنها ليست بالفعالة , لذلك تساعد jQuery في عمل مزيد من التأثير لتوضيح الحقول الحالية في الصفحات و ذلك بواسطة توضيح الرقعة label التي يوجد بها الحقل باستخدام jQuery .

تابعونا لاحقاً في الجزء الثاني من طرق تحسين أداء CSS بواسطة jQuery .

في هذا المقال سنوضح ببساطة كيفية عمل قائمة رئيسية و قائمة منسدلة منها .

أولاً : جزء HTML

القائمة تستخدم عنصري < ul > و< li > و هما عنصري تكوين القوائم في HTML و يتم تكوين القائمة الرئيسية بالشكل التالي :

1
2
3
4
5
6

<ul id="menu">
		<li><a href="#">رابط رئيسي 1</a></li>
		<li><a href="#">رابط رئيسي 2</a></li>
		<li><a href="#">رابط رئيسي 3</a></li>
		<li><a href="#">رابط رئيسي 4</a></li>
</ul>

و ستظهر أمامك بالشكل التالي في الصفحة :

• رابط رئيسي 1
• رابط رئيسي 2
• رابط رئيسي 3
• رابط رئيسي 4

بالتأكيد القائمة تظهر بدون أي ألوان أو شكل لأنه لم يتم إرفاق الجزء الخاص بتنسيق CSS و الذي سنتناوله لاحقاً .

الخطوة الثانية و هي إضافة القائمة الفرعية داخل القائمة الرئيسية , و يتم ذلك بإضافة قائمة داخل إحدى عناصر < li > التي أضفناها في الخطوة السابقة لتكون بالشكل التالي :

1
2
3
4
5
6
7
8
9
10
11
12
13

	<ul id="menu">
 
		<li><a href="#">رابط رئيسي 1</a></li>
		<li><a href="#">رابط رئيسي 2</a>
			<ul>
			<li><a href="#">رابط فرعي 1</a></li>
			<li><a href="#">رابط فرعي 2</a></li>
			<li><a href="#">رابط فرعي 3</a></li>
			</ul>
		</li>
		<li><a href="#">رابط رئيسي 3</a></li>
		<li><a href="#">رابط رئيسي 4</a></li>
	</ul>

و يظهر الكود السابق في الصفحة بالشكل التالي :

• رابط رئيسي 1
• رابط رئيسي 2
  • رابط فرعي 1
  • رابط فرعي 2
  • رابط فرعي 3
• رابط رئيسي 3
• رابط رئيسي 4

و بالتالي ينتهي الجزء الخاص بتكوين القائمة في HTML و ننتقل إلى الجزء الثاني و هو تكوين التنسيق باستخدام CSS :

ثانياً : تنسيق CSS

في هذا الجزء يتم تنسيق شكل القائمة لتظهر بشكل أفقي و كذلك ليظهر منها القائمة المنسدلة .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/*
Main Menu
*/
#menu, #menu ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
#menu li {
	margin: 0;
	padding: 0;
	float: right;
	position: relative;
}
 
#menu li a, #menu li a:visited {
	font-family: Tahoma, Arial, sans-serif;
	font-size: 13px;
	font-weight: normal;
	padding: 5px 12px;
	color: #fff;
	background: #555;
	display: block;
	text-decoration: none;
}
 
#menu li a:hover {
	color: #fff;
	background: #222;
	padding: 5px 12px;
	display: block;
}

في هذا الجزء من التنسيق تتم عملية تنسيق القائمة الرئيسية, فيتم من خلاله تحديد مكان عرض القائمة و جعلها تظهر بشكل أفقي بحيث تظهر العناصر بجانب بعضها البعض بالإضافة إلى اتخاذ المسافات الفاصلة المتساوية بين كل عنصر من عناصر القائمة باستخدام خصائص padding و margin .

34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

/*
Sub Menu
*/
#menu li ul {
	width: 199px;
	padding:0;
	position: absolute;
	right: 0;
	display: none;
}
 
#menu li:hover ul {
	display: block;
}
 
#menu li li {
	margin: 0;
	padding: 0;
	float: right;
	width: 175px;
}
 
#menu li li a, #menu li li a:visited {
	margin: 0;
	padding: 5px 12px;
	border-top: 1px solid #fff;
	background: #666;
	width: 175px;
}
 
#menu li li a:hover{
	background: #222;
	color: #eee;
}

أما الجزء السابق فيقوم بعملية تنسيق القائمة الفرعية المنسدلة بنفس فكرة تنسيق القائمة الرئيسية مع الاختلاف في عملية ظهور و إخفاء القائمة عند مرور مؤشر الماوس عليها باستخدام خاصية display .

في هذا المقال سنوضح ما الذي أظهره Opera 10 من فوائد لمصممي المواقع .

الشفافية

من أهم ما جاء به Opera 10 و يدعمه حالياً هو الشفافية  Transperncy الخاصة بالعناصر في HTML التي يمكن أن تجعل لها شفافية للخلفية و كذلك دعم الشفافية كلون color و كذلك يظهر الدعم الكامل في Opera 10 الآن لخصائص صور SVG و أيضاً دعم لطرق عرض الألوان التي لم تكن مدعومة من قبل في متصفح Opera مثل طريقتي HSLA و RGBA , مثال على ذلك :

1
2
3
4
5
6
7
8
9

#div1 {
background-color: rgba(210, 204, 222, 1);
}
#div2 {
background-color: rgba(210, 204, 222, 0.5);
}
#div3 {
background-color: rgba(210, 204, 222, 0.2);
}

الفرق بين RGB و RGBA هو أن الثانية تدعم الشفافية من خلال الحقل الرقمي الأخير, أما RGB فهي تمثل الألوان فقط بقيمها الثلاثة .

كذلك يقدم المتصفح دعم عناصر fill-opacity و stop-opacity و المتعلقة بشفافية صور SVG .

إذا كنت من المتابعين و المهتمين بخصائص CSS الجديدة فستعرف الميزة التالية, و إن كنت مازلت في طور التعلم فهذه من المميزات الرائعة التي يجب أن تعرفها :

خطوط الويب Webfonts

من مميزات CSS3 و التي ستحدث ثورة كبيرة في حال دعمها بشكل كامل في جميع المتصفحات هي ميزة خطوط الويب و هي أنه يمكنك استخدام الخط الذي تريده الآن في موقعك بنص مكتوب و ليس بصورة و ذلك بمساعدة ميزة خطوط الويب في CSS3 . الخاصية تسمح بتحديد خط معين لاستخدامه في Class أو ID معين و كتابة النص الذي تريده بعد ذلك باستخدام هذا الخط :

1
2
3
4
5
6
7
8

@font-face {
	font-family: "HacenEgypt";
	src: url(../fonts/HacenEgypt.ttf) format("TrueType");
}
h1 {
font-family: "HacenEgypt";
color: #3e87f5;
}

الكود السابق يمكن أن يسمح لأي عنوان أو نص مكتوب داخل وسم h1 أن يظهر بخط HacenEgypt و بالتأكيد يجب تغيير مسار الخط و اسمه لكي يعمل و رفع ملف الخط على سيرفر الموقع .

كل من متصفحي Opera و Safari يدعما صيغ الخطوط OpenType (OTF) و TrueType(TTF) و SVG Fonts أما متصفح Firefox فيدعم الصيغتين OTF و TTF فقط , أما Internet Explorer فيدعم صيغة مختلفة تماماً و هي EOT ! و للأسف إذا كنت تريد استخدام الخاصية و أن تعمل على Internet Explorer فيجب أن تقوم بتكوين ملف EOT للخط الذي تريد استخدامه .

عيوب

للأسف لم يظهر في Opera 10 دعم لعدد من الخصائص المهمة مثل border-radius و box-shadow و التي يدعمها Firefox و Safari بالرغم من وجود تلك الخواص منذ فترة و حاجة المستخدمين لدعمها بشدة إلا أنها مازالت في الجانب الآخر بالإضافة إلى متصفح Internet Explorer .

ليس صحيحاً أن استخدام -opera-border-radius سيمكنك من استخدام الخاصية على Opera فهي لم تُدعم حتى الآن

كيفية إدراج مكتبة Ext Core في الصفحة

هناك الطريقة التقليدية و هي تنزيل ملف Ext Core على موقعك و إضافته من خلال عنصر Script إلى وسم < head > , و لكن من الأفضل لسرعة أداء موقعك جلب مكتبات تطوير بنية الصفحات Ajax Libraries API من خلال Google فهي تساهم في سرعة الصفحة الخاصة بك و توفير مساحة من عملية تحميل الملف كل مرة من خلال موقعك :

1

<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js" type="text/javascript"></script>

يمكن جلب روابط المكتبات الأخرى مثل jQuery, Mootools من خلال الصفحة الخاصة بها على Google Code.

إضافة الملفات اللازمة لتشغيل القائمة

يجب إضافة مجموعة الملفات اللازمة لتشغيل القائمة سواء ملفات الجافاسكربت أو ملفات CSS و يتم إضافتها داخل وسم < head > :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<link href="menu.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<script type="text/javascript">
            Ext.onReady(function() {
                new Ext.ux.Menu('simple-horizontal-menu', {
                    transitionType: 'slide',
                    direction: 'horizontal', // default
                    delay: 0.2,              // default
                    autoWidth: true,         // default
                    transitionDuration: 0.3, // default
                    animate: true,           // default
                    currentClass: 'current'  // default
                });
                new Ext.ux.Menu('simple-vertical-menu', {
                    direction: 'vertical'
                });
            });
        </script>

في الكود السابق تمت إضافة ملفات Javascript و CSS لتشغيل القائمة و إضافة الكود الخاص بإعدادات القائمتين العرضية أو الطولية .

إضافة القائمة في الصفحة

لاستخدام القائمة في الصفحة ما عليك إلا اختيار إذا كنت ستستخدم القائمة الطولية أو العرضية

القائمة العرضية

و يكون كود HTML للقائمة العرضية كالتالي :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<ul id="simple-horizontal-menu">
	<li><a href="#">عنصر قائمة رئيسية 1</a>
	<ul>
		<li><a href="#">عنصر قائمة داخلية 1</a></li>
		<li><a href="#">عنصر قائمة داخلية 2</a>
		<ul>
			<li><a href="#">عنصر قائمة داخلية 1</a></li>
			<li><a href="#">عنصر قائمة داخلية 2</a></li>
			<li><a href="#">عنصر قائمة داخلية 3</a></li>
		</ul>
		</li>
		<li><a href="#">عنصر قائمة داخلية 3</a></li>
	</ul>
	</li>
	<li><a href="#">عنصر قائمة رئيسية 2</a></li>
	<li><a href="#">عنصر قائمة رئيسية 3</a>
	<ul>
		<li><a href="#">عنصر قائمة داخلية 4</a></li>
		<li><a href="#">عنصر قائمة داخلية 5</a></li>
		<li><a href="#">عنصر قائمة داخلية 6</a></li>
	</ul>
	</li>
	<li><a href="#">عنصر قائمة رئيسية 4</a></li>
</ul>

في الكود السابق تم استدعاء إعدادات القائمة و تحويلها لقائمة عرضية بمساعدة ملفات التنسيق و الجافاسكربت من خلال معرف simple-horizontal-menu , ثم البدء في تكوين قائمة باستخدام عنصر < ul > و اشتقاق العناصر الداخلية منه باستخدام < li > , و كذلك تكوين قائمة منبثقة من العنصر الداخلي كما في الكود السابق :

1
2
3
4
5
6
7

		<li><a href="#">عنصر قائمة داخلية 2</a>
		<ul>
			<li><a href="#">عنصر قائمة داخلية 1</a></li>
			<li><a href="#">عنصر قائمة داخلية 2</a></li>
			<li><a href="#">عنصر قائمة داخلية 3</a></li>
		</ul>
		</li>

القائمة الطولية

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<ul id="simple-vertical-menu">
	<li><a href="#">تجربة</a>
	<ul>
		<li><a href="#">عنصر قائمة داخلية 1</a></li>
		<li><a href="#">عنصر قائمة داخلية 2</a>
		<ul>
			<li><a href="#">sub عنصر قائمة داخلية 1</a></li>
			<li><a href="#">sub عنصر قائمة داخلية 2</a></li>
			<li><a href="#">sub عنصر قائمة داخلية 3</a></li>
		</ul>
		</li>
		<li><a href="#">عنصر قائمة داخلية 3</a></li>
	</ul>
	</li>
	<li><a href="#">عنصر قائمة رئيسية 2</a></li>
	<li><a href="#">عنصر قائمة رئيسية 3</a>
	<ul>
		<li><a href="#">عنصر قائمة داخلية 4</a></li>
		<li><a href="#">عنصر قائمة داخلية 5</a></li>
		<li><a href="#">عنصر قائمة داخلية 6</a></li>
	</ul>
	</li>
	<li><a href="#">عنصر قائمة رئيسية 4</a></li>
</ul>

نفس الفكرة في القائمة الطولية من خلال استدعاء معرف simple-vertical-menu لجلب إعدادات القائمة الطولية و منها يتم استخدام عناصر < ul > و < li > لعمل القائمة .

ملف التنسيق CSS

أما التنسيق باستخدام CSS فهو مثل التنسيق لأي قائمة أخرى يتم عملها باستخدام HTML من خلال التحكم بتنسيق عناصر ul, li, a و التي تعرض القائمة في HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

.ux-menu-container {
    position: relative;
}
 
.ux-menu,
.ux-menu ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 1;
}
 
.ux-menu li {
    position: relative;
    float: left;
}
 
.ux-menu ul {
    position: absolute;
    top: 0;
    left: 0;
}
 
.ext-border-box .ux-menu-ie-iframe,
.ext-ie7 .ux-menu-ie-iframe {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    zoom: 1;
    z-index: -1;
    filter:mask();
}
 
.ux-menu-vertical .ux-menu-item-main {
    clear: left;
}
 
.ux-menu a {
    display: block;
    position: relative;
    text-decoration: none;
    color: #432;
    border-left: 1px solid #e3dad1;
    border-top: 1px solid #e3dad1;
    border-bottom: 1px solid #e3dad1;    
    background: #f3efec url('images/menu-item-bg.png') repeat;
    font-size: 12px;
    line-height: 12px;
    padding: 10px 14px;
}
 
.ux-menu a.ux-menu-link-last {
    border-right: 1px solid #e3dad1;
}
 
ux.menu ul a {
    width: 100%;
}
 
.ux-menu a:focus,
.ux-menu a:hover,
.ux-menu a.ux-menu-link-hover {
    border-color: #d2e3f4;
    background: url(images/'menu-item-bg-over.png') repeat;
    outline: 0;
}
 
.ext-ie .ux-menu-clearfix {
    zoom: 1;
}
 
.ux-menu-clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 
.ux-menu a.ux-menu-link-parent {
    padding-right: 24px;
    min-width: 1px;
}
 
.ux-menu ul a,
.ux-menu.ux-menu-vertical a {
    border-bottom: 0px;    
    border-right: 1px solid #e3dad1;
}
 
.ux-menu ul a.ux-menu-link-last,
.ux-menu.ux-menu-vertical a.ux-menu-link-last {
    border-bottom: 1px solid #e3dad1;
}
 
.ux-menu-arrow {
    display: block;
    width: 8px;
    height: 6px;
    right: 10px;
    top: 14px;
    position: absolute;
    background: url('images/menu-arrow-down.png') no-repeat;
    font-size: 0;
}
 
.ux-menu.ux-menu-vertical .ux-menu-arrow,
.ux-menu ul .ux-menu-arrow  {
    width: 6px;
    height: 8px;
    top: 13px; 
    background: url('images/menu-arrow-right.png') no-repeat;
}
 
.ext-border-box .ux-menu-arrow {
    top: 17px;
}
.ext-border-box .ux-menu.ux-menu-vertical .ux-menu-arrow,
.ext-border-box .ux-menu ul .ux-menu-arrow {
    top: 16px;
}
 
.ux-menu ul.ux-menu-hidden {
    display: none;
}

CSS أو Cascading style sheet باختصار هي لغة تحدد أنماط و أشكال العناصر سواء كانت مبنية بواسطة HTML أو XML و غيرها من لغات تصميم واجهة المستخدم User Interface .

1- الفرق بين Class و ID

يمكنك بواسطة CSS تغيير شكل العنصر , و تتيح لك على سبيل المثال لغة HTML في تحديد كيفية استخدام شكل العنصر , فإما أن يكون عنصر فريد في الصفحة و له شكل خاص به فقط أو أن يكون عنصر متكرر في الصفحة و بالتالي يستخدم أكثر من مرة .

و هنا يظهر الفرق في استخدام عنصري Class و ID في كل من HTML و CSS فمثلاً يمكن استخدام ID لعناصر فريدة في الصفحة مثل < body > أو مثلاً لتكوين إطار الصفحة الرئيسي Container باستخدام وسم < div > و يتم تمييز الـ ID في ملف CSS برمز # قبل اسم العنصر:

1
2
3
4
5
6
7
8
9
10
11
12

body { 
          font-family: Tahoma, Arial, sans-serif; 
          color:#111; 
          background:#202020; 
}
 
#container { 
          width:900px; 
          overflow:hidden; 
          background:#eee; 
          padding:4px;  
}

أما Class فتستخدم للعنصر الذي يتكرر أكثر من مرة في الصفحة فمثلاً إذا كان هناك مربعات جانبية في القائمة الجانبية للموقع فهي تتكرر حسب الحاجة إليها و يتم تمييز الـ Class باستخدام رمز النقطة . قبل اسم العنصر :

1
2
3
4
5
6

.widget { 
          width: 240px;
          border: 1px solid #aaa;
          background: #d0d0d0;
          padding: 3px;
}

2- تجميع العناصر ذات التنسيق المتشابه

في الكثير من الأحيان نقوم بتكرار نفس التنسيق مثل نوع الخط font-family برغم وجوده في عناصر أخرى و بالتالي يزيد ذلك و لو بنسبة بسيطة من حجم الصفحة و كذلك تزداد الحيرة في البحث و التعديل في تلك التنسيقات مستقبلاً , لذلك يفضل تجميع العناصر ذات التنسيق المتشابه في نسق واحد .

فمثلاً إذا كانت عناصر الفقرات و العناوين في الموقع تكون بتنسيق واحد لخط الكتابة فيمكن جمعها في نسق واحد :

1
2
3

h1, h2, h3, h4, h5, h6, p, .content {
          font-family: Arial, Helvetica, sans-serif; 
}

3- عدم الاكثار من المساحات البيضاء

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

4- تحديد الألوان بدون استخدام اسم اللون

مازال الكثيرون يستخدمون أسماء الألوان في عملية التنسيق فمثلاً استخدام الاحمر باسم Red بالرغم من أن هناك العديد من درجات اللون الأحمر . في حالة استخدام اسم اللون فأنت تعتمد كمصمم على متصفح معين بحد ذاته و لكن هناك متصفحات أخرى لا يمكنها قراءة اسم اللون و لكنها تستطيع معرفة كود اللون و تمييزه من بين آلاف درجات الألوان سواء كان #ff0 أو #ff4 فسيتمكن أي متصفح من معرفة درجة اللون المطلوبة بدقة .

5- لا تستخدم عناصر التنسيق بشكل خاطىء

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

6- الفرق بين Margin و Padding

من أهم العناصر و التي يكثر استخدامها هي عناصر Margin و Padding و من المهم معرفة الفرق بينهما و كيفية استخدامهما .
فعنصر Margin يشير إلى المساحة الخالية المطلوبة حول النسق المطلوب , أي من خارج العنصر , فمثلاً إذا أردنا أن نضع مساحات خالية بين المربعات الجانبية بعضها ببعض من أعلى و أسفل نستخدم Margin :

1
2
3

.widget { 
          margin: 10px 0 10px 0;
}

أما Padding فتحدد المساحة الخالية من داخل العنصر , فإذا أردنا أن نحدد مساحة خالية من داخل العنصر حتى لا يلتصق النص بحد العنصر نستخدم padding :

1
2
3
4
5
6

.widget { 
          width: 240px;
          border: 1px solid #aaa;
          background: #d0d0d0;
          padding: 3px;
}

7- استخدم التنسيق الافتراضي CSS Reset

سبق و أن تحدثنا عن استخدام التنسيق الافتراضي CSS Reset , فهي تفيد في كثير من الأحيان في ضبط أشكال عدد من العناصر بين المتصفحات المختلفة . تصفح المقال لمزيد من الشرح عن التنسيق الافتراضي

8- رمز !Important

رمز !Important من الرموز القليلة التي تستخدم و لكنها ذات أهمية في عملية التنسيق باستخدام CSS , فمن خلالها يمكنك أن تحدد أي من التنسيقات التي قمت بعملها له أهمية بشكل كبير بغض النظر عن أي تنسيق آخر يتم تكوينه آلياً بواسطة بعض برامج إدارة المحتوى أو سواء تم تكراره من قبل في أي ملف تنسيق آخر بالموقع :

1
2
3

#container {
          background: #eee !Important ; background-color:#000;
}

و بالتالي سيتم عمل الخلفية باللون الفاتح لأنه تم تحديده كتنسيق مهم بدلاً من التنسيق باللون الأسود .

9- استبدال النص بصورة

عادة ما يقوم المصممون بعمل شعار الموقع كخلفية لعنصر < div > و وضع العنصر بتنسيقه في التصميم , في حين أنه يمكن أن يستفيد المصمم من عنصر مثل < h1 > في وضع الشعار بالموقع من خلال إخفاء النص و وضع صورة الشعار كخلفية للعنصر :

1
2
3
4
5
6

h1.logo {
          text-indent:-9999px;
          background: url('images/logo.png') no-repeat;
          width: 250px;
          height: 110px;
}

و بالتالي سيتوفر النص المكتوب داخل عنصر العنوان و لكن بشكل مخفي و هي تعتبر أحياناً من الخدع المستغلة مع محركات البحث .

10- استخدام محررات متخصصة

سيفيد المصمم كثيراً إذا استعان بمحررات متخصصة في تكوين ملفات CSS و أحياناً ما تكون مدمجة مع برامح شهيرة و من البرامج التي تميزت في الفترة الأخيرة على نظام Windows برنامج Microsoft Expression Web و الذي تم تحسينه كثيراً في نسخته الثالثة التي صدرت منذ عدة أيام من خلال مجموعة من المميزات , بالإضافة إلى برامج أخرى مثل Adobe Dreamweaver CS4 أو المحرر الأشهر Notepad ++ و برنامج Kompozer و المتوفر لأنظمة ويندوز و ماكنتوش و لينُكس .

11- تعرف على الخطأ و قم بإصلاحه

لا يهم إذا كانت هناك أخطاء , و أحياناً من الصعب إيجاد الخطأ و معرفة كيفية حله . و لذلك يجب أن يتم استخدام بعض الأدوات التي تساعدك على ذلك و من أشهرها أداة Firebug فهي تمكنك من استعراض أكواد HTML و CSS جنباً إلى جنب و معرفة مكان وجود خطأ معين في تصميم الصفحة , أو إذا كنت ممن يبحثون عن تنسيقات معينة في مواقع أخرى فهذه الأداة هي الأمثل لذلك .

مقالات متعلقة

• 5 نصائح لكتابة كود CSS نظيف و سريع
• أساسيات CSS : التنسيق الافتراضي [2]
• 10 أخطاء لا يجب ارتكابها في HTML

بالطبع لن يبدأ مصممو المواقع في استخدام HTML 5 تحديداً و خصوصاً لعدم دعم Internet Explorer 6 و بعض نسخ المتصفحات القديمة التي مازالت طور الاستخدام .

ما هو HTML 5 ؟

HTML 5 هو الإصدار الجديد من لغة تكوين صفحات المواقع Hypertext Mark-up Language . و في الإصدار الجديد يتم تقديم عدد من العناصر الجديدة و التي تسهل من فكرة تكوين الصفحات حسب ما نقوم به يدوياً في XHTML 1.0 بالإضافة إلى تسهيل الأمور على محركات البحث في قراءة الصفحات و معرفة ما هي أجزاء الصفحة الفعلية (الجزء العلوي Header , القائمة Navigation, المحتوى Sections و الجزء السفلي Footer ) . كما توفر HTML عدد من بيئات العمل المختلفة لتكوين الجرافيكس و الفيديو و العديد من المميزات التي ستسهل الكثير مما يتم القيام به حالياً .

الشكل السابق يوضح كيف يتم تقسيم الصفحة باستخدام HTML5 , و يكون على الشكل التالي ككود :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

< !doctype html>
<html>
<head>
	<title>Page title</title>
</head>
<body>
	<header>
		<h1>Header</h1>
	</header>
	<nav>
		<!-- Navigation -->
	</nav>
	<section id="intro">
		<!-- Intro -->
	</section>
	<section>
		<!-- Content -->
	</section>
	<aside>
		<!-- Sidebar -->
	</aside>
	<footer>
		<!-- Footer -->
	</footer>
 
</body>
</html>

يظهر من الكود السابق أنه يتم توفير استخدام الوسم <div> في تكوين المحتوى بأشكاله المختلفة و بالتالي تظهر فكرة تنظيم عرض المحتوى بشكل أكبر سواء لمحركات البحث أو للمستخدمين بالبحث عن شىء معين داخل الصفحة .

استخدام القائمة Navigation

الفكرة في استخدام القائمة هي الترتيب و التنظيم , حيث يتم تكوين القائمة مثلما كان يتم تكوينها سابقاً باستخدام وسم القائمة <ul> داخل وسم <nav> .

1
2
3
4
5
6
7
8
9

<nav>
	<ul>
		<li><a href="#">الرئيسية</a></li>
		<li><a href="#">المدونة</a></li>
		<li><a href="#">عن الموقع</a></li>
		<li><a href="#">اتصل بنا</a></li>
		<li class="rssfeed"><a href="#">خلاصة الموقع</a></li>
	</ul>
</nav>

تكوين المحتوى

كذلك في تكوين المحتوى أصبحت الفكرة أسهل و أكثر تنظيماً . باستخدام مجموعة من العناصر مثل <sections> , <article> , <date> ستسهل عملية تكوين المحتوى و ترتيبه و على سبيل المثال :

1
2
3
4
5
6
7
8
9

<section>
    <article class="entry">  
        <header>  
            <h2>عنوان المقال</h2>  
            <p>أرسل في <time datetime="2009-07-11T20:34:12+03:00">11 يوليو 2009</time> بواسطة <a class="author" href="#">هشام صادق</a> - <a href="#comments">تعليقات (3)</a></p>  
        </header>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>  
    </article>
</section>

فوسم <section> يجمع و ينظم المحتوى بشكل عام , و وسم <article> يقوم بتنظيم شكل المقال و الذي يوجد بداخله عنوان المقال و بياناته مثل التاريخ و الوقت <ti,e> و كاتب المقال و التعليقات إلخ …

كذلك لم يعد من الضروري استخدام سكربتات خارجية لعملية التأكد من الخلايا في بعض الحقول المطلوب التأكد منها مثل البريد الإلكتروني من خلال استخدام عنصر for داخل وسم <input> كالتالي :

1

                <input name="email" id="email" type="email" required />

التنسيق باستخدام CSS3

إذا كيف يتم تعريف المتصفح بأن تلك الصفحة تستخدم عناصر بلغة HTML لكي يتم تنسيقها ؟ يتم ذلك من خلال استخدام CSS لتعريف أشكال العناصر للمتصفح و بالتالي يقوم بعرضها مثلما تم تحديدها في ملف CSS .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* CSS Reset التنسيق الافتراضي */
{
	margin: 0;
	padding: 0;
}
 
/* تعريف المتصفح بعرض العناصر التالية في HTML5 */
header, footer, nav, article, aside {
	display: block;
}
 
body {
	margin: 0 auto;
	width: 900px;
	background-color: #f0f0f0;
	font: 12px/20px Tahoma, Arial, sans-serif;
 
}
 
p {
	padding: 3px;
}

يعتبر ما سبق مجموعة من الأساسيات الضرورية لتنسيق الصفحة .

ما الجديد في CSS 3

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

1
2

	-moz-border-radius: 22px;  
	-webkit-border-radius: 22px;

كذلك من الخواص الجديدة خاصية التحكم بأبعاد الخلفيات Background Size و من خلالها يتم التحكم بطول و عرض الخلفية التي يتم استخدامها لعنصر معين سواء <div> أو غيره من العناصر .

1
2
3

	-webkit-background-size: 100%;  
	-o-background-size: 100%;  
	-khtml-background-size: 100%;

خاصية العرض كجدول من الخصائص المفيدة في ترتيب شكل المحتوى فبوجود عنصرين داخل عنصر أساسي يتم تعريف العنصر الأساسي container بعرضه كجدول , و تعريف العنصرين الآخرين داخل container (main, sidebar)كخلايا جدول و ذلك بالشكل التالي :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#container {  
	display: table;  
}  
 
#main {  
	display: table-cell;  
	padding-right: 10px;
	width: 650px;  
    }  
 
aside {  
	display: table-cell;  
	width: 250px;
    }

بالإضافة إلى مجموعة من الخصائص الأخرى مثل box-shadow, column-count, column-gap .

بالتأكيد مجموعة متميزة من الخصائص الجديدة و نتمنى أن نستخدمها قريباً و لكن هل سيستمر مصممو المواقع بانتظار مستخدمي إنترنت إكسبلورر 6 أم سيجبرونهم على الانتقال للأحدث ؟

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

هذا المقال ضمن مجموعة مقالات أساسيات CSS , يمكنك تصفحها من خلال قسم CSS بالموقع

تاريخ التنسيق الافتراضي

ظهرت فكرة التنسيق الافتراضي CSS Reset في عام 2004 على يد Andrew Krespanis حيث قد اقترح استخدام علامة * لكي تجمع جميع العناصر في CSS و يتم إعطاءها قيمة موحدة و هي الصفر فتكون على سبيل المثال :

1
2
3
4

* {
       margin: 0;
       padding: 0;
}

و بالتالي يتم إعداد جميع العناصر بحيث تكون المسافات الجانبية و الداخلية لها صفر .

تجنب تنسيق المتصفحات

تعمل أشهر المتصفحات على تكوين طريقة تعالج بها طرق تنسيق الوسوم حسب ما تراه مناسباً . المثال التالي يوضح كيف يقوم كل من Firefox 3 و Internet Explorer 7 بمعالجة وسم <p> بدون أن يتم وضع أي تنسيق لها في CSS و موضوع داخل وسم <div> .

في الصورة السابقة يتضح أن متصفح Firefox 3 يقوم بترك مسافة قبل و بعد كل وسم <p> تلقائياً حتى لا تكون الفقرات متلاصقة ببعضها , بينما في متصفح Internet Explorer 7 لا يقوم المتصفح بترك أي مسافات بين الفقرات سواء بالأعلى أو بالأسفل . و بالتالي فسيكون شكل الفقرات مختلف في متصفح ثالث ربما يكون لديه وجهة نظر أخرى في عرض الفقرات . لذلك يتم وضع تنسيق افتراضي لا يظهر الفقرات مثلاً بمظهر مختلف .

تخصيص التنسيق الافتراضي

ليس كل ما نريد أن نقوم بتنسيقه يكون داخل عنصر * , ففي الكثير من الأحيان نريد أن نحدد تنسيق معين لعنصر معين و بافتراض أنه نريد أن نضيف تنسيق لعنصر

فيكون الكود كالتالي :

1
2
3
4
5
6
7

* {
      margin:0; 
      padding:0; 
}
p {
      margin:5px 7px; 
}

هناك بعض الأمثلة الجاهزة و التي يمكن استخدمها و منها على سبيل المثال التنسيق الافتراضي من Yahoo User Interface Library (YUI) و يعتبر هذا المثال الأشهر في الاستخدام و لكن يمكنك كمصمم تكوين ملف التنسيق الافتراضي حسب رغبتك في ما يتم وضعه ضمن التنسيق الافتراضي و مما يتم تصنيفه في ملف آخر للتنسيق الأساسي للتصميم, مع الأخذ في الاعتبار أنه عند استخدام التنسيق الافتراضي في التصميم فيجب أن تضعه في المقدمة لكي يتمكن المتصفح من العثور عليه بسهولة و استخدامه مباشرة دون انتظار تحميل بقية ملفات التصميم .

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

و بالتأكيد العنصر العام (*) كان البداية لعملية التنسيق الافتراضي و لكن ليس من المفضل استخدامه أو الاعتماد عليه بشكل أساسي ففي كثير من الأحيان يحدث تعارض بين العناصر نفسها مما يستوجب تكوين تنسيق مخصص لعناصر معينة بعيداً عن عن العنصر العام .

# مجموعة من التنسيقات الافتراضية

لذلك سنبدأ في سرد مجموعة من أساسيات CSS خلال هذا الأسبوع من أجل تنمية مهارات المصمم العربي و تنمية معرفة المستخدم العادي إذا أراد تعديل قالب موقعه و الذي يعتمد على CSS .

توسيط المحتوى بواسطة CSS

في الغالب نريد أن نقوم بتوسيط Div معين و خاصة إذا كان الـ Div الأساسي الذي يكون شكل الصفحة لذلك يكون كود الصفحة Xhtml كالتالي :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Alwank Div Center Demo</title>
<style type=""text/css">
محتوى CSS
</style>
</head>
 
<body>
<div id="wrapper"></div>
</body>
 
</html>

قمنا بعمل Div داخل محتوى الصفحة و قد أخذ المعرف wrapper و هو ما سنستخدمه في الـ CSS بعد ذلك من أجل توسيطه .

الخطوة الثانية هي تكوين محتوى CSS

1
2
3
4
5
6
7
8
9
10
11

body {
	background: #fff;
	color: #000;
	font: 0.7em/160% "Tahoma", Arial, sans-serif;
	margin: 0;
	padding: 0;
}
#wrapper {
	background: #dded86;
	width: 770px;
}

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

أما معرف #wrapper فتم فيه تعريف خلفية الخلية و عرضها . و لكن لم يتم توسيط الخلية فكيف يتم ذلك ؟

1
2
3
4
5

#wrapper {
	background: #dded86;
	width: 770px;
	margin: 0 auto;
}

قيمة margin: 0 auto; تحدد المسافات المأخوذة من أعلى و أسفل الخلية و تم تحديدها بقيمة صفر و المسافات من يمين و يسار الخلية و تم تحديدها بقيمة auto .

و بالتالي يكون كود الصفحة ككل

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Alwank Div Center Demo</title>
<style type=""text/css">
body {
	background: #fff;
	color: #000;
	font: 0.7em/160% "Tahoma", Arial, sans-serif;
	margin: 0;
	padding: 0;
}
 
#wrapper {
	background: #dded86;
	width: 770px;
	margin: 0 auto;
}
</style>
</head>
 
<body>
<div id="wrapper">محتوى الخلية يكون هنا</div>
</body>
 
</html>

و منها الأزرار التي تستخدم في المحررات أو في تكوين أحد السكربتات المختصة بإدارة المحتوى و غيرها من السكربتات .

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

# تنزيل الأزرار باللغة العربية

# تنزيل الأزرار باللغة الإنجليزية

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

صاحب الفكرة هو Martin Ivanov و صدرت تحت ترخيص Creative Commons .

# استعراض Demo لـ CSS Watermark

# تنزيل CSS Watermark