سافاری حالت تاریک تطبیقی ​​را در نسخه 27.3 معرفی می کند

توسط سایمون فریزر، لومینگ یین، لیلی اسپینیولاس، جوآن پن، ودا پریوال و جن سیمونز

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

در بهار 2019، Safari 12.1 اولین مرورگری بود که از حالت تاریک در وب پشتیبانی می کرد. بسیاری از مردم استفاده از حالت تاریک را دوست دارند، اما هر وب سایتی نسخه تاریک ندارد. تقریبا 40٪ از بارگذاری صفحات وب از کاربران در حالت تاریک است، و با این حال فقط 10٪ از بارگذاری صفحات از آن پشتیبانی می کنند. اگر به حالت تاریک علاقه دارید، احتمالا به سایتی برخورد کرده اید که احساس روشنی خاصی دارد. حالت تاریک تطبیقی ​​برای بستن این شکاف طراحی شده است و یک تجربه تاریک ثابت را در سراسر وب ارائه می دهد.

امروز می توانید آن را در نسخه بتای Safari 27.3 امتحان کنید. برای فعال کردن، ابتدا مطمئن شوید که ظاهر سیستم شما روی تیره تنظیم شده است. سپس به وب سایتی با پس زمینه روشن مرور کنید. سافاری پیش نمایشی از حالت تاریک تطبیقی ​​ارائه می دهد. روی «امتحان» ضربه بزنید.

برای وب‌سایت‌هایی که از حالت تاریک با <meta name="color-scheme" content="light dark"> در HTML یا color-scheme: تیره روشن در CSS پشتیبانی می‌کنند، حالت تاریک تطبیقی ​​چیزی را تغییر نمی‌دهد. برای بقیه وب، به سرعت صفحه را تجزیه و تحلیل می کند، به رنگ ها نگاه می کند و تخمین می زند که آیا عمدتا روشن است یا تاریک. اگر صفحه به طور کلی دارای پس‌زمینه تیره با متن روشن باشد، چیزی تغییر نمی‌کند. هنگامی که صفحه ای ظاهر روشن دارد، حالت تاریک تطبیقی ​​صفحه را با تاریک بودن تطبیق می دهد.

در هسته حالت تاریک تطبیقی، تغییر رنگ است. گاهی اوقات رنگ ها صرفا تزئینی هستند، در حالی که برخی اوقات معنای معنایی دارند. حالت تاریک تطبیقی ​​تعیین می‌کند که چه زمانی رنگ‌ها معکوس شوند تا عناصر قابل مشاهده باشند یا چه زمانی رنگ‌ها بدون تغییر باقی بمانند.

در حین ایجاد حالت تاریک تطبیقی، ماتریس رنگی را برای معکوس کردن درخشندگی رنگ‌ها و در عین حال حفظ رنگ ایجاد کردیم. برای تیره کردن پس‌زمینه‌های روشن و روشن کردن متن تیره استفاده می‌شود. هنگام تغییر رنگ متن، حالت تاریک تطبیقی ​​مطابق با نسبت کنتراست WCAG 4.5:1 به دنبال کنتراست کافی است. شیب های CSS روشن نیز به تاریک تبدیل می شوند.

حالت تاریک تطبیقی ​​قضاوت های دقیقی انجام می دهد تا محتوای تغییر یافته خوب به نظر برسد و قابل استفاده بماند: دکمه ها در برابر پس زمینه کنتراست دارند، متن روی تصاویر قابل مشاهده است و منوهای شناور واضح به نظر می رسند.

در مورد تصاویر نیز همین مراقبت را می کند. اکثر آنها بدون تغییر باقی می مانند و یکپارچگی خود را حفظ می کنند. اما بسیاری از نمادها و لوگوها وقتی رنگ پس زمینه پشت آنها معکوس شود، کنتراست را از دست می دهند. بنابراین حالت تاریک تطبیقی ​​تصاویر SVG را بررسی می کند و در صورت نیاز رنگ ها را تغییر می دهد. برای تصاویر بیت مپ، هیستوگرام های پیکسل را تجزیه و تحلیل می کند و آرم های سیاه و سفید ساده را معکوس می کند.

افکت‌هایی مانند ماسک‌ها و حالت ترکیبی می‌توانند نتایج نامطلوبی را روی عنصری ایجاد کنند که رنگ‌های آن تغییر یافته است، بنابراین در برخی موارد حالت تاریک تطبیقی ​​چنین جلوه‌هایی را خاموش می‌کند. همچنین، محتوای <canvas> بدون تغییر باقی می‌ماند، زیرا بوم‌ها دارای طیف وسیعی از محتوا هستند که پیش‌بینی آن دشوار است.

