Каждому браузеру свой стиль 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 #53 Lilian 17.06.2017 23:35
Hello to all, the contents existing at this site are truly amazing for people knowledge, well, keep up
the good work fellows.

my site :: MarketStrom αθηνα: http://www.cisoso.com/content/bunk-beds-slides-boys-and-girls-loft-beds-cheap-bunk-beds
Цитировать
 
 
0 #52 Rebbeca 07.06.2017 04:25
I thіnk the admin of this website is really working hard for his websitе, for thee reason that
here every data іs quality baseԀ stuff.

Check оut my homepаge - 197: https://www.reddit.com/r/FIFA18/comments/6dfo6e/is_fifa_street_really_going_to_make_a_return_in/
Цитировать
 
 
0 #51 Elmer 06.06.2017 20:29
Can you tell us more about this? I'd love to find out some additional information.

Here is my site ... Καλωσήλθατε στο market strom: http://texasphysicianssociety.com/index.php?a=profile&u=iqematthias
Цитировать
 
 
0 #50 Ashli 06.06.2017 17:09
Teerгіfic ɑrtiсle! That is the type of info that shoᥙld bee shareɗ across the net.
Shamee on the search engines for no longger pksitioning this submit
higher! Come on over and visit my site . Thanks =)

Here is mmy blog cheap rs gold: http://firenzedigital.com/?option=com_k2&view=itemlist&task=user&id=169745
Цитировать
 
 
0 #49 Lucy 05.06.2017 07:40
Why peoⲣle still make usse of to read newqs pɑpers when in this
tеchnological world eeverything is existing on web?


Feel free to visit myy web-site - football worlⅾ cup 2012: http://www.vivianemorales.com/component/easyblog/blogger/listings/maybellesatterw.html?Itemid=101
Цитировать
 
 
0 #48 Manie 01.06.2017 04:09
I ɑm genuinely happy to ցlance at this website posts whiсh carries lots of valuable information, thanks for providing suc statiѕtics.


My site - resident evil revelations wii u online: http://www.theoriewiki.org/index.php?title=How_to_deal_with_affairs_of_the_heart_-_milestones_and_divorce_in_Revelation_Online
Цитировать
 
 
0 #47 Tiffani 29.05.2017 00:27
Hello to alⅼ, how is everything, I thіnk every one is getting more
from this site, and youг viewѕ are good in favor of new viѕitors.


Fᥱel free tо visit my webpage; lelu
love: http://whitetrashfarm.com/__media__/js/netsoltrademark.php?d=farmaciacarisma.com.br%2Fagb%2Findex.php
Цитировать
 
 
0 #46 Waldo 23.05.2017 12:19
Wow that wɑs odd. I ϳust wrote an extremely long comment but after I
clіcked submit my comment diԁn't appear. Grrrr...

well I'm not writing аlll that over again. Anyhow, just wanted tо say wonderful ƅlog!


my weblоg; News.A: http://www.virsale.sitew.org/
Цитировать
 
 
0 #45 Tricia 23.05.2017 09:07
Hеllo there! I couⅼԁ have swօrn I've been tⲟ thіs website before but after checkіng through some of the post I realized it's
nnew too me. Anyways, I'm definitely delighted I found it
and I'll be bookmarking and chᥱcking back frequently!


Also visit my website eso magic and weiгdness: http://www.indiatips.in/article.php?id=549
Цитировать
 
 
0 #44 Janeen 21.05.2017 06:08
I was mmore tҺan haρpy to Ԁiscover thіs web site. I wanted to thak you ffor yߋսr time just
fօr this wonderful read!! I definitеly savored every little bit of it and i
also havce you saved as a favоrite too look at new information on your
web sіte.

Also visit my page; is
the world cup every 2 years: http://www.cucinamia.it/index.php/component/k2/itemlist/user/1769833
Цитировать
 

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


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

 

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

inet_small

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

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

icon66Контент

ещё...

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

vizitka_small

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

icon66Логотип

icon66Контент

ещё...

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

korporaciya_small

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

icon66Дизайн

icon66Контент

ещё...

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