Yeni CSS xüsusiyyətləri veb dizaynını düzbucaqlılardan kənara çıxarır

Vebin 30 illik düzbucaqlı düzülmə asılılığı çat verməyə başlayır. Nisbətən yeni üç CSS xüsusiyyəti, shape() funksiyası və border-shape ilə corner-shape xassələri, dizaynerlərə bir-birinin üstünə yığılmış qutulardan ibarət olmayan səhifələr qurmaq üçün daha geniş palitra verir.

SVG-dən shape()-ə

World Wide Web Consortium 1996-cı ildə ilk düzülmə standartını dərc edəndə səhifələr qəzet və akademik jurnalların şəbəkə əsaslı dizaynını təkrarlayırdı. Brauzer mühərrikləri gənc idi, qrafika avadanlığı primitiv və mətni düzbucaqlı içində axıtmaq ən təhlükəsiz seçim sayılırdı.

Qutuluqdan ilk real çıxışı SVG verdi: rəqəmsal koordinatlarla əyrilər, dalğavari xətlər və istənilən formalar çəkilə bilirdi, lakin SVG səhifəyə yerləşdirilmiş canvas ilə məhdudlaşırdı, düzülməni isə CSS idarə edirdi. path() funksiyası SVG-ni birbaşa CSS-in içinə yerləşdirərək bu iki dünyanı birləşdirdi, amma səhifə ölçüsünün dəyişməsinə reaksiya vermirdi və dəyişənləri ya CSS ölçü vahidlərini anlamırdı: hər koordinat piksel ilə yazılmalı idi.

shape() və border-shape nəyi dəyişir

shape() istənilən forma və ya trayektoriyanı təsvir edən həndəsi koordinatlar toplusudur və SVG əvəzinə uyğunlaşan CSS sintaksisinə əsaslanır. Mövcud clip-path xassəsi ilə birlikdə bileti kəsikləri, çat qabarcıqları və digər düzbucaqlı olmayan elementlər üçün istifadə edilib.

border-shape xassəsi shape()-də müəyyən edilmiş CSS-ə xas koordinatları səhifənin sərhədlərinə tətbiq edir. Koordinatları bir dəfə müəyyən edin və sərhədlər renderinqin sonda kəsilməsi yerinə erkən mərhələsində səhifənin özündə nişanlanır. "CSS formalarının üzərinə sərhədlər qoymaq uşaq oyununa çevriləcək," yazıb özünü CSS hacker-i adlandıran CSS tərtibatçısı Temani Afif CSS-Tricks-də dərc olunan dərslikdə.

Afif-in nümayişləri tək bir konturla bitmir: dizaynerlər səhifəni istənilən formada kəsə, sərhədləri sərhədlərin içinə yerləşdirə və xarici ilə daxili forma arasındakı boşluğu kəsiklər yaratmaq üçün doldura bilər, məsələn yalnız CSS ilə kvadrat qutunun içində açıq ürək.

corner-shape və brauzer dəstəyi

Koordinatları əl ilə yazmaq istəməyən tərtibatçılar üçün yanaşı gələn corner-shape xassəsi hazır naxışlar təklif edir; onların çoxu standart qutunun variasiyalarıdır: yumrulaşdırılmış kənarlar, maili kənarlar, çentiklər, oyuqlar və "squircle" adı ilə tanınan forma.

caniuse.com-a görə artıq bütün əsas brauzerlər shape()-i dəstəkləyir. border-shape və corner-shape hələ tətbiq olunur və eksperimental sayılır, amma Chrome, Edge və Opera-nın cari buraxılışları standartı dəstəkləyir. Qalan iş, hesabata görə, tərtibatçıların üzərinə düşür.