Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

👀67 странных приемов отладки, о которых ваш браузер не хочет, чтобы вы знали

🤩Подборка полезных, но неочевидных приемов, которые помогут максимально эффективно использовать отладчик вашего браузера.

📌Не самый свежий гайд, но он достоин того, чтобы остаться в ваших закладках.

👉 Читать

💡 Вы можете создавать микровзаимодействия, управляемые прокруткой, с помощью animation-timeline и кастомных свойств.

.search {
animation: shrink;
animation-timeline: scroll();
animation-range: 0 calc(var(--header-height) * 0.5);
}
@keyframes shrink {
to { width: calc(100% - var(--button-size)); }
}


Переменная --header-height используется для определения высоты контейнера заголовка. Вы можете использовать это для animation-range, применяемого в различных анимациях прокрутки 🤙

В качестве другого примера, вы можете анимировать появление тени (box-shadow) на заголовке, как только поиск зафиксирован 🍡

header {
animation: shadow;
animation-timeline: scroll();
animation-range:
var(--header-height)
calc(var(--header-height) * 1.5);
}
@keyframes shadow {
to { box-shadow: 0 5px 10px hsl(0 0% 0%); }
}


Все это работает на основе scroll() в animation-timeline, который подключается к прокрутке страницы. И затем используя --header-height в различных animation-range ✨

Вы можете нажать на выглядывающего медведя, чтобы прокрутить страницу вверх:

Back to top


CSS :focus-within используется для активации плавной прокрутки только для этого взаимодействия.

html:focus-within {
scroll-behavior: smooth;
}


➡️ Поиграть можно здесь

#css #tip by Jhey

🎨Что, если бы мы сказали вам, что для создания графики вроде градиентов или эффекта дождя, может потребоваться всего несколько строк кода? Добро пожаловать в мир шейдеров!

👀 Перед вами крутой интерактивный гайд о том, как устроены шейдеры на уровне математики/кода и как применять их в вебе для создания визуальных эффектов.

💡Вы можете сделать стили вашего компонента портативными с помощью контейнерных запросов:

🔥 Измените макет карточки в зависимости от размера
🤏 Уберите текст с кнопки, когда она маленькая

.card {container-type: inline-size;}
@container (min-width: 50ch) {.info { grid-column: 2; }}


➡️ Поиграть можно здесь

#css #tip by Jhey

🤩 На что способны современные веб-технологии?

😎 Перед вами интерактивный мини-сборник впечатляющих возможностей современных веб-технологий от команды Chrome для разработчиков: от WebAssembly и простого взаимодействия с локальными файлами пользователей до рендеринга «тяжелой» графики в браузере и упрощенной навигации.

Кстати, для создания анимации на сайте используется ThreeJS, но на канале Frontend FYI вы можете увидеть реализацию того же функционала на чистом CSS 😉