برنامه نویسی 172 بازدید

شما که این مقاله را برای مطالعه انتخاب کرده‌اید، احتمالاً با قالب‌های مختلف رنگی موجود در CSS مانند کلیدواژه‌ها، سیستم مختصات مکعبی RGB یعنی hexadecimal() ،#-rgb و ()rgba و سیستم مختصات استوانه‌ای HSL یعنی ()hsl و ()hsla آشنا هستید. در این مقاله با تکنیک های پیشرفته رنگ آمیزی در CSS آشنا خواهیم شد. بدین ترتیب ساختارهای جدیدتر رنگی و تکنیک‌های انسجام در مقیاس را برای ایجاد رنگ‌های مستقل از دستگاه بررسی می‌کنیم.

نسخه‌های مختلف ساختارهای موجود

شما به احتمال زیاد با واریاسیون‌های ساختارهای زیر برای استفاده از رنگ‌ها آشنا هستید.

کلیدواژه‌ها

# Hexadecimal

RGBA

HSL[A]

واریاسیون‌های ساختار جدیدتر

در این بخش برخی بهینه‌سازی‌های ساختاری که روی تابع color در CSS انجام یافته است را بررسی می‌کنیم.

تکنیک های پیشرفته رنگ آمیزی در CSS

مقدار آلفا در تابع‌های RGB و HSL

امروزه برای افزودن مقدار آلفا به رنگ‌ها دیگر نیازی به تابع‌های ()rgba یا ()hsla نداریم.

عدم الزامی بودن استفاده از کاما

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

نمایه‌های رنگی برای رنگ‌های مستقل از دستگاه

آیا می‌دانید آن رنگی که در CSS می‌نویسید ممکن است آن رنگی که کاربران می‌بینند نباشد؟

رنگ‌ها در CSS از چیزی به نام «نمایه رنگی» (color profile) استفاده می‌کنند. در مدل رنگی RGB می‌توانیم 16.7 میلیون رنگ مختلف را نمایش دهیم. اغلب کاربران نمایشگرهایی با نمایه رنگی sRGB دارند، اما اگر از دستگاه‌های مک یا نمایشگرهای مدرن استفاده کنید، ممکن است نمایه‌هایی مانند Display P3 یا Adobe RGB استفاده کنند که از طیف رنگی بیشتری نسبت به sRGB پشتیبانی می‌کنند و به کاربران امکان مشاهده رنگ‌های درخشان‌تر و براق‌تر نسبت به نمایشگر sRGB معمولی را می‌دهند.

چندین نمایه رنگی وجود دارند که گاموت‌های وسیع‌تری از رنگ را پشتیبانی می‌کند و از آن جمله Adobe RGB, Prophoto RGB, Rec-2020 و غیره هستند. بنابراین رنگ‌هایی که در زمان توسعه اپلیکیشن‌ها در CSS می‌نویسید دقیقاً همان رنگ‌هایی نیستند که کاربران می‌بینند و همه چیز به نمایه رنگی مورد استفاده از سوی نمایشگر کاربر بستکی دارد. CSS از نمایه‌های رنگی پشتیبانی نمی‌کند و از این رو توسعه‌دهندگان مجبور هستند خود را به طیف رنگی sRGB محدود کنند. اما این اوضاع در آینده تغییر خواهد یافت.

معرفی تابع ()color

تابع ()color امکان می‌دهد که نمایه رنگی را قبل از یک رنگ تعریف کنیم و به این ترتیب توسعه‌دهندگان می‌توانند رنگ‌های مستقل از دستگاه را تعریف کنند. طرز کار به صورت زیر است:

در ادامه فهرستی از نمایه‌های رنگی که در CSS سطح 4 پشتیبانی می‌شود را می‌بینید:

  • srgb (Default)
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec-2020

اگر می‌خواهید از یک نمایه رنگی مدرن استفاده کنید، می‌توانید از color-profile@ برای ایمپورت نمایه و بقیه کارها استفاده کنید. روش کار به صورت زیر است:

به خاطر بسپارید که تابع ()color در حال حاضر تنها در مرورگرهای Safari پشتیبانی می‌شود و شاید به زودی شاهد پشتیبانی آن در مرورگرهای کروم و فایرفاکس نیز باشیم. اگر می‌خواهید از ()color استفاده کنید و یک fallback نیز داشته باشید، می‌توانید به صورت زیر عمل کنید:

اگر می‌خواهید با استفاده از جاوا اسکریپت تشخیص دهید که آیا نمایشگرتان از نمایه رنگی پشتیبانی می‌کند یا نه می‌توانید از کد زیر بهره بگیرید:

تکنیک های پیشرفته رنگ آمیزی در CSS

چه لزومی به استفاده از نمایه رنگی در CSS وجود دارد؟

در واقع شما الزامی برای این کار ندارید. نمایه‌های رنگی یک قابلیت جدید CSS هستند و در حال حاضر تنها در سافاری (و نه حتی کروم) پشتیبانی می‌شوند. نمایه‌های رنگی به شما امکان می‌دهند که از مزیت نمایشگرهای مدرن که از گاموت وسیع‌تری پشتیبانی می‌کنند بهره‌مند شوید و تجربه کاربری بهتری رقم بزنید.

گاهی اوقات تفاوت رنگ‌ها به زحمت قابل تشخیص است و گاهی اوقات این تفاوت زیاد است. این مقایسه تعاملی (+) تفاوت بین نمایه‌های رنگی مختلف را روی نمایشگرها به شما نشان می‌دهد.

سخن پایانی

امیدواریم این مقاله با عنوان معرفی تکنیک‌های پیشرفته رنگ‌آمیزی در CSS به شما کمک کرده باشد با تازه‌های این حوزه آشنا شوید و بتوانید از آن‌ها در پروژه‌های خود بهره بگیرید.

اگر این مطلب برای شما مفید بوده است، آموزش‌ها و مطالب زیر نیز به شما پیشنهاد می‌شوند:

«میثم لطفی» دانش‌آموخته ریاضیات و شیفته فناوری به خصوص در حوزه رایانه است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار نیز با مجله فرادرس همکاری دارد.

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

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