devops
Давайте поховаємо 30 років веб-верстки в прямокутники
Десятилітня тиранія дизайну коробок у Всесвітній павутині нарешті закінчилася. Новий набір функцій CSS – вкл форма() функція і форма кордону і кутова форма властивості – пропонує веб-дизайнерам і їхнім агентам штучного інтелекту ширшу палітру для плавнішого розгортання вмісту.
Коли Консорціум Всесвітньої павутини (W3C) опублікував свій перший стандарт макета веб-сторінок у 1996 році, веб-сайти імітували макети, визначені в Інтернеті для статей, газет і журналів.
У той час графічні драйвери та візуальні механізми браузера були у відносно примітивному стані. Розробники також спробували впоратися з новим носієм і загалом виявили, що перетікання тексту в межах визначеного простору було набагато легшим, якщо геометричні координати цього простору залишалися якомога простішими.
Але зараз друк майже не працює, веб-розробники економніші (а якщо ні, ШІ радо допоможе), а графічні процесори потужніші. Тож сьогодні немає причин, чому веб-сторінка має бути квадратною, тату.
Класична прото-наукова фантастика Едвіна А. Еббота 1884 року Flatland: багатовимірний романГерой, який живе в плоскому двовимірному просторі, раптово стикається з обертовим тривимірним світом, який його дивує.
Веб-розробники можуть відчувати подібні відчуття, коли вперше використовують ці нові конструкції CSS.
Вибір розробника: вертикальний або горизонтальний
У своїх початкових формах HTML і CSS могли лише малювати горизонтальні або вертикальні лінії чи рамки на веб-сторінці. Вигадливі дизайни вимагали власних плагінів, як-от Java-аплети, Macromedia/Adobe Flash або якийсь нудний хак JavaScript.
SVG вперше зламав веб-коробку та дозволив розробникам вставляти криві, вигнуті лінії, логотипи чи інші дикі фігури, використовуючи низку числових координат для опису форми (це виснажлива робота, хоча конвертери зображень допомагають SVG). Але SVG був обмежений полотном на веб-сторінці. CSS сам керував макетом сторінки.
Першою була спроба поєднати два світи шлях ()що дозволяло вбудовувати SVG безпосередньо в CSS. в шлях () Функція мала деякі обмеження — вона не реагувала на зміну розміру веб-сторінок і не розуміла змінних CSS або одиниць вимірювання. Розробники повинні були визначити всі характеристики в пікселях, і все.
Перегляньте ці рядки
в форма() Належна функціональність надала Інтернету багатший дизайн. А форма() — це набір геометричних координат потрібної форми або траєкторії. На відміну від шлях ()покладається на SVG, він побудований на адаптивному синтаксисі CSS. У поєднанні з наявною властивістю кліпу дороги, форма() використовується для створення квитків, бульбашок для чату та інших вильотів різних сторінок.
Остання властивість CSS, border-shape, виконує роботу шляхом застосування власних координат CSS, як визначено нижче. форма() прив’язується до веб-сторінки. Координується с форма()помістіть його у властивість border форми, і межі будуть визначені на самій сторінці. Межі встановлюються на початку процесу відтворення, а не в кінці відтворення.
“Іншими словами, розміщення рамок на формах CSS стане дитячою грою!” відзначив самоописаного CSS-хакера Темані Афіфа в підручнику на сайті CSS-Tricks.
Ця нова властивість відкриває цілу низку можливостей дизайну, які досі були надто складними для розгляду — принаймні, не протягом 40-годинного робочого тижня веб-розробників.
Афіф пропонує ряд демонстрацій у своїх підручниках: ви не тільки можете обрізати веб-сторінку будь-яким способом, який вважаєте за потрібне, але також можете розмістити межі в межах. Заповніть проміжок між зовнішньою та внутрішньою фігурами, щоб вирізати. Сформуйте відкрите серце всередині квадратної коробки, наприклад, використовуючи лише CSS.
Зовнішню або внутрішню форму можна анімувати, що дозволяє змінювати форму зовнішньої межі, коли на неї наводиться курсор миші, або заповнювати внутрішню межу зображенням чи іншим дизайном. Фігура може збільшуватися або зменшуватися, коли наводити на неї курсор миші, або текст може бути виділений маленькими коричневими лініями.
Якщо ручна підготовка контенту форма() не ваш джем, супутня властивість під назвою constellation пропонує кілька гарних попередньо визначених шаблонів меж. Більшість з них є варіантами стандартної коробки, в тому числі коробки із закругленими кутами, плоскими кутами, кришками, прорізами, і одна з них – «розетка».
За даними caniuse.com, тепер це підтримують усі основні браузери форма()тоді як рамки та форми кутів все ще реалізовані та вважаються експериментальними (хоча поточні версії Chrome, Edge та Opera підтримують стандарт).
Тепер розробникам належить створити гнучкішу мережу. ®
