Yeni CSS özellikleri web tasarımını dikdörtgenlerin ötesine taşıyor

Web'in 30 yıllık dikdörtgen düzene bağımlılığı çözülmeye başlıyor. Nispeten yeni üç CSS özelliği, shape() işlevi ile border-shape ve corner-shape özellikleri, tasarımcılara üst üste dizilmiş kutulardan oluşmayan sayfalar kurmak için daha geniş bir palet sunuyor.

SVG'den shape()'e

World Wide Web Consortium 1996'da ilk yerleşim standardını yayımladığında sayfalar gazete ve akademik dergilerin ızgara tabanlı tasarımını yansıtıyordu. Tarayıcı motorları gençti, grafik donanımı ilkeldi ve metni bir dikdörtgenin içinde akıtmak en güvenli seçenekti.

Kutululuğu ilk gerçekten kıran SVG oldu: sayısal koordinatlarla eğriler, dalgalı çizgiler ve serbest biçimler çizilebiliyordu, ancak SVG sayfaya yerleştirilen bir canvas ile sınırlı kalıyor, düzeni ise CSS yönetiyordu. path() işlevi SVG'yi doğrudan CSS'e gömerek bu iki dünyayı birleştirdi, ne var ki sayfa boyutundaki değişikliklere tepki vermiyor, değişkenleri ya da CSS birimlerini anlamıyordu: her koordinat piksel cinsinden yazılmak zorundaydı.

shape() ve border-shape neyi değiştiriyor

shape(), istenen bir biçimi ya da yörüngeyi tanımlayan geometrik koordinatlar kümesidir ve SVG yerine uyarlanabilir CSS sözdizimine dayanır. Mevcut clip-path özelliğiyle birlikte bilet kuponları, sohbet balonları ve diğer dikdörtgen olmayan öğeler için kullanıldı.

border-shape özelliği shape() içinde tanımlanan CSS'e özgü koordinatları sayfanın kenarlıklarına uygular. Koordinatları bir kez tanımlayın; sınırlar işlemenin sonunda kırpılmak yerine erken aşamasında sayfanın üzerinde belirlenir. "CSS biçimlerine kenarlık koymak çocuk oyuncağı hâline gelecek," diye yazdı kendini CSS hackerı olarak tanımlayan CSS geliştiricisi Temani Afif, CSS-Tricks'te yayımlanan bir eğitimde.

Afif'in gösterimleri tek bir ana hatla sınırlı değil: tasarımcılar bir sayfayı istedikleri biçimde oyabilir, kenarlıkları kenarlıkların içine yerleştirebilir ve dış ile iç biçim arasındaki boşluğu kesikler oluşturmak için doldurabilir, örneğin yalnızca CSS ile kare bir kutunun içinde açık bir kalp.

corner-shape ve tarayıcı desteği

Koordinatları elle yazmak istemeyen geliştiriciler için eşlik eden corner-shape özelliği hazır desenler sunuyor; bunların çoğu standart kutunun varyasyonları: yuvarlatılmış kenarlar, pahlı kenarlar, çentikler, oyuklar ve "squircle" olarak bilinen bir biçim.

caniuse.com'a göre artık tüm büyük tarayıcılar shape() desteği sunuyor. border-shape ve corner-shape hâlâ uygulanıyor ve deneysel sayılıyor, ancak Chrome, Edge ve Opera'nın güncel sürümleri standardı destekliyor. Rapora göre geriye kalan işi geliştiricilerin yapması gerekiyor.