Каждому браузеру свой стиль 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 #414 Zelma 05.10.2022 03:13
Remarkable things here. I am very satisfied
to see your article. Thanks so much and I'm taking a look ahead to touch
you. Will you please drop me a mail?

Here is my blog stromectol australia: https://www.seje.gov.mz/question/order-stromectol-over-the-counter-6/
Цитировать
 
 
0 #413 Karri 01.10.2022 16:55
HULU: http://wwwi.odnoklassniki-film.ru/index.php?serial-2022-id=23421
Цитировать
 
 
0 #412 Sven 01.10.2022 05:51
serial: http://sezon.sezons.store/episode-watch-online/zalim-istanbul-episode-13-watch-online.html
Цитировать
 
 
0 #411 Dewayne 01.10.2022 02:58
Фильмы музыка сериалы онлайн: https://bit.ly/3SFundM
Цитировать
 
 
0 #410 Lorna 30.09.2022 21:35
wwwi.odnoklassniki-film.ru: http://wwwi.odnoklassniki-film.ru
Цитировать
 
 
0 #409 Ernest 30.09.2022 17:20
Молодой человек фильм 2022: https://bit.ly/3foZ1d5 Фильм
Молодой Человек
Цитировать
 
 
0 #408 Zachery 30.09.2022 08:25
odnoklassniki-film.store: https://odnoklassniki-film.store
Цитировать
 
 
0 #407 Rosetta 30.09.2022 02:27
мама постоянно
дома: http://kremlin-team.ru Что Влияет На Формирование Жизненного Стиля По
Адлеру
Цитировать
 
 
0 #406 German 30.09.2022 01:48
Смотреть Быстрее пули (2022) онлайн в хорошем HD 1080 качестве: https://bit.ly/3LOikbX Быстрее Пули Без Рекламы
Цитировать
 
 
0 #405 Christel 30.09.2022 00:14
Эра выживания смотреть онлайн бесплатно в хорошем качестве полный: https://bit.ly/3E2XQdE Эра
Выживания Смотреть В Хорошем Качестве
Цитировать
 
 
0 #404 Sherry 29.09.2022 23:42
Игра на выживание 2 сезон дата выхода серий на ТНТ: https://bit.ly/3xXZw4n Игра На Выживание 2 Сезон
Цитировать
 
 
0 #403 Alejandra 29.09.2022 04:18
Дом дракона: https://radioserial.ru/ Дом Дракона
Цитировать
 
 
0 #402 Terrell 28.09.2022 22:59
Молодой человек: https://bit.ly/3foZ1d5 Фильм Молодой Человек
Цитировать
 
 
0 #401 Casie 25.09.2022 17:17
more: https://bit.ly/3BWKEWc Url
Цитировать
 
 
0 #400 Stanley 23.09.2022 21:07
Смотреть онлайн фильм в хорошем качестве..
Открыто смотреть онлайн в хорошем качестве бесплатно фильмы: https://bit.ly/3qAIwwN.
Смотреть онлайн полный фильм в HD 1080
фильмы онлайн
Цитировать
 
 
0 #399 Hugo 22.09.2022 01:41
link: http://google.mk/url?q=http://br.filmtvdir.com/ Url
Цитировать
 
 
0 #398 Melanie 22.09.2022 01:38
site: http://maps.google.com.ng/url?q=http://br.filmtvdir.com/ Site
Цитировать
 
 
0 #397 Jorg 22.09.2022 01:16
site: http://google.com.bd/url?q=http://br.filmtvdir.com/ Link
Цитировать
 
 
0 #396 Sienna 21.09.2022 06:49
Фильм смотреть онлайн бесплатно..
По ссылке смотреть онлайн в
хорошем качестве бесплатно фильмы: https://bit.ly/3qAIwwN.
Смотреть фильмы онлайн — Теги видео
Цитировать
 
 
0 #395 Marc 21.09.2022 03:35
more: https://is.gd/u9dorA Url
Цитировать
 
 
0 #394 Russell 20.09.2022 06:51
serial: http://sezon.sezons.store/episode-watch-online/versailles-episode-3-watch-online.html
Цитировать
 
 
0 #393 Carmela 20.09.2022 01:57
Видео смотреть онлайн..
Вот смотреть онлайн в
хорошем качестве бесплатно фильмы: https://bit.ly/3qAIwwN.
V.I.P. · Смотреть онлайн: · Скачать
фильм
Цитировать
 
 
0 #392 Marcus 19.09.2022 23:15
serial: http://serial.watch-watch-watch.store/episode-watch-online/gangs-of-london-episode-12-watch-online.html
Цитировать
 
 
0 #391 Lavada 19.09.2022 18:30
Фильмы HD. Тут смотреть онлайн в хорошем качестве
бесплатно фильмы: https://bit.ly/3qAIwwN. Буду смотреть.
Видео: Анимационный, Комедия.
Цитировать
 
 
0 #390 Alexis 16.09.2022 14:16
Um bom óleo de cabelos pode trazer muitos benefícios
para os fios. Contudo, para obter o resultado desejado é importante saber escolher, já que cada
tipo de óleo tem uma ação diferente. Cabelos lisos pedem
óleos diferentes do que cabelos crespos ou como L’Oréal, Wella e Moroccanoil lançam óleos variados na formulação e finalidade, o que.


My homepage - किस जाति के
सुनहरे बाल हैं: https://centrumvzdelaniapohybu.cz/hl/rzflje
Цитировать
 
 
0 #389 Randall 14.09.2022 21:05
Просмотр телеканала ТЕТ в режиме онлайн..
Кино Дом Дракона
10 серия смотреть онлайн: https://gamethrones-online.ru/. Фильм Про - сайт о кино и для кино
Цитировать
 
 
0 #388 Gerald 14.09.2022 17:27
Психология управления: http://mgfmail.ru/ Сравнительная Психология
Цитировать
 
 
0 #387 Lilla 14.09.2022 16:13
Психологическая помощь: http://kremlin-team.ru/
Юридическая Психология
Цитировать
 

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


Наверх