Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника

Введение

Хорошо знать многие особенности и сложные моменты в использовании CSS, но силу особенностей человеческой памяти все запомнить не возможно, поэтому - проще запомнить месторасположение данной статьи или внести её в закладки. Что будет освещаться в данной статье:

  1. Вопросы кроссбраузерности;
  2. Особенности некоторых CSS свойств;
  3. Правила CSS(о наследовании, о каскадировании)
  4. Вопросы оптимизации CSS кода;
  5. Сбор отмененных HTML элементов

Вопросы кроссбраузерности

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

  1. В-первую очередь,- использовать возможности CSS;
  2. Во вторую очередь,- использовать возможности скриптовых языков программирования (php,perl,ruby);
  3. В-третью очередь,- использовать возможности клиентских языков программирования, например javscript;
  4. Других способов не существует.

Кроссбраузерность - возможности CSS

Почему предпочтительней использовать именно CSS, а не скриптовой язык для определения браузара или javascript? Дело в том, что CSS имеет встроенную поддержку со стороны браузера, поэтому для Вас нет надобности беспокоится в том - отключен или нет CSS пользователем, так как пользователь не имеет возможности отключить поддержку CSS. Одним из возможных способов создания кроссбраузерного кода, до появления браузера IE 8, был метод Целика, основанный на последовательности символов, не распознаваемых браузерами IE версии ниже 8. В нижеуказанном примере все современные браузеры, в том числе FF, Chrome, Opera, а так же IE 8 и старше, за исключением IE 5,6,7, отобразят текст параграфа синим цветом, а цвет внутри DIV красным.

  1.<STYLE type="text/css">
  2..sd {
  3.color:red;
  4.}
  5./* Отступы в CSS */
  6.P {
  7.color:red;
  8.voice-family:"\"}\"".'
  9.voice-family:inherit;
10.color:blue;
11.}
12.</STYLE>
13. </HEAD>
14.<BODY >
15.<p>Алкоголизм — это порождение
16.варварства — мертвой хваткой держит человечество со времен седой и
17.дикой старины и собирает с него чудовищную дань, пожирая, подрывая
18.силы, подавляя энергию, губя лучший цвет рода людского.
19.Джек Лондон.
20.</p>
21.</BODY>
22.
Всё дело в двух строчках, после которых браузеры IE 6 и 7версии перестают разбирать код CSS:
  1.voice-family:"\"}\"".'
  2.voice-family:inherit;
  3.
Говоря по-правде данным методом мало кто пользуется, в силу его не изученности. Больше востребованы методы, с использованием элемента COMMENT, то есть элемента создающего комментарии в стиле IE, - комментариев, которые понимают другие браузеры, кроме самого IE. Например, в первом из двух указанных случаях правила CSS будут применяться ко всем браузерам, во втором случае ко всем браузерам кроме Internet Explorer:
  1.<style type="text/css">
  2. /*Для всех браузеров IE*/
  3. DIV {color: blue;}
  4.</style>
  5.
  6.<comment>
  7.<style type="text/css">
  8. /*Для всех браузеров кроме IE*/
  9. DIV {color: red;}
10.</style>
11.</comment>
12.
Таким образом, в браузерах Internet Explorer цвет текста будет синий, а для остальных браузеров красный. Условные комментарии поддерживаются только браузаром Internet Explorer, выбрав версию, Вы сможете контролировать действие CSS правил для различных версий браузеров Internet Explorer:
  1.<html>
  2.<body>
  3.
  4.<style type="text/css">
  5. /*Для всех других кроме IE6*/
  6. DIV {color: blue;}
  7.</style>
  8.
  9.<!--[if IE 6]>
10.
11.<style type="text/css">
12. /*Только IE6*/
13. DIV {color: red;}
14.</style>
15.
16.<![endif]-->
17.
18.<div>Комментарий HTML</div>
19.
20.</body>
21.</html>
22.

Кроссбраузерность - возможности PHP

Язык PHP обладает огромными возможностями для распознавания версий браузера, часто я использую функции обработки строк, для извлечения необходимы данных:

  1.$str=$_SERVER['HTTP_USER_AGENT'];
  2.$str=substr("$str",0,40);
  3.$pos=strpos($str, "MSIE 6.0");
  4.if ($pos==true)
  5.{
  6.echo '
  7./*Для IE6*/
  8.DIV {color: blue;}
  9.';
10.}
11.else
12.{
13.echo '
14./*Для всех других кроме IE6*/
15.DIV {color: red;}
16.';
17.}
18.
В этом примере для браузера IE6 версии будет установлен цвет текста как синий, а для других браузеров красный.

