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

Продолжить чтение →

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

Продолжить чтение →

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

Продолжить чтение →

От автора: в статье будут рассмотрены низкоуровневые API, которые подключаются к процессу стилей и макета движка рендеринга вашего браузера.

Продолжить чтение →

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

Продолжить чтение →

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

Продолжить чтение →

От автора: не существует такого понятия, как «безопасный веб-шрифт». Я видел так много сообщений с просьбой написать о безопасных шрифтах для использования в электронных письмах HTML, на которые обычно отвечали сокращенным списком шрифтов, доступных в Windows. Итак, позвольте мне объяснить, почему безопасные шрифты — это ошибочная концепция и насколько больше может быть шрифтов в электронных письмах HTML, чем в Arial и Times.

Продолжить чтение →

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

Продолжить чтение →

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

Продолжить чтение →

От автора: одной из нативных возможностей HTML при необходимости создать закладки на странице являются якоря. Классическим якорем, к примеру, будет кнопка вверх, клик по которой отправит пользователя к началу страницы. Реализуются якоря очень просто, но в их работе очень не хватает плавности. Этот недостаток всегда исправлялся с помощью JS, но на самом деле можно попробовать обойтись и без него, используя возможности CSS.

Продолжить чтение →