المُعاصر

تحدثت في تدونية سابقه عن تطبيق 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

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

<script src="css_browser_selector.js" type="text/javascript"></script>

ثانيا : قم بكتابة أكواد CSS الخاصه مسبوقة بكود المستعرض ( و نظام التشغيل ان اردت ) مثال :

.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;
}

لمزيد من المعلومات
لتحميل التطبيق

الوسوم: conditional-css, css, javascript, مستعرضات ويب