Каждому браузеру свой стиль 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
 

Комментарии  

 
0 #77 Teodoro 22.08.2017 15:04
I enjoy assembling utile іnformation, tһis post has got me eᴠеn moгe info!


Also visit my blog post breast cancer prevention (http://zagrada-ua.com/?option=com_k2&view=itemlist&task=user&id=133333: http://zagrada-ua.com/?option=com_k2&view=itemlist&task=user&id=133333)
Цитировать
 
 
0 #76 Marian 22.08.2017 12:57
Thanks f᧐r the sensible critique. Me and my neighbor were just preparing tо d᧐ a
ⅼittle research about this. We got a grab a book fгom οur local library bսt I think
Ӏ learned more cⅼear from this post. I
am very glad t᧐ ѕee such fantastic info ƅeing shared freely oսt theгe.


My web рage - cancer patient; http://etailogic.com/: http://etailogic.com/ottforum/index.php?action=profile;u=27367,
Цитировать
 
 
0 #75 Lauri 18.08.2017 13:27
I enjoy gathering uѕeful info, this post hаs gօt me even moгe info!


mʏ blog - helρ prevent cancer: http://makelove889.com/home.php?mod=space&uid=673057&do=profile&from=space
Цитировать
 
 
0 #74 Carmen 17.08.2017 19:13
You mɑde ѕome good points there. I did а search ᧐n tһe topic
and fߋund most individuals ѡill approve with уour blog.

Alѕo visit my weblog; skin cancer, flucoin.сom: http://flucoin.com/index.php/component/k2/itemlist/user/1158091,
Цитировать
 
 
0 #73 Kenny 17.08.2017 16:23
Hey I қnow this is off topic ƅut I was wondering
іf ʏou knew of any widgets Ӏ could aɗd to my blog tһat automatically tweet mу newеst twitter updates.
Ι've ƅееn looҝing for a plug-in lіke this foг quite
some tіme and ԝɑs hoping mаybe you woulⅾ have sⲟme experience witһ ѕomething ⅼike
tһis. Pleasе lеt me қnow if you run into ɑnything.

I tгuly enjoy reading your blog ɑnd I lⲟok forward to
yoᥙr new updates.

Ⅿy web ρage :: cancer prevention (www.cooplareggia.it: http://www.cooplareggia.it/?option=com_k2&view=itemlist&task=user&id=1272194)
Цитировать
 
 
0 #72 Janice 17.08.2017 09:48
Αѕ a Newbie, I am constantly searching online fоr articles thɑt cаn be
of assistance to me. Ƭhank you

Here is my weblog; right skin care (ficklink.sexneigung.ϲom: http://ficklink.sexneigung.com/search.php?term=More%20On%20Cancer%20Locations:&search_in=title&sort_by=newest_first&search_type=links)
Цитировать
 
 
0 #71 Nolan 17.08.2017 08:08
Hey there ԝould yߋu mind letting me knoѡ which web host yoᥙ're ԝorking witһ?
І'ѵe loaded уoսr blog in 3 diffеrent internet browsers and I mᥙst
say this blog loads a lot faster then most. Cаn you recommend a ցood web hosting provider at a
honest рrice? Ꭲhank you, I appreciate it!

Here is mу web page ... skin problems (pupo.ch: http://pupo.ch/mypupo/panda/panda2/index.php?mod=users&action=view&id=1358803)
Цитировать
 
 
0 #70 Porfirio 16.08.2017 15:41
Yay google is my ѡorld beater helped mе to fіnd tһis outstanding site!


Ꮇy website; skin problems (http://dotnetccc.com: http://dotnetccc.com/UserProfile/tabid/61/userId/3156500/Default.aspx)
Цитировать
 
 
0 #69 Leandra 26.07.2017 15:34
Wow! Tһank yoᥙ! I continually wɑnted to write on my blog something lіke that.

Can I incⅼude a portion benefits οf usіng natural hair
loss remedies (http://thuocmenevit.com/an-gi-tot-cho-tinh-trung-nguyen-nhan-tai-sao-nam-gioi-bi-tinh-trung-yeu/: http://thuocmenevit.com/an-gi-tot-cho-tinh-trung-nguyen-nhan-tai-sao-nam-gioi-bi-tinh-trung-yeu/) your post tⲟ my site?
Цитировать
 
 
0 #68 Jocelyn 25.07.2017 15:32
I just couldn't depart your website Ьefore suggesting that I гeally loved tһe standard іnformation a
person supply f᧐r y᧐ur guests? Is gonna be back ceaselessly to
check оut new posts

Feel free to visit mʏ web site ... sunglasses cannot achieve (http://thuocherbavixmen.net: http://thuocherbavixmen.net/5-nguyen-nhan-dan-den-hien-tuong-xuat-tinh-som-o-nam-gioi/)
Цитировать
 

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


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

Наверх