В данном материале собраны аспекты, которые полезно знать и помнить html developer-у. Часть вопросов посвящена IE — сам отказался от поддержки IE6, однако знать особенности его поведения не будет лишним.
Стандартный:
Standards mode – таблицы стилей, присутствующие в документе, соответствуют спецификации CSS 2.1 (последним версиям)
Нестандартный режим (режим обратной совместимости):
Quirks mode – браузер игнорирует часть правил CSS, имитируя поведение старого движка.
Режим, приближенный к стандартному:
Almost standards mode – Opera, Firefox, Safari, в котором расположение рисунков в ячейках таблицы отображается в режиме совместимости.
sel:pClass {
…
}
• :link – непосещенная ссылка ( можно не указывать )
• :visited – посещенная ссылка
• :hover – наведение на ссылку
• :active – щелчок по ссылке
• :focus – придание фокуса элементу ( a, input, select, textarea )
• :first-child – применяется к первому дочернему элементу селектора
• :lang(lang)
Псевдоэлементы позволяют задать стиль элементов, не определенных в дереве элементов, а также генерировать содержимое, которого нет в исходном коде текста документа.
• :first-line – стиль первой строки
• :first-letter – стиль первого символа
• :after { content: “…”; } – применяется для вставки назначенного контента после элемента
• :before { content: “…”; } – применяется для вставки назначенного контента до элемента
Правила каскадирования определяют следующие приоритеты:
1) Пользовательские стили, отмеченные флажком !important
2) Авторские стили, отмеченные флажком !important
3) Авторские стили
4) Пользовательские стили
5) Стили по умолчанию браузера
Специфичность:
Для вычисления каждому типу селекторов присваивается числовое значение. Специфичность вычисляется путем суммирования значения каждого селектора. Вычисление происходит в системе с неопределенно высоким основанием.
abcd
1) если стиль встроенный, a = 1
2) b равно общему количеству селекторов идентификаторов
3) c равно общему количеству классов, псевдоклассов и селекторов атрибутов
4) d равно количеству селекторов типов и псевдоэлементов
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 ограничена областью текста
1) Условные комментарии:
2) Ошибка с двойным маргином плавающих элементов:
Проблема: в IE 6 у плавающих элементов создается двойной маргин.
Решение: добавить display: inline.
3) Абсолютное позиционирование в контейнере, позиционированном относительно:
Проблема: абсолютно позиционированные элементы находятся в контейнере, который позиционирован относительно. В результате, у родительского контейнера отсутствует hasLayout и абсолютно позиционированные контейнеры размещаются относительно видового экрана.
Решение: задать родительскому контейнеру hasLayout. Пример: height: 1%.
4) Абсолютно позиционированные контейнеры внутри абсолютно/относительно позиционированных:
Проблема: в IE абсолютно позиционированные контейнеры внутри относительно позиционированных при наложении выстраиваются не в соответствии с z-index.
Решение: добавить z-index к родительским абсолютно/относительно позиционированным элементам.
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 к родительским абсолютно/относительно позиционированным элементам.