2020-06-24 
От автора: настраиваемые свойства CSS для каскадных переменных, давно запрошенные, но все еще недостаточно используемые, предлагают революционные возможности для совместной работы и повторного использования кода..
Настройка глобальных стилей и стилей компонентов с помощью переменных CSS
От автора: с тех пор, как я узнала о переменных CSS несколько лет назад, моя самая любимая функция — возможность привязывать переменные к компонентам. Но, честно говоря, я не использовала эту функцию на протяжении многих лет, пока в прошлом году я не создала собственную библиотеку шаблонов для ускорения создания прототипов и работы с клиентами.
От автора: эй! Совершенно новое свойство, которое влияет на размер блока! Это важная вещь. Уже есть много способов создать блок с соотношением сторон (и я бы сказал, что это решение на основе пользовательских свойств является лучшим), но ни один из них не является особенно интуитивным и, конечно, не таким простым, как объявление одного свойства.
Использование calc для определения оптимального значения line-height
От автора: хотя мы можем применить к line-height любую единицу измерения CSS, значение без единиц измерения 1,5 является наиболее рекомендуемым способом его обработки.
От автора: это не самая востребованная функция, но контейнерные запросы дают возможность создавать в CSS макеты «Masonry», которые долгое время были большой проблемой для разработчиков CSS. Masonry — это такая схема, в которой элементы неравномерного размера расположены рваными рядами. Типа обычной кирпичной стены.
Преобразование объекта с фиксированными размерами в адаптивный элемент
От автора: недавно я попал в ситуацию, когда хотел показать iPhone на веб-сайте. Я хотел, чтобы пользователи могли взаимодействовать с демо-версией приложения на этом «фиктивном» телефоне, поэтому он должен был отображаться в CSS, а не изображением.
От автора: я работал над проектом, для которого нужно было изображения баннера с таким аккуратным зазубренным краем вдоль нижней части. Это то, что заставило меня поломать голову, и в процессе я узнал кое-что новое! Я подумал, что опишу, как я подошел к решению этой проблемы, чтобы вы могли использовать это в своих проектах.
От автора: CSS line-height — это, вероятно, один из самых неправильно понимаемых, но часто используемых атрибутов. Как дизайнеры и разработчики, когда мы думаем о line-height, мы можем представить концепцию направляющих в полиграфическом дизайне — термин, достаточно интересный, который происходит от буквального помещения направляющих между строками шрифта.
От автора: функции сравнения CSS (min(), max(), clamp()) стали поддерживаться в Firefox с 8 апреля 2020, что означает, что они теперь поддерживаются во всех основных браузерах. Эти функции CSS предоставляют способы получить динамические макеты и более гибкие компоненты дизайна. Их можно использовать для размеров контейнера, размера шрифта, отступов и многого другого. Более того, веб-дизайнерам теперь, возможно, придется мыслить иначе при разработке макетов из-за этих захватывающих функций CSS.
От автора: недавно наблюдался ажиотаж вокруг того, как WebKit обрабатывает CSS 100vh, по существу игнорируя нижний край окна просмотра браузера. Некоторые предложили избегать использования 100vh, другие придумали разные альтернативы для решения проблемы. Фактически, эта проблема уходит еще в давние времена, когда Николас Хойзи подал уведомление об ошибке в WebKit по этому вопросу (кратко: WebKit говорит, что это «намеренно»).
Все права защищены © 2026
Бернацкий Андрей Васильевич
Служба поддержки
Материалы сайта (статьи, уроки, видео уроки, курсы и прочее) предназначены исключительно для самостоятельного изучения