Главная » Архив меток: HTML&CSS

Архив меток: HTML&CSS

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

За пределами медиа-запросов: новые функции для адаптивного дизайна

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

Читать далее »

Исследование повторяющихся запросов HTML при загрузке страницы

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

Читать далее »

Вы уже используете SVG-фавикон? Руководство для современных браузеров

От автора: вы должны использовать SVG-фавикон. Они поддерживаются во всех современных браузерах уже сейчас. Кроме того, вам, вероятно, не нужны все эти ссылки и размеры иконок, которые вы копируете из проекта в проект. Давайте выясним, какой абсолютный минимум нам требуется. Иконка Основной иконкой может быть SVG любого размера. Тип type=»image/svg+xml» не нужен. <link rel="icon" href="favicon.svg"> Mask-icon Для Safari все немного ...

Читать далее »

5 распространенных проблем с доступностью веб-приложений и способы их устранения

От автора: на протяжении многих лет я работал над различными крупными проектами веб-приложений с разработчиками разного уровня опыта и часто сталкивался с одними и теми же проблемами доступности веб-приложений. В этой статье я подробно расскажу о 5 наиболее распространенных проблемах с веб-доступностью, и предложу решения для них. Делаете / делали ли вы эти ошибки в своих проектах? 1) Использование элемента ...

Читать далее »

Скрытие элементов в Веб

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

Читать далее »

Основы CSS: Сворачивание полей

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

Читать далее »

Как отобразить кнопку поиска, когда поле поиска не пусто

От автора: я думаю, что селектор :placeholder-shown невероятно крут. Он позволяет выбрать заполнитель для input (<input placeholder=»…»>), когда этот заполнитель присутствует. В смысле, когда в поле еще не введено значение. Вы можете подумать, что input[value] можете это сделать или помочь сопоставить действительное значение, но это не так. Это делает :placeholder-shown — одно из немногих имеющихся у нас CSS-свойств, которые могут ...

Читать далее »