• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

Modernizr : تشخیص خصوصیات HTML5 و CSS3 مرورگر کاربران

2 3158 ۶ آذر ۹۳

در این مطلب میخوام کتابخونه ای از Javascript رو بنام Modernizr به شما معرفی کنم که میتونه بشما در طراحی سایتاتون کمک کنه. این ابزار بی نیاز از کتابخونه های دیگه مثل jQuery هست و مستقل کار میکنه. با استفاده از این ابزار میتونین متوجه بشین که مرورگر کاربری که داره از سایتتون بازدید میکنه ، از چه قابلیتهای HTML5 و CSS3 پشتیبانی میکنه.

modernizr

بزارین یک مثال براتون بزنم. بعنوان مثال border-radius که یکی از خصوصیتهای CSS3 هست رو در نظر بگیرین. caniuse

 

میبینید که در opera mini 8 و IE8 پشتیبانی نمیشه. برای دیدن اطلاعات بیشتر میتونین به CanIUse برید.

یعنی اگه من برای عناصرم border-radius قرار بدم ، در مرورگر IE8 نشون داده نمیشه. اگر خیلی واجب باشه که گوشه های عناصر در تمام مرورگرها گرد بشه ، یکی از راهاش اینه که در مرورگرهای قدیمی از عکس استفاده کنید. در این مواقع هست که Modernizr کمکمون میکنه و بهمون میگه که چه مرورگری از چه خصوصیاتی پشتیبانی میکنه و از چه خصوصیاتی پشتیبانی نمیکنه.

کاری که این کتابخونه برای ما انجام میده ، اینه که بصورت اتوماتیک خصوصیتها رو چک میکنه و با توجه به پشتیبانی و یا عدم پشتیبانی هر کدام ، یک کلاس متناظر به عنصر html اضافه میکنه و بعد از اون ما میتونیم از این کلاسها بهره ببریم.

چند راه برای دانلود و استفاده از modernizr وجود داره که من در پایین بهترینشو براتون توضیح میدم :

modern1

در ابتدا روی گزینه Download کلیک میکنیم تا به صفحه دانلود منتقل بشیم. در این صفحه میتونیم بصورت سفارشی ( Custom ) این کتابخونه رو دانلود کنید.

modern2

در این قسمت خصوصیتهایی که میخواین بررسی روی اونا انجام بشه رو انتخاب کنید. اگر روی Toggle کلیک کنید ، همه موارد تیک میخورن. چیزی رو که در قسمت 2 مشخص کردم رو حتما تیکشو بزنین ، چون بعدا بدردمون میخوره. من همه موارد HTML5 و CSS3 رو انتخاب کردم. بعد از اون که موارد مورد نظر رو انتخاب کردین ، باید روی دکمه Generate کلیک کنید و کمی منتظر بمونین تا کدهاشو در اختیارتون بزاره :

modern3

شما همچنین میتونین مشخص کنید که کدهای خروجی فشرده باشند یا خیر. اگر در قسمت 1 تیک رو نزنید ، نسخه فشرده شده در اختیارتون قرار میگیره :

modern4

حالا از دو راه میتونین از کدهای خروجی استفاده کنید :

  1. روی این گزینه کلیک کنید تا فایل براتون دانلود بشه
  2. میتونین کدهای موجود در این بخش رو کپی کنید و در هر جا خواستین کپی کنید.

من از راه دوم استفاده میکنم. ابتدا یک فایل با نام modernizr.custom.js میسازم و کدهای مورد نظر رو درونش کپی میکنم.

نحوه استفاده :

ابتدا یک فایل بنام index.html بسازید و کدهای زیر رو در اون قرار بدین :

میبینید که کدها خیلی ساده هستند. بهتره که Modernizr رو در قسمت head قرار بدین. اگر حالا فایل رو ذخیره کنید و اونو در مرورگر باز کنید ، یک صفحه خالی میبینید. برای اینکه کارایی Modernizr رو ببینید ، وارد Inspector مرورگرتون بشین :

modern5

میبینید که کلاسهای زیادی به عنصر html اضافه شده. حالا اگه همین فایل رو با IE8 باز کنم ، تصویری همانند تصویر زیر رو خواهید دید :

modern6

میبینید که در اینجا هم کلاسهای زیادی به عنصر html اضافه شده. میبینید که بیشتر کلاسها با no شروع شدن ، این به این معنیه که در این مرورگر این خصوصیت پشتیبانی نمیشه. شما میتونین از همین ویژگی که Modernizr در اختیارتون میزاره ، با توجه به مرورگر کاربر استایل دهی به سایتتون رو برای مرورگرهای متفاوت تغییر بدین. میبینید که در تصویر اول که مربوط به مرورگر Chrome هست ، عبارت borderradius نوشته شده و در IE8 عبارت no-borderradius نوشته شده. از اینجا متوجه میشیم که border-radius در IE8 پشتیبانی نمیشه.

