Перейти к содержанию
Kuznec

Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome

Рекомендуемые сообщения

CSS-хаки для браузера Opera

  1. @media all and (-webkit-min-device-pixel-ratio:10000), 
  2. not all and (-webkit-min-device-pixel-ratio:0) { 
  3.  .style {background: #F00;}  
  4. }  
  1. *|html[xmlns*="".style {  
  2.   background: #F00;  
  3. }  
  1. html:first-child .style { 
  2.  background: #F00;  
  3. }  
  4. /* код валидный */  
  5. /* только для Opera < 9.5 */  

CSS-хак для браузера FireFox

  1. @-moz-document url-prefix() {  
  2.  .style {background: #F00;}  
  3. }  

CSS-хаки для браузера Internet Explorer 6

  1. .style {  
  2.  _background: #F00;  
  3. }  
  4. /* код валидный */  

Несмотря на то, что CSS-валидатор принимает хак с подчеркиванием за ошибку, спецификация CSS 2.1 позволяет использовать данную конструкцию.

  1. * html .style {  
  2.  background: #F00;  
  3. }  
  4. /* код валидный */  

CSS-хаки для браузера Internet Explorer 7

  1. *+html .style {  
  2.  background: #F00;  
  3. }  
  4. /* код валидный */  
  1. *:first-child+html .style { 
  2.  background: #F00;  
  3. }  
  4. /* код валидный */  
  1. html>body .style {  
  2.  *background: #F00;  
  3. }  

CSS-хак для браузера Internet Explorer 8

  1. @media \0screen {  
  2.  .style {background: #F00;}  
  3. }  

CSS-хак для браузера Internet Explorer 9

  1. :root .style { 
  2.  background: #F00\9;  
  3. }  

К сожалению, IE10 тоже понимает данный хак.

CSS-хак для браузера Internet Explorer 10

  1. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
  2.  .style {background: #F00;}  
  3. }  

CSS-хаки для браузера Safari

  1. body:last-child:not(:root:root) .style { 
  2.  background: #F00;  
  3. }  
  4. /* для Safari < 4.0 */  
  1. html[xmlns*=""] body:last-child .style { 
  2.  background: #F00;  
  3. }  
  4. /* для Safari < 4.0 */  

CSS-хаки для браузера Google Chrome

Пока все ок.

 

 

По мере посещения различных зарубежный интернет-ресурсов по веб-разработке, обнаруживаю для себя все новые и новые CSS-хаки, которые можно применить персонально для одного из популярных сегодня браузеров: Opera, FireFox, Internet Explorer, Safari, Google Chrome.

По мере обнаружения новых хаков, данный список буду дополнять.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А зачем все это нужно? Чтобы фон был красным наверняка? :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

background написано чисто тдля примера, обычно в основном косячит позиция и высота, да и еще много свойств. например, кое кто никак не понимает отрицательный margin, тогда для этих версий браузеров юзаем хаку, ибо ...  да и с бэкграундом есть интересные моменты если он не тупо фон.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.