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

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

Анимация иконок Font Awesome и другие возможности

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

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

Используйте Reseter.css вместо Normalize и Reset.css, чтобы улучшить кроссбраузерность

От автора: на данный момент я думаю, что существующие Reset.css и Normalize.css имеют меньше функций и лишены многих вещей. Я представляю вам новый CSS-нормализатор, созданный как футуристическая альтернатива normalize.css и reset.css. Reseter.css имеет настраиваемую поддержку браузера, которая по умолчанию присутствует во всех браузерах. Он также содержит современные методы CSS. Особенности Reseter.css Reseter.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) Использование элемента ...

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

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

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

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