Geri qayıt

Safari 27.3 Beta işıqlı saytlar üçün Adaptive Dark Mode əlavə edir
SiTech AI Team3 dəq oxu

Safari 27.3 Beta işıqlı saytlar üçün Adaptive Dark Mode əlavə edir

WebKit Safari 27.3 beta versiyasında Adaptive Dark Mode funksiyasını elan edib. Funksiya işıqlı saytları tünd rejimdə olan istifadəçilər üçün uyğunlaşdırır, tünd dəstəyi elan edən saytları isə dəyişməz saxlayır.

WebKit Safari 27.3 beta versiyasında Adaptive Dark Mode funksiyasını elan edib. Safari 12.1 2019-cu ilin yazında internetdə tünd rejimi dəstəkləyən ilk brauzer oldu, lakin hər vebsaytın tünd versiyası yoxdur. Adaptive Dark Mode işıqlı saytları tünd rejimdə olan istifadəçilər üçün uyğunlaşdırır, tünd dəstəyi elan edən saytları isə dəyişməz saxlayır.

Adaptive Dark Mode necə işləyir

Veb səhifə yükləmələrinin təxminən 40%-i tünd rejimdə olan istifadəçilərdən gəlir, halbuki yükləmələrin yalnız 10%-i bunu dəstəkləyir. Adaptive Dark Mode bu boşluğu bağlamaq üçün hazırlanıb. O, əvvəlcə saytın tünd rejim dəstəyini HTML-də content light dark olan meta color-scheme teqi və ya CSS-də color-scheme: light dark vasitəsilə bildirib-bildirmədiyini yoxlayır. Əgər bildirirsə, funksiya səhifəni dəyişmir. Digər saytlar üçün Safari rəngləri təhlil edir və səhifənin əsasən işıqlı və ya tünd olduğunu təxmin edir. Ümumiyyətlə tünd fon və işıqlı mətnə malik səhifə dəyişməz qalır, işıqlı səhifə isə tündə uyğunlaşdırılır.

Funksiya işıqlığı tərsinə çevirməklə rəngləri dəyişdirir, rəng tonunu isə saxlayır. O, WCAG 4.5:1 kontrast nisbəti ilə müəyyən edilən kifayət qədər mətn kontrastına nail olmağı hədəfləyir. İşıqlı CSS qradiyentləri transformasiya olunur və Safari düymələrin, şəkillər üzərindəki mətnin və kursorun üzərinə gəlməsi ilə açılan menyuların istifadə edilə bilən qalması üçün qərarlar verir. Əksər şəkillər dəyişməz qalır, lakin SVG şəkillərdə lazım olduqda rənglər transformasiya oluna bilər və bitmap şəkillərdə sadə qara və ağ loqolar histoqram təhlilindən sonra tərsinə çevrilə bilər. Maskalar və mix-blend-mode kimi effektlər bəzi hallarda söndürülə bilər, canvas məzmunu isə dəyişməz qalır.

Vebsaytlar üçün tövsiyələr

WebKit bildirir ki, səhifələr müasir veb inkişaf təcrübələrinə əməl etdikdə ümumiyyətlə yaxşı işləyir. Təklif olunan yeniləmələrə bitmap loqo və ikonların SVG ilə əvəz edilməsi, plitəli fon şəkilləri əvəzinə bərk və ya qradiyent CSS rənglərindən istifadə, şəkil spritelərinin müasir CSS ilə əvəz edilməsi və şəffaf fonlu məzmun şəkillərinin yaradılması daxildir. Konteynerlərə padding əlavə etmək sıxlığın qarşısını ala bilər. Səhifənin bir hissəsində xüsusi tünd təcrübə üçün tərtibatçılar elementə color-scheme: light dark tətbiq edib öz tünd üslublarını əlavə edə bilərlər.

Tam nəzarət üçün saytlar geniş yayılmış veb texnologiyaları ilə tam tünd rejim dəstəyini elan edə bilər, o cümlədən color-scheme meta teqi, :root { color-scheme: light dark }, prefers-color-scheme media sorğuları, picture source elementləri və light-dark(). color-mix() və contrast-color() kimi daha yeni CSS funksiyaları, həmçinin CSS dəyişən texnikaları daha çox seçim təqdim edir. WebKit dəstəyin sonradan JavaScript ilə yeridilməsi əvəzinə HTML və ya CSS-də elan edilməsini tövsiyə edir.

Yalnız işıqlı qalmalı olan saytlar color-scheme: light only funksiyasından HTML meta teqi və ya CSS vasitəsilə istifadə edə bilər. only açar sözü Safari 27.3 beta 1-də dəstəklənmir. WebKit funksiya beta prosesi boyunca inkişaf etdikcə yenidən yoxlamağı tövsiyə edir.

Məxfilik və rəy

WebKit bildirir ki, Safari vebsaytların Adaptive Dark Mode-un tətbiq olunduğunu aşkar etməsinin qarşısını alır, çünki bunu aşkar etmək barmaq izi çıxarıla bilən məlumat əlavə edərdi. CSS rənglərini sorğulayan JavaScript orijinal müəllif rənglərini alır və canvas-a çəkilən şəkillər orijinal formada göstərilir. Sualları olan tərtibatçılar [email protected] ilə əlaqə saxlaya bilər, yaxşı işləməyən sayt tapmış istifadəçilər isə Feedback Assistant vasitəsilə hesabat təqdim edə bilər.

Mənbələr: webkit.org

SiTech

SiTech — AI ilə gücləndirilmiş veb hazırlanması

Sürətli və müasir saytlar qurur, AI-ı real biznes proseslərinə gətiririk. Layihəniz və ya sualınız var? Kömək etməyə hazırıq.