Метка: CSS

Практика CSS Scroll Snapping

Спецификация CSS Scroll Snap позволяет привязывать положение прокрутки к определённым элементам или местоположению после того, как пользователь совершил прокрутил страницу или элемент.

Браузерная поддержка и базовое использование

С тех пор, как CSS Scroll Snap был представлен в 2016 году, поддержка браузерами существенно улучшилась. К 2018 году Google Chrome (69+), Firefox, Edge, и Safari поддерживали какую-либо версию этого модуля. Согласно CanIUse, на данный момент технология поддерживается всеми современными браузерами.

Основные различия между Flexbox и CSS Grid

Главное отличие Flexbox от CSS Grid определяется размерностью. По сути, Flexbox создавался для одноразмерных макетов, а CSS Grid можно было применять к двухмерным макетам. Поэтому CSS Grid может одновременно настраивать и строки, и колонки. Проще говоря, CSS Grid — это огромный холст, а Flexbox сводится к нескольким опциям, работающим в ограниченном пространстве. ПОДРОБНЕЕ

8 полезных приемов в CSS: Эффект параллакса, прилипающий футер и многое другое

В этой статье я поделюсь некоторыми полезными советами и приемами, без понимания которых я бы не смог успешно завершить свой путь по изучению CSS. Кроме того, вы вряд ли найдете данные приемы в большинстве учебных пособий по CSS 1. Прилипающий футер Для большинства проектов вам потребуется футер, который должен оставаться ПОДРОБНЕЕ

Мои любимые вопросы о CSS с детальными ответами. Часть 1 «CSS селекторы»

Я проходил множество интервью, и когда дело доходило до вопросов о CSS, то они сводились к: "Перечислите все известные способы центрирования элемента". После 5 ответов, откровенно, это надоело. Поэтому я хочу поделиться своими любимыми вопросами о CSS, которые я задаю на интервью. И начну я с CSS селекторов Вопросы В1. ПОДРОБНЕЕ

Дайджест свежих материалов из мира фронтенда за последнюю неделю №409 (30 марта — 5 апреля 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Веб-разработка    |    CSS    |    JavaScript    |    Браузеры    |    Занимательное    |     Веб-разработка • Концепции, лежащие в основе Web Audio API • Intersection Observer API: примеры использования • Туториал. Интерактивная SVG-диаграмма • Простой способ имплементации адаптивных изображений • BEM Cheat Sheet • Почему некоторые элементы HTML ПОДРОБНЕЕ

Если бы я учил Frontend сегодня. Советы начинающим

Мой путь в веб-разработке начался 5 лет назад. За это время я успел испробовать множество технологий, а в последние 3 года развиваюсь в направлении frontend. В этой статье я бы хотел ясно изложить, какие технологии необходимо изучить новичку, а также поделиться методами их освоения. Гайд ориентирован на людей, которые делают ПОДРОБНЕЕ

Решение проблемы с CSS :hover

:hover — псевдокласс, определяющий стиль элемента при наведении на него указателя. Проблемы с псевдоклассом :hover начались еще с тех пор, как на сенсорных устройствах был установлен первый браузер. Конечно, проблемы пытались решить и решали, но полноценным решением это вряд ли можно было назвать. Однако с новыми медиазапросами (Media Queries) 4 уровня проблема, кажется, ПОДРОБНЕЕ

CSS Houdini: практическое руководство

Доброго времени суток, друзья! Что такое Houdini? Houdini (Гудини) — коллекция API браузера, значительно улучшающих процесс веб разработки, включая разработку стандартов CSS. Разработчики смогут расширять CSS, используя JavaScript, влияя на рендеринг CSS и указывая браузеру, как следует применять стили. Это обеспечит значительное повышение производительности и стабильности, нежели использование полифилов. Гудини ПОДРОБНЕЕ

Создание эффектов при прокрутке

В этом руководстве мы поговорим о том, как создать эффект открывающегося блока при прокрутке. Эффект состоит из сплошного цветного блока, который уменьшается в размере, открывая текст или изображение. Эффекты открывания можно использовать для создания интересных взаимодействий с пользовательскими компонентами, такими как слайд-шоу. Этот слайд создан с помощью схожей wipe-анимации: Можете ПОДРОБНЕЕ

Дайджест свежих материалов из мира фронтенда за последнюю неделю №408 (23 — 29 марта 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Медиа    |    Веб-разработка    |    CSS    |    JavaScript    |    Браузеры Медиа • UnderJS Podcast №18 — Yarn2 и баг длиною… • Девшахта/Ночной фронтенд: Мониторинг node.js на примере интересного кейса • Подкаст «Фронтенд Юность (18+)» №130: Первый изолированный • Подкаст «Веб-стандарты» №222. GitHub и npm, ПОДРОБНЕЕ