Using safe-area-inset to build mobile-safe layouts. Modern phones have notches, cutouts, and floating buttons that overlap your UI unless you account for them. The Polypane blog walks through env(safe-area-inset-*), why you need viewport-fit=cover in the <meta viewport>, combining insets with calc() for extra spacing, and the new safe-area-max-inset-* values that stay stable even when the address bar hides on scroll. #css #layout

https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/

Использование safe-area-inset для безопасных раскладок на мобильных. У современных телефонов есть вырезы, камеры и плавающие кнопки, которые перекрывают интерфейс, если их не учесть. В блоге Polypane разбирают env(safe-area-inset-*), зачем нужен viewport-fit=cover в <meta viewport>, как комбинировать отступы с calc(), а также новые safe-area-max-inset-*, которые не меняются, даже когда адресная строка прячется при прокрутке. #css #layout

https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/

Синтаксис диапазонов в медиавыражениях. Ахмад Шадид показывает, как классические min-width и max-width приводят к ошибкам на совпадающих брейкпоинтах — например, два элемента скрываются на одних и тех же 300px. Решение: синтаксис диапазонов с операторами <=, >=, > — он поддерживается во всех браузерах с марта 2023. Код понятнее, без 1px сдвигов, и та же логика работает для выражений от контейнера. #css #layout

https://ishadeed.com/article/range-syntax/

Media queries range syntax. @shadeed9 shows how the classic min-width and max-width syntax creates overlap bugs at identical breakpoints, like two elements hiding at the same 300px. The fix: CSS range syntax with comparison operators like <=, >=, and >, supported in all browsers since March 2023. Clearer code, no 1px offsets, and the same logic works for container queries. #css #layout

https://ishadeed.com/article/range-syntax/

“safe” in Flex and Grid Alignment, by @iprodan.dev:

https://iprodan.dev/l/safe-alignment/

#css #flexbox #grids #layout #alignment

Uh oh... Valerian7000 site: original layout and a lot of images to explore.

https://val7k.vision/

#website #site #usefulweb #graphic #val7k #val7000 #layout #personalsite

Building a UI Without Breakpoints, by @amit_sheen (@frontendmasters.com):

https://frontendmasters.com/blog/building-a-ui-without-breakpoints/

#css #layout #intrinsicdesign #responsivedesign

Вот так и выглядит тихий бунт.

Фронтендер, которому назначили таск сверстать этот цифровой шлагбаум, назвал главный div-контейнер страницы: `page__block-19-84`.

Оруэлл бы явно оценил ироничность вёрстки.

#digitalresistance #webdev #layout