Safari 27.3 Beta տարբերակն ավելացնում է հարմարվող մութ ռեժիմ բաց կայքերի համար

WebKit ընկերությունը հայտարարեց Adaptive Dark Mode հատկությունը Safari 27.3 beta տարբերակում։ Safari 12.1 տարբերակը 2019 թվականի գարնանը դարձավ առաջին դիտարկիչը, որը վեբում աջակցեց մութ ռեժիմին, բայց ոչ բոլոր կայքերն ունեն մութ տարբերակ։ Adaptive Dark Mode հատկությունը բաց կայքերը հարմարեցնում է մութ ռեժիմում օգտատերերի համար, իսկ մութ ռեժիմի աջակցություն հայտարարած կայքերը թողնում է անփոփոխ։

Ինչպես է գործում Adaptive Dark Mode հատկությունը

Վեբ էջերի բեռնումների գրեթե 40 տոկոսը գալիս է մութ ռեժիմում օգտատերերից, իսկ միայն 10 տոկոսն է աջակցում դրան։ Adaptive Dark Mode հատկությունը նախատեսված է այդ բացը փակելու համար։ Այն նախ ստուգում է, արդյոք կայքը ազդանշանում է մութ ռեժիմի աջակցություն HTML-ում meta color-scheme թեգով՝ content light dark արժեքով, կամ CSS-ում color-scheme: light dark հայտարարությամբ։ Եթե այդպես է, հատկությունը էջը չի փոխում։ Մյուս կայքերի համար Safari-ն վերլուծում է գույները և գնահատում, թե էջը հիմնականում բաց է, թե մութ։ Ընդհանուր առմամբ մութ ֆոն և բաց տեքստ ունեցող էջը չի փոփոխվում, իսկ բաց էջը հարմարեցվում է մութ ռեժիմին։

Հատկությունը գույները փոխակերպում է՝ շրջելով պայծառությունը, բայց պահելով երանգը։ Այն նպատակ ունի ապահովել բավարար տեքստային կոնտրաստ՝ ըստ WCAG 4.5:1 կոնտրաստի հարաբերակցության։ Բաց CSS գրադիենտները փոխակերպվում են, և Safari-ն դատողություններ է կատարում, որպեսզի կոճակները, պատկերների վրայի տեքստը և մկնիկը վրան պահելիս բացվող մենյուները մնան օգտագործելի։ Պատկերների մեծ մասը չի փոփոխվում, բայց SVG պատկերների գույները կարող են փոխակերպվել, երբ անհրաժեշտ է, իսկ bitmap պատկերները հիստոգրամի վերլուծությունից հետո կարող են ունենալ շրջված պարզ սև և սպիտակ լոգոներ։ Այնպիսի էֆեկտներ, ինչպիսիք են դիմակները և mix-blend-mode-ը, որոշ դեպքերում կարող են անջատվել, իսկ canvas-ի բովանդակությունը չի փոփոխվում։

Խորհուրդներ կայքերի համար

WebKit ընկերությունը ասում է, որ էջերը սովորաբար լավ են աշխատում, եթե հետևում են ժամանակակից վեբ մշակման պրակտիկաներին։ Առաջարկվող թարմացումների թվում են bitmap լոգոների և պատկերանշանների փոխարինումը SVG-ով, համասեռ կամ գրադիենտ CSS գույների օգտագործումը սալիկավոր ֆոնային պատկերների փոխարեն, պատկերային սպրայթների փոխարինումը ժամանակակից CSS-ով և թափանցիկ ֆոնով բովանդակային պատկերների ստեղծումը։ Կոնտեյներներին ներքին լուսանցք ավելացնելը կարող է կանխել տարրերի խցկվածությունը։ Էջի մի մասի համար հատուկ մութ տեսք ստանալու համար մշակողները կարող են color-scheme: light dark կիրառել տարրի վրա և ավելացնել իրենց սեփական մութ ոճերը։

Լիակատար վերահսկողության համար կայքերը կարող են հայտարարել մութ ռեժիմի լիակատար աջակցություն՝ լայնորեն հասանելի վեբ տեխնոլոգիաներով, այդ թվում՝ color-scheme meta թեգով, :root { color-scheme: light dark } հայտարարությամբ, prefers-color-scheme մեդիա հարցումներով, picture source տարրերով և light-dark() ֆունկցիայով։ Ավելի նոր CSS ֆունկցիաներ, ինչպիսիք են color-mix() և contrast-color()-ը, ինչպես նաև CSS փոփոխականների տեխնիկաները, տալիս են ավելի շատ տարբերակներ։ WebKit ընկերությունը խորհուրդ է տալիս աջակցությունը հայտարարել HTML-ում կամ CSS-ում, այլ ոչ թե ավելի ուշ ներմուծել JavaScript-ով։

Այն կայքերը, որոնք պետք է մնան միայն բաց, կարող են օգտագործել color-scheme: light only՝ թե՛ HTML meta թեգով, թե՛ CSS-ով։ only բանալի բառը չի աջակցվում Safari 27.3 beta 1 տարբերակում։ WebKit ընկերությունը ասում է վերադառնալ և ստուգել, քանի որ հատկությունը կզարգանա բետա գործընթացի ընթացքում։

Գաղտնիություն և հետադարձ կապ

WebKit ընկերությունը ասում է, որ Safari-ն թույլ չի տալիս կայքերին հայտնաբերել, թե երբ է կիրառվել Adaptive Dark Mode հատկությունը, քանի որ դրա հայտնաբերումը կավելացներ մատնահետքային տեղեկատվություն։ CSS գույները հարցող JavaScript-ը ստանում է բնօրինակ հեղինակային գույները, իսկ canvas-ում գծված պատկերները մնում են իրենց բնօրինակ տեսքով։ Հարցեր ունեցող մշակողները կարող են կապվել [email protected] հասցեով, իսկ օգտատերերը, որոնք գտնում են վատ աշխատող կայք, կարող են զեկուցում ներկայացնել Feedback Assistant հավելվածով։

Աղբյուրներ՝ webkit.org