Html По Стандартам

Привет Хабр!

HTML по стандартам

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

В i-Free я много занимаюсь разработкой веб-приложений.

А поскольку их много, они разные и работают в разных условиях, то, само собой, надо думать о стандартизации.

Есть такой проект «Пуленепробиваемый HTML5» ( http://html5boilerplate.com/ ), в котором разработчики решили создать идеальный шаблон страницы.

Он мне очень нравился, и я начинал с ним все свои проекты.

Но, исправляя ошибку за ошибкой, делая всё новые и новые приложения, я пришёл к выводу, что в ней многого не хватает. В этой статье я хотел бы рассказать о том, чего обычно упускают при написании страниц и веб-приложений, и показать, как и почему я обновил свой шаблон пустой страницы.

Указатель на язык:

   

 <html lang="ru-RU">

Это происходит в сочетании с дефисами в CSS. Таким образом, браузер сможет более правильно расставлять переносы.

p { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

Удаление возможности масштабирования:

<meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1,0, масштабируемый пользователем = нет, максимальный масштаб = 1,0"/>

Особенно это полезно на телефонах под управлением Bada, которые могут дождаться загрузки страницы и просто умножить разрешение на 2. Также отключаем масштабирование, т.к.

в приложениях масштабирования обычно нет. Еще один тег для вышеуказанной проблемы:

<meta name="HandheldFriendly" content="Истинный"/>

Индикатор того, что на странице используется разметка, оптимизированная для мобильных устройств.

Запрашивает отображение документа без автоматического масштабирования.

Мы запрещаем кэширование документов:

<meta http-equiv="Cache-Control" content="без кэша"/>

Это помогает на некоторых устройствах избавиться от неадекватных попыток восстановления страницы.

То есть попытки адекватные, но не все устройства восстанавливают страницу без ошибок.

Mobile Internet Explorer позволяет принудительно использовать технологию ClearType для сглаживания шрифтов:

<meta http-equiv="cleartype" cнаtent="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="да"/>

Что ж, давайте настроим верхнюю полоску на iPhone:

<meta name="apple-mobile-web-app-status-bar-style" content="черно-полупрозрачный"/>

Что ж, Windows 8 берет пример с iPhone. Дополнительная разметка для описания:

<meta name="application-name" content="Заголовок"/> <meta name="msapplication-tooltip" content="Описание"/>

Дополнительная разметка для отображения ссылки на приложение в меню:

<meta name="msapplication-TileColor" content="#990000"/> <meta name="msapplication-TileImage" content="изображения/custom_icon_144.png"/> <meta name="msapplication-square70x70logo" content="изображения/custom_icon_70.png"/> <meta name="msapplication-square150x150logo" content="изображения/custom_icon_150.png"/> <meta name="msapplication-square310x310logo" content="изображения/custom_icon_310.png"/> <meta name="msapplication-wide310x150logo" content="изображения/custom_icon_310x150.png"/>

Дополнительные настройки окна.

Судя по всему, это отсылка к HTA, который не сработал:

<meta name="msapplication-window" content="ширина=400;высота=300"/>

Просим IE переключиться в последний режим:

<meta http-equiv="X-UA-Compatible" content="IE=край"/>

Отключите панель обработки изображений:

<meta http-equiv="imagetoolbar" content="нет"/>

Просим IE оформить всё в классическом стиле без учёта текущей темы операционной системы:

<meta http-equiv="msthemecompatible" content="нет"/>

Запрещаем распознавать номера телефонов и адреса, а также выделять их:

<meta name="format-detection" content="телефон=нет"/> <meta name="format-detection" content="адрес=нет"/>

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

Полный набор для SEO:

<title></title> <meta name="description" content=""/> <meta name="keywords" content=""/> <meta name="author" content=""/> <meta name="copyright" content="(с)"> <meta http-equiv="Reply-to" content="почта@yandex.ru">

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

Обязательно сбросьте стили по умолчанию:

<link href="css/reset.min.css" rel="stylesheet" type="text/css"/>

Я немного изменил свой сброс.

Он задавал фон для тега 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;

Теги: #HTML #CSS #JavaScript #Разработка веб-сайтов #JavaScript