От автора: на днях у меня было уникальное задание: создать макет с элементами на всю ширину, при этом один элемент должен оставаться наверху. Это оказалось довольно сложно осуществить, поэтому я документирую данный случай, если кому-то понадобится воссоздать тот же эффект. Часть хитрости была связана с логическим позиционированием на маленьких экранах.
От автора: создание содержимого страницы, которое «прилипает» к области просмотра при прокрутке, что-то вроде меню перехода к привязке или заголовков разделов, никогда не было таким простым. Добавьте position: sticky в набор правил CSS, установите смещение направления (например top: 0), и вы готовы произвести впечатление на своих товарищей по команде с минимальными усилиями.
От автора: существует множество учебных пособий и руководств, которые обучают CSS-grid в целом, и я писал об этом несколько раз. Однако я заметил, что существует неправильное понимание функции minmax(), поскольку большинство статей являются общими или не содержат достаточного объяснения и реальных примеров использования. minmax() очень мощный и полезный инструмент.
От автора: на прошлой неделе мне представилась возможность поработать над побочным проектом, который не планируется включать в матрицу поддержки Internet Explorer 11, и это вызвало у меня только положительные эмоции! Это открывает дверь к большому количеству забавного CSS, под названием «Специальные возможности».
От автора: термин «Адаптивная верстка» часто подразумевает под собой проверку браузера в области просмотра на разной ширине и различных по размерам устройств. Мы всегда тестируем браузер по горизонтали, уменьшая ширину, но я редко встречал какие-либо соображения по поводу тестирования по вертикали за счет уменьшения высоты окна браузера. В глубине души возникает вопрос: нужно ли нам уменьшать высоту окна браузера? Да, и я постараюсь убедить вас в этой статье.
Привлекайте внимание пользователя с помощью селектора CSS :focus-within
От автора: вы можете использовать селектор :focus-within для стилизации родителя выделенного фокусом элемента.
От автора: каскадные таблицы стилей или CSS, как их обычно называют, составляют основу современной сети. Как HTML отвечает за структуру, а JavaScript — за интерактивные функции, CSS обрабатывает все стили, делая веб-сайт таким великолепным, как он есть.
От автора: поддержка CSS Grid (CSS сетки) в современных браузерах открыла новые возможности компоновки элементов. Мы можем создавать более сложные дизайны, используя меньше элементов, чем мы могли, используя компонент Flexbox. Но когда вы думаете о CSS Grid, вы в основном думаете о блочном макете, ведь так?
«Универсальный селектор CSS работает медленно» — еще один фэйк!
От автора: в целом, в веб-разработке есть реальная проблема с честностью и рациональным мышлением. Есть много педантичной чепухи, которая продвигается как хорошая практика, полностью основанная на сфабрикованных «истинах», которые очень далеки от реальности. Одним из таких больших заблуждений является идея о том, что «универсальный селектор» — одиночная звездочка — медленный, сбивающий с толку, трудный для понимания, и я даже видел, как некоторые люди называли его откровенным злом.
От автора: CSS clamp() предоставляет метод для установки числовых значений с минимальным, максимальным и рассчитанным значением между ними. Синтаксис такой, calc([min], [calculated], [max]). Функция полезна в тех случаях, когда вы хотите масштабировать какое-либо значение в зависимости от размера экрана с помощью единицы длины vw.
Все права защищены © 2026
Бернацкий Андрей Васильевич
Служба поддержки
Материалы сайта (статьи, уроки, видео уроки, курсы и прочее) предназначены исключительно для самостоятельного изучения
2021-01-11