Каждому браузеру свой стиль CSS
Добавил(а) amorexxx   
09.06.10 15:00

Каждому браузеру свой стиль 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 и скопируйте его во все остальные файлы предназначены для других браузеров сохраните этот код и откройте ваш сайт в других браузерах и посмотрите чем отличается дизайн и отображение от вашего и уже те моменты которые вы считаете отображаются не так вы можете подправить в нужном вам файле. Вот собственно и всё!

Метки:
Последнее обновление 29.08.12 15:38
 

Комментарии  

 
-2 #14 Russl 30.01.2013 12:52
Цитирую Shumaher:
чувак, код конечно полезный, но пользуйся ЗАПЯТЫМИ в тексте! что за тупость?
очень сложно читать

скорее это ты тупой раз сложно читать :lol:
Цитировать
 
 
+1 #13 Дмитрий 24.01.2013 17:48
Попробовал для джумлы - не пашет.
Цитировать
 
 
-2 #12 swetlana 10.05.2012 16:07
вот немного модифицировала ваш код.
Цитировать
 
 
-2 #11 автор 01.03.2012 15:26
Цитирую Sergey:
А можно подключить firefoxonyl.css без PHP, например так же как для ИЕ HTML-комментарием в haed?
можно попробовать средством js определить браузер + потом до грузить аджаксом если только так. Но мы так не про бывали так как этот способ не совсем ровный получиться
Цитировать
 
 
-1 #10 Sergey 27.02.2012 21:23
А можно подключить firefoxonyl.css без PHP, например так же как для ИЕ HTML-комментарием в haed?
Цитировать
 
 
+3 #9 Денис 24.08.2011 14:00
Благодарю за полезную инфу,у меня каждый браузер коверкал сайт по своему,теперь проблема решена :-)
Цитировать
 
 
-18 #8 Вася 07.03.2011 02:25
Выучи русский язык. чурка
Цитировать
 
 
0 #7 demannu 14.10.2010 05:36
мдем, сорь за спам :) я хотел сказать что там ошибочка вроде, как я понимаю, название файла css для firefox firefoxonly.css
Цитировать
 
 
0 #6 demannu 14.10.2010 05:35
"...подключение стилей и создать в корне сайта папку css в ней разместить файлы : firefox.css"
Цитировать
 
 
0 #5 demannu 14.10.2010 05:34
Спасибо огромное именно это и нужно было :) ы

"Данный код вам надо вставить в тег HEAD он же отвечает за подключение стилей и создать в корне сайта папку css в ней разместить файлы : firefox.css"
Цитировать
 

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


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

 

Интернет магазин

inet_small

icon66 Система управление

icon66Шаблон на выбор

icon66Контент

ещё...

Сайт-визитка

vizitka_small

icon66 Система управление

icon66Логотип

icon66Контент

ещё...

Корпоративный сайт

korporaciya_small

icon66 Система управление

icon66Дизайн

icon66Контент

ещё...

Смотреть все...