حالا که اینارو فهمیدید ، میتونین از اونا به دو صورت استفاده کنید :

  • با استفاده از کدهای CSS
  • با استفاده از کدهای Javascript

با استفاده از کدهای CSS :

شما میتونین در قسمت head کدهای html خودتون و در قسمت style کدهای CSS مورد نظر رو بنویسید. یک مثال ساده براتون میزنم که میتونین از اون ایده بگیرین که کلا هدف Modernizr چیه و به چه دردی میخوره.

فرض کنید میخواید یه کدی بنویسید که در مرورگرهایی که از border-radius پشتیبانی میکنن ، رنگ بکگراند صفحه رو قرمز کنید و در مرورگرهایی که از این خصوصیت پشتیبانی نمیکنن ، رنگ بکگراند رو زرد کنید. برای اینکار میتونین بصورت زیر عمل کنید :

بهمین راحتی. این یک مثال خیلی ساده هست. حالا اگه فایل index.html رو در IE8 باز کنیم ، بکگراند زرد هست و اگر در آخرین نسخه ی Chrome باز کنیم ، بکگراند قرمز هست. بدلیل اینکه Chrome از border-radius پشتیبانی میکنه.

از بقیه خصوصیتها هم به همین روش میتونین استفاده کنید.

با استفاده از کدهای Javascript :

شما میتونین در انتهای کدهای html خودتون در قبل از تگ بسته body کدهای Javascript مورد نظر خودتون رو قرار بدین. بازم یک مثال ساده میزنم. فرض کنید میخوام کاری کنم که اگه در مرورگری رفتم و اون مرورگر از border-radius پشتیبانی نکنه ، یک alert بهم بده و بگه مرورگر شما از این خصوصیت پشتیبانی نمیکند.

برای اینکار میتونین از شئ Modernizr در javascript استفاده کنید. بصورت زیر :

بهمین راحتی. خروجی Modernizr.borderradius یا true هست یا false. اگر مرورگر پشتیبانی کنه true خواهد بود و اگه پشتیبانی نکنه ، false خواهد بود.

شما میتونین از هر ویژگی دیگه که میخواین ، بهمین صورت استفاده کنید.

نحوه استفاده از yep و nope :

شما میتونین فایلهای css و js خارجی رو طی شرایطی لود ( load ) کنید. برای اینکار شما باید از قبل فایلهای مورد نظر رو ساخته باشین و بعدا با توجه به مرورگر کاربر اونو لود کنید. فرض کنید دو تا فایل javascript ساختیم و اسم یکی از اونا support.js هست و دیگری no-support.js هست. درون فایل support.js کدهایی رو قرار میدم که مرورگرهایی که از خصوصیت border-radius پشتیبانی میکنن ، اونو اجرا کنن. در فایل no-support.js هم برعکس.

حالا برای اینکه بتونین اینکارو انجام بدین ، میتونین به روش زیر عمل کنید :

اول باید از Modernizr.load استفاده کنیم و بعد از اون یک object رو به اون پاس میدیم. این object میتونه چند ویژگی داشته باشه که من 3 تا از اونا رو توضیح میدم :

  • test : در مقابل این قسمت باید شرطمونو قرار بدیم. شرط ما در اینجا Modernizr.borderradius هست
  • yep : در مقابل این ویژگی آدرس فایلی رو قرار میدیم. این فایل زمانی به صفحه شما الصاق میشه که ، شرطی که در مقابل test نوشتید ، true باشه
  • nope : در مقابل این ویژگی آدرس فایلی رو قرار میدیم. این فایل زمانی به صفحه شما الصاق میشه که ، شرطی که در مقابل test نوشتید ، false باشه

حالا اگر فایل index.html رو در مرورگرهای متفاوت باز کنید ، متوجه فرقشون خواهید شد.

من در اینجا شما رو با بعضی از قابلیتهای Modernizr آشنا کردم. اگه علاقه دارین بیشتر در مورد این کتابخونه مطالعه کنید ، میتونین به سایت اصلی اون سر بزنید.

امیدوارم بدردتون بخوره.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    محمد علی شهیمیان(۷ آذر ۱۳۹۳)

    مطلب خوب و مفیدی بود موفق باشید

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram