i-Free Group
Компания
48,75
рейтинг
20 марта 2014 в 09:31

Разработка → HTML по стандартам

Привет Хабр!

image Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.

В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.

Указатель на язык:
<html lang="ru-RU">

Это идет в паре с hyphens в CSS. Таким образом браузер может более корректно расставлять переносы.
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"/>

Не забываем добавить картинки для Apple устройств:
<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"/>

Ну и корректируем верхнюю полоску в iPhone:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

Ну и Windows 8 берет пример с iPhone. Дополнительная разметка для описания:
<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"/>

Дополнительные настройки для окна. Видимо, это такая отсылка к HTA, который не пошел:
<meta name="msapplication-window" content="width=400;height=300"/>

Просим IE переключиться в последний режим:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

Отключаем панель работы с изображениями:
<meta http-equiv="imagetoolbar" content="no"/>

Просим IE оформлять все в классическом стиле без учета текущей темы операционки:
<meta http-equiv="msthemecompatible" content="no"/>

Запрещаем распознавать номера телефонов и адреса, а так-же выделять их:
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="address=no"/>

Для обычной веб-странички лучше вставить набор CSS стилей, описывающих телефон и адрес, а не блокировать их распознание.

Полный набор для SEO:
<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"/>

А в них учтены ещё некоторые нюансы. Например убираем выделение в 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>

Ну и конечно, ради любимого IE в самом начале добавим:
<!-- saved from url=(0014)about:internet -->

Этой строкой просим его не показывать нам табличку про то, что скрипты опасны и т.д. и т.п., а просто брать и включать 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, есть такая вставка:
<!-- Option for HTA file
	<hta:application id=ifree.game.sudoku
		applicationName=Sudoku
		showInTaskBar=yes
		caption=yes
		innerBorder=yes
		selection=no
		icon=images/favicon.ico
		sysMenu=yes
		windowState=normal
		scroll=no
		resize=no
		navigable=no
		contextmenu=yes />
		-->

Тут указаны параметры для HTA файла (например, наличие системного меню, отсутствие скролла и т.п.). А также добавлен JS файл (по умолчанию он закомментирован):
<script src="js/hta.js"></script>

Его задача сжать окно и отцентрировать его по середине экрана (если, конечно, это возможно).

Ну а с этим наверное уже знакомы?
<script src="js/html5.js"></script>

Бежим по новым тегам HTML5 и пересоздаем их для старых IE.

Ну и прокачиваем Android
<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 обычного человека:
<input type="text" id="name">

Как выглядит input курильщика:
<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, и пользователь может проверить введенные данные.
  • Если есть возможность авто-заполнения поля, её необходимо обязательно использовать. Либо поместить около элемента кнопку, при нажатие на которую будет срабатывать авто-заполнение.
  • В зависимости от ситуации, иногда возможно использовать «автокоррекцию» и на лету удалять запрещенные символы. Опасность такой ситуации заключается в том, что пользователь может не заметить коррекцию и отправить данные, которые отличаются от того, что он хотел ввести.


Половину этих свойств можно переносить и на textarea. Тут и авто-дополнение, и проверка правописания, и голосовой ввод, подсказка, ограничение длины и т.д. Но есть ещё ряд дополнительных требований:
  • Изменение размера поля должно быть запрещено (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/) о том, как верстать так, чтобы было хорошо везде.

Что же ещё может понадобиться для стандартизации?


