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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

واکنشگرا کردن تصاویر (جلسه 9) : ویژگی Type - قسمت اول

0 210 ۱۶ فروردین ۹۵

در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.Responsive-Design

تا این لحظه ما بر اینکه چطور تصاویر واکنشگرا رو با Performance بالاتری بوجود بیاریم تمرکز کردیم. این مورد ضروری هست، اما در آخر کار ما همون تصاویر قدیمی رو در صفحه خودمون داریم.

حالا وقتشه که در مورد موضوع جالبی بحث کنیم.

ویژگی Type

آیا تا به حال به این فکر کردید که ما بیشتر از تصاویر با فرمت jpg و png و gif استفاده میکنیم و خودمون رو به اونا محدود کردیم؟ آیا تا حالا بررسی کردید که چند درصد از مرورگر ها از فرمتهای جدید شبیه svg و webp پشتیبانی میکنن؟ اگر شما هم علاقه مند هستین که از فرمتهای دیگه هم استفاده کنید، با ادامه آموزش با ما باشید.picture-type

ویژگی type میتونه به المنت Source موجود در المنت Picture اضافه بشه و اجازه میده که انواع مختلف تصاویر رو مشخص کنید و مرورگر یکی از اونا رو انتخاب کنه و نمایش بده. به کد زیر توجه کنید:

اگر با تگ video که در HTML5 اضافه شده کار کرده باشید، با ویژگی type آشنایی دارید. این ویژگی در اینجا دقیقا همون کاربردی رو داره که در المنت video داشت.

اگر نوع یا type اولی که قرار داده شده توسط مرورگر پشتیبانی بشه، لود و نمایش داده میشه. اما اگر هیچکدام از انواع تعریف شده در المنتهای Source برای مورد قابل شناسایی و پشتیبانی نباشند، مرورگر تصویری که با استفاده از المنت img تعریف شده است رو لود میکنه.

مقداری که درون ویژگی Type قرار میگیره یک Mime-Type هست که نوع منبع یا عکس وارد شده در ویژگی srcset رو مشخص میکنه. اگر همزمان چند منبع و آدرس تصویر رو در srcset قرار بدیم، باید همه اونا همنوع باشند و از Mime-Type مورد نظر تبعیت کنن. همچنین شما میتونین ویژگی Type رو همزمان با ویژگی های Sizes و Media ترکیب کنید. همچنین باید بدونید که این ویژگی ها اختیاری هستند و میتونید هر جا که لازم داشتید از هر کدوم خواستید استفاده کنید.

ویژگی srcset برای همه المنتهای Source اجباری هست. همچنین دو نمونه توصیف گر Display Density و Width میتونن با ویژگی Type استفاده بشن.

آیا شما به ویژگی Media نیاز دارید؟

نباید برای همه موارد تصاویر واکنشگرا از المنت Picture استفاده کرد. این جمله هم درست هست و هم کمی گمراه کننده.

حالا که شما تقریبا تکنیک های Inline واکنشگرا کردن تصاویر رو میدونید، موارد زیر رو در نظر بگیرید:

  • بیشتر مواردی که در واکنشگرا کردن تصاویر به اونا برمیخورید از نوع مورد Resolution Switching هستند
  • فرض کنید که شما با یک مورد Resolution Switching مواجه بشید، شما قصد دارید و میخاید که مرورگر با توجه به شرایط بهترین تصویر رو لود کنه و نمایش بده. اینجا هست که ویژگی srcset کار رو برای شما انجام میده.
  • زمانی که شما از المنت Picture استفاده میکنید به مرورگر دیکته میکنید که کدوم تصویر رو لود کنه و نمایش بده.

بنابراین شما زمانی که قصد دارید بصورت همزمان از مورد Resolution Switching و ویژگی Type استفاده کنید، باید از المنت Picture استفاده کنید. در این موارد شما نیاز نیست که از ویژگی media استفاده کنید و باید اجازه بدید که مرورگر خودش انتخاب کنه.

در جلسات بعدی با ادامه مطالب در خدمتتون هستم.

موفق و سربلند باشید.

یا علی

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram