CSS ХАКИ
CSS-хаки — это особые приемы или "обходные пути" для применения определенных стилей только для конкретных браузеров или их версий. Они помогают исправить баги рендеринга или нестандартное поведение в старых браузерах, которые не поддерживают современные спецификации CSS.

Зачем нужны CSS-хаки?
  • Разные браузеры по-разному интерпретируют CSS-код. Особенно это касается старых версий Internet Explorer, Safari, Firefox.
  • Устаревшие браузеры не поддерживают новые свойства CSS или работают с ними некорректно.
  • Нужно поддерживать кросс-браузерную совместимость, чтобы сайт выглядел одинаково на всех устройствах.
Как работают CSS-хаки?

CSS-хаки используют:
  1. Специфичные для браузеров синтаксические особенности. Некоторые браузеры понимают определенные записи стилей, а другие — нет.
  2. Селекторы и директивы, которые распознает только определенный движок браузера
Для Internet Explorer 10 и 11
/* Только IE 10 и 11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .selector {
    property: value;
  }
}

/* Пример */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .selector {
    background-color: blue;
  }
}
Для Internet Explorer 9 и ниже
/* Только для IE 9 и ниже */
.selector {
  property: value\9;
}

/* Пример */
.selector {
  color: red\9;
}
Для Safari на macOS
/* Хак для Safari */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .selector {
      property: value;
    }
  }
}

/* Пример */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .selector {
      font-size: 20px;
    }
  }
}
Для Chrome и Safari (WebKit)
/* Хак для WebKit-браузеров (Chrome, Safari) */
.selector {
  property: value;
  -webkit-property: value;
}

/* Пример */
.selector {
  -webkit-border-radius: 10px; /* WebKit-специфичное свойство */
  border-radius: 10px;
}
Для Firefox
/* Стиль сработает только в Firefox */
@-moz-document url-prefix() {
  .selector {
    border: 2px solid green;
  }
}
Для старых версий Edge (12–18)
/* Применяется только в старом Edge */
@supports (-ms-ime-align: auto) {
  .selector {
    padding: 10px;
  }
}
Для Chrome на Android
/* Стиль для Chrome на Android */
@media screen and (max-width: 640px) and (-webkit-min-device-pixel-ratio: 2) {
  .selector {
    font-size: 18px;
  }
}
Для iOS Safari
/* Хак для iOS Safari */
@supports (-webkit-touch-callout: none) {
  .selector {
    color: purple;
  }
}
CSS-хаки — это инструменты для тонкой настройки стилей под конкретные браузеры, но использовать их нужно только при необходимости, так как они усложняют поддержку кода.
Made on
Tilda