تصميم المواقع

خدع ونصائح في CSS

css
كُتب بواسطة مشرف الموقع
css

css

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

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

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

يمكنك تحوير الكود بالشكل الذي تراه مناسبا لك فأنا اترك list-style لأني اقوم باستعمالها غالبا

استخدام تنسيق واحد لأكثر من عنصر
لا أرى ان هناك داعي ان تقوم بتكرير نفس التنسيق في حال انك تريد تكرير نفس السلوك لوسم معين.
فمثلا اقوم في اغلب الحالات بجعل الوسم <h> يستخدم نفس الخط الذي استعمله في وسم <span> كالتالي:

h1 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
h2 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
h3 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
span {font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
يمكنك عمل نفس الشيء بشكل بسيط وبكود اقل كالتالي:

h1,h2,h3,h4,h5,h6,span,b {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
لاحظ انه يمكنك تنسيق الوسوم او الكلاسات التي تحتاجها بنفس التنسيق دفعة واحدة

استخدم RTL اذا كان موقعك بالعربية
اذا كنت تريد ان تقوم بتصميم موقع يعتمد على اللغة العربية فلا بد ان تقوم بعكس اتجاه جميع العناصر في الصفحة Right to left لان المتصفحات تعرض بشكل افتراضي من اليسار الى اليمين وهذا لا يصلح مع اللغة العربية لذلك عند بداية تصميمك يجب استعمال direction كالتالي:

body { direction:rtl;}
قمنا بوضع الامر في body لضمان تطبيقه على كافة وسوم الموقع, ولاحظ انه يمكنك تغير rtl الى ltr عند عمل الموقع بأكثر من لغة

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

.wrapper {
margin-top: 5px;
margin-right: 1px;
margin-bottom: 30px;
margin-left: 8px;
}
ويمكن اختصارها الى سطر واحد بدمج القيم الأربعة كالتالي:

.wrapper {margin: 5px 1px 30px 8px;}
ويمكن تطبيق نفس الطريقة على الكثير من الأمور.

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

<div class=”container”>Content Here</div>

 

.container {width: 890px; margin: 0 auto}
توسيط النص عمودياَ
إذا كنت ترغب في توسيط النص عموديا داخل بلوك معين ثابت الأرتفاع كل ماعليك فعله هو تحديد خط طول للنص بواسطة الخاصية line-height يساوي ارتفاع ذلك البلوك كالتالي:

<div class=”container”>Text Here</div>

 

.container {height: 50px; line-height: 50px}
لاحظ ان الارتفاع محدد بالقيمة 50 وبناءا عليه سيأخذ خط الطول نفس القيمة

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

<div class=”red blue green”>Content Here</div>
لاحظ انه يجب ترك فراغ بين اسم كل كلاس والأخر

.blue {color: blue}
.green {color: green}
.red {color: red}
يمكن بعد ذلك استعمال الكلاس blue على أي عنصر أخر تود جعل لونه أزرق أو استعمال الكلاس red لأي عنصر أخر

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

<div class=”block”>Content Here</div>

 

.block {
border-radius: 5px
-webkit-border-radius: 5px
-moz-border-radius: 5px
}
ويمكن التلاعب بشكل أكبر بهذه الزوايا وتحويرها لأكثر من شكل عن طريق jQuery Corner

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

فالرابط بعد الضغط عليه لن يكون بنفس الحالة التي كان عليها قبلها.

لذلك يجب تحديد تلك الأنماط لكافة الأحتمالات :

a:link
a:visited
a:hover
a:active
أستبدال النص بصورة
لابد انك خلال التصميم ستحتاج الى استبدال النص بصورة وتجد ذلك مستخدما بكثرة في القوائم فهناك من يقوم باستبدال كلمة home بايقونة.

ومايميز هذه الخدعه انها تقوم بالحفاظ على النص لاستخدامه في محركات البحث وفي نفس الوقت تقوم باظهار الصورة ويمكنك الاستفادة من هذه الخاصية باستخدام text-indent كالتالي:

h1 {
text-indent:-9999px;
background:url(“h1-image.jpg”) no-repeat;
width:200px;
height:50px;
}
يجب أن يتطابق العرض والأرتفاع بنفس أبعاد الصورة

عن الكاتب

مشرف الموقع

اترك تعليقا

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.