От автора: CSS — это язык, которым в какой-то момент пользуются почти каждый разработчик. Хотя это язык, который мы иногда принимаем как должное, он очень мощный и имеет множество нюансов, которые могут помочь (или навредить) нашему дизайну. Вот 30 лучших практик CSS, которые помогут вам написать надежный CSS и избежать некоторых дорогостоящих ошибок. 1. Сделайте его читабельным Читаемость вашего CSS ...

От автора: представьте себе красивый и высокий header веб-сайта с большим количеством отступов сверху и снизу от содержимого. Когда вы прокручиваете вниз, он сжимается, уменьшая часть заполнения рабочей области, освобождая экран для другого контента. Обычно вам придется использовать некоторый JavaScript, чтобы добавить подобный эффект сжатия, но с момента появления position: sticky есть способ сделать это, используя только CSS. Позвольте мне ...

От автора: если вы проектируете или разрабатываете веб-сайты, не используйте px. Абсолютные единицы (px, in, mm, cm, pt, и pc) не подходят как для доступности и адаптивного дизайна, так и при использовании таблиц для разметки. Из всех доступных абсолютных единиц, пиксели (px) являются единственными упорно не желающими уходить. Мы коллективно (и справедливо!) отказались от всех остальных единиц для стилизации цифрового ...

От автора: я никогда не стремлюсь специально критиковать какие-либо технологии. Я считаю, что у каждой технологии есть свой допустимый вариант использования. Но как разработчику необходимо проанализировать технологию, а также ее плюсы и минусы, прежде чем принимать ее как есть. Одна из новейших технологий, которой в наши дни уделяется много внимания, — это Tailwind CSS. Когда я впервые услышал об этом, ...

От автора: сегодня такое прекрасное время для написания CSS. Бывали у вас такие моменты, когда вы что-то кодируете и думаете про себя: «Я хочу, чтобы этот [текст, изображение, поле, вставьте элемент по вашему выбору здесь] увеличивался или уменьшался в зависимости от размера области просмотра … но только до определенного момента?». Если вы еще не испытали этого, не волнуйтесь, это однажды ...

От автора: в статье будут рассмотрены низкоуровневые API, которые подключаются к процессу стилей и макета движка рендеринга вашего браузера. Примечание. Исходный код демонстрации, обсуждаемой во второй половине этой статьи, можно найти на GitLab. Как я уже упоминал в своей недавней статье об анимации холста внутри компонентов React, мне нравится HTML-холст. Поэтому я был очень взволнован, узнав о новых API-интерфейсах CSS ...

От автора: в блоге WebKit подробно описано, как использовать отдельные свойства transform CSS в последней версии Safari Technology Preview. Это приводит браузер в соответствие со спецификацией CSS Transforms Module Level 2, которая выделяет функции translate(), rotate() и scale() из transform в отдельные свойства: translate, scale и rotate. Итак, вместо того, чтобы связывать эти три функции со свойством transform: .some-element { ...

От автора: если вы когда-либо пытались поместить липкий элемент в макет сетки и наблюдали, как элемент прокручивается вместе с остальным содержимым, вы, возможно, замечали, что position: sticky с CSS Grid не работает. Не стоит волноваться! Вполне возможно совместить эти два макета для работы вместе. Все, что вам, вероятно, понадобится, это еще одна строка CSS. Проблема Давайте начнем с основной проблемы, ...

От автора: при создании макета в CSS важно учитывать и тестировать краткий и длинный текстовый контент. Четкое представление о том, что делать, если текст различается по длине, может предотвратить множество нежелательных проблем. Есть много ситуаций, когда добавление или удаление одного слова может изменить внешний вид дизайна или, что еще хуже, сломать его и сделать недоступным. В первое время изучения CSS ...

От автора: CSS-трансформации в интернете появились вместе с CSS-анимациями и CSS-переходами для добавления визуальных эффектов и движения в Интернете. Эти технологии были основным продуктом веб-платформы и инструментария веб-разработчиков более десяти лет. Фактически, свойство CSS transform впервые появилось в Safari еще в июле 2008 года, когда появилась iPhone OS 2.0. Вы можете найти некоторые архивные публикации о начальной поддержке в WebKit ...