Box-shadow, анимация и производительность
Анимация тени на элементах не лучший вариант. Такая анимация может повлиять на производительность. Автор рассматривает различные методы оптимизации и ускорения анимации.
Ссылка на статью
Если кратко, идеальный вариант - это отсутствие анимации тени 😄 Но даже если она вам требуется, анимируйте не сам box-shadow, а псевдоэлемент дающий тень. Так перерисовок будет меньше.
#html #css #animation
Анимация тени на элементах не лучший вариант. Такая анимация может повлиять на производительность. Автор рассматривает различные методы оптимизации и ускорения анимации.
Ссылка на статью
Если кратко, идеальный вариант - это отсутствие анимации тени 😄 Но даже если она вам требуется, анимируйте не сам box-shadow, а псевдоэлемент дающий тень. Так перерисовок будет меньше.
#html #css #animation
👍6
Есть проблема и она заключается в том, что /> иногда игнорируется, а иногда нет, в пределах одного и того же HTML-документа. Можно ли сделать так, чтобы правила парсинга переключались таким образом, чтобы /> всегда был значимым? Например, чтобы <div/> действительно был самозакрывающимся. Автор даже создал issue в официальном репозитории html, но подозревает, что это невозможно из-за несовместимости с существующими библиотеками, особенно чувствительными к безопасности.
Статья на английском
#html #js #middle
Please open Telegram to view this post
VIEW IN TELEGRAM
Под конец года обновился сайт с пользовательскими элементами, чем-то похож на codesandbox и прочие, только тут все заточено конкретно под ui.
Выбираем элемент - получаем готовые html/css. На productHunt этот ресурс высоко оценили.
Ссылка на сайт | Ссылка на productHunt
#html #css #news
Please open Telegram to view this post
VIEW IN TELEGRAM
Moderncss выпустили статью об обновленных свойствах, которые можно смело использовать в новых проектах. Часть из них многие уже используют, а часть первый раз увидят.
aspect-ratio: 16/9;
Соотношение сторон. Контент имеет приоритет, использовать можно, например, для задания соотношения сторон для видео.
/* До */
margin-left: auto;
margin-right: auto;
/* После */
margin-inline: auto;
Сокращение для боковых отступов. Много раз видел применение новых свойств по отступам. Но до сих пор не могу отвыкнуть от базовых padding и margin
width: fit-content;
Ширина подстраивается под контент.
text-underline-offset: 0.25em;
Смещение линии подчеркивания у текста. Так же есть свойства для изменения цвета и толщины линии.
Статья на английском
#css #html
Please open Telegram to view this post
VIEW IN TELEGRAM
Контрольный список для сайтов, которые улетают в продакшен. Начиная с HTML заканчивая SEO.
Сайт | Репозиторий
#html #css #seo
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM