Здравствуйте дорогие читатели!
Хочу поделиться с Вами 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>
Что тут происходит:
- Первым делом объявляем
!Doctype
— говорим браузеру какой тип документа он открывает - Условными комментариями определяем версию браузера Internet Explorer, что облегчает изобретение «костылей», без всяких хаков
- Объявляем кодировку документа
utf-8
- Включаем режим совместимости для браузеров Internet Explorer
- Задаем значение
viewport
— ширину устройства - Запрещаем преобразование телефонов skype
- Подключаем таблицу стилей
style.css
- Подключаем библиотеку
jQuery
— очень часто приходится использовать - Для браузеров Internet Explorer ниже 9 версии, подключаем два скрипта с гугловских CDN:
html5shim
— создает элементы разметки HTML5, иcss3-mediaqueries-js
— для поддержки media-query вCSS
- Подключаем наши
jQuery
скрипты - Последним делом объявляем
title
нашей страницы
Итак отзывчивость включили, и использовать ее в таблице стилей мы можем следующим образом
@media screen and (max-width: 1400px) { тут CSS правила } @media screen and (max-width: 1200px) { тут CSS правила } @media screen and (max-width: 1000px) { тут CSS правила }
Тоесть пишем свои стандартные правила, а потом в конце документа пишем стили уже для отзывчивости макета.
Всего хорошего! Замечания, пожелания, оставляйте в комментариях!
Max, стили луше подключать через
wp_enqueue_style()
< - в кодексе wordpress почитай про эту штуку и создавать отдельный файл стилей для поиска нет необходимости, достаточно в файле header.php прописать такой вот bodyОу код чтот вставился криво вот https://dl.dropboxusercontent.com/u/6498190/code.txt
Привет, Владимир. Решил я тут первый свой шаблон сверстать и выбрал для основы готовый кости «Bones — The HTML5 WordPress Starter Theme -» В этой чистой теме все стили подключаются через
что, меня немного смутило.
Я хотел сделать поиск в другой цветовой гамме, для этого создал отдельный css стиль и хотел подключить через вот такой код
Но так как стили у меня подключаются через function, то у меня встала загвоздка. Как мне подключить отдельные стили для поиска в function?. А точнее там создается действие
а там уже подключатся все стили.
Еще вопрос как лучше выводить стили в WP? Как показано выше в статье или через отдельный php файл, подключенный к
?
В этом деле я еще новичок.
Спасибо за ответ.
Юрий, может быть, но форум скайпа рекомендует)
тут писал как еще можно запретить преобразование телефонов плагином ClickToCall
Я про мета-тег SKYPE_TOOLBAR 🙂
В HTML5 не проходит валидацию. Нет там такого тега.