Ваш город Москва Новосибирск Работаем по всей России
Каждому браузеру свой стиль CSS

Каждому браузеру свой стиль CSS

На сегодняшний день существуют множество разных браузеров они все стремятся и поддержке спецификации CSS официально установленной но всё ровно каждый верстальщик шаблона сайта сталкивается с проблемой отображение сайта в разных браузерах. При этом можно долго спорить, какой из браузеров «более правильный», суть остается одна — пока существуют несколько браузеров и люди их применяют, сайт надо делать так, чтобы он корректно и без ошибок в них отображался так как задумали разработчики и дизайнеры. Ведь не один владелец своего сайта не хочет потерять например аудиторию пользователей которые используют браузер в котором не корректно отображается его сайт. Как же быть в такой ситуации на сегодняшний день существует множество способов победить эту проблему один из распространённых способов это писать в основной CSS так называемые хаки стилей которые будут читаться только теми браузерами для которых они написаны, например вы написали CSS под свой сайт но в Internet Explorer 6 версии отображает не так как в других, например:вам кажеться что в IE 6 ширина блока

отображеться не на 100px а меньше то вы можете принудительно её увеличить отдельным хаком для IE 6


1
2
3
4



 
.Box { 
width:100px; /*для всех браузеров*/ 
-width:110px;/*только для IE 6*/ 
}

 

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

phh код 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<link rel="stylesheet" type="text/css" media="all"  href="/css/<?php
      $nav = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
 
 
	   // для браузера Mozila и FireFox
 
         if (stristr($nav, "firefox"))
         {
            echo "firefoxonly.css";
         }
 
		  //  для браузера Opera
 
           elseif (stristr($nav, "opera")) 
         {
            echo "template.css";
         }
 
      // для браузера Safari
 
         elseif (stristr($nav, "safari"))
         {
            echo "safari.css";
         }
      // для браузера Google Chrome
 
         elseif (stristr($nav, "chrome"))
         {
            echo "chrome.css";
         }
 
		 // для браузера  IE 6
 
         elseif (stristr($nav, "IE 6"))
         {
            echo "ieonly.css";
         }
 
		  // для браузера  IE 7
 
         elseif (stristr($nav, "IE 7"))
         {
            echo "ie7only.css";
         }
 
		  // для браузера  IE 8
 
         elseif (stristr($nav, "IE 8"))
         {
            echo "ie8only.css";
         }
 
		  // Для всех прочих браузеров
 
          else
         {
            echo "template.css";
         }
 
   ?>" />

 


Данный код вам надо вставить в тег HEAD он же отвечает за подключение стилей и создать в корне сайта папку css в ней разместить файлы : firefox.css, template.css, safari.css, chrome.css, ieonly.css, ie7only.css, ie8only.css. В каждом файле будет полная таблица стилей для сайта соответствующему браузеру. Единственное за основу мною взят браузер Opera и ему соответствует css : template.css так же для всех остальных браузеров которых нету в коде скрипта он тоже будет использоваться. Мне некоторые говорят о так это придётся писать с нуля CSSски для всех браузеров это долго. Нет не придётся я отвечаю всем я делаю очень просто когда занимаюсь вёрсткой дизайна сайта: при вёрстке дизайна начинайте прописывать стили в файле template.css и смотрите как будет выглядеть сайт в Opere после того как вы закончите верстку вы просто выделите всё содержимое файла template.css и скопируйте его во все остальные файлы предназначены для других браузеров сохраните этот код и откройте ваш сайт в других браузерах и посмотрите чем отличается дизайн и отображение от вашего и уже те моменты которые вы считаете отображаются не так вы можете подправить в нужном вам файле. Вот собственно и всё!

Метки:
 
Наверх