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

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



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

واکنشگرا کردن تصاویر (جلسه 11) : استفاده از CSS - قسمت اول

0 220 ۱۸ فروردین ۹۵

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

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

این مورد بدلیل این هست که قبل از المنت Picture و ویژگی srcset هیچ روش خوب و مطلوب دیگه ای برای واکنشگرا کردن Inline نبود. وقتی که این امکانات به CSS هم اومده، چرا از اونا به همراه Media Query استفاده نکنیم و از قدرتشون بهره نبریم؟

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

image-set برای resolution switching

درست مثل زمانی که با روشهای قبلی کار میکردیم، یکی از اولین سوالاتی که نیاز هست که از خودمون بپرسیم اینه که با مورد Resolution Switching سرو کار داریم داریم یا با مورد Art Direction.

برای موارد Resolution Switching ما باید تلاش کنیم که راهی رو پیاده سازی کنیم که به مرورگر این حق رو بده که خودش تصمیم بگیره و بهترین تصویر رو متناسب با شرایط لود کنه.

برای اینکه به مرورگر گزینه هایی رو بدیم و اون یکی از اونا رو انتخاب کنه، میتونیم در CSS از image-set استفاده کنیم:image-set

شاید پیش خودتون متوجه تشابهاتی بین image-set و srcset بشید. در حقیقت srcset بعد از اومدن image-set به این شکل در اومد و تغییراتی در اون صورت گرفت.

همانند srcset در اینجا هم با یک لیست جداشونده با کاما روبرو هستیم و مقدار اول هر آیتم یک آدرس تصویر و مقدار دوم توصیف گر Display Density هست. اگر توصیف گر چگالی صفحه مشخص نشده باشه، بصورت پیش فرض برابر با یک در نظر گرفته میشه.

با این همه image-set از توصیف گرهای width پشتیبانی نمیکنه و برنامه اینه که در آینده اینکارو بکنن و اونو شبیه به srcset کنن.

همونطور که دیدید و خواهید دید image-set بیشتر مقدار برای background-image قرار میگیره و همچنین میتونه بعنوان مقدار برای هر ویژگی که تصویر رو قبول میکنه قرار بگیره.

image-set: یک استاندارد واکنش گرا کردن تصاویر فراموش شده

image-set بود که اولین بار برای تصاویر واکنشگرا مورد استفاده قرار گرفت و همونطور که بیان شد، srcset رو از روی این ویرایش کردن.

همونطور هم که در CSS راه و روشهایی با استفاده از Media Query وجود داره که کاربران از اونا برای واکنشگرا کردن استفاده میکنن و تقریبا هیچ کسی از image-set استفاده نمیکنه و نسبت به اون بی اعتنا هستند. جامعه واکنش گرا کردن تصاویر وقت زیادی رو برای توضیح اون نمیزاره. مرورگرها هم پشتیبانی شون رو از اون خوب نمیکنن. مرورگرهای Firefox و Microsoft تا بحال از این ویژگی پشتیبانی نمیکنن.

با این همه توضیحات پس چرا ما در مورد ویژگی که کاربرد زیادی نداره صحبت کردیم؟

دلیلش اینه که image-set روش و راه حل صحیح برای Resolution Switching هست. زمانی که این ویژگی بصورت فراگیر پشتیبانی بشه ما باید در موارد Resolution Swithching بجای picture و srcset از این ویژگی استفاده کنیم و بهره ببریم.

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

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

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram