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 بالشكل التالي
123@import "yourpath/c-css.php";
طريفة الاستخدام :
يتم تخصيص اكواد CSS عن طريق وضع شرط if قبل الخاصية التي نريد تخصيصها لمستعرض معين .. بالشكل التالي :
| 1 2 3 4 5 6 7 8 9 | a.button_active, a.button_unactive { display: inline-block; [if lte Gecko 1.8] display: -moz-inline-stack; [if lte Konq 3.1] float: left; height: 30px; [if IE 5.0] margin-top: -1px; } |
اسماء المحركات و المستعرضات :
- 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 : الاصدارات الاحدث من الاصدار المدرج في الشرط
Thanks alot
بارك الله فيك اخي الكريم… على فكرة انا تعرفت جديد على مدونتك الرائعة وسأتابعها ان شاء الله.. كنت ابحث في جوجل عن اداة شرط لأخصص المستعرضات في موقعي الذي اعمل عليه عن طريق السي اس اس وعلى العموم انا استخدم مدونة ووردبريس.. وعندي القالب معقد بعض الشئ.. اصله اجنبي وقمت بتعريبه وكل شئ تمام والحمد لله…
اخي الكريم اريد منك خدمة يا ريت تقدر تساعدنا فيها.. وهي ان تقوم بشرح اكثر لهذه الخاصية وخصوصا كيفية استعمالها مع مدونة ووردبريس .. وهل نستطيع ذلك ؟؟
أيمن عويضة
اهلا بك أخي الكريم … أتمنى ان تجد الفائدة في تدويناتي باذن الله .
يمكنك استخدام التطبيق على قوالب ووردبريس بكل بساطة لانها تعتمد في بنيتها على ملفات css خارجية … شرحت في الاعلى كيفية استخدام التطبيق .. فقط قم بتضمين ملف c-css.php في ملف css الخاص بالقالب ثم بعد ذلك اكتب الشرط الخاص بالمستعرض قبل خواص css التي تريد تخصيصها لهذا المستعرض .
شكرا جزيلا لك اخي الكريم.. ربي يبارك فيك ويعطيك اكثر واكثر.. احسنت
اخي الكريم انا قمت بوضع الملف c-css.php في نفس المجلد الذي بداخله ملف style.css وكتبت الشرط في ملف الستايل المذكور… لكن الخطوة التي لم افهمها بالضبط هي اين اقوم بتضمين ملف c-css.php وما تقصد بـ ملف css الخاص بالقالب (هل هو نفسه style.css) وان كان الجواب بنعم فالذي فهمته انني اقوم بادراج امر import داخل ملف الـ style.css هل هذا صحيح ؟؟
ارشدني ارشدك الله الى جنات الفردوس
انتظرك اخي!!!
اهلا بك اخي ايمن ..
نعم عزيزي عليك تضمين ملف c-css.php في الملف الذي ستتسخدم فيه الشروط … اي لو استخدمت الشروط في ملف style.css فعليك تضمين الملف فيه .. ويتم التضمين كما ذكرت سابقا عن طريق وضع السطر التالي
@import “yourpath/c-css.php”;
بالتوفيق
شكرا جزيلا على حسن اخلاقك اخي الكريم
احسنت وان شاء الله جاري التجربة … سأخبرك لاحقا بالنتيجة!!
السلام عليكم ورحمة الله وبركاته
جميله اخي فؤاد هذه التدوينة ووكنت فعلا اسغدت منها وخصوصا في طريقة مستعرضات الجوالات
اخوك
ايهاب الغزال
ألف شكر عى الشرح الجميل ، فعلا تدوينة تستحق التقدير
شرح جميل و مميز