Кроссбраузерная верстка сайта

Кроссбраузерная верстка - это такая верстка, при которой страница сайта отображается одинаково во всех браузерах, сохраняя свою функциональность.

Известно, что один и тот же html или php код может выглядеть по разному в разных браузерах (например: Firefox и Opera) . Кроссбраузерная верстка сделает так, чтобы сайт во всех браузерах отображался одинаково.

На данный момент, в России существует несколько самых популярных браузеров, при помощи которых люди ежедневно работают в сети Интернет и просматривают сайты. Таковыми браузерами являются Mozilla Firefox, Opera, Google Chrome и Safari. Делать сайт кроссбраузерным для каких либо других браузеров - не вижу смысла.

Разные стили для каждого браузера в одном файле CSS

Кроссбраузерный сайт возможно сделать с помощью подключения различных файлов CSS, для каждого браузера отдельно. Но мне этот способ показался не очень удобным. Поэтому предлагаю вам способ, который реализуется при помощи HTML и одного файла CSS.

Код расположенный ниже необходимо вставить перед тегом <body> в файле header.php :

<?php
$sBrowserClass = "";
if (preg_match("/Opera\W*(\d+(:?\.\d+)?)/",@$_SERVER["HTTP_USER_AGENT"], $aMatch)) {
$sBrowserClass = "isOpera";
if (@$aMatch[1] && $aMatch[1] < 9) {
$sBrowserClass .= " isOpera8";
}
}
elseif (preg_match("/MSIE\W*(\d+(:?\.\d+)?)/",@$_SERVER["HTTP_USER_AGENT"], $aMatch)) {
$sBrowserClass = "isIE";
if (@$aMatch[1] && $aMatch[1] < 7) {
$sBrowserClass .= " isIE6";
}
}
elseif (preg_match("/Chrome\W*(\d+(:?\.\d+)?)/",@$_SERVER["HTTP_USER_AGENT"], $aMatch)) {
$sBrowserClass = "isChrome";
if (@$aMatch[1] && $aMatch[1] < 7) {
$sBrowserClass .= " isChrome";
}
}
elseif (preg_match("/Safari\W*(\d+(:?\.\d+)?)/",@$_SERVER["HTTP_USER_AGENT"], $aMatch)) {
$sBrowserClass = "isSafari";
if (@$aMatch[1] && $aMatch[1] < 7) {
$sBrowserClass .= " isSafari";
}
}
if ($sBrowserClass) {
$sBrowserClass = ' class="' . $sBrowserClass . '"';
}
?>
<body<?=$sBrowserClass?>>

Как вы заметили, в коде не упомянут браузер Mozilla Firefox. Это потому, что я обычно верстаю сайт именно под браузер Firefox, а под остальные правлю файл style.css

Тем самым получаем разные классы для всего содержимого, находящегося между тегами <body>...</body> для нужных браузеров. Например, <div id= "menu"> в файле style.css для браузера Opera будет выглядеть как .isOpera #menu , и это дает нам возможность применить к этому классу стиль, который будет понимать только браузер Opera.

Кроссбраузерный файл CSS будет выглядить так:

#menu {
   width: 100px;
   margin: 10px 5px 10px 0;
}

.isOpera #menu {
   width: 110px;
   margin: 10px 5px 10px 5px;
}

.isChrome #menu {
     margin: 15px 5px 10px 0;
}

Если что-то не будет работать, обращайтесь ко мне за помощью ;)

Код верстки под браузер Mozilla

<?php
$sBrowserClass = "";
    if (preg_match("/Opera\W*(\d+(:?\.\d+)?)/",@$_SERVER["HTTP_USER_AGENT"], $aMatch)) {
      $sBrowserClass = "isOpera";

      if (@$aMatch[1] && $aMatch[1] < 9) {
        $sBrowserClass .= " isOpera8";
      }

    } elseif (preg_match("/Mozilla\W*(\d+(:?\.\d+)?)/",@$_SERVER["HTTP_USER_AGENT"], $aMatch)) {
    $sBrowserClass = "isMozilla";
    if (@$aMatch[1] &&  $aMatch[1] < 7) {
        $sBrowserClass .= " isMozilla";
    }
}
    if ($sBrowserClass) {
      $sBrowserClass = ' class="' . $sBrowserClass . '"';
    }
?>

А в style.css, соответственно, присвоим всем нужным элементам класс .isMozilla следующим образом:

#menu {
   width: 100px;
   margin: 10px 5px 10px 0;
}

.isMozilla #menu {
   width: 110px;
   margin: 10px 5px 10px 5px;
}

Благодарю, за внимание! :)

Кроссбраузерная верстка сайта – хук для WordPress

Разные стили для каждого браузера в одном файле CSS

Код верстки под браузер Mozilla