Здравствуйте дорогие читатели!

Хочу поделиться с Вами HTML разметкой, которую я использую для верстки сайтов. В частности не всей разметкой, а лишь секцией head, для корректной работы отзывчивого макета. В работе над новыми проектами я использую HTML5, в принципе можно пользоваться html5boilerplate, но по сути каждый выбирает сам как работать.

Так вот мой html-документ начинается так:

<!Doctype html>
<!--[if IE 7 ]><html class="ie7"> <![endif]-->
<!--[if IE 8 ]><html class="ie8"> <![endif]-->
<!--[if IE 9 ]><html class="ie9"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--><html> <!--<![endif]-->
<head>

	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width" />
	<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
	
	<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />

	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->

	<script type="text/javascript" src="js/script.js"></script>
	
	<title>Название документа</title>
	
</head>

<body>

	...

</body>
</html>

Что тут происходит:

  1. Первым делом объявляем !Doctype — говорим браузеру какой тип документа он открывает
  2. Условными комментариями определяем версию браузера Internet Explorer, что облегчает изобретение «костылей», без всяких хаков
  3. Объявляем кодировку документа utf-8
  4. Включаем режим совместимости для браузеров Internet Explorer
  5. Задаем значение viewport — ширину устройства
  6. Запрещаем преобразование телефонов skype
  7. Подключаем таблицу стилей style.css
  8. Подключаем библиотеку jQuery — очень часто приходится использовать
  9. Для браузеров Internet Explorer ниже 9 версии, подключаем два скрипта с гугловских CDN: html5shim — создает элементы разметки HTML5, и css3-mediaqueries-js — для поддержки media-query в CSS
  10. Подключаем наши jQuery скрипты
  11. Последним делом объявляем title нашей страницы

Итак отзывчивость включили, и использовать ее в таблице стилей мы можем следующим образом

@media screen and (max-width: 1400px) {
	тут CSS правила
}
@media screen and (max-width: 1200px) {
	тут CSS правила
}
@media screen and (max-width: 1000px) {
	тут CSS правила
}

Тоесть пишем свои стандартные правила, а потом в конце документа пишем стили уже для отзывчивости макета.

Всего хорошего! Замечания, пожелания, оставляйте в комментариях!

Добавить комментарий:


Комментарии
  1. Юрий

    В HTML5 не проходит валидацию. Нет там такого тега.

  2. Юрий

    Я про мета-тег SKYPE_TOOLBAR 🙂

  3. JAH

    Юрий, может быть, но форум скайпа рекомендует)
    тут писал как еще можно запретить преобразование телефонов плагином ClickToCall

  4. Max Suharev

    Привет, Владимир. Решил я тут первый свой шаблон сверстать и выбрал для основы готовый кости «Bones — The HTML5 WordPress Starter Theme -» В этой чистой теме все стили подключаются через

    
    

    что, меня немного смутило.

    Я хотел сделать поиск в другой цветовой гамме, для этого создал отдельный css стиль и хотел подключить через вот такой код

    &lt;link rel=&quot;stylesheet&quot; href=&quot;/search.css" type="text/css" media="screen" /&gt;
    
    &lt;link rel=&quot;stylesheet&quot; href=&quot;" type="text/css" media="screen" /&gt;
    

    Но так как стили у меня подключаются через function, то у меня встала загвоздка. Как мне подключить отдельные стили для поиска в function?. А точнее там создается действие

    require_once('library/bones.php');

    а там уже подключатся все стили.

    Еще вопрос как лучше выводить стили в WP? Как показано выше в статье или через отдельный php файл, подключенный к

    
    

    ?

    В этом деле я еще новичок.
    Спасибо за ответ.

  5. Max Suharev

    Оу код чтот вставился криво вот https://dl.dropboxusercontent.com/u/6498190/code.txt

  6. JAH

    Max, стили луше подключать через wp_enqueue_style() < - в кодексе wordpress почитай про эту штуку и создавать отдельный файл стилей для поиска нет необходимости, достаточно в файле header.php прописать такой вот body

    <body <?php body_class(); ?>>
    на выходе страницы поиска у body будет класс:
    
    <body class="search search-results">

    ну а дальше дело техники возни со стилями)