Каждому браузеру свой стиль 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 #32 Ines 24.02.2017 10:48
I am very happy that I've came across this blog site.
Its design, posts, and themes - I like the whole thing.
You do great work. I am going to write some guide like business plan coursework: http://morrisblom71.livejournal.com/1498.html for starting authors.
May I include your weblog as one example of
really good blogging?
Цитировать
 
 
0 #31 Justine 22.02.2017 03:06
Hi everybody, here every one is sharing such knowledge, therefore it's good to read
this webpage, and I used to visit this blog daily.


my website; golf
online: https://meducation.net/resources/1761291-Use-Pre-Black-Friday-Sales-to-Buy-These-High-Tech-Beauty-Products-That-ll-Dial-up-Your-Skin-Care-Routine
Цитировать
 
 
0 #30 Rafaela 21.02.2017 19:21
After exploring a few of the blog posts on your website, I truly like your way of blogging.

I saved as a favorite it to my bookmark webpage list and will be checking back
soon. Please check out my web site as well and let me know how you feel.



Check out my site :: travel (Melinda: https://nanohub.org/members/157921/blog/2016/11/things-you-should-do-before-going-global)
Цитировать
 
 
0 #29 Dwayne 21.02.2017 03:33
Hey There. I found your blog using msn. This is an extremely well written article.
I will make sure to bookmark it and come back to read more of your useful information. Thanks for the post.
I'll definitely return.

my blog post - travel, Lupe: http://www.giikers.com/article/83217/traveling-to-india-with-kids,
Цитировать
 
 
0 #28 Samuel 20.02.2017 21:55
What i don't understood is in reality how you're no longer really a lot more neatly-appreciated than you might be right now.

You're very intelligent. You know thus significantly in terms of this matter,
made me in my view consider it from numerous numerous angles.
Its like women and men don't seem to be fascinated unless it's
one thing to accomplish with Girl gaga! Your personal stuffs great.

All the time maintain it up!

Here is my web-site; travel; Ross: https://www.tripoto.com/trip/why-should-you-travel-to-asia-if-you-have-a-tight-travel-budget-582eb0aa524ba,
Цитировать
 
 
0 #27 Matthias 20.02.2017 17:44
I am extremely impressed with your writing skills and also
with the layout on your blog. Is this a paid theme or did you modify it
yourself? Anyway keep up the nice quality writing, it is rare to see
a nice blog like this one today.

my website; travel (Kieran: http://www.ehcanadatravel.com/travel-stories/5500.html)
Цитировать
 
 
0 #26 Tam 19.02.2017 21:07
Hi, this weekend is pleasant in favor of me, as this time i
am reading this impressive educational paragraph here at my
house.

my web-site :: travel; Josefina: https://www.tripoto.com/trip/why-should-you-travel-to-asia-if-you-have-a-tight-travel-budget-582eb0aa524ba,
Цитировать
 
 
0 #25 Susana 19.02.2017 05:19
I am regular reader, how are you everybody? This article posted at this site is in fact nice.


Take a look at my web page ... travel - Dawna: https://www.lomography.com/homes/paulinemarshall/notes/1917067-enjoying-your-time-in-rome,
Цитировать
 
 
0 #24 Carmine 17.02.2017 20:32
Heya i am for the first time here. I came across this board and I find It truly useful &
it helped me out a lot. I hope to give something back and
aid others like you helped me.

Also visit my weblog :: travel (Tara: https://pharmahub.org/members/2470/blog/2016/11/why-should-you-pack-your-bags-immediately-and-travel-to-a-new-place)
Цитировать
 
 
0 #23 Mariam 17.02.2017 15:15
I got this web page from my pal who informed me regarding
this web page and now this time I am visiting this web site and reading very informative articles or reviews at
this time.

Here is my web blog :: travel [Jewell: https://www.tripoto.com/trip/why-should-you-travel-to-asia-if-you-have-a-tight-travel-budget-582eb0aa524ba]
Цитировать
 

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


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

 

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

inet_small

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

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

icon66Контент

ещё...

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

vizitka_small

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

icon66Логотип

icon66Контент

ещё...

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

korporaciya_small

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

icon66Дизайн

icon66Контент

ещё...

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