وبلاگینا

وب‌سایت تبلیغات و آگهی‌های اینترنتی

محلی مناسب برای درج و نمایش تبلیغات، آگهی‌ها و پیام‌های تجاری صاحبان کسب و کار

www.iranadpost.com
4

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

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

weekly-modernizr-postT.jpg

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

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

با اشتراک در خبرمایه‌ی وبلاگینا همیشه به‌روز باشید...

قبل از ارسال نظر:

  • توجه کنید که نظرتان در ارتباط با همین مطلب باشد. در غیر اینصورت می‌توانید از فرم تماس استفاده نمایید.
  • نظراتی که با کلمات کلیدی ثبت شوند، حاوی الفاظ زشت، تبلیغاتی، سیاسی و یا توهین به اشخاص باشند، منتشر نخواهند شد.
  • در فرم نظرات می‌توانید از برخی کدهای ساده HTML استفاده نمایید.
  • اصلا پینگلیش ننویسید!
​​