دقیقا به این دلیل است که حالت تاریک تطبیقی ​​در اعماق موتور مرورگر WebKit اتفاق می‌افتد، ما می‌توانیم راه‌های خلاقانه‌ای برای حل پیچیده‌ترین چالش‌ها پیدا کنیم، تغییرات را با سرعت و کارآیی بسیار بالا اعمال کنیم، و همه این‌ها به شدت از حریم خصوصی کاربر محافظت می‌کنند.

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

اگر سایت شما هنوز از تکنیک های قدیمی استفاده می کند، به روز رسانی های کوچک می تواند کمک کننده باشد. برای لوگوها و نمادها، تصاویر بیت مپ را با SVG تعویض کنید. از رنگ های ثابت یا گرادیان در CSS به جای تصاویر پس زمینه کاشی شده استفاده کنید. برای گوشه‌های گرد، سایه‌ها و حالت‌های دکمه، اسپرایت‌های تصویر را با CSS مدرن جایگزین کنید. به جای استفاده از رنگ پس‌زمینه صفحه در تصویر، تصاویر محتوا با پس‌زمینه شفاف ایجاد کنید. برای جلوگیری از شلوغی، بالشتک را به ظروف اضافه کنید.

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

برای کنترل کامل بر نحوه ظاهر سایت شما در حالت تاریک، پشتیبانی کامل را اضافه کنید. زمان فوق العاده ای برای انجام این کار است. هرگز آسان تر نبوده است.

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

توابع جدیدتر CSS مانند color-mix() و contrast-color() ، به علاوه تکنیک های محبوب برای سازماندهی سیستم های طراحی با متغیرهای CSS گزینه ها و انعطاف پذیری بیشتری را ارائه می دهند.

مطمئن شوید که با استفاده از متا تگ طرح رنگ در سر HTML خود و/یا با تنظیم ویژگی color-scheme روی :root یا body در CSS خود، پشتیبانی از حالت تاریک را اعلام کنید. برای تزریق این اطلاعات بعدا از طریق جاوا اسکریپت صبر نکنید. این بهترین روش به شما کمک می کند تا مطمئن شوید که سایت شما در سریع ترین زمان ممکن به درستی ارائه می شود.

اگر می‌خواهید برنامه وب یا وب‌سایت شما با حالت تاریک تطبیقی ​​تغییر نکند، می‌توانید با استفاده از طرح رنگ ارتباط برقرار کنید. تگ HTML <meta name="color-scheme" content="light only"> به مرورگرها اجازه می دهد بدانند که 1) این صفحه از حالت نور پشتیبانی می کند و 2) فقط باید در حالت نور نمایش داده شود. قانون طرح رنگ: فقط نور همان کار را انجام می دهد، اما با انعطاف پذیری CSS، به شما امکان می دهد فقط عناصر خاصی را در صفحه هدف قرار دهید — یا البته، می توانید کل صفحه را با :root { } هدف قرار دهید. (توجه: کلمه کلیدی "تنها" در Safari 27.3 beta 1 پشتیبانی نمی شود.

با پیشرفت حالت تاریک تطبیقی ​​در فرآیند بتا، دوباره بررسی کنید.)

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

در نتیجه، سافاری از تشخیص زمان استفاده از حالت تاریک تطبیقی ​​توسط وب‌سایت‌ها جلوگیری می‌کند. جاوا اسکریپتی که رنگ های CSS را پرس و جو می کند، رنگ های نوشته شده اصلی را دریافت می کند، نه رنگ های تبدیل شده را. هر تصویری که بر روی بوم کشیده شود به شکل اصلی خود ارائه می شود.

اگر یک وب‌سایت یا برنامه وب را مدیریت می‌کنید و می‌خواهید در مورد نحوه تطبیق حالت تاریک تطبیقی ​​با پروژه خود صحبت کنید، به راحتی می‌توانید با آدرس web-evangelist@apple.com تماس بگیرید.

اگر حالت تاریک تطبیقی ​​را به‌عنوان کاربر امتحان می‌کنید و سایتی را پیدا می‌کنید که به خوبی کار نمی‌کند، خوشحال می‌شویم گزارشی را با دستیار بازخورد ارسال کنید. (درباره ارسال بازخورد بیشتر بیاموزید).