br 8eb34


search

Верстка для разных браузеров

browsЗанимаясь над созданием сайта, можно увидеть, как некоторые элементы по-разному отображаются на различных браузерах, в особенности на Internet Explorer. Естественно эту проблему надо решать и выполнять верстку для разных браузеров.

При создании сайта компании очень важно, чтобы сайт одинаково хорошо смотрелся на всех браузерах, поэтому приходится использоваться различные приемы. Также с помощью таких приёмов можно задать для определенного браузера свой стиль, отличающихся от других.

Рассмотрим использование приёмов для наиболее распространенных браузеров...

Mozilla Firefox

Для браузеров код для CSS стилей будет следующий:

@-moz-document url-prefix() {
   #blok {
     color: #000;
   }
}

Goggle Chrome (также и в Safari)

Оба данных браузера используют движок webkit, для них будет следующая запись:

@media screen and (-webkit-min-device-pixel-ratio:0) {
     #blok {
        color: #000;
     }
     /* и другие правила стилей для webkit */
}

Opera

Для Opera записи для персональной верстки постоянно меняются, поэтому использование указанного приема будет на страх и риск:

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, body { /* стиль только для Opera 12.00+ */
       background: red;
    };
}

Internet Explorer

Самый "капризный" из всех браузеров, часто он отличается не только от других браузеров, но и от своих ранних версий. Если писать для каждой версии IE отдельные правила, то потребуется отдельный файл стилей, путь к которому можно указать перед закрывающим </body>:

<--[if IE]>
     <link rel="stylesheet" type="text/css" href="/ie.css"/>
 <![endif]-->

Здесь условия могут отличаться и быть:

  • IE — любая версия браузера Internet Explorer;
  • IE 7 — Internet Explorer 7; (8 и 9 соответственно)

Использование данных приёмов верстки для разных браузеров не является обязательным условием, лучшим же решением будет использование максимально валидного кода.

Добавить комментарий

Защитный код
Обновить

Комментарии