تبلیغات
..:: مغز کامپیوتر ::.. - معرفی هفته: آیا مرورگر از این ویژگی پشتیبانی می‌کند؟
 
..:: مغز کامپیوتر ::..
کلید رهایی از تاریکی
درباره وبلاگ



مدیر وبلاگ : علی عبدیان
مطالب اخیر
نویسندگان
نظرسنجی
شما بیشتر به چه نوع مطلبی علاقه دارید ؟








آیا از پشتیبانی یک مرورگر از کدهای خود نگرانید؟ آیا از تکه تکه کد نوشتن خسته شده‌اید؟ نمی‌دانید کدام مرورگر چه کدهایی را پشتیبانی می‌کند؟ نگران نباشد Modernizr تمام این کارها را برای شما انجام می‌دهد و با تست‌هایی که انجام می‌دهد به شما می‌گوید که مرورگر کاربر چه ویژگی‌هایی را پشتیبانی می‌کند.

weekly-modernizr-postT.jpg

با استفاده از این ابزار ساده می‌توانید به راحتی برای تمام مرورگرها کد بنویسید و مطمئن باشد که برای همه به درستی نمایش داده می‌شود؛ در این پست به معرفی مختصر این پدیده نو ظهور خواهیم پرداخت.

در واقع مدرنایزر external link یک پلاگین جی‌کوئری است که مرورگر را برای ویژگی‌های مختلف 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 external link مراجعه کنید.






نوع مطلب : اخبار، 
برچسب ها :
لینک های مرتبط :
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر
نظرات پس از تایید نشان داده خواهند شد.


آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :