Профессиональная кросс-браузерная вёрстка HTML5 с поддержкой псевдоклассов

Shift → Ср, 06/22/2011

профессиональная HTML5 и CSS3 вёрстка Продолжая цикл заметок на тему обучения Internet Explorer младших версий способности не отставать от паровоза прогресса, пишу про профессиональный подход к вёрстке HTML5. В этой части мы научим IE 6, IE7 и IE8 понимать CSS выборки с использованием псевдоклассов, различать теги HTML5 и быть хорошим браузером в целом.

Что же нам потребуется? В первую очередь мозги, немного JavaScript и чёрный плащ(шутка). Без лишних пробуксовок приступим к препарации нашей профессиональной кроссбраузерной CSS3 вёрстки.

Задача для HTML5 вёрстки

Требуется сверстать или адаптировать вёрстку для совместимости с HTML5 и CSS3 с условием максимально рационального использования JavaScript и максимальной кросс-браузерности.

Прошлый наш макет свёрстан профессоинально и нам ничего не стоит адаптировать его для совместимости с HTML5. Для этого фактически не требуется лезть в основной CSS т.к. использованы обращения через id и классы по «root-методу»(автор так называет свой подход). Фишка метода в том, что мы избегаем упоминания тегов несущих элементов каскадов стилей, обращаясь к «инсайдам» преимущественно через id и class.

Результат должен выглядеть в IE с минимально возможными расхождениями.

профессиональная HTML5 и CSS3 вёрстка в современном браузере

Поскольку для одной заметки информации слишком много, я сделал graceful и выключил некоторые фишки, тренировать которые мы будем в следующий раз.

Адаптация вёрстки под HTML5

Известно, что IE версий младше 9 не распознаёт элементы HTML5. Чтобы научить браузер воспользуемся следующим, простым как 3 рубля JavaScript, помещённым в условные комментарии.

Также мы подключим библиотеку jQuery и зависимую от неё Selectvizr, позволяющую научить Internet Explorer понимать псевдоклассы. В результате, мы будем иметь такой код <head>

<head id="Super_Comments_HTML5">
<meta charset="utf-8" />
<title>Прикольные комментарии на чистом CSS3 хаком совместимости IE и поддержкой псевдоклассов</title>
 
