Страницы Интернета
Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.
В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.
Указатель на язык:
p < -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; > meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/> Это особенно полезно на телефонах с операционкой Bada, которые могут дождаться загрузки страницы и просто умножить разрешение на 2. Также мы отключаем zoom, т.к. в приложениях обычно никакого зума нет.
Ещё один тег для вышеописанной проблемы:
meta name="HandheldFriendly" content="True"/> Индикатор того, что на странице использована разметка оптимизированная для мобильных устройств. Просит документ отображаться без автоматического масштабирования.
Запрещаем кэшировать документ:
meta http-equiv="Cache-Control" content="no-cache"/> Это помогает на некоторых девайсах избавиться от неадекватных попыток восстановления страницы. То есть попытки адекватные, но не все девайсы восстанавливают страницу без багов.
Mobile Internet Explorer позволяет принудительно активировать технологию ClearType для сглаживания шрифтов:
meta http-equiv="cleartype" content="on"/> link rel="apple-touch-startup-image" href="images/startup.png"> link rel="apple-touch-icon" href="images/touch-icon-iphone.png"/> link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png"/> link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone-retina.png"/> link rel="apple-touch-icon" sizes="144x144" href="images/touch-icon-ipad-retina.png"/> meta name="apple-mobile-web-app-capable" content="yes"/> meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> meta name="application-name" content="Title"/> meta name="msapplication-tooltip" content="Description"/> meta name="msapplication-TileColor" content="#990000"/> meta name="msapplication-TileImage" content="images/custom_icon_144.png"/> meta name="msapplication-square70x70logo" content="images/custom_icon_70.png"/> meta name="msapplication-square150x150logo" content="images/custom_icon_150.png"/> meta name="msapplication-square310x310logo" content="images/custom_icon_310.png"/> meta name="msapplication-wide310x150logo" content="images/custom_icon_310x150.png"/> meta name="msapplication-window" content="width=400;height=300"/> meta http-equiv="X-UA-Compatible" content="IE=edge"/> meta http-equiv="imagetoolbar" content="no"/> meta http-equiv="msthemecompatible" content="no"/> meta name="format-detection" content="telephone=no"/> meta name="format-detection" content="address=no"/> Для обычной веб-странички лучше вставить набор CSS стилей, описывающих телефон и адрес, а не блокировать их распознание.
title> title> meta name="description" content=""/> meta name="keywords" content=""/> meta name="author" content=""/> meta name="copyright" content="(c)"> meta http-equiv="Reply-to" content="mail@yandex.ru"> В последнее время про него тоже стали забывать, а ведь он может помочь, если приложение будет на каком-либо сайте online.
Обязательно скидываем стили по умолчанию:
link href="css/reset.min.css" rel="stylesheet" type="text/css"/> Свой reset я немного изменил. Он задавал background для TD тега, и это вызвало багу в старом IE, если мы заливаем всю строку через тег TR
Добавляем набор своих стандартных стилей:
link href="css/default.css" rel="stylesheet" type="text/css"/> body < -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(255, 255, 255, 0); outline: none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; resize: none; -webkit-text-size-adjust: none; > input, textarea < -moz-user-select: text; -o-user-select: text; -khtml-user-select: text; -webkit-user-select: text; user-select: text; resize: none; > Ещё раз напомню, что в основном я пишу веб-приложения, в которых пользователь ничего выделять не должен. На обычном сайте запрещать выделение текста нельзя.
Ставить border картинкам обычно не забывают, т.к. он в reset.css, а вот vertical-align пропускают:
img < border: 0; vertical-align: top; > .animation < -webkit-transition: background-color 0.7s, color 1s, opacity 0.5s; -ms-transition: background-color 0.7s, color 1s, opacity 0.5s; -o-transition: background-color 0.7s, color 1s, opacity 0.5s; -moz-transition: background-color 0.7s, color 1s, opacity 0.5s; transition: background-color 0.7s, color 1s, opacity 0.5s; > Можно копировать его по мере надобности для кнопок, табиков и т.п. Суть в том, что когда он постоянно попадается на глаза, подключение анимации становится чем-то естественным. О ней уже не надо вспоминать как о фиче, которую нужно не забыть подключить.
А ещё в этих стилях я раскрашиваю плашку которая всегда идет вверху HTML шаблона:
noscript class="no_script_message"> У вас отключен JavaScript. Сайт может отображаться некорректно. Рекомендуем включить JavaScript. noscript> Этой строкой просим его не показывать нам табличку про то, что скрипты опасны и т.д. и т.п., а просто брать и включать JS
Ну и стили для портретной и альбомной ориентации:
link href="css/portrait.css" rel="stylesheet" media="all and (orientation:portrait)"/> link href="css/landscape.css" rel="stylesheet" media="all and (orientation:landscape)"/> Тут указаны параметры для HTA файла (например, наличие системного меню, отсутствие скролла и т.п.). А также добавлен JS файл (по умолчанию он закомментирован):
Его задача сжать окно и отцентрировать его по середине экрана (если, конечно, это возможно).
Ну а с этим наверное уже знакомы?
script src="js/html5.js"> script> Бежим по новым тегам HTML5 и пересоздаем их для старых IE.
script src="js/android.js"> script> - Берем высоту страницы и увеличиваем её на два
- Скроллим вверх до 1px сверху
- Возвращаем высоту в исходное положение
Таким хаком на Android`ах исчезает адресная строка. А ещё можно добить тач, об этом говорил Иван Чашкин на DUMP-2014 (а ещё тут есть статья http://habrahabr.ru/company/mailru/blog/165213/ от Mail.ru). Суть в том, что, если переопределить все тач события и сделать им stopPropagation, то Android`ы перестанут тормозить с отправкой событий.
Просим закэшировать приложение для offline работы, если это возможно:
html manifest="default.appcache"> html manifest="default.appcache" lang="ru-RU"> input type="text" autocomplete="on" spellcheck="true" autocapitalize="off" autocorrect="off" autofocus required maxlength="30" pattern="^[А-Яа-я\s\-\_0-9]+$" class="input_name" id="input_name" placeholder="Иван Иванович" x-webkit-speech /> - placeholder — подсказка для ввода
- maxlength — ограничение количества вводимых символов
- spellcheck — проверка правописания
- autocorrect — автоматическое корректировка написанного
- autocapitalize — автоматическое преобразование регистра
- x-webkit-speech — голосовой ввод
- Тип элемента должен соответствовать типу вводимых данных. Если это поле ввода пароля, оно должно иметь тип password. Вводимые символы при этом должны заменяться звездочками.
- Элемент должен сопровождаться примером того, какие данные требуется ввести.
- Элемент должен подсказывать пользователю данные для ввода на лету.
- Элемент должен проверять орфографические ошибки.
- Максимальная длина ввода должна быть ограничена.
- Если это поле ввода нового пароля, необходимо добавить кнопку «авто-генерация пароля». При нажатие на которую генерируется случайный пароль.
- Элемент должен содержать атрибут pattern, указывающий на ожидаемый тип данных.
- При работающем JavaScript, введенные пользователем данные обязательно должны проверяться на лету. Если данные не прошли проверку — необходимо немедленно уведомить об этом пользователя.
- Если это поле ввода пароля, необходимо добавить кнопку «посмотреть пароль» (обычно оформляется в виде «глаза»), при нажатие на которую тип поля становится text, и пользователь может проверить введенные данные.
- Если есть возможность авто-заполнения поля, её необходимо обязательно использовать. Либо поместить около элемента кнопку, при нажатие на которую будет срабатывать авто-заполнение.
- В зависимости от ситуации, иногда возможно использовать «автокоррекцию» и на лету удалять запрещенные символы. Опасность такой ситуации заключается в том, что пользователь может не заметить коррекцию и отправить данные, которые отличаются от того, что он хотел ввести.
- Изменение размера поля должно быть запрещено (resize: none в CSS)
- Если это ввод некоего сообщения, необходимо информировать пользователя о том, сколько символов ему ещё можно ввести.
- Идеальная верстка должна выживать где-то в районе IE6. Стараемся по минимуму использовать inline-block. Заранее смотрим, что будет если он станет inline или block элементом.
- Position — это опасно. Желательно ничего никуда не позиционировать.
- Float — тоже к добру не приведет. Желательно вообще про него забыть.
- В дизайне надо сразу предусмотреть возможность того, что тот или иной фрагмент может отвалиться. В этом плане идеален стиль Metro. Как-то даже пришла в голову мысль, что Microsoft специально сделала такой стиль, в котором нет ни круглых углов, ни градиентов, ни теней. То есть ребята сразу отталкивались от своего браузера, чтобы никто не мог обвинить их в багах.
Progressive Enhancement и Graceful Degradation
Советую посмотреть доклад Сергея Горобцова из Яндекса про Progressive Enhancement и Graceful Degradation (http://tech.yandex.ru/education/shri/ekb-2013/talks/1500/) о том, как верстать так, чтобы было хорошо везде.
- Расческа для CSS (http://csscomb.ru/online/) поможет всему принять единый вид.
- Автопрефиксер Андрея Ситника поможет добить CSS-префиксы (http://habrahabr.ru/company/evilmartians/blog/176909/)
- Вот такой скрипт (http://bakhirev.biz/StalinGrad/zip/build/generation_pictures.zip) поможет нагенерировать кучу картинок (требует установленного imagemagick)
Так же в своем шаблоне я сразу подключаю несколько готовых модулей типа замены стандартных alert`ов, добавление автопрокрутки сбоку (как на хабре или вконтакте) и т.п. Но это уже велосипеды, которые выходят за рамки статьи.
А вот этот стандартный велосипед может пригодиться. Стандартный footer по микроразметке:
footer itemscope itemtype="http://schema.org/LocalBusiness"> ООО «span itemprop="name">Google span>» div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> span itemprop="streetAddress">Ленина 1 span> span itemprop="addressLocality">Санкт-Петербург span>, span itemprop="addressRegion">Ленинградская обл. span> meta itemprop="addressCountry" content="RU"/> div> Время работы менеджера-консультанта: time itemprop="openingHours" datetime="Mo, Tu, We, Th, Fr, Sa, Su 10:00-21:00">10:00 - 21:00 Ежедневно time> span itemprop="telephone">206-555-1234 span>. span itemprop="email">info@wikimedia.org span>. a href="http://www.google.com" itemprop="url">http://google.com a>. footer> С другой стороны, у всех поисковиков она есть в документации, но никто её не поддерживает. Я использую этот footer, т.к. мало ли, может в будущем начнут использовать.