Добавление границы к элементам
Этот CSS-код добавляет тонкую черную границу среди элементов с классом
#CSS
Этот CSS-код добавляет тонкую черную границу среди элементов с классом
box
.#CSS
Простой способ упрощения CSS селекторов с использованием
👉 @tips_frontend
:where()
: на заметку фронтенд-разработчику👉 @tips_frontend
This media is not supported in your browser
VIEW IN TELEGRAM
В Chrome Dev Tools мы можем переопределять заголовки ответов, что может быть удобно для локальной обработки ошибок CORS до тех пор, пока они не будут исправлены на уровне сервера.
👉 @tips_frontend
👉 @tips_frontend
Упрощение группировки данных в JavaScript с помощью
👉 @tips_frontend
Object.groupBy()
или Map.groupBy()
: на заметку фронтендеру👉 @tips_frontend
This media is not supported in your browser
VIEW IN TELEGRAM
CSS свойство shape-outside в действии: на заметку фронтенд-разработчику
👉 @tips_frontend
.column--left .shape {
float: right;
shape-outside: circle(100px at 100% 50%);
}
👉 @tips_frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Используйте тригонометрические функции в CSS для создания плавной ступенчатой задержки перехода:
➡️ @tips_frontend
.character {
transition-delay:
calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Раскрывающийся список без использования Javascript: HTML-теги
Поиграть можно здесь
➡️ @tips_frontend
<details>
и <summary>
в действииПоиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
AbortSignal.timeout()
в действии: на заметку фронтенд-разработчикуПоиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
Самый простой способ вертикального центрирования контента в макете блока: на заметку фронтенд-разработчику
Поиграть можно здесь
➡️ @tips_frontend
Поиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
Для повышения производительности загружайте изображения в зависимости от размера области просмотра, используя атрибуты
➡️ @tips_frontend
srcset
и size
HTML-элемента img
.Please open Telegram to view this post
VIEW IN TELEGRAM
HTML-элемент
➡️ Поиграть можно здесь
➡️ @tips_frontend
<progress>
в действии: на заметку фронтенд-разработчику 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
Новый способ замены элемента в массиве
Актуальные версии всех браузеров поддерживают метод with(index, value) для создания копии массива с заменой одного элемента.
➡️ @tips_frontend
Актуальные версии всех браузеров поддерживают метод with(index, value) для создания копии массива с заменой одного элемента.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Псевдоэлемент
Поиграть можно здесь
➡️ @tips_frontend
::marker
в действии, или Как легко изменить стиль маркера/номера списка с помощью CSSПоиграть можно здесь
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
Мини-шпаргалка по значениям атрибута type HTML-тега <input>, задача которого — сообщать браузеру, к какому типу относится элемент формы.
➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM