معرفی هفته: آیا مرورگر از این ویژگی پشتیبانی میکند؟
نوشته داود تراب زاده • 08 مهر 1390
آیا از پشتیبانی یک مرورگر از کدهای خود نگرانید؟ آیا از تکه تکه کد نوشتن خسته شدهاید؟ نمیدانید کدام مرورگر چه کدهایی را پشتیبانی میکند؟ نگران نباشد Modernizr تمام این کارها را برای شما انجام میدهد و با تستهایی که انجام میدهد به شما میگوید که مرورگر کاربر چه ویژگیهایی را پشتیبانی میکند.
با استفاده از این ابزار ساده میتوانید به راحتی برای تمام مرورگرها کد بنویسید و مطمئن باشد که برای همه به درستی نمایش داده میشود؛ در این پست به معرفی مختصر این پدیده نو ظهور خواهیم پرداخت.
در واقع مدرنایزر یک پلاگین جیکوئری است که مرورگر را برای ویژگیهای مختلف css3 و html5 آزمایش میکند و به تگ body کلاس مشخصی میدهد که به وسیله آن به راحتی میتوانید در کد css خود برای تمام شرایط کد خاص بنویسید. به طور مثال شما میخواهید از سایههای css استفاده کنید؛ همانطور که میدانید بعضی از مرورگرها از این ویژگی پشتیبانی نمیکنند. شما میخواهید برای حالتی که این ویژگی پشتیبانی میشود و حالتی که پشتیبانی نمیشود کد جدا بنویسید تا در تمام حالات به درستی نمایش داده شود.
در حالت معمول و بدون استفاده از این ابزار شما باید تمام مرورگرها را بشناسید و بدانید که کدام یک چه ویژگیهایی را پشتیبانی میکنند و بر اساس مرورگر کد بنویسید. اما با استفاده از مدرنایزر فقط کافی است از یک الگو خاص پیروی کنید و برای هر ۲ حالت کد بنویسید تا روی تمام مرورگرها به درستی نمایش داده شود به مثال زیر دقت کنید تا موضوع برایتان روشن شود.
بعد از بارگذاری کامل صفحه، اگر از ویژگی پشتیبانی شود مدرنایزر کلاس آن را اضافه میکند و اگر پشتیبانی نشود کلاس منفی آن را به body اضافه میکند. برای ویژگی text-shadow در صورت مثبت بودن کلاس textshadow و در صورت عدم پشتیبانی کلاس no-textshadow اضافه میگردد. حال شما برای انتخاب تگها در حالتی که این ویژگی توسط مرورگر پشتیبانی میشود کافی است به این صورت انتخاب کنید:
.textshadow #contaner و برای حالتی که این ویژگی پشتیبانی نمیشود:
.no-textshadow #container
به همین سادگی شما تمام حالت ممکن را پوشش دادهید. از این ابزار برای ویژگیهای html5 هم میتوان استفاده کرد به طور مثال :
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
این کد تست میکند که آیا ویژگی geolocation پشتیبانی میشود یا نه؛ اگر مثبت بود فایل geo.js لود میشود در غیر این صورت geo-polyfill.js لود خواهد شد.
برای آشنایی بیشتر و دریافت این ابزار میتوانید به سایت Modernizr مراجعه کنید.
M.Rahi
همیشه یکی از آرزوهام این بود که تمام کاربران از مرورگر فایرفاکس یا کروم استفاده کنند و همیشه آنها را به روز رسانی کنند.
اینجوری دیگه هیچوقت دغدغه اینو نداشتیم که بریم واسه افرادی که مثلا از IE استفاده میکنند کد مربوط بهش رو بنویسیم.
الان روی سیستمم فایرفاکس و کروم و IE نصبه و پروژه هام رو با این 3 مرورگر چک میکنم.
نمیدونم اپرا و سافاری هم بشون اضافه کنم یا نه ؟!
این برنامه ای هم که معرفی کردید آخرش باید کدها رو به 2 شکل بنویسی !
بیایید استفاده از مرورگر فایرفاکس و آپدیت همیشگی آن را ترویج دهیم.
امیرعباس
البته مادرنایزر پلاگین جی کوئری نیست و یه کتابخانه کاملا متمایز از جی کوئریه. میشه اون رو بدون جی کوئری هم استفاده کرد. سوای این قابلیت هایی که شما گفتید، یه قابلیت دیگه هم داخلش هم اون هم اینه که تگ های HTML5 رو به نسخه های قدیمی اینترنت اکسپلورر میشناسونه. تو مرورگرهای دیگه شما از هر تگی با هر اسمی که استفاده بکنید، مرورگر باهاش مشکلی نداره. مثلا تگ رو استفاده کنید و بهش کلاس بدید. تگ بدون مشکل کار می کنه منتها IE اینطوری نیست. اگر تگ تو لیست تگ های استاندارد HTML نباشه، نمیتونه نمایشش بده. یه تکه کد جاوا اسکریپت لازمه که تگ های HTML5 رو به IE بشناسونه. این کد داخل مادرنایزر هست.
مقداد
یه چیزی رو یادتون رفته بگید
فکر کنم مدرنایزر جز یکی از خدمات گوگله که اونم برای آی پی های ایرانی مسدود کرده
sajjad
سلام.
جناب M.Rahi اگر شما و امثال دیگر طراحان وب سایت خود رو برای نسخه 6 و 7 ie ببندن و کاربر رو به استفاده از یک مرورگر دیگه(دل بخواهی) ترغیب کنند ، حتما استفاده از این مرورگر ضعیف، کمتر خواهد شد