Нові можливості CSS виводять веб-дизайн за межі прямокутників

Залежність вебу від прямокутної верстки, що триває вже 30 років, починає слабшати. Три відносно нові можливості CSS, функція shape() та властивості border-shape і corner-shape, дають дизайнерам ширшу палітру для сторінок, які більше не складаються з поставлених один на одного блоків.

Від SVG до shape()

Коли World Wide Web Consortium опублікував 1996 року свій перший стандарт верстки, сторінки повторювали сітковий дизайн газет і наукових журналів: рушії браузерів були молодими, графічне обладнання примітивним, і текст усередині прямокутника здавався найбезпечнішим варіантом.

Першим по-справжньому зламав коробковість SVG: числові координати дозволяли малювати криві, хвилясті лінії та довільні форми, але він усе одно лишався на полотні canvas, розміщеному на сторінці, тоді як версткою керував CSS. Функція path() поєднала ці два світи, вбудувавши SVG безпосередньо в CSS, але не реагувала на зміну розміру сторінки й не розуміла змінних чи одиниць виміру CSS: кожну координату доводилося задавати в пікселях.

Що змінюють shape() і border-shape

shape() це набір геометричних координат, що описують бажану форму чи траєкторію, побудований на адаптивному синтаксисі CSS, а не на SVG. Разом із наявною властивістю clip-path його використовували для корінців квитків, бульбашок чату та інших не прямокутних елементів.

Властивість border-shape застосовує рідні для CSS координати, задані в shape(), до самих меж сторінки. Опишіть координати один раз, і межі прокладаються на сторінці на ранньому етапі рендерингу, а не обрізаються ближче до кінця. «Ставити межі на форми CSS стане дитячою забавкою», написав CSS-розробник Temani Afif, який називає себе CSS-хакером, у посібнику на CSS-Tricks.

Демонстрації Afif не обмежуються одним контуром: можна вирізати сторінку будь-якою формою, ставити межі всередині меж і заповнювати простір між зовнішньою та внутрішньою формами, створюючи вирізи, наприклад відкрите серце всередині квадратного блока самим лише CSS.

corner-shape і підтримка браузерів

Тим, хто не хоче писати координати вручну, супутня властивість corner-shape пропонує готові візерунки, більшість із яких це варіації стандартного блока: заокруглені краї, скошені краї, виїмки, заглиблення та форма, відома як «squircle».

За даними caniuse.com, shape() тепер підтримують усі основні браузери. border-shape і corner-shape досі впроваджуються й вважаються експериментальними, хоча поточні випуски Chrome, Edge та Opera підтримують стандарт. Решта роботи, як підсумовує звіт, лягає на розробників.