Телеграм канал «WebDev+ | Веб-разработка»

CSS-совет: Используй svh, чтобы мобильная адресная строка не перекрывала интерфейс. Эта единица гарантирует, что layout всегда помещается в реально видимую область экрана. @WebDev_Plus

В следующем обновлении языковых инструментов Vue выкатывают совершенно новую фичу Rich Hover Message. Наводишь курсор на любой Vue-компонент и сразу видишь аккуратно отформатированные Props и Slots, все генерируется автоматически. Сделано, чтобы прокачать DX на новый уровень. Подробности скоро, следите за обновлениями. @WebDev_Plus

Ну всё, ребята. Этот день настал 😱 Popover на чистом CSS (элемент popover + анимации + привязка к якорю) теперь стабильно работает во всех базовых браузерах. И да, конечно, он уже доступен в CSS-Zero. Репозиторий: http://github.com/lazaronixon/css-zero Демо: https://csszero.lazaronixon.com/lookbook/inspect/popover/default @WebDev_Plus

Делись своим localhost с кем угодно за секунды через URL, доступный по всему миру, с HTTPS $ brew install cloudflared $ cloudflared tunnel --url <твой-локальный-домен> Это альтернатива ngrok. Без регистрации и бесплатно @WebDev_Plus

Запускает GitHub Actions локально в VS Code. https://github.com/SanjulaGanepola/github-local-actions/ @WebDev_Plus

Не допускайте появления растянутых изображений на вашем сайте. Это выглядит ужасно! И это легко исправить с помощью одной строки CSS @WebDev_Plus

Большинство CSS-переходов плавные, но display переключается мгновенно. allow-discrete делает так, что элемент еще немного остается видимым, чтобы анимация выхода выглядела гладко, и только потом уходит в display: none. Ключевое слово allow-discrete применяет тайминги transition к дискретным свойствам. Для exit-анимаций элемент остается видимым, проигрывает переход, а затем переключается в display: none уже после завершения transition. Подробнее на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-behavior Свойство overlay управляет тем, остается ли диалог в top layer во время перехода. Без него диалог сразу “провалится” назад, за другой контент. MDN: https://developer.mozilla.org/en-US/docs/Glossary/Top_layer CSS-сниппет: dialog { opacity: 1; scale: 1; transition: opacity 0.2s ease-out, scale 0.2s ease-out, overlay 0.2s ease-out allow-discrete, display 0.2s ease-out allow-discrete; @starting-style { opacity: 0; scale: 0.95; } } И: dialog::backdrop { background-color: rgb(0 0 0 / 0.5); transition: background-color 0.2s ease-out, overlay 0.2s ease-out allow-discrete, display 0.2s ease-out allow-discrete; @starting-style { background-color: rgb(0 0 0 / 0); } } @WebDev_Plus