< H / $ > Хак/Собесов

Перейти на PRO

Сталкивался ли с созданием специфичного класса для отображения элемента в разных браузерах

«Сталкивался ли с созданием специфичного класса для отображения элемента в разных браузерах» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Разработчик

Ответ

Да, сталкивался. Чаще всего это касается вендорных префиксов или специфичных стилей для Safari/IE. Например:

.element {
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none; /* Firefox */
  appearance: none; /* стандарт */
}

/* Для IE11 */
@media all and (-ms-high-contrast: none) {
  .element {
    background: #f00;
  }
}

Или через JavaScript можно определить браузер и добавить класс:

if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')) {
  document.body.classList.add('safari');
}

Лучше использовать feature detection (Modernizr) вместо userAgent.