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

CSS хаки для Opera

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

CSS хак для Opera 9.2 и ниже

Этот хак основан на ошибке понимания браузером Opera псевдокласса CSS :first-child. В данном случае этот псевдокласс применяется к тегу <HTML>, который на самом деле не может быть ни первым, ни каким-либо другим дочерним элементом у кого бы то ни было, так как сам является корневым. Но Opera версии 9.01 или ниже спокойно понимает такую конструкцию, а вот другие браузеры — нет.

Синтаксис:

html:first-child селектор { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для Opera 9.2 и младше

<!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 - Хаки для Opera</title>
  <style type="text/css">
  .par {
   color: green; /* для всех */
  }
   html:first-child .par {
    color: red; /* для Opera 9.2 и младше */
  }
  </style>
 </head>
 <body>
  <p class="par">
   В Opera версий 9.2 и ниже этот текст будет красным, в остальных - зеленым.
  </p>
 </body>
</html>

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

CSS хак для Opera 10.0

В этом хаке используется at-правило CSS @media, но с таким значением, которого нет в языке CSS, однако Opera 10.0 прекрасно его понимает.

Синтаксис:

@media (0) { селектор { стили CSS } }

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

Пример HTML и CSS: хак для Opera 10.0

<!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 - Хаки для Opera</title>
  <style type="text/css">
  .par {
   border: 3px blue solid; /* для всех */
  }
  @media (0) {
   .par {
   border: 3px orange solid; /* для Opera 10.0 */
   }
  }
  </style>
 </head>
 <body>
  <p class="par">
   В этом примере рамка в Opera 10.0 будет оранжевой, а в остальных браузерах - синей.
  </p>
 </body>
</html>

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

CSS хак для Opera 9.6 и выше

В этом хаке тоже используется at-правило с нестандартным значением, которое понимает только Opera, но уже с версии 9.6 и по текущую (на момент написания статьи).

Синтаксис:

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

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

Пример HTML и CSS: хак для Opera 9.6 и старше

<!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 - Хаки для Opera</title>
  <style type="text/css">
  .par {
   background: orange; /* для всех */
  }
  @media not all and (-webkit-min-device-pixel-ratio:0) {
   .par {
    background: red; /* для Opera 9.6 и старше */
   }
  }
  </style>
 </head>
 <body>
  <p class="par">
   В браузере Opera с версии 9.6 фон будет красным, в остальных - оранжевым.
  </p>
 </body>
</html>

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

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