22 September 2011

Аспекты HTML & CSS

CSS
Sandbox
В данном материале собраны аспекты, которые полезно знать и помнить html developer-у. Часть вопросов посвящена IE — сам отказался от поддержки IE6, однако знать особенности его поведения не будет лишним.

1. Режимы браузера


Стандартный:
Standards mode – таблицы стилей, присутствующие в документе, соответствуют спецификации CSS 2.1 (последним версиям)

Нестандартный режим (режим обратной совместимости):
Quirks mode – браузер игнорирует часть правил CSS, имитируя поведение старого движка.

Режим, приближенный к стандартному:
Almost standards mode – Opera, Firefox, Safari, в котором расположение рисунков в ячейках таблицы отображается в режиме совместимости.

2. Селекторы, псевдоклассы, псевдоэлементы


1) Селекторы:
  • Селектор тегов — в качестве селектора может выступать любой тег HTML, для которого определены правила форматирования.
    tagName {
    property1: value1;
    property2: value2;

    }

    tag name – регистр не имеет значения

  • Селектор классов — селекторов в документе может быть любое количество.
    .className {

    }

    className – регистр учитывается

  • Селектор ID — идентификатор определяет уникальное имя элемента.
    #idName {

    }

    idName – регистр учитывается

  • Контекстные селекторы — состоит из селекторов тегов, селекторов классов, селекторов id и т.д., разделенных пробелами.
    sel1 sel2 … {

    }


  • Соседние селекторы — элементы документа, когда они следуют друг за другом в коде. В синтаксисе CSS значения применяются к свойствам элемента, следующего после +
    <p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
    b, var – соседние
    sel1 + sel2 {

    }


  • Дочерние селекторы — располагаются непосредственно внутри родительского элемента. В синтаксисе CSS значения стиля применяются только к дочернему элементу.

    <p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing
    elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
    em – дочерний элемент p
    sel1 > sel2 {

    }


    sel1 – родительский селектор
    sel2 – дочерний селектор

  • Селекторы атрибутов:
    [attribute] {

    }


  • Универсальный селектор — определяет стиль для всех элементов документа.
    * {

    }


2) Псевдоклассы:

sel:pClass {

}

• :link – непосещенная ссылка ( можно не указывать )
• :visited – посещенная ссылка
• :hover – наведение на ссылку
• :active – щелчок по ссылке
• :focus – придание фокуса элементу ( a, input, select, textarea )
• :first-child – применяется к первому дочернему элементу селектора
• :lang(lang)

3) Псевдоэлементы:

Псевдоэлементы позволяют задать стиль элементов, не определенных в дереве элементов, а также генерировать содержимое, которого нет в исходном коде текста документа.

• :first-line – стиль первой строки
• :first-letter – стиль первого символа
• :after { content: “…”; } – применяется для вставки назначенного контента после элемента
• :before { content: “…”; } – применяется для вставки назначенного контента до элемента

3. Каскадирование и специфичность


Правила каскадирования определяют следующие приоритеты:
1) Пользовательские стили, отмеченные флажком !important
2) Авторские стили, отмеченные флажком !important
3) Авторские стили
4) Пользовательские стили
5) Стили по умолчанию браузера

Специфичность:
Для вычисления каждому типу селекторов присваивается числовое значение. Специфичность вычисляется путем суммирования значения каждого селектора. Вычисление происходит в системе с неопределенно высоким основанием.

abcd

1) если стиль встроенный, a = 1
2) b равно общему количеству селекторов идентификаторов
3) c равно общему количеству классов, псевдоклассов и селекторов атрибутов
4) d равно количеству селекторов типов и псевдоэлементов

4. hasLayout


hasLayout – свойство IE, которое определяет, как элемент располагается в потоке, его размеры, позиционирование, реакцию на события и влияние на другие элементы. В основном, элементы в Internet Explorer не отвечают за организацию самих себя. Тег или может иметь положение, как в исходном коде и потоке документа, но их контент упорядочивает ближайший предок с лейаутом (обычно ). Такие элементы полагаются на предка, чтобы он сделал для них всю тяжелую часть по определению размера и единиц измерения.

Элементы, которые имеют hasLayout по умолчанию:
• html, body
• table, tr, th, td
• img
• hr
• input, button, select, textarea, fieldset, legend
• iframe, embed, object, applet
• marquee
Следующие значения перечисленных свойств дают элементу «layout» (hasLayout = true):
• position: absolute
• float: left или right
• height, width: любое значение кроме auto
• display: inline-block
• zoom: любое значение кроме normal (невалидное свойство)
• writing-mode: tb-rl
• overflow, overflow-x, overflow-y: auto|scroll|hidden (только в IE7)
• position: fixed (только в IE7)
• min-width, min-height: любое значение (только в IE7)
• max-width, max-height: любое значение кроме none (только в IE7)

Чтобы скинуть hasLayout, нужно указать значение, отличное от перечисленных выше (например: width: auto или float: none).
Возможные проблемы:
• плавающие элементы автоматически очищаются элементами, имеющими hasLayout
• относительно позиционированные элементы не получают hasLayout
• внешние полоски (margin) смежных элементов, имеющих hasLayout, не сливаются
• область щелчка блочной гиперссылки без hasLayout ограничена областью текста

5. Баги IE и их решения


1) Условные комментарии:
<!--[if IE 6]>content for IE 6<![endif]-->
<!--[if gt IE 7]>content for greater than IE 7<![endif]-->
<!--[if gte IE 8]>content for greater or equal than IE 8<![endif]-->
<!--[if lt IE 6]>content for later than IE 6<![endif]-->
<!--[if lte IE 7]>content for later or equal than IE 7<![endif]-->

2) Ошибка с двойным маргином плавающих элементов:

Проблема: в IE 6 у плавающих элементов создается двойной маргин.
Решение: добавить display: inline.

3) Абсолютное позиционирование в контейнере, позиционированном относительно:

Проблема: абсолютно позиционированные элементы находятся в контейнере, который позиционирован относительно. В результате, у родительского контейнера отсутствует hasLayout и абсолютно позиционированные контейнеры размещаются относительно видового экрана.
Решение: задать родительскому контейнеру hasLayout. Пример: height: 1%.

4) Абсолютно позиционированные контейнеры внутри абсолютно/относительно позиционированных:

Проблема: в IE абсолютно позиционированные контейнеры внутри относительно позиционированных при наложении выстраиваются не в соответствии с z-index.
Решение: добавить z-index к родительским абсолютно/относительно позиционированным элементам.
Tags:htmlcssвёрстка
Hubs: CSS
+37
7.8k 230
Comments 36