Кроссбраузерность - возможности javascript

Больше всего при работе с определением версий браузера мне подходит javascript и jquery, так как для динамичных приложений на css и html без javascript и jquery не обойтись. Однако, если Вы не создаёте динамичных приложений на страницах, старайтесь использовать первые два способа, так как поддержка javascript может быть отключена пользователем, а для jquery необходим внешний файл, размером минимум 30 кб. Как всегда везде есть минусы и плюсы. Для определения версии браузера в javascript принято использовать объект navigator и его свойство userAgent. В следующем примере устанавливаются различия в отображении элемента DIV для браузера IE6 и остальными браузерами:

  1.<script type="text/javascript">
  2.ua = navigator.userAgent;
  3.if(ua.indexOf("IE 6")=-1){
  4....ваш код...
  5.}
  6.</script>
  7.
Для использования jQuery необходим дополнительный подключаемый файл и дополнительные знания данного фреймовика:
  1.<html>
  2.<body>
  3.<script type="text/javascript" src="../jsfiles/jquery-1.3.2.min.js"></script>
  4.<SCRIPT type="text/javascript">
  5.var ua = jQuery.browser
  6.if(ua.mozilla)
  7.{
  8.$("head").append('<style type="text/css"> DIV {color: green;}</style>');
  9.}
10.else if(ua.opera)
11.{
12.$("head").append('<style type="text/css"> DIV {color: blue;}</style>');
13.}
14.else if(ua.safari)
15.{
16.$("head").append('<style type="text/css"> DIV {color: red;}</style>');
17.}
18.else if(ua.msie)
19.{
20.$("head").append('<style type="text/css"> DIV {color: yellow;}</style>');
21.}
22.</SCRIPT>
23.
24.<div>Кроссбраузерность - следствие многообразия браузеров</div>
25.
26.</body>
27.</html>
28.
Объект jQuery.browser может определить браузеры четырех движков - mozilla(FireFox), msie(IE), safari(safari) opera(opera). jQuery.browser поддерживает дополнительное свойство version, если Вам нужна версия браузера, - jQuery.browser.version это то, что Вам нужно. Дополнительные сведения и примеры Вы найдете на странице посвященной данному методу - $.browser. Один лишь недостаток в jQuery - при его частом использовании Вы забываете javascript! На этом возможности определения Кроссбраузерность в этой статье закончены. Перейдем к вопросам об отдельных свойствах, использование которых создаёт некоторые сложности.

Куда же без Opacity!

Прозрачность на страницах - эффективное средство для создания дополнительных эффектов, без которого трудно обойтись сегодня большинству программистов. Однако до сих пор правильно реализовано прозрачность в браузерах Opera и Firefox. Другие же оставляют желать лучшего, особенно Internet Explorer. Например:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4.<link rel="stylesheet" type="text/css" href="style.css" />
  5.<TITLE>Пример свойства margin-right</TITLE>
  6.<STYLE type="text/css">
  7.IMG {
  8.opacity: 0.3;
  9.filter:Alpha(opacity=30);
10.-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
11.-khtml-opacity: 0.5; /* Konqueror 3.1+, Safari 1.1 */
12.}
13.</style>
14.
15.<img src="gubka-bob1.jpg" />
16.<div>Кроссбраузерность - следствие многообразия браузеров. Губка Боб.</div>
17.</BODY>
18.</HTML>
19.
Кроссбраузерность - следствие многообразия браузеров. Губка Боб.
Кроссбраузерность - следствие многообразия браузеров. Губка Боб.

Правило text-align и margin:0 auto

Нередко возникает необходимость в центрировании блока. В IE центрирование устанавливается с помощью свойства text-align:center, а в других браузерах с помощью margin:0 auto.

  1.<html>
  2.<body>
  3.<style type="text/css">
  4.BODY {
  5.text-align:center;
  6.width:100%;
  7.border:1px solid red;
  8.}
  9.DIV {
10.text-align:left;
11.width:300px;
12.border:1px solid red;
13.margin:0 auto;
14.}
15.</style>
16.<DIV>Осторожней с правилом text-align. Губка Боб.</div>
17.
18.</body>
19.</html>
20.

Помимо вышеуказанного способа центрирования существует еще несколько вариаций. Например, смещением блока на 50% влево, с помощью position:relative и, после вычисление половины его ширина на 50% этой ширины обратно, с помощью отрицательного margin-left.

  1.<html>
  2.<body>
  3.<style type="text/css">
  4.BODY {
  5.width:100%;
  6.}
  7.DIV {
  8.position:relative;
  9.left:50%;
10.margin:0 -150px;
11.width:300px;
12.border:1px solid red;
13.}
14.</style>
15.<DIV>Дополнительный способ центрирования блоков в CSS.</div>
16.
17.</body>
18.</html>
19.
Очевидный недостаток данного метода - ширина элемента должна быть заранее известна, что на практике является достаточно редким явлением.

В некоторых случаях центрировать элементы возможно только с использованием javascript, путём соответствующих вычислений:

  1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.<html>
  4.<body>
  5.<style type="text/css">
  6.#conteiner {
  7.position:relative;
  8.border:1px solid;
  9.width:300px;
10.}
11.</style>
12.<DIV id="conteiner">
13.Кроссбраузерность - следствие
14.многообразия браузеров. Губка Боб.</DIV>
15.<script type="text/javascript">
16.var cw = document.getElementById("conteiner").clientWidth;
17.var clw = document.documentElement.clientWidth;
18.var c = (clw/2) - (cw/2);
19.document.getElementById("conteiner").style.left = c+"px";
20.</script>
21.</body>
22.</html>
23.
Возможно, Вам пригодится этот код при создании динамичных приложений, например, при центрировании изображения, по событию onload.

Сегодня популярен jQuery, на нём так же просто отцентрировать блок:

  1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.<html>
  4.<body>
  5.<style type="text/css">
  6.#conteiner {
  7.position:relative;
  8.border:1px solid;
  9.width:300px;
10.}
11.</style>
12.<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
13.<script type="text/javascript">
14.$(document).ready(function(){
15.var cw = $("#conteiner").width();
16.var clw = $("body").width();;
17.var c = (clw/2) - (cw/2);
18.$("#conteiner").css({'left':c+'px'});
19.});
20.</script>
21.
22.<DIV id="conteiner">
23.Кроссбраузерность - следствие
24.многообразия браузеров. Губка Боб.</DIV>
25.
26.</body>
27.</html>
28.
Центрирование на javascript неудобно. Так как необходимы дополнительные знания языка программирования или фреймовика, если речь идёт о jQuery. Сложность может состоять и в дополнительных знаниях режимов совместимости, определяемых правилом DOCTYPE. Поэтому использовать его необходимо только в случае уверенности в точных знаниях о javascript и режимах совместимости для разных браузеров.

Кстати о режимах совместимости. На режим совместимости влияет указание DOCTYPE, если Вы укажите неверный DOCTYPE, ибо вообще не укажите, то некоторые CSS свойства будут не соответствовать стандарту CSS. Наибольшее значение для меня правило DOCTYPE имеет в случае установления, с применением методов javascript, CSS свойств динамически изменяемым значениям, например для высоты и ширины элементов HTML. Для получения высоты окна браузера могут применяться несколько javascript методов, однако в режиме совместимости значения метода могут существенно различаться. Для примера ниже приведена таблица, объясняющая причины появления различных значения для одного и того же метода:

Browser window. innerHeight document. body. clientHeight document. documentElement. clientHeight
Opera 9.5+ strict window document window
Opera 9.5+ quirks window window document
Opera 7-9.2 window window document
Opera 6 window window N/A
Mozilla strict window document window
Mozilla quirks window window document
KHTML window document document
Safari window document document
iCab 3 window document document
iCab 2 window window N/A
IE 6+ strict N/A document window
IE5-7 quirks N/A window 0
IE4 N/A window N/A
ICEbrowser window window document
TkhtmlHv3 window window document
Netscape 4 window N/A N/A

min-width и IE6

Как быть со свойством min-width(max-width) не поддерживаемым IE6. Можно использовать CSS выражения, однако помните, что они замедляют работу страницы, например:

  1.<style type="text/css">
  2.BODY{
  3.width:expression(document.body.clientWidth < 770? "770px": "auto");
  4.width:expression(document.body.clientWidth > 770? "770px": "auto");
  5.}
  6.</style>
  7.

Что выбрать табличную или блочную верстку

Блочная и табличная верстки имеют свои достоинства и недостатки. Для таблиц характерно

  1. Таблицы распознаются и отображаются почти во всех браузерах идентично;
  2. Благодаря таблицам создается возможность сложной верстки с точностью до пикселя;
  3. Простота в освоении;
  4. Для таблиц разработано больше CSS свойств и атрибутов HTML чем для блоков
Однако таблицы не лишены и недостатков:
  1. Таблицы медленнее при загрузки, особенно вложенные таблицы;
  2. Плохо индексируются поисковыми системами;
  3. Алгоритм обработки не позволяет отображать содержимое таблицы по мере её загрузки, за исключением IE и Netscape, в которых существует свойство table-layout:fixed;
  4. Таблицы трудно поддаются модификации в силу единства структуры.
Достоинства блочной исходя из недостатков табличной верстки:
  1. Увеличивается логичность кода
  2. появляется возможность быстрого изменения структуры страницы
  3. Увеличивается компактность кода, а, следовательно и скорость загрузки
Недостатки блочной верстки:
  1. Не все браузеры в одинаково поддерживают блочную верстку и позиционирование блоков
  2. Требуются знание помимо HTML еще и CSS
  3. Не каждый макет можно сверстать на основе CSS
Исходя из вышесказанного верстальщик и веб-программист должны определять выбор в ту или иную сторону, я же придерживаюсь "золотой середины" - стараюсь компоновать блочную и табличную вереску на страницах.

Различные баги и правила разных браузеров

Свойство z-index применяется только для элементов с position:absolute или relative. Поэтому в следующем примере, как бы Вам не хотелось, чтобы элемент с id text2 был выше в стеке, то есть находился над элементом с id text1, у вас этого не получится:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Z-index в CSS</TITLE>
  5. <STYLE type="text/css">
  6. #text1{
  7. background-color:red;
  8. width:200px;
  9. height:100px;
10. position:absolute;
11. }
12. #text2{
13. background-color:blue;
14. width:400px;
15. height:400px;
16. }
17. </STYLE>
18. </HEAD>
19. <BODY>
20.<DIV id="text1" class="pile"
21. style="z-index: 1">
22.Данный элемент перекрывается только изображением,
23.но перекрывает остальные элементы.
24.</DIV>
25.<DIV id="text2" class="pile"
26. style="z-index: 2">
27.Данный элемент перекрывает только элемент с id text2.
28.</DIV>
29.</BODY>
30.</HTML>
31.

Для этого надо 16 строчку заменить следующей:

  1.position:relative;
  2.
или
  1.position:absolute;
  2.

Для того чтобы убрать рамку вокруг изображения, помещенного в элемент ссылку, напишите:

  1.<STYLE type="text/css">
  2.A IMG {
  3.border:none;
  4.}
  5.</STYLE>
  6.

Для того чтобы убрать рамку вокруг изображения, помещенного в элемент ссылку, напишите:

  1.<STYLE type="text/css">
  2.A IMG {
  3.border:none;
  4.}
  5.</STYLE>
  6.

Для создания подчеркивания определенного текста линией укажите:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Подчеркиваем текст средствами CSS</TITLE>
  5. <STYLE type="text/css">
  6. #text2{
  7. border-bottom:1px solid gray;
  8. }
  9. </STYLE>
10.</HEAD>
11. <BODY>
12.<span id="text2">
13.Подчеркиваем текст средствами CSS
14.</span>
15.</BODY>
16.</HTML>
17.

Для задания эффекту выделения определенно цвета, выделяемого текста укажите:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>selection в CSS</TITLE>
  5.<STYLE type="text/css">
  6./*Opera, Safari, Chrome*/
  7.#text2::selection {background: #cadceb;}
  8./*FireFox*/
  9.#text2::-moz-selection {background: #cadceb;}
10.</STYLE>
11.</HEAD>
12. <BODY>
13.<span id="text2">
14.Выделите текст данного элемента.
15.</span>
16.</BODY>
17.</HTML>
18.

Свойство border-collapse контролирует пространство между ячейками таблицы, по умолчанию они разъединены, в судящем примере мы объединим их:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Свойство border-collapse</TITLE>
  5.<STYLE type="text/css">
  6.TABLE { border-collapse: collapse }
  7.TABLE TD { border: 3px solid blue }
  8.</STYLE>
  9.</HEAD>
10.<BODY>
11.<TABLE>
12.<CAPTION>border-collapse рамки таблицы</CAPTION>
13.<TR id="row1">
14.<TD>Первая ячейка</TD><TD>Вторая ячейка</TD>
15.</TR>
16.<TR id="row2">
17.<TD>Третья ячейка</TD><TD>Четвертая ячейка</TD>
18.</TR>
19.<TR id="row3">
20.<TD>пятая ячейка</TD><TD>Шестая ячейка</TD>
21.</TR>
22.</TABLE>
23.</BODY>
24.</HTML>
25.

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


Александр Ермаков. Хостинг - www.pwstudio.org