الدكتور نت http://qatardr.net

9 حيل css تحتاج لمعرفتها

بقلم: الدكتور نت /مواضيع أخرى لنفس المحرر الدكتور نت

9 حيل لا يمكنك الاستغناء عنها عند تصميم موقعك .

1 - استخدام أكثر من كلاس class مع نفس الوسم أو العنصر

مثلا لو كان لدينا عنوان بالشكل التالي

<h1>
عنوان كبير
</h1>

يمكنك أن تحدد خصائصه بالشكل التالي

و لديك ملف Css التالي


.head {

color :red;

font-size:130%;

}

.theborder{

border:1px solid black;

}

يمكنك إضافة الكلاس بالشكل التالي


<h1 class="head">عنوان كبير</h1>

أو إضافتهما معا أو إضافة أي عدد تحب .

<h1 class="head theborder">عنوان كبير </h1>

2- متصفح أنترنت أكسبلورر يتجاهل !important

في العادة css يعتمد آخر خاصية تظهر مثال على ذلك


h2{

margin-top:1px;

}

h2{

margin-top:4px;

}

القيمة النهائية للmargin-top ستكون 4px و هي ستستبدل القيمة السابقة .

لكن لو أضفنا !important


h2{

margin-top:1px !important

}

h2{

margin-top:4px;

}

كل المتصفحات ستعتمد القيمة الأولى و ليس الثانية لأننا وضعنا Important و حددنا أهميتها ما عدا أنترنت اكسبلورر فهو سيعتمد القيمة الثانية و سيتجاهل الامر important

3-بديل min-width وmin-height في انترنت أكسبلورر

في المتصفحات القياسية يمكنك استخدام min-height لتحديدأقل ارتفاع مسموح للعنصر أو min-width لتحديد أقل عرض مسموح كما يمكنك استخدم max-height لتحديد أعلى ارتفاع مسموح و max-width لتحديد أكثر عرض مسموح .

و لكن هذه الخصائص يتم تجاهلها من قبل انترنت أكسبلورر ولكن هناك البديل .


#box
{
min-width: 500px;
width:expression(document.body.clientWidth &amp;amp;amp;amp;lt; 500? "500px": "auto" );
}

#box
{
max-width: 500px;
width:expression(document.body.clientWidth &amp;amp;amp;amp;gt; 500? "500px": "auto" );
}

و للإرتفاع

#box
{
min-height: 500px;
width:expression(document.body.clientHeight &amp;amp;amp;amp;lt; 500? "500px": "auto" );
}

#box
{
max-height: 500px;
width:expression(document.body.clientHeight  &amp;amp;amp;amp;gt; 500? "500px": "auto" );
}

[note]

متصفح IE يعتبر width هو اقل عرض min-width و لكن استخدام الخاصية السابقة يتيح لك تحديد العرض الفعلي و اقل عرض مسموح

[/note]

4- محاذاة عمودية Vertical align

استخدام الطريقة التاليةغير مجدي

vertical-align: middle

و لكن الحيلة تكمن في استخدام line-height . فعلى سبيل المثال لدينا زر ارتفاعه 50 px و أردنا توسيط النص فيه من أفقيا و عموديا نجعل قيمة الارتفاعل و ارتفاع الخط line-height متساويين

.button{
height :50px
line-height :50px;
}

5-حدد نمط مستقل لكل جهاز

يمكنك تحديد ملف css لكل غرض مثلا


<link type="text/css" rel="stylesheet" href="style.css" media="screen" />

لاحظ أننا حددنا نوع الوسيط media ب screen أس شاشة و بالتالي سيتم استدعاء هذا الملف لو كانت طريقة العرض باستخدام الشاشة كما يمكننا وضع التالي

<link type="text/css" rel="stylesheet" href="style.css" media="screen,printer" />

الأنواع المتوفر

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

6- صفّر إعدادت المتصفح

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

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

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/


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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

و اقوم باستدعائه أولا و قبل استدعاء ملف style الاصلي الخاص بموقعي .

7- أوامر مختلفة لمتصفح مختلف ( أو متخلف :) )

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

لإخفاء الأمر عن IE اسخدم Child selector بالشكل التالي و بالتالي يتم تنفيذ الأمر في كل المتصفحات ماعدا متصفح IE.

htmlbody p {
color:blue;
}

html>body .classname{
color:green
}

أو هاك النجمة و بالتالي يتم تنفيذ هذا الأمر على متصفح انترنت أكسبلورر و إخفائه عن جميع المتصفحات الآخرى


* html p {
color :black
}

* html .classname{
color:yellow;
}

كما قد تحتاج إلى إرسال الأوامر لمتصفح IE على نظام الويندوز و ليس IE على نظام الماك .


/* \*/
* html p {
color:blue
}
/* */

الطريقة الأخيرة و هي التي أفضلها لأني أجد ذلك اكثر تنظيما و هي استخدام ملف منفصل لإعدادات المتصفح IE و ذلك وضع جميع الأوامر التي نريد للمتصفح IE تنفيذها و يتم استدعاها في حال كان المتصفح هو انترنت اكسبلورر مثلا انا اسمي الملف ie.css و استخدم التالي لاستدعاءه .


<!--[if IE]>

<link rel="stylesheet" type="text/css" href="ie.css" />

< ![endif]-->

8- توسيط محتوى الصفحة

أجد هذه المشكلة في الكثير من المواقع فعند زيارة الصفحة يكون الصندوق الرئيسي للصفحة إما على يمين أو على يسار الصفحة و لكن من المفروض أن يكون وسط الصفحة

<div id="mainbox">

محتويات الصفحة
</div>


#mainbox{
margin:0 auto;
width:600px;
color :white
}

الامر المهم هنا هو marginو هو ما قام يتوسيط المحتوى .

9-استخدم الخواص المختصرة أو القصيرة

مثلا بدلا


.anyclass{
margin-top:10px;
margin-bottom:2px;
margin-right:15px;
margin-left:3px;
}
استخدم
.anyclass{
margin:10px 15px 2px 3px;
}

هناك خواص مختصره لـ font , background , border, margin

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

صفحة مطبوعة من : الدكتور نت: http://qatardr.net
عنوان الصفحة : http://qatardr.net/class/953
للطباعة اضغط هنا