hits counter
الرئيسيةس .و .جبحـثالتسجيلدخول
دعم شباب الآن: لدينا 8248 موضوع ، و 1991 عضو ، آخر عضو مسجل : نغم سات فمرحباُ به.



طريقة عمل كود css لكل متصفح على حدى
avatar
THE QM
إدارة الموقع
 
المشاركات : 7657
القسم المفضل : تطوير المواقع
سجل في : 13/06/2008
النقاط : 22
موضوع: طريقة عمل كود css لكل متصفح على حدى



conditional-css يتيح
تخصيص اكواد CSS لتطبق على مستعرض معين دون الاخر .. فمثلا يمكنك تخصيص
طريقة عرض بعض العناصر لتظهر على IE بطريقة تختلف عن Firefox وكذلك تخصيص
عرض بعض العناصر لاصدار معين كـ IE6 … و بالتالي يمكن استخدامه لحل مشاكل
عدم ظهور الموقع بشكل سليم على مستعرض دون الاخر .



في الصورة السابقة تم تخصيص طريقه عرض صفحة معينة لتظهر بشكل مختلف على كل متصفح باستخدام conditional-css

لتجربة ذلك بنفسك .

طريفة التركيب :

conditional-css متوافر للاستخدام عن طريق php و c و C# … ساقتصر هنا على طريقة استخدام بواسطه php .

لاستخدام conditional-css عن طريق php ستحتاج الى دعم خادم موقعك الى php4 او php5 .


  • قم بتنزيل نسخة conditional-css من صفحة التحميل .
  • بعد فك الضغط عن المجلد قم بوضع الملف c-css.php الموجود داخل مجلد php مع ملفات css الخاصة بصفحتك .
  • قم باستيراد ملف c-css.php في ملف css المراد استخدام التطبيق فيه عن طريق @import بالشكل التالي
    الكود:
     [color=#A1A100]@import "yourpath/c-css.php";[/color]


طريفة الاستخدام :

يتم تخصيص اكواد CSS عن طريق وضع شرط if قبل الخاصية التي نريد تخصيصها لمستعرض معين .. بالشكل التالي :

الكود:
a[color=#6666FF].button_active[/color][color=#00AA00],[/color] a[color=#6666FF].button_unactive[/color] [color=#00AA00]{[/color]
[color=#000000][b]display[/b][/color][color=#00AA00]:[/color] inline-[color=#993333]block[/color];
[color=#00AA00][[/color]if lte Gecko [color=#CC66CC]1.8[/color][color=#00AA00]][/color] [color=#000000][b]display[/b][/color][color=#00AA00]:[/color] -moz-inline-stack;
[color=#00AA00][[/color]if lte Konq [color=#CC66CC]3.1[/color][color=#00AA00]][/color] [color=#000000][b]float[/b][/color][color=#00AA00]:[/color] [color=#000000][b]left[/b][/color];
[color=#000000][b]height[/b][/color][color=#00AA00]:[/color] [color=#993333]30px[/color];
[color=#00AA00][[/color]if IE [color=#CC66CC]5.0[/color][color=#00AA00]][/color] [color=#000000][b]margin-top[/b][/color][color=#00AA00]:[/color] [color=#993333]-1px[/color];
[color=#00AA00]}[/color]



اسماء المحركات و المستعرضات :


  • Gecko : للمستعرضات المبنية على محرك Gecko مثل Firefox
  • Webkit : للمستعرضات المبنية على محرك Webkit مثل Safari
  • Opera : للمستعرض Opera
  • IE : للمستعرض Internet Explorer
  • IEMac : لمستعرض Internet Explorer على نظام التشغيل Mac
  • Konq : للمستعرض Konqueror

مستعرضات الجوالات و المنصات الأخرى :


  • SafMob : لـلمستعرض Safari على iPhone / iPod Touch
  • IEmob: للمستعرض Internet Explorer على الهواتف الجواله .
  • PSP : لمنصه Playstation
  • NetF : Net Front

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


  • lt : الاصدارات الاقدم من الاصدار المحدد في الشرط
  • lte : الاصدار المدرج في الشرط او ما يسبقه
  • eq : الاصدار المدرج في الشرط
  • gte : الاصدار المدرج في الشرط او الاصدارات الاحدث
  • gt : الاصدارات الاحدث من الاصدار المدرج في الشرط



كن بالقرب :
follow me @HDagash


التعليقات
الزعيم
avatar
داعم متميز
داعم متميز

المشاركات : 85
القسم المفضل : لم يحدد
سجل في : 06/09/2011
النقاط : 10



  جزاك



 

تفضّل شارك بتعليقك

دعم شباب  :: تطوير المواقع والمنتديات :: تطوير المواقع-