Safari 27.3 Beta-ში დაემატა Adaptive Dark Mode ღია ვებსაიტებისთვის

WebKit-მა გამოაცხადა Adaptive Dark Mode Safari 27.3 beta-ში. 2019 წლის გაზაფხულზე Safari 12.1 გახდა პირველი ბრაუზერი, რომელმაც ვებზე მუქი რეჟიმის მხარდაჭერა შემოიღო, თუმცა ყველა ვებსაიტს მუქი ვერსია არ აქვს. Adaptive Dark Mode ღია ვებსაიტებს მუქი რეჟიმის მომხმარებლებისთვის ადაპტირებს, ხოლო საიტებს, რომლებიც მუქი რეჟიმის მხარდაჭერას აცხადებენ, უცვლელად ტოვებს.

როგორ მუშაობს Adaptive Dark Mode

ვებგვერდების ჩატვირთვების თითქმის 40% მუქ რეჟიმში მყოფ მომხმარებლებზე მოდის, თუმცა ჩატვირთვების მხოლოდ 10% უჭერს მას მხარს. Adaptive Dark Mode შექმნილია ამ სხვაობის შესამცირებლად. ის ჯერ ამოწმებს, აცხადებს თუ არა საიტი მუქი რეჟიმის მხარდაჭერას HTML-ში content light dark მნიშვნელობის მქონე meta color-scheme ტეგის მეშვეობით ან CSS-ში color-scheme: light dark-ით. თუ აცხადებს, ფუნქცია გვერდს არ ცვლის. სხვა საიტებისთვის Safari ფერებს აანალიზებს და აფასებს, უპირატესად ღიაა გვერდი თუ მუქი. გვერდი, რომელსაც ზოგადად მუქი ფონი და ღია ტექსტი აქვს, უცვლელი რჩება, ხოლო ღია გვერდი მუქზე ადაპტირდება.

ფუნქცია ფერს სიკაშკაშის ინვერსიით გარდაქმნის, ტონს კი ინარჩუნებს. ის მიზნად ისახავს ტექსტის საკმარის კონტრასტს, რომელიც WCAG 4.5:1 კონტრასტის კოეფიციენტით განისაზღვრება. ღია CSS გრადიენტები გარდაიქმნება, ხოლო Safari აფასებს სიტუაციას, რათა ღილაკები, სურათებზე განთავსებული ტექსტი და კურსორის მიტანისას ამომავალი მენიუები მოსახერხებელი დარჩეს. სურათების უმეტესობა უცვლელი რჩება, თუმცა SVG სურათების ფერები საჭიროებისამებრ შეიძლება გარდაიქმნას, ხოლო bitmap სურათებში მარტივი შავთეთრი ლოგოები ჰისტოგრამის ანალიზის შემდეგ შეიძლება ინვერსირდეს. ისეთი ეფექტები, როგორიცაა ნიღბები და mix-blend-mode, ზოგიერთ შემთხვევაში შეიძლება გამოირთოს, canvas-ის შიგთავსი კი უცვლელი რჩება.

რჩევები ვებსაიტებისთვის

WebKit-ის თქმით, გვერდები ზოგადად კარგად მუშაობს, თუ ისინი თანამედროვე ვებდეველოპმენტის პრაქტიკებს იცავენ. რეკომენდებული განახლებები მოიცავს bitmap ლოგოებისა და იკონების SVG-ით ჩანაცვლებას, მყარი ან გრადიენტული CSS ფერების გამოყენებას მრავალჯერ გამეორებული ფონური სურათების ნაცვლად, image sprite-ების თანამედროვე CSS-ით შეცვლას და კონტენტური სურათების გამჭვირვალე ფონით შექმნას. კონტეინერებში padding-ის დამატება ელემენტების გადატენვას თავიდან აიცილებს. გვერდის ნაწილზე კონკრეტული მუქი გამოცდილებისთვის დეველოპერებს შეუძლიათ ელემენტზე გამოიყენონ 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 გვირჩევს, დროდადრო შეამოწმოთ, რადგან ფუნქცია beta-ს პროცესში ვითარდება.

კონფიდენციალურობა და გამოხმაურება

WebKit-ის თქმით, Safari ვებსაიტებს ხელს უშლის იმის ამოცნობაში, თუ როდის არის Adaptive Dark Mode გამოყენებული, რადგან ამის ამოცნობა fingerprint-ისთვის გამოსადეგ ინფორმაციას დაუმატებდა. JavaScript, რომელიც CSS ფერებს ითხოვს, ავტორის მიერ მითითებულ საწყის ფერებს იღებს, ხოლო canvas-ში დახატული სურათები საწყისი სახით რენდერდება. დეველოპერებს, რომლებსაც კითხვები აქვთ, შეუძლიათ მიმართონ [email protected] მისამართზე, ხოლო მომხმარებლებს, რომლებიც აღმოაჩენენ საიტს, რომელიც კარგად არ მუშაობს, შეუძლიათ მოხსენება გაუგზავნონ Feedback Assistant-ს.

წყაროები: webkit.org