<!-- [#] Root stylesheet [#] -->
  <link rel="stylesheet" media="screen" href="comm_h5.css?sss" /> 
<!-- [#] JavaScript Library [#] -->
  <script src="jquery-1.6.1.min.js"></script>
 
<!-- [@>] Force CSS3 hack, force HTML5 & pseudo selectors for Internet Explorer later than 9 versions [<@] -->
  <!--[if (gte IE 6)&(lte IE 8)]>
    <script type="text/javascript" src="selectivizr-min.js">
    /* pseudo elements support */
    </script>
 
    <script type="text/javascript">
    /* emulate HTML5 elements */
    var E  = ('article:aside:audio:canvas:figure:footer:header:hgroup:nav:section:video:output:detalis:keygen:meter:progress:figcaption:mark:summary:time:wbr').split(':');   
      for (var c = 0; c < E.length; c++) {
        document.createElement(E[c]);
      } 
    </script>
    <link type="text/css" rel="stylesheet" media="screen" href="ie_h5.css?sss" />
  <![endif]-->
</head>

Здесь прокомментирую только функцию для эмуляции в IE HTML5-тегов.

    var E  = ('article:aside:audio:canvas:figure:footer:header:hgroup:nav:section:video:output:detalis:keygen:meter:progress:figcaption:mark:summary:time:wbr').split(':');   
      for (var c = 0; c < E.length; c++) {
        document.createElement(E[c]);
      }

Загоняем нужные теги списком переменную «E», переклееиваем её в массив и циклом создаём новые теги. При этом вы можете выпилить неиспользуемые теги, но это фактически экономия на спичках.

Далее, нам требуется определить какие элементы и как должны отображаться. Это нужно чисто формально для IE. Элементы бывают строчные и блочные, поэтому мы определим их.

/* [@]HTML5[@] */
article, header, footer, section, detalies, summary {
  display: block;
}  
 
meter, mark, time {
  display: inline-block;
}

Теперь полный порядок. Internet Explorer сможет отобразить теги корректно. Переходим к вёрстке.

Наш базовый лэйаут претерпел кое-какие изменения. Добавились новые теги, опции и атрибуты.

<dl>
	<dt>
	<img src="av.gif" alt="аватар ..." width="70" height="70" />
    <details>      
        <summary>Василий</summary>
        <ul>
          <li><a href="#">Сайт Васи</a></li>
          <li><meter min="0" max="50" low="15" high="30" value="31" title="длина письки в сантиметрах">31.255см</meter></li>
        </ul>
    </details>
  </dt>
		<dd>
			<header class="comment_info">
				<a class="Author" href="#">Автор комментария</a>
					<time class="Date"  datetime="2011-03-28" title="комментарий 3 опубликован 28 апреля 2011">28 апреля 2011</time>
			</header>
  			<article>
  			 <p>Модная вёрстка — это <mark>HTML5</mark> и <mark>CSS3 вёрстка</mark>. Дорогу паровозам революции!</p>
  			 <p>Ну и конечно же тут может быть <a href="#">ссылка</a>, например, или текст <strong>жирным</strong></p>
  			 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  			</article>
      <footer class="cntrls"><a href="#">ответить</a></footer>
		</dd>
</dl>

Теперь наш шаблон фактически HTML5. Добавим пару оформительских CSS для новых тегов.

dt summary {
  font: bold 12px Verdana;
  text-shadow: 0 0 1px #fff;
  cursor: pointer;
  color: #ff6347;
}
 
dt ul {
  list-style: none;
  margin: 0;
  padding: 5px 2px; 
}
 
dt ul li {
  font: bold 11px Verdana;
  text-shadow: 0 0 1px #fcfcfc;
  text-align: left;
  padding: 2px;
  margin: 0;
  color: #480082;
}
 
dt ul li:first-child a {
  color: #480082;
}
 
dt ul li:last-child {
  text-align: center;
}
 
dt meter {
  width: 70px;
  border: 1px solid #999;
  box-shadow: 0 0 2px #adff2f, inset #d269e1 5px 5px 3px 6px;
  border-radius: 5px;
} 
 
/* [@] HTML5 > <mark> [@] */
mark {
  background: #fff0cb;
  border: 1px dashed #999;
  border-radius: 4px;
  padding: 1px 4px;
}
 
mark:first-letter {
  color: #dc143c;
  font-weight: bold;
}
 
mark:nth-child(odd) {
  color: #008080;
}
mark:nth-child(even) {
  color: #8b4513;
}

Обратите внимание, что в примере использованы псевдоклассы для демонстрации работоспособности селекторов в Internet Explorer c помощью selectvizr библиотеки.

Последний элемент списка на данный момент скрыт т.к. IE не поддерживает программный стайлинг для элемента <meter>, но мы займёмся этим в следующий раз. Кстати, вы наверное спросите: «Shift, а зачем так много тегов? Ведь всё работало отлично». Отвечаю: в продолжение цикла заметок мы прокачаем эту вёрстку метаданными и микроформатами, теги нужны для конструктивной нагрузки.

Резюме и профит

Результат проделанной работы, так как вёрстка смотрится в IE, представлен ниже. Живой пример также доступен для изучения.

профессиональная HTML5 и CSS3 вёрстка в Internet Explorer 8

Надеюсь эта заметка помогла вам сделать кое-какие шаги в сторону HTML5.

Илья Азаров ››››› → 22 Июн 2011: 10:31

Тэги интересные. Чую размер CSS файлов и селекторов в них засчет такой разметки будет дико сокращен.

Shift → 22 Июн 2011: 15:17

Сами по себе теги неинтересные. Интересны атрибуты и все стыкующиеся с ними опции. С объёмом CSS — частично да, но это опять же зависит от конкретной ситуации.

Мне нравится HTML5 тем, что не требуется занулять новые теги. Они по дефолту без отступов и других прибабахов. Собсно, использовать их можно фактически тоже на своё усмотрение по вкусу.

selector:nth-child(odd) {
/* some css code*/
}
selector:nth-child(even) {
/* some css code*/
}

Типично такая «зебра» делается на стороне сервера с жёсткой разметкой на классы по чётному и нечётному. Сегодня это умеет делать браузер. Удобно ...

Гость → 11 Сен 2011: 13:56

а я никак не могу добиться чтобы в IE6-8 работали псевдокласы nth, даже в примере в этой статьее этот псевдоклас не работает (захожу с 8го эксплорера в "Живой пример" и он не видит псевдокласов(((()

Shift → 11 Сен 2011: 19:20

Очень странно ... У меня даже в 6м работает

Задача для HTML5 вёрстки

Адаптация вёрстки под HTML5

Резюме и профит

Отправить комментарий