Верстка \ 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.

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

Верстка \ CSS 3

Как получить совместимые липкие элементы на всю ширину

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

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

Верстка \ CSS 3

Динамические размеры липкой боковой панели с HTML и CSS

От автора: создание содержимого страницы, которое «прилипает» к области просмотра при прокрутке, что-то вроде меню перехода к привязке или заголовков разделов, никогда не было таким простым. Добавьте position: sticky в набор правил CSS, установите смещение направления (например top: 0), и вы готовы произвести впечатление на своих товарищей по команде с минимальными усилиями.

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

Верстка \ CSS 3

Подробное рассмотрение CSS Grid minmax()

От автора: существует множество учебных пособий и руководств, которые обучают CSS-grid в целом, и я писал об этом несколько раз. Однако я заметил, что существует неправильное понимание функции minmax(), поскольку большинство статей являются общими или не содержат достаточного объяснения и реальных примеров использования. minmax() очень мощный и полезный инструмент.

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

Верстка \ HTML&CSS

Прекратите делать неполные недоступные формы!

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

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

Верстка \ CSS 3

Переменные Sass, CSS, а также переменные семантической темы

От автора: на прошлой неделе мне представилась возможность поработать над побочным проектом, который не планируется включать в матрицу поддержки Internet Explorer 11, и это вызвало у меня только положительные эмоции! Это открывает дверь к большому количеству забавного CSS, под названием «Специальные возможности».

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