CSS-ის ახალი შესაძლებლობები ვებ-დიზაინს მართკუთხედებისგან ათავისუფლებს

ვებ-გვერდების 30-წლიანი დამოკიდებულება მართკუთხა განლაგებაზე ნელ-ნელა სუსტდება. CSS-ის სამი შედარებით ახალი შესაძლებლობა, ფუნქცია shape() და თვისებები border-shape და corner-shape, დიზაინერებს უფრო ფართო პალიტრას აძლევს იმ გვერდების ასაწყობად, რომლებიც ერთმანეთზე დაწყობილი ყუთებისგან აღარ შედგება.

SVG-იდან shape()-მდე

1996 წელს World Wide Web Consortium-მა განლაგების პირველი სტანდარტი გამოაქვეყნა. მაშინ გვერდები გაზეთებისა და ჟურნალების ბადეზე დაფუძნებულ დიზაინს იმეორებდა: ბრაუზერები ადრეულ ეტაპზე იყო, გრაფიკული აპარატურა სუსტი, და ტექსტის მართკუთხედში ჩამოსხმა ყველაზე უსაფრთხო გზა ჩანდა.

ბოქსურობა პირველად SVG-მა შეარყია: რიცხვითი კოორდინატებით დეველოპერებს მოსახვევების, ტალღოვანი ხაზებისა და ნებისმიერი ფორმის დახატვა შეეძლოთ, თუმცა ის მაინც გვერდზე მოთავსებულ canvas-ზე რჩებოდა და განლაგებას CSS მართავდა. path() ფუნქციამ ეს ორი სამყარო დააკავშირა და SVG პირდაპირ CSS-ში ჩასვა, მაგრამ გვერდის ზომის ცვლილებაზე არ რეაგირებდა და ცვლადებს ან CSS-ის საზომ ერთეულებს არ იცნობდა: ყველა კოორდინატი პიქსელებში უნდა ჩაწერილიყო.

რას ცვლის shape() და border-shape

shape() სასურველი ფორმის ან ტრაექტორიის გეომეტრიული კოორდინატების ერთობლიობაა, რომელიც SVG-ის ნაცვლად ადაპტურ CSS სინტაქსს ეყრდნობა. არსებულ clip-path თვისებასთან ერთად ის ბილეთის ფუძეების, ჩატის ბუშტებისა და სხვა არამართკუთხა ელემენტების შესაქმნელად გამოიყენება.

უფრო ახალი თვისება border-shape shape()-ში განსაზღვრულ კოორდინატებს თავად გვერდის საზღვრებზე ავრცელებს. კოორდინატები ერთხელ უნდა აღწერო, საზღვრები კი რენდერინგის ადრეულ ეტაპზე იკვეთება და არა ბოლოს, ამოჭრის მეშვეობით. „CSS-ის ფორმებზე საზღვრების დასმა ბავშვის თამაშად იქცევა“, წერს CSS დეველოპერი Temani Afif, რომელიც თავს CSS ჰაკერს უწოდებს, CSS-Tricks-ზე გამოქვეყნებულ გაკვეთილში.

Afif-ის დემონსტრაციები ერთი კონტურით არ შემოიფარგლება: დიზაინერს გვერდი ნებისმიერ ფორმად შეუძლია მოჭრას, საზღვრები საზღვრებში ჩადოს და გარე და შიდა ფორმებს შორის არსებული სივრცე ამოჭრილი ფიგურით შეავსოს, მაგალითად კვადრატულ ყუთში გახსნილი გული მხოლოდ CSS-ით.

corner-shape და ბრაუზერების მხარდაჭერა

ვისაც კოორდინატების ხელით აღწერა არ სურს, მას თანმხლები თვისება corner-shape წინასწარ განსაზღვრულ ნიმუშებს სთავაზობს. მათი უმეტესობა სტანდარტული ყუთის ვარიაციაა: მომრგვალებული და დახრილი კიდეები, ჩაღრმავებები, ჩამკეტები და „სქვერქლი“ სახელით ცნობილი ფორმა.

caniuse.com-ის მონაცემებით, shape()-ს ამჟამად ყველა მთავარი ბრაუზერი უჭერს მხარს. border-shape და corner-shape კვლავ ინერგება და ექსპერიმენტულად ითვლება, თუმცა ამჟამინდელ Chrome-ში, Edge-ში და Opera-ში ეს სტანდარტი უკვე მუშაობს. დარჩენილი სამუშაო კი დეველოპერებს ეკისრებათ.