Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

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

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

Post Pic

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;lt; 500? "500px": "auto" );
}

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

و للإرتفاع

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

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

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

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" />

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

  • all: كل الأجهزة
  • aural : اجهزة الصوتية
  • braille :جهاز بريل لذوي الاحتاجات الخاصة
  • embossed : طابعات بريل
  • handheld: جهاز صغير محمول
  • print : نسخة طباعة
  • projection : جهاز عرض
  • screen : شاشة
  • tv : جهاز تلفاز

و حددنا طريقة العرض ب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

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

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

أوسمة : , ,

تعليقات الزوار (5)

[+] أضف تعليقك من فضلك



  1. قياسي كتب:

    ما شاء الله , بارك الله فيك على هذه المعلومات المميزة.
    و أتمنى أن يكون هناك سلسلة على هذا الشكل سهلة و سريعة التطبيق.
    بالنسبة للاكسبلورر دائماً معاناة المصممين تكمن مع غباء هذا المتصفح و دعمه الضعيف نسبياً للمعايير القياسية , و لكن الامور تتحسن ان شاء الله و بعد التقدم الطفيف في الاكسبلورر 6 جاء الاكسبلورر 7 بدعم أفضل و الامل معلق بالاكسبلورر 8 أن يدعم الcss 2.1 بشكل كامل و مع آمال بدعم جزئي لcss 3 كما قرأت في الموقع الرسمي له.
    و شكراً.


  2. شكرا لك أخي قياسي و إن شاء الله نكون عند حسن الظن .


  3. مازن كتب:

    نجمة الانجاز و وسام التميز
    الله يرضي عليك وعلي والديك


  4. جزاك الله كل خير اخ مازن على الدعوة الرائعة و شكرا لك


  5. خالد كتب:

    جزاك الله كل خير على هذه النصائح القيمة
    حقا كنت محتاجا لها كثيراً
    تسلم ومنور