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

Подробнее
Реклама

Комментарии 36

    +2
    Как хелп для напоминалки пойдет начинающим.
    Вот только не понял что такое Каскадирование и специфичность, можете подсказать что почитать?
      +1
      Ссылка — хорошее объяснение.
      +1
      Простите, я чего то не понимаю или все-же контекстные селекторы работают по принципу дочерних?
        +1
        Стиль для дочернего селектора применяется, когда он находится внутри родительского элемента, т.е. является прямым потомком. Стиль для контекстного селектора применяется на любом уровне вложенности. Вот, собственно, их различие.
        –1
        хорошая шпаргалка, сохранил.
          +1
          Нет, хорошая шпаргалка это вот или вот ;)
            0
            Вот, с поиском и прочими вкусностями.
              0
              Извините, вставлять в комментарии ссылки я не заслужил. Вот то что потерялось — htmlbook.ru/css
                0
                Это — не шпаргалка
          0
          «внешние полоски смежных элементов, имеющих hasLayout не сливаются»

          Что такое внешние полоски?
            0
            Имеется ввиду margin. Добавил в материал.
            +1
            Спасибо! только бы подсветку добавить…
              +12
              2. Селекторы, псевдоклассы, псевдоэлементы

              А почему бы уже сразу не скопипастить всю спецификацию?
              А вообще, вся статья — «галопом по европам», никакой практической ценности от нее нет.
                +2
                2) Ошибка с двойным маргином плавающих элементов:
                Двойной маргин только с той стороны, в которую «плывет» блок.
                  0
                  Спасибо за уточнение. Действительно пропустил в материале.
                  0
                  Совершенно бесполезный материал, простой линк на спецификацию CSS поможет начинающему разработчику куда больше. Больше всего обескураживает куиркс-моуд. За каким чёртом в наше время его «полезно знать и помнить»? Его просто не должно быть, и точка.
                    0
                    Спецификация для новичка — это обязательное условие. По поводу quirks mode — я посчитал, что его упоминание уместно.
                      0
                      Уместным было бы упоминание доктайпа. А куиркс-моуд — зачем?
                        0
                        По поводу доктайпа — согласен. По поводу quirks mode — его появление в IE6, IE7. Можно, конечно, написать, что IE6, IE7 не должно быть — и точка, но браузеры-то существуют, и если с IE6 дело близко к развязке, то IE7 многие саппортят.
                          0
                          Куиркс-моуда не должно быть и в IE6/7, и его там никогда не будет при правильном доктайпе.
                            0
                            «его появление в IE6, IE7» — собственно и имелось ввиду появление при неправильном доктайпе либо его отсутствии
                              0
                              В общем, что я и говорил: «полезно знать и помнить» не о куиркс-моуде, а о доктайпе; причём не только из-за угрозы куиркс-моуда и IE6/7. Доктайп — это не какой-то необязательный трюк, включающий правильную обработку страницы, а декларация, обозначающая, на каком она языке. А о куиркс-моуде можно и нужно забыть. Лично я никогда с ним дела не имел и вовсе от этого не страдаю. Есть, конечно, тонкость с box-sizing, но о его связи с режимом совместимости в IE помнить тоже необязательно.
                    +3
                    Проблема: в IE 6 у плавающих элементов создается двойной маргин.

                    а чего это еще актуально? IE6 разве не похоронили?
                      0
                      Он мертв уже давно, но похороны затянулись. Некоторые заказчики хотят иметь поддержку IE6 и их не смущают ни убеждения, ни доплаты за эту поддержку.
                        0
                        >Часть вопросов посвящена IE — сам отказался от поддержки IE6, однако знать особенности его поведения не будет лишним.

                        Я тоже подумал, что это шевеление трупа палкой. Уже и МС ему похороны организовали. Поменьше бы таких заказчиков.
                      –1
                      От себя добавлю (не уверен что правильно, но, надеюсь, доступно =)):
                      Если внутри блочного элемента находятся относительно позиционированные блоки («float:left» например), то их высота не влияет на высоту родительского элемента. Иными словами, в контексте страницы родительский элемент не будет обрамлять дочерний.
                      Для того, что бы это исправить, родительскому элементу необходимо добавить свойство «overflow:hidden;».
                        +2
                        А вот не надо в пособие для новичков вставлять вредные советы. Лучше использовать метод под названием «clearfix»:

                        .clearfix {
                        zoom: 1;
                        }
                        .clearfix:after {
                        content: '.';
                        clear: both;
                        display: block;
                        font-size: 0;
                        height: 0;
                        visibility: hidden;
                        }
                          0
                          Не знаю насколько он правильнее, но коротким его не назовёшь =)
                          В конце концов вёрсткой я профессионально не занимаюсь, поэтому наверное Вы всё таки правы.
                          Объясните только, пожалуйста, почему совет является «вредным»?
                            0
                            Не надо вредные комменты вставлять с IE-хаками :)
                            overflow: hidden/auto на родителe — валидный и описанный стандартами способ
                              0
                              Проблема overflow: hidden в том, что он может обрезать контент в некоторых ситуациях.

                              Raduzhka все правильно говорит, всегда нужно использовать clearfix.
                                0
                                Не в некоторых ситуациях, а когда жёстко заданы ширина и/или высота блока.
                                  0
                                  Не только. С ним гораздо больше проблем, чем вы думаете.

                                  Например, иногда за пределы родителя нужно вынести какой-нибудь элемент. С overflow: hidden у родителя это невозможно.
                              0
                              К сожалению, во многих случаях clearFix даёт непонятные баги: растягивание строчки по высоте, добавление лишних пикселей и др. Иногда приходится пользоваться старым добрым :)
                            +1
                            все это и НАМНОГО больше есть в книге мэтра www.ozon.ru/context/detail/id/3881079/
                              +1
                              Присоединяюсь к совету, книга изумительная.
                              Кто то вверху хотел почитать о каскадности и специфичности, в книге все есть.
                              0
                              Не нашел ни строчки того, что давно не сохранилось в голове… Как-то для школьников всё.
                              А уж вертеть труп hasLayout'a — брррррр… Года 3 точно не видел необходимости в этом

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                              Самое читаемое