Аспекты HTML & CSS

В данном материале собраны аспекты, которые полезно знать и помнить 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 к родительским абсолютно/относительно позиционированным элементам.