CSS-свойство appearance позволяет изменять внешний вид элементов на странице. Оно дает возможность сделать обычный элемент похожим на стандартный элемент браузера. Например, кнопку можно сделать похожей на checkbox или radio. Это свойство поддерживается не всеми браузерами, но может быть полезно в некоторых случаях.
Перевод слова appearance - "внешний вид" или "оформление". Это ключевое слово в определении данного CSS-свойства.
Варианты значений свойства appearance
Свойство appearance может принимать следующие значения:
- none - элемент отображается без дополнительных стилей
- button - элемент выглядит как кнопка
- checkbox - отображается как чекбокс
- radio - отображается как радиокнопка
- menulist - стиль выпадающего списка
Также можно указывать произвольное значение. Браузер постарается отобразить элемент соответствующим образом.
Примеры использования
Рассмотрим несколько примеров применения appearance для изменения внешнего вида элементов.
Кнопка в виде чекбокса
Сделаем обычную кнопку похожей на чекбокс:
.my-btn { appearance: checkbox; } Теперь кнопка будет отображаться с таким же стилем, что и чекбокс.
Список как радиогруппа
Преобразуем список в набор радиокнопок:
ul { list-style-type: none; appearance: radio; } Теперь каждый элемент списка будет выглядеть как отдельная радиокнопка.
Кастомные стили
Можно задать любое произвольное значение:
button { appearance: my-custom-style; } Браузер попытается отобразить кнопку соответствующим образом. Эффект будет не на всех браузерах.
Совместимость
К сожалению, свойство appearance пока не имеет идеальной кроссбраузерной поддержки. Лучше всего оно работает в браузерах на движке Gecko (Firefox). В Chrome и Safari поддержка ограниченная. Совсем не поддерживается в IE и Edge.
Поэтому, прежде чем использовать это свойство, стоит убедиться, что оно принесет пользу с учетом аудитории сайта. Наиболее безопасный вариант — применять appearance в связке с другими способами стилизации и обеспечивать кроссбраузерную поддержку.
Свойство appearance CSS позволяет изменить стандартное отображение элемента на какой-либо другой внешний вид. Это дает дополнительные возможности для стилизации интерфейса.
Однако из-за неидеальной поддержки данного свойства браузерами, стоит применять его с осторожностью и в сочетании с другими методами оформления. Тогда можно извлечь максимум пользы из appearance для изменения внешнего вида элементов на странице.
Поддержка appearance в разных браузерах
Разные браузеры по-разному поддерживают свойство appearance. Давайте рассмотрим подробнее совместимость с различными браузерами.
Firefox
Браузер Firefox демонстрирует наилучшую поддержку appearance из всех популярных браузеров. Здесь это свойство работает в полном объеме начиная с версии Firefox 2.
Chrome и Safari
В браузерах Chrome и Safari на движке WebKit свойство appearance поддерживается частично. Некоторые значения, такие как checkbox, button, работают корректно. Однако кастомные значения игнорируются.
Internet Explorer
Старые версии Internet Explorer вообще не поддерживают данное свойство. Начиная с IE9 появилась частичная поддержка, но работает нестабильно и с ошибками.
Edge
В браузере Edge, основанном на движке Chromium, поддержка appearance находится примерно на том же уровне, что и в Chrome. Стандартные значения работают, а кастомные - нет.
Взаимодействие со свойством -webkit-appearance
В браузерах WebKit и Blink есть префиксное свойство -webkit-appearance, которое во многом дублирует функционал обычного appearance. Рекомендуется использовать его вместе с appearance для расширения поддержки.
Преимущество -webkit-appearance
Главным преимуществом -webkit-appearance является возможность применять кастомные значения для стилизации элементов. Эта возможность отсутствует в обычном appearance.
Кроссбраузерность
Используя -webkit-appearance совместно с appearance, мы обеспечиваем максимальную кроссбраузерную поддержку для стилизации элементов нестандартными внешними видами.
Альтернативы appearance
Если по каким-то причинам использование appearance невозможно, есть несколько альтернативных способов изменения внешнего вида элементов.
Изображения
Можно задать фоновое изображение элемента вместо стандартного стиля. Например, для чекбокса использовать картинку с изображением галочки.
Другие CSS-свойства
Комбинируя различные CSS-свойства, такие как border, border-radius, box-shadow и другие, можно создать кастомный внешний вид элемента.
JavaScript
С помощью JavaScript можно манипулировать стилями элементов, добиваясь нужного внешнего вида. Это более гибкий, но и более сложный подход.
Практические советы по использованию appearance
Давайте рассмотрим несколько полезных советов, как эффективно использовать свойство appearance в проектах.
Проверяйте поддержку
Перед применением appearance на сайте, обязательно проверьте его поддержку в целевых браузерах и их версиях. Можно воспользоваться сервисом Can I Use.
Используйте префиксы
Добавляйте вендорные префиксы -webkit-, -moz- для расширения поддержки старыми браузерами.
Фоллбеки и полифилы
Предусмотрите фоллбеки на случай неподдержки, например, задайте другие стили. Также можно использовать JavaScript полифилы.
Тестируйте на реальных устройствах
Помимо эмуляции, обязательно тестируйте appearance на реальных девайсах - мобильных телефонах, планшетах.
Примеры использования appearance
Рассмотрим еще несколько интересных примеров использования свойства appearance.
Кастомные радиокнопки
Создадим стилизованные радиокнопки с изображениями вместо точек.
Темы оформления
Можно подготовить несколько тем оформления сайта и переключать их динамически, меняя значения appearance.
Адаптивная стилизация
На разных разрешениях экрана appearance позволяет по-разному стилизовать одни и те же элементы.
Доступность при использовании appearance
При работе со свойством appearance не стоит забывать про доступность.
Дескрипторы ARIA
Чтобы экранные ридеры правильно зачитывали элементы, используйте соответствующие роли и дескрипторы ARIA.
Focus styles
Не забывайте задавать focus-стили для элементов, чтобы была видна текущая фокусировка.
Семантика
При изменении внешнего вида элементов, сохраняйте их семантическое значение с помощью тегов и атрибутов.
