آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 27) : ویژگی image-rendering

در جلسه پیش در مورد ویژگی hyphens صحبت کردیم و مثالهایی رو براتون قرار دادیم. در این جلسه قصد داریم ویژگی image-rendering رو براتون توضیح بدیم. برای این ویژگی از این لینکبه عنوان منبع استفاده میکنیم.

ویژگی image-rendering

ویژگی image-rendering به مرورگر میگه که اگر تصویر مورد نظر از سایز و ابعاد اصلی خودش کوچکتر یا بزرگتر شد، چطور تصویر رو Render کنه و نمایش بده. بصورت پیش فرض همه مرورگرها زمانی که تصویر از ابعاد اصلی خودش فاصله میگیره و کوچک یا بزرگ میشه، یک سری فرآیند بر روی اون تصویر انجام میدن تا در خروجی نهایی و تصویری که به کاربر نمایش داده میشه، مشکل و اعوجاجی رو نداشته باشه و تا جایی که میشه تصویر پیکسل پیکسلی نشه. اما بعضی اوقات ما نمی خوایم این اتفاق بصورت پیش فرض بیوفته و شاید قصد داشته باشیم که زمانی که تصویر رو بزرگ میکنیم، حالت پیکسل پیکسلی اون باقی بمونه و نمایش داده بشه. در اینجا هست که ویژگی image-rendering اهمیت خودش رو نشون میده. برای این ویژگی سه مقدار رو میتونین قرار بدین:

• auto : این مورد مقدار پیش فرض این ویژگی محسوب میشه. این مقدار از الگوریتمهای استاندارد مرورگر استفاده میکنه و بهترین حالت برای نمایش تصویر Scale شده رو به وجود میاره.
• crisp-edges : در این حالت Contrast و رنگها و لبه های تصویر باقی خواهند ماند و هیچ حالت محو و نرم شدگی برای اونا اعمال نمیشه. مطابق با چیزی که درون مستندات بیان شده، این مقدار برای مقاصد Pixel Art به وجود اومده. چه تصویر رو کوچک کنید و چه اون رو بزرگ کنید، این مقدار اعمال میشه.
• pixelated : در این حالت همونطور که تصویر تغییر سایز میده، مرورگر استایل پیکسلی اون رو با استفاده از روش Nearest-Neighbour-Scaling حفظ میکنه. این مقدار فقط در زمانی که تصویر رو بزرگ کنیم، اعمال خواهد شد.

از این ویژگی میتونه برای تصاویر با تگ img و background-image و المنت Canvas اعمال بشه. میزان پشتیبانی مرورگرها از اون تقریبا خوب هست ولی در همه جا بصورت یکسان نیست.

همونطور که میبینید، در مرورگرهای مختلف نکات مختلفی رو داره. مثلا در مرورگر Chrome علاوه بر auto، فقط میتونین از مقدار Pixelated استفاده کنید و در مرورگر Firefox فقط میتونین از مقدار crisp-edges استفاده کنید. نکات دیگه ای هم داره که میتونین در قسمت Note سایت Caniuse اونا رو بخونید.

خب حالا میریم سراغ یک مثال تا شما رو بهتر با این ویژگی آشنا کنیم. در ابتدا تگ img زیر رو قرار میدیم و یک تصویر رو بصورت Data URI قرار میدیم:

src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAACdJREFUCB1j9Pf3/88ABMmMjCCKgQlMIhGMu3btAquY9mMDWBhDBQAutwfDrUlKzQAAAABJRU5ErkJggg==">

این تصویری که قرار دادیم 4 * 4 هست و از چهار رنگ تشکیل شده هست و اگر اون رو درون مرورگر باز کنیم خیلی کوچک هست و به سختی میشه اون رو دید.

حالا میایم با استفاده از CSS طول و ارتفاع تصویر رو برابر با 200 پیکسل قرار میدیم، بصورت زیر:

با اینکار خروجی در مرورگر Chrome بصورت زیر خواهد بود:

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

با اینکار خروجی در مرورگر Chrome بصورت زیر هست:

میبینید که تصویر حالت پیکسلی خودش رو حفظ کرده و مرورگر در اون مداخله ای نکرده. یک مقدار متوجه شدن مقادیر crisp-edges و pixelated سخت و گیج کننده هست. نکته ای که وجود داره اگر از مقدار crisp-edge استفاده کنید، همین حالت بالا رو در مرورگر Firefox نیز خواهید داشت. در این لینکیک ترکیب قرار داده شده که با استفاده از اون تقریبا همه مرورگرها رو تحت پوشش قرار میدیم:

بهمین راحتی.

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source