Опубликовано: 12.05.2011 Последняя правка: 08.12.2015

CSS хаки для Chrome и Safari

На этой странице описаны CSS хаки для Chrome и Safari, используя которые можно назначить HTML-элементу какие-то свойства, понимаемые только этими браузерами, но игнорируемые другими.

CSS хак для Chrome и Safari

В данном хаке используется at-правило CSS @media со значением, которое отсутствует в языке CSS, однако браузеры Chrome и Safari отлично его понимают (на момент написания статьи).

Синтаксис:

@media all and (-webkit-min-device-pixel-ratio:0) { селектор { стили CSS } }

Валидация: нет.

Пример HTML и CSS: хак для Chrome и Safari

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Хаки для Chrome и Safari</title>
  <style type="text/css">
  .par {
   color: green; /* для всех */
  }
  @media all and (-webkit-min-device-pixel-ratio:0) {
   .par {
    color: red; /* для Chrome и Safari */
   }
  }
  </style>
 </head>
 <body>
  <p class="par">
   В Chrome и Safari этот текст будет красным, в остальных браузерах - зеленым.
  </p>
 </body>
</html>

Результат примера

CSS хак для Safari 3.x и ниже

Этот хак основан на ошибке браузера Safari версий 3.x и ниже в определении правильного синтаксиса псевдокласса CSS :not. Все остальные браузеры игнорируют подобное объявление, причем старые, потому что не понимают CSS 3, а современные, потому что знают правильный синтаксис.

Синтаксис:

body:last-child:not(:root:root) селектор { стили CSS }

Валидация: нет.

Пример HTML и CSS: хак для Safari версий 3.x и младше

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Хаки для Chrome и Safari</title>
  <style type="text/css">
  .par {
   background: orange; /* для всех */
  }
  body:last-child:not(:root:root) .par {
   background: red; /* для Safari 3.x и младше */
  }
  </style>
 </head>
 <body>
  <p class="par">
   В Safari 3.x и ниже фон параграфа будет красным, в остальных браузерах - оранжевым.
  </p>
 </body>
</html>

Результат примера

Хаки для браузеров