Каждому браузеру свой стиль CSS, Хаки браузеров для решения багов с CSS Опции

[teletehnika]

На сегодняшний день существуют множество разных браузеров они все стремятся и поддержке спецификации CSS официально установленной но всё ровно каждый верстальщик шаблона сайта сталкивается с проблемой отображение сайта в разных браузерах. При этом можно долго спорить, какой из браузеров «более правильный», суть остается одна — пока существуют несколько браузеров и люди их применяют, сайт надо делать так, чтобы он корректно и без ошибок в них отображался так как задумали разработчики и дизайнеры. Ведь не один владелец своего сайта не хочет потерять например аудиторию пользователей которые используют браузер в котором не корректно отображается его сайт. Как же быть в такой ситуации на сегодняшний день существует множество способов победить эту проблему один из распространённых способов это писать в основной CSS так называемые хаки стилей которые будут читаться только теми браузерами для которых они написаны, например вы написали CSS под свой сайт но в Internet Explorer 6 версии отображает не так как в других, например:вам кажется что в IE 6 ширина блока

Отображается не на 100px а меньше то вы можете принудительно её увеличить отдельным хаком для IE 6

КОД

.Box {
width:100px; /*для всех браузеров*/
-width:110px;/*только для IE 6*/
}

Подобные хаки существуют практически для всех браузеров и всех версий, если ко му интересно то вы можете сами найти в интернет хаки вам не обходимые. Данный способ лично для меня является не совсем удобным так как при большой вёрстке сайта можно запутаться где что и как. Поэтому однажды меня натолкнула мысль коль все браузеры по разному интерпретируют CSS стили то для чистоты кода можно вед написать скрипт которые при загрузки сайта будет определять браузер и версию и грузить отдельный специально заготовленный стиль CSS под этот браузер. Остаётся выбрать на каком языке его написать я на тот момент выбрал PHP и вот что у меня получилось

КОД

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

Выравнивание блочных элементов по вертикали, CSS уровня 2

Некоторое время назад один товарищ обратился ко мне с таким вопросом: "Как вертикально отцентрировать элемент?" Я даже не сразу нашелся что и ответить. Дело в том, что в CSS уровня 2 такое свойство просто-напросто отсутствует. Ну что ж... если ширина и высота центрируемого элемента фиксированы, то проблем особых возникнуть не должно:

КОД

#centered {
  width: 40em;
  height: 20em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10em;
  margin-left: -20em;
}

Готово! А вот если блок резиновый, то придется совсем немного, но поизвращаться... прописываем для родителя:

КОД

{display: table;}

/* А для чаилда */
{display: table-cell; vertical-align: middle;}

Сново готово! Однако сей метод отказывается работать в IE. Хакать можно с использованием expression, то есть небольших кусочков javascript, встраиваемых непосредственно в CSS. Итак, эмулируем вертикальное выравнивание в IE для элемента с id="centered" внутри другого элемента:

КОД

#centered {
margin-top: expression(((outer.offsetHeight/2)
-parseInt(offsetHeight)/2)  <0 ? "0" :
(outer.offsetHeight/2)
-(parseInt(offsetHeight)/2) +'px');
}

Таким образом мы получаем высоту элемента #centered по айди centered.offsetHeight и высоту div#outer соответственно. Если выравнивать нужно внутри тега <body>, то код будет выглядеть следующим образом:

КОД

#centered{
margin-top: expression((
document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) <0 ? "0" :
(document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) +'px');

Данное правило определяет высоту родительского элемента или body и высоту элемента, который нам необходимо отцентрировать, а затем просто добавляет нужный margin-top центрируемому элементу.

Еще один способ вертикального выравнивания только одно строчных! important элементов:

КОД

#centered {height: 10em; line-height: 10em;}

Считаю нужным перечислить строчные элементы, для справки:

КОД