Так же в своем шаблоне я сразу подключаю несколько готовых модулей типа замены стандартных alert`ов, добавление автопрокрутки сбоку (как на хабре или вконтакте) и т.п. Но это уже велосипеды, которые выходят за рамки статьи.

А вот этот стандартный велосипед может пригодиться. Стандартный footer по микроразметке:
<!-- SEO schema -->
<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, т.к. мало ли, может в будущем начнут использовать.

Вот пожалуй и все. Тем кто осили — небольшой бонус:

image

В демке вы можете посмотреть все meta теги из статьи.
Автор: @bakhirev
i-Free Group
рейтинг 48,75
Компания прекратила активность на сайте

Комментарии (49)

  • 0
    Блестяще!
  • +17
    Замечания по верстке:
    Идеальная верстка должна выживать где-то в районе IE6. Стараемся по минимуму использовать inline-block. Заранее смотрим, что будет если он станет inline или block элементом.
    Position — это опасно. Желательно ничего никуда не позиционировать.
    Float — тоже к добру не приведет. Желательно вообще про него забыть.

    очень спорно.

    А так полезная статья, всегда интересно увидеть чужие стандарты ;)
    • +17
      Тоже не совсем понял сей момент. Это был призыв верстать таблицами?
      • +6
        Нет. Но иногда таблицы нужны. Например есть тренд верстать не таблицами. Но и таблица может помочь вам выживать при конвертации в EXE. Просто нужно к ним относиться проще. Иногда они нужны, иногда не нужны. По возможности — лучше конечно без них. Но иногда делают кучу костылей, лишь бы только таблицу не вставить. Вот вам немного HTML -> CHM:

        image

        Ссылка http://bakhirev.biz/StalinGrad/demo/31.zip

        А вот теперь представьте, что у меня есть всякие менюшки, окошки, диалоги. И я хочу чтобы это работало 100%. Без таблиц такой финт не сделать. Но опять подчеркну, что они нужны в случаях крайней необходимости и спец. условиях. Сайты всяким ООО Рога и Копыта — конечно нужно верстать без них по HTML5 семантике.
        • НЛО прилетело и опубликовало эту надпись здесь
          • –1
            Нафиг-то оно, конечно, нафиг, но делать пуленепробиваемую обвязку гораздо быстрее таблицей.
            Речь идёт об одной таблице безо всякого колдунства против нормальной такой пачки стилей.
            Так что лично я бы обошёлся без фанатизма и делал как проще (в т.ч. и в поддержке!), а не как «современнее».
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Думаю, что ее не «скрутит» от щелчка мыши по менюшке ;)
  • +55
    Переименуйте статью в «Набор костылей для мобильных устройств».
    • +5
      Так это было в прошлой моей статье habrahabr.ru/company/ifree/blog/214531/ А тут уже насилие в общем, включая обычные браузеры :-)
    • +15
      Странно почему мы вспоминаем про IE6/IE7 в статье про мобильные устройства, действительно странно
    • +5
      Переименуйте статью в «Набор костылей для мобильных устройств».

      «Набор костылей для приложений для мобильных устройств».

      Многое из описанного банально вредно, если вставить в обычную страничку.
  • +20
    Очень спорные стандарты на самом-то деле

    Как уже писали выше, про inline-block и float довольно странное напутствие. По поводу inline-block все не так уж и плохо: его можно заставить работать в IE6. Если мне не изменяет память делалось это указанием следующих стилей
    .inline-block {display: inline; zoom: 1;}
    В IE7 конструкция выше работает точно. Многие SASS/SCSS фреймворки (Compass, Bourbon, …) имеют mixin inline-block, который как раз и реализует данный хак для старых IE

    Да и опять же, вы в статье упоминаете про Progressive Enhancement и Graceful Degradation и в тоже время призываете отказываться от того же inline-block и прочих вещей. Подключив modernizr, вы сможете тестировать поддержку различных css возможностей и при необходимости менять их отображение. Также modernizr хорош для проверки placeholder, pattern, упомянутых в статье для input. Верстка, выжившая для IE6, но без нужных полифилов, будет смотреться странно, особенно если все подписи к полям существуют только в виде placeholder, потому что ни одна подпись в input'е не покажется. Это, кстати, касается и IE8.

    По поводу noscript. По спецификации HTML5 данный тег запрещен. Вместо него сейчас принято добавлять к html класс no-js, а у браузеров которых включен JS снимать этот класс. Используя этот подход, можно отображать/не отображать какие-то блоки, а не просто добавлять дополнительный текст, как это делает noscript. С классом no-js все легко контролируется через CSS. Также вы сможете менять функционал своего приложения, проверяя включен ли JS. Делать, к примеру, формы по умолчанию рабочими на отправку, но если включен JS и нужна поддержка ajax, то делать preventDefault и отправлять форму ajax'ом и тп.

    От reset.css уже многие отказались в пользу normalize.
    Упомянутый выше modernizr также включает в себя html5-shiv, поэтому нет необходимости подгружать его отдельно, если используется modernizr. Выше вроде бы как указаны плюсы его использования.

    Если идти в сторону микроформатов и разметки учитывающей все, то необходимо также добавить информацию для соц. сетей в head
    Сейчас самый известный формат для этого — Open graph ogp.me/. Его поддерживает Facebook и по ощущениям VK тоже
    Для твиттера тоже появилась подобная возможность — dev.twitter.com/docs/cards
    • +5
      По поводу noscript. По спецификации HTML5 данный тег запрещен.

      Неправда. Спецификация WHATWG, Спецификация W3C.
      • 0
        Неправда. Спецификация WHATWG, Спецификация W3C.


        Да действительно, я ошибся, извиняюсь. Не успел тщательно перепроверить информацию, почему-то давно запомнилось что его запрещали. Буду в курсе, что в итоге он рабочий.
  • +11
    Зачем запрещать маштабирование? Это же неудобно когда маленький экран.
    • +1
      Ну в идеале верстальщик должен предусмотреть маленькие экраны и сделать их удобными без маштабирования. Кнопки увеличить, лишнее убрать и т.д. Например, мы пользуемся обычными мобильными приложениями без маштабирования, т.к. они хорошо заточены под экран -> ну а страничку оптимизировать гораздо легче.
    • +2
      Чтобы случайно не зумить приложение, использующее webview устройства. Если контент уже оптимизирован, в том числе и под маленький экран, зум будет неожидаемым и излишним поведением. Представьте себе, что демка с грибом запущена на мобильнике (при этом растянута на весь экран) и двойной тап — прыжок. Пользователь дважды тапает и… зумится :)
  • +3
    Отключение масштабирования и отключение кеша выглядит злом.
    • +4
      Если это мобильное приложение (еще раз повторюсь — приложение) то все файлы у вас уже лежат на устройтсве, а не тянуться через интернет, также ваше приложение уже оптимизированно для мобильного просмотра и зум лишь будет мешать и портить сайт. Напишите игру на html5 для смартфонов и скажем воспользуйтесь phoneGap вы поймете, что в отключении этих параметов есть смысл.
  • +20
    Вот начитаются начинающие «веб-разработчики» таких статей, вобьют себе в голову всё написанное как постулаты, и будут бездумно фигачить именно так, потому что умный дядя из интернетов сказал, что это правильно. Все приёмы, освещённые в статье, нужно использовать с умом, зная, когда это нужно, а когда нет. А в данном случае подача именно «некогда объяснять, просто делай так».
    Ну и присоединюсь к недоумевающим от того, что вы решили запретить людям использовать float, position и inline-block.
    • НЛО прилетело и опубликовало эту надпись здесь
      • +3
        А я скажу больше, если вы верстаете например шапку сайта, часто элмеенты там расположены не структурно а в угоду юзабилити и потребностям маркетинга, в данном случае я счтаю использования позиционирования даже обязательным, ибо так вы решаете кучу проблем с частыми правками этого блока (например: добавление стикера с акцией, добавления логотипчика праздника (новый год, 8 марта...) и прочих временныъх элементов), также в подобных частях сайта изменение элемента на пару пикселей не должно вдруг сдвигать все другие за пределы области или на другие строки.
        Так что везде нужен разум
        • +1
          А разум приходит тогда, когда начинаешь верстать не «картинку», а логическую структуру.
          • 0
            Так, это, есть места где важна картинка именно ну и к тому же позиционирование никоем образом на структуру не влияет у вас может быть прекрасный, логически выверенный валидный и сематичный html, с поддержкой решений для людей с ограниченными возможностями. Но при этом ничто не мешает визуально его оформлять с помощью абсолютного позиционирования дабы было удобней и избежать возможных проблем
            • 0
              Я, видимо, не совсем правильно выразился. Я имел ввиду не столько семантику, валидность и прочее, сколько… скажем, логическое взаимоотношение элементов на странице. То есть если элементы логически взаимосвязаны (их расположение/размеры зависят друг от друга), то нужно учитывать в первую очередь это, а не то, какая в итоге должна получиться картинка. То же самое относительно несвязанных элементов — не за чем городить огород из отступов и полей, если можно использовать абсолютное позиционировние, т.к. элементы друг на друга никак не влияют.
              В общем, кажется, мы говорим об одном и том же =)
  • +2
    Мне кажется вы выбрали неверный хаб — Веб разработка.
    Раз уж эти советы касаются приложений, которые имеют малое отношение к вебу каким мы его привыкли видеть. Большинство ваших советов похоже на костыли, а с некоторыми можно спорить, в контексте веба, но, возможно, не в контексте разработки мобильных приложений.
  • +2
    Кажется вы переизобрели html5boilerplate.com/mobile/ и normalize.css
  • +6
    Вот пожалуй и все. Тем кто осили — небольшой бонус:
    В демке вы можете посмотреть все meta теги из статьи.

    Для каких браузеров предназначена демка? Попробовал в Хроме 33 и FireFox 27 — жутчайшие тормоза и дёрганье на не самой слабой по сегодняшним меркам машине. У меня Quake 1 в браузере на той же машинке работает без тормозов, а тут какой-то платформер…
    • 0
      Хз, у меня даже IE6 без тормозов гоняет. Проверил на паре ноутбуков.
      Если вашему комменту сейчас «лайков» не наставят — тогда что-то у вас на компе не так. Если будут плюсовать — тогда буду разбираться в чем баг.
      • +2
        Круто. Запустил в IE8, получил
        Сообщение: 'console' — определение отсутствует
        Строка: 1
        Символ: 3664
        Код: 0
        URI-код: bakhirev.biz/StalinGrad/demo/js/StalinGrad_0.1.0.min.js

        И тем не менее, другие HTML5 игрушки идут хорошо. Забавно.
  • +2
    А подскажите, пожалуйста, где лучше всего дополнительно почитать про переносы — я несколько раз пытался их у себя завести (в том числе и сейчас после вашей статьи), но, видимо, упускаю что-то важное — в последнем Хроме под Линуксом у меня на тестовой странице никаких переносов не появляется, несмотря на добавленные в css hypens: auto.
    • +1
      Сам себе отвечаю: в Хроме на данный момент и в ближайшей перспективе hyphens не поддерживаются.
  • +2
    А как на счет вашего форка бойлерплейта на гитхабе?
  • +15
    user-scalable=no
    Будьте осторожны, советуя это. Сейчас набегут любитеги готовых решений и вставят это на все свои сайты, которые совсем не приложения и я в очередной раз не смогу выделить или прочитать мелкий текст.

    Таким образом браузер может более корректно расставлять переносы
    Не более корректно, а в принципе сможет. Без этого никаких переносов.

    HTML по ГОСТ`у
    По ГОСТу.

    Расческа для CSS (http://csscomb.ru/online/)
    Лучше используйте новую версию csscomb.js — она, в отличие от той формы, развивается, лучше работает и имеет таск grunt-csscomb.

    Тем кто осили
    • 0
      Мобильный хром позволяет переопределить столь нехорошее и часто неудобное для пользователя поведение.
      • 0
        Это все равно не совсем правильно — можно и размер шрифта делать крупнее через настройки браузера, но верстка, как правило, на это не рассчитана.
        Если есть необходимость в более крупном шрифте на сайте — эта возможность должна предоставляться интерфейсом сайта.
        Если сайт должен масштабироваться — это тоже должно быть предусмотрено со стороны разработчиков.

        А вообще сейчас по-моему такие сайты для телефонов делают, что в масштабировании на них нет необходимости.
  • 0
    Спасибо, очень интересная подборка.
    На счет добаления img — vertical-align: top, не совсем соглашусь т.к. зачастую приходиться выравнивать картинку по middle
  • +3
    <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"/>
    

    Apple изменила размеры, теперь так:
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
    

    Safari Web Content Guide:Configuring Web Applications
    • +29
      image
  • +3
    -webkit-text-size-adjust: none; отвечает не за выделение в CSS, а за автомасштабирование шрифтов, если браузеру «покажется», что шрифты нужно увеличить. Отнести этот стиль нужно скорее к масштабированию. При отсутствии данного стиля (на моих страницах) iPhone самопроизвольно менял размер шрифта при изменении ориентации на горизонтальную, оставляя размеры всех элементов (не текста) правильными. При загрузке страницы сразу в гор. позиции всё было нормально. Возможно, в вашем случае это проявится по-другому, в детали не погружался.
  • 0
    Так, я думаю, быть не должно

  • +1
    <meta name="viewport" content="minimal-ui" />

    Благодаря ему, в Сафари в iOS 7.1 адресная строка дёргаться не будет при скроллинге вверх-вниз, а всегда будет с фиксированным размером. Пример.
  • +4
    вот так вот и появляются пустые страницы в добрый десяток килобайт. А ведь она еще без контента
  • +1
    Как будто урок по ассемблеру читаю.
  • +4
    boilerplate переводится как «шаблонный», т.е. наборы каких-то готовых рецептов для HTML5
    а пуленепробиваемый по-английский будет bullet proof

    ну и статья целиком посвящена мобильным веб-приложениям. об этом надо писать хотя бы в предисловии. а то начинаешь это понимать только к середине

    плюс, много спорных вещей, о которых уже сказали выше
  • 0
    Сильно же вас жизнь потаскала, все эти мета-теги знать.
  • 0
    Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/)

    boilerplate == шаблон, заготовка
  • 0
    Тоже мне, стандартизеры нашлись:
    Демка даже валидацию не проходит:
    Result: 6 Errors, 2 warning(s)
    Внутри самой странички в теге <style> закрывающую фигурную скобку потеряли.
    Я уж не говорю о том, что просто тупо открытая в браузере страничка с демкой за 1 час «прокачала» 75 мегабайт ЖПРС трафика. вообще пипец.

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

Самое читаемое Разработка