الأرشيف ٢٠٠٨ - ٢٠١٢
تخصيص CSS للمستعرضات … باستخدام جافا سكريبت
أوه .. هذا المقال قديم ... ممممم قديم جداً
تحدثت في تدونية سابقه عن تطبيق conditional-css .. لتخصيص أكواد css للمستعرضات باستخدام php .. في هذه التدوينة سأستعرض تطبيق أخر لتخصيص أكواد css للمستعرضات و لاكن هذه المره باستخدام الجافا سكريبت .
CSS Browser Selector
تطبيق صغير الحجم لا يتعدي الكيلو بايت مبني باستخدام جافا سكريبت .. التطبيق يتيح تخصيص اكواد CSS لتظهر بشكل مختلف على مستعرض دون الأخر أو على نظام تشغيل دون الأخر .
أسماء المستعرضات المدعومه وكود استخدام كل منها :
- ie – Internet Explorer (جميع الاصدارات )
- ie8 – Internet Explorer 8.x
- ie7 – Internet Explorer 7.x
- ie6 – Internet Explorer 6.x
- ie5 – Internet Explorer 5.x
- gecko – Mozilla, Firefox (جميع الاصدارات), Camino
- ff2 – Firefox 2
- ff3 – Firefox 3
- opera – Opera (جميع الاصدارات)
- opera8 – Opera 8.x
- opera9 – Opera 9.x
- konqueror – Konqueror
- webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
- chrome – Google Chrome
اسماء نظم التشغيل وكود استخدام كل منها :
- win – Microsoft Windows
- linux – Linux
- mac – Mac OS
طريقة الاستخدام :
أولا : قم بتضمين ملف الجافا سكريبت في ترويسة الصفحة عن طريق الكود التالي :
1 2 3 | <script src="css_browser_selector.js" type="text/javascript"></script> |
ثانيا : قم بكتابة أكواد CSS الخاصه مسبوقة بكود المستعرض ( و نظام التشغيل ان اردت ) مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | .ie .example { background-color: yellow } .ie7 .example { background-color: orange } .gecko .example { background-color: gray } .win.gecko .example { background-color: red } .linux.gecko .example { background-color: pink } .opera .example { background-color: green } .konqueror .example { background-color: blue } .webkit .example { background-color: black } .example { width: 100px; height: 100px; } |
جميل جدًا أخي الكريم ..
الحقيقة أُعجبت بهذه الفكرة في تدوينتكم السابقة لكنِّي لا أستخدم الـPHP ، هذا التطبيق الَّذي يستخدم JS أسعدني كثيرًا .
شكرًا لكـ
حقا طريقة رائعة اخي الكريم… لا تحرمنا كل جديد.. احسنت
جيد جدا اخي المعاصر مكتبة صغير او تطبيق مثل هذا يحل مشكلة ممكن كانت تحتاج الكثير من السطور
سلام
جيد جدا اخي فؤاد .. افاد الله بك الناس
ارجوا منك ان تقوم بمراسلتي في اقرب فرصه
يعطيك الف عافيه
رائعة .. ساحاول عمل تطبيق صغير لها الان
تم 100% ..
مشكور
رائع جدا
رائع جدا