Верстка \ CSS 3

Пора попрощаться с пиксельными единицами измерения

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

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

Верстка \ CSS 3

Действительно ли Tailwind CSS того стоит?

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

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

Верстка \ CSS 3

CSS Clamp(): адаптивная комбинация, которую мы все ждали

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

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

Верстка \ CSS 3

Индивидуальные свойства преобразования CSS в Safari Technology Preview

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

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

Верстка \ CSS 3

Прикрепленные элементы сетки в CSS

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

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

Верстка \ HTML&CSS

Шрифты в HTML письмах

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

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

Верстка \ CSS 3

Обработка короткого и длинного контента в CSS

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

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

Верстка \ CSS 3

Отдельные свойства преобразования CSS

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

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

Верстка \ HTML&CSS

Работа с якорями в HTML

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

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