big, small, em, strong, dfn, cite, code, samp, kbd, var, abbr, acronym, a, img, object, br, script, map, q, sub, sup, span, bdo, input, select, textarea, label, button

Блочные элементы:

КОД

p, h1, h2, h3, h4, h5, h6, ul, ol, pre, dl, div, noscript, blockquote, form, hr, table, fieldset, address

Сменить тип элемента всегда можно свойством display:block/inline;


Хаки браузеров для решения багов с CSS

Если в ксс коде перед описанием чего либо поставить *+html, то это описание ксс будет видеть только ИЕ7
Пример:

КОД

*+html #site_content {
  width: 858px;
  overflow: hidden;
  padding: 20px 0px 20px 20px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

Добавления в ксс кода, который видит только ИЕ6

КОД

* html #site_content {
  width: 858px;
  overflow: hidden;
  padding: 20px 0px 20px 20px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

Все знают, что в ie 6 не срабатывает div:hover, тогда как в остальных всё работает.
После многих часов поисков нашлось много глюченых hover.htc, но нашёл наконец нормальный, который не глючит, когда мышка уходит за пределы дива.

hover.htc:

КОД

<attach for=element event=onmouseover handler=topm>
<attach for=element event=onmouseout handler=verm>
<script>
  function topm(){element.className += \' hover\';}
  function verm(){element.className = element.className.replace(/ hover/g, \'\');}
</script>

Как использовать? Простейший пример:

КОД

div:hover{/*Нормальные браузеры*/}
div.hover{/*Ненормальный браузер IE6.*/}

Вот ещё разные стили мы будем к элементам с классом "style":

КОД

.style {
background: #000; /* видят все браузеры */
_background: #000; /* видит только ie 6 и ниже */
}
#element {
min-width:780px;
max-width:1260px;
width: expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 1260? "1260px" : "auto"); /* хак минимально и максимальной ширины в ie 6 */
}

кстати,хотя теоретически это является ошибкой, CSS 2.1 позволяет использовать подчёркивание

КОД

.style {
*background:#000; /* видит только ie 7 */
}
*:first-child+html p.test1 {
background: #000; /* видит только ie 7 */
}

КОД

body:last-child:not(:root:root) .style {
background: #000;  /* видит только safari */
}
html[xmlns*=""] body:last-child .style {
background: #000;  /* видит только safari */
}

КОД

@-moz-document url-prefix() {
.style {background: #000;} /* видит только firefox */
}

что радует в огненной лисе, так это то, что хаки не меняются от версий - движок понимает. и ещё больше в неё радует, что в 99.99% случаев хаков и не нужно

КОД

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #000;} /* видит только opera */
}
html:first-child .style {
background: #000; /* видит только opera */
}

кстати, интересно, почему opera, настолько горячо любимая многими россиянам, так непопулярна на западе?хотя имеет множество переводов... странно сие

Ага, вот хак для хрома... но пашет и в опера.

КОД

body:nth-of-type(1) p{
   color: #333333;
}

Кстати, совершенно случайно, методом тыка, открыл хак для IE (когда мучался с абсолютным позиционированием):

КОД

top=\"17px\";

Думаю, не лишним будет рассказать про, так называемые, условные комментарии (по буржуйски - conditional comments). С их помощью можно линковать разные таблицы стилей для разных версий IE. Делается это следующим образом:

КОД

<head>

<!-- Основная таблица стилей -->
<link rel="stylesheet" type="text/css" href="style.css">

<!-- Подключаем отдельную таблицу стилей для всех версий IE -->
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css"><![endif]-->

<!-- Для IE 7 -->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->

<!-- Для IE 6.0, 5.5, 5.01 -->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie6.css"><![endif]-->

</head>

Сокращение времени загрузки веб-страниц с помощью CSS

Несмотря на всё большее распространение широкополосного доступа к Интернету, проблемы скорости загрузки HTML-страниц всё ещё не безразличны многим пользователям Сети, особенно на просторах бывшего Союза. CSS (Cascading Style Sheets) может помочь в этом деле, сэкономив нам время и трафик.

1. Избегайте использования таблиц для разметки страницы
Вот шесть причин, по которым лучше использовать CSS, а не таблицы, для разметки страниц:

* Браузеры анализируют таблицы дважды: первый раз для того, чтобы оценить структуру таблицы, и второй — для орпреления их содержимого.
* Таблицы отображаются сразу полностью, а не по мере загрузки.
* Таблицы заставляют использовать прозграчные картинки для определения ширины колонок и т.п.
* CSS требует гораздо меньше кода, чем перегруженные таблицы
* Весь CSS-код может быть вынесен во внешний файл, который будет грузиться всего один раз и храниться в кэше браузера.
* При помощи CSS можно контролировать очерёдность загрузки элементов страницы.

2. Не используйте картинки для отображения текста
Большинство кнопок и надписей можно отобразить при помощи CSS. Взгляните на пример:

КОД

a:link.example, a:visited.example, a:active.example  {
color:#fff;
background:#f90;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
padding:0.2em;
border:4px #00f outset
}
a:hover.example {
color:#fff;
background:#fa1;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
padding:0.2em;
border:4px #00f inset

Этот CSS определяет простую кнопку, которая меняет свой вид при наведении курсора. Таким образом можно создавать и более сложные объекты.

3. Загрузка картинок через CSS
Некоторые фоновые изображения лучше загружать через CSS. Например, чтобы показать картинку размером 200х100, можно использовать следующий код:

<div class="pretty-image"></div>

И соответствующий CSS:
.pretty-image { background: url(filename.gif); width: 200px; height: 100px }

Сначала это может показаться бессмысленным, но на самом деле такой способ может намного ускорить загрузку страницы. В этом случае браузер начнёт загружать картинку только после того, как будет выведен весь текст, а не одновременно. Таким образом пользователи могут работать со страницей, в кто время как изображение ещё будет подгружаться.

Эта техника лучше всего подходит для загрузки чисто декоративных, фоновых элементов страницы. Если изображение является частью содержимого, всё равно придётся использовать тег IMG.

4. Использование контекстных стилей
Данный код неэффективен:

<p class="text">This is a sentence</p>
<p class="text">This is another sentence</p>
<p class="text">This is yet another sentence</p>
<p class="text">This is one more sentence</p>

.text { color: #03c; font-size:2em }

Вместо того, чтобы присваивать класс каждому параграфу, их можно сгруппировать в одном элементе DIV с тем же классом:

<div class="text">
<p>This is a sentence</p>
<p>This is another sentence</p>
<p>This is yet another sentence</p>
<p>This is one more sentence</p>
</div>

.text p { color: #03c; font-size:2em }

Этот код указывает браузеру, что каждый параграф внутри элемента с классом text будет иметь цвет #03c и размер шрифта в 2em.

Вы могли заметить, что цвет здесь указан всего тремя символами, а не шестью. В данном случае #03c является сокращённым написанием значения цвета #0033cc.

5. Использование сокращений
Шрифт

Лучше написать:

font: 1em/1.5em bold italic serif

...вместо

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

Границы

Лучше:

border: 1px black solid

...вместо

border-width: 1px;
border-color: black;
border-style: solid

Фон

Пишите:

background: #fff url(image.gif) no-repeat top left

...вместо

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Отступы и границы

Используйте:

margin: 2px 1px 3px 4px
(верх, вправо, низ, влево)

...вместо

margin-top: 2px
margin-right: 1px;
margin-bottom: 3px;
margin-right: 4px

Аналогично:

margin: 5em 1em 3em
(верх, влево и вправо, низ)

...вместо

margin-top: 5em;
margin-bottom: 1em;
margin-right: 1em;
margin-right: 4em

И:

margin: 5% 1% (верх и низ, влево и вправо)

...вместо

margin-top: 5%;
margin-bottom: 5%;
margin-right: 1%;
margin-right: 1%

Эти правила применяются к атрибутам margin, border и padding.

6. Минимизирование пробелов, переводов строк и комментариев
Каждый символ — буква или пробел — занимают один байт. Каждый лишний символ только увеличивает размер страниц. Поэтому старайтесь поменьше нажимать Enter и Tab в процессе вёрстки. Кроме того, не забывайте объединять CSS-стили.

7. Используйте относительные ссылки
Абсолютные ссылки занимают намного больше места, чем относительные. А кроме того, создаёт дополнительную нагрузку на браузер, что более важно. Пример абсолютной ссылки: <a href="http://www.URL.com/filename.htm">. Гораздо правильней будет написать <a href="filename.htm">. Но что если нужный файл находится в другом каталоге? Вот несколько примеров, которые помогут вам разобраться в этом вопросе:

* <a href="/"> - Вызов корневой страницы сайта http://www.URL.com
* <a href="/filename.html"> - Вызов страницы в корневом каталоге http://www.URL.com/filename.html
* <a href="/directory/filename.html"> - Файл в подкаталоге "корня" http://www.URL.com/directory/filename.html
* <a href="./"> - Обращение к текущему каталогу и index.html
* <a href="../"> - Каталог-родитель текущего и index.html
* <a href="../filename.html"> - То же самое, с указанием файла
* <a href="../../"> - index.html в двух каталогах выше текущего

9. Выносите CSS и JavaScript в отдельные файлы
Все это знают, но не всегда пользуются. Вот так выглядит вызов CSS из внешнего файла:

<link type="text/css" rel="stylesheet" href="filename.css">

И соответственно java script:

<script language="JavaScript" src="filename.js" type="text/javascript"></script>

Любой внешний файл грузится всего один раз и затем сохраняется в локальном кэше. Ограничений на количество «подключаемых» внешних файлов не существует.

10. Ставьте / (слэш) в конце ссылок на каталоги
Это неправильный вариант написания ссылки:

<a href="http://www.URL.com/directoryname">

Необходимо писать так:

<a href="http://www.URL.com/directoryname/">

Объясняется это очень просто. В первом случае браузер не знает, на что ведёт ссылка: на файл или каталог. "Слэш" сразу даёт понять, что эта ссылка ведёт в каталог, и необходимости в дополнительной проверке не возникает.

[DjSalamander]

Данный код вам надо вставить в тег HEAD, он же отвечает за подключение стилей, и создать в корне сайта папку css, в ней разместить файлы : firefox.css, template.css, safari.css, chrome.css, ieonly.css, ie7only.css, ie8only.css.

Пасиб за полезную инфушку, но вот ставить кучу цсс-ов, это сколько же они вместе будут весить?, может я не прав, но как то не прикольно 5 цсс закидывать.

[vitalik1972]

Владимир, отличная статья!!! Ее бы в блог, чтобы потом найти можно было...

[teletehnika]

Пасиб за полезную инфушку, но вот ставить кучу цсс-ов, это сколько же они вместе будут весить?, может я не прав, но как то не прикольно 5 цсс закидывать.

А что, если всё впихнуть в один файл то меньше вес будет? Есть 5 яблок, раздали каждому по яблоку. Сколько всего яблок? Правильно = 5!!! Но раздельно удобно и вот чем. Не все же блоки и модули выводятся одновременно. Ловишь мысль? Тем более, браузер игнорирует не свои таблицы и не грузит что не его. А во вторых, очень удобно редактировать, зная что этот файл css именно для этого модуля. Можно написать один файл сss общий а в него импортировать остальные.
Виталик, я вроде у тебя блог видел, вот и закинь. А потом тыкать носом (IMG:http://antislaed.net/style_emoticons/default/biggrin.gif)