EN RU
Форум

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

DocumentationExamplesSource

page

Блок предоставляет шаблоны, создающие набор HTML-элементов верхнего уровня страницы: <html>, <head>, <body>.

Обзор

Специализированные поля блока

Поле Тип Описание
doctype {String} Позволяет переопределить строку DTD текущего документа.
title {String} Позволяет указать содержимое <title>.
favicon {String} Позволяет указать URL значка страницы (фавиконки).
head {BEMJSON} Позволяет дополнить содержимое <head>.
styles {BEMJSON} Позволяет подключать таблицы стилей CSS.
scripts {BEMJSON} Позволяет подключать скрипты в тело документа.
content {BEMJSON} Позволяет указать содержимое страницы.

Элементы блока

Элемент Способы использования Описание
css BEMJSON Служит для подключения CSS по ссылке или в виде строки.
js BEMJSON Служит для подключения JS по ссылке или в виде строки.
meta BEMJSON Служит для создания HTML-элементов <meta>.

Специализированные поля элементов блока

Элемент Поле Тип Описание
css url {String} Позволяет задать URL для загрузки стилей.
content {String} Служит для задания стилей в виде строки
js url {String} Позволяет задать URL для загрузки скрипта.
content {String} Служит для задания скриптов в виде строки

Публичные технологии блока

Блок реализован в технологиях:

  • bh.js
  • bemhtml

Подробности

Блок отвечает за создание HTML-элементов верхнего уровня, подключение к странице CSS, JS, элементов <meta> и указание заголовка. Для этого в BEMJSON-декларации блока и элементов блока зарезервированы специализированные поля.

Специализированные поля блока

Поле doctype

Тип: {String}.

Позволяет явно указать строку с DTD (Document Type Definition) текущего документа. Если свойство не задано, по умолчанию будет использоваться <!DOCTYPE html>.

Поле title

Тип: {String}.

Название страницы. Становится HTML-элементом <title>.

Open in a new window

Поле favicon

Тип: {String}.

Позволяет указать URL значка страницы (фавиконки):

Open in a new window

Поле head

Тип: {BEMJSON}.

Позволяет дополнить содержимое HTML-элемента <head>, определенное в шаблоне блока:

Open in a new window

Поле styles

Тип: {BEMJSON}.

Позволяет подключить CSS:

Open in a new window

Поле scripts

Тип: {BEMJSON}.

Позволяет подключать JS в тело страницы в конец HTML-элемента <body>:

Open in a new window

Поле content

Тип: {BEMJSON}.

Позволяет указать содержимое страницы.

Open in a new window

Элементы блока

Элемент css

Служит для подключения CSS по ссылке или в виде строки. В зависимости от того, указано ли в декларации элемента поле url, создается HTML-элемент с тегом:

  • <link> и свойством stylesheet, если url есть.
  • <style>, если поле url неуказано. В этом случае предполагается, что содержимое элемента передается с помощью свойства content BEMJSON-декларации элемента.

Специализированное поле content

Тип: String.

Служит для явной передачи содержимого HTML-элементу <style>:

Open in a new window

Специализированное поле url

Тип: String.

Позволяет задать URL для загрузки таблицы CSS. Значение поля url BEMJSON-декларации передается свойству href создаваемого HTML-элемента.

Элемент js

Служит для подключения JS по ссылке или в виде строки. Создает HTML-элемент <script>.

Специализированное поле content

Тип: String.

Служит для явной передачи содержимого HTML-элементу <script>:

Open in a new window

Специализированное поле url

Тип: String.

Позволяет задать URL для загрузки скрипта. Значение поля url BEMJSON-декларации передается свойству src создаваемого HTML-элемента.

Open in a new window

Элемент meta

Служит для создания HTML-элементов <meta> и указания для них пользовательских метаданных. Метаданные передаются как ключи и значения хеша атрибутов – свойства attrs BEMJSON-декларации элемента:

Open in a new window

Подробнее смотрите в документации к <meta> на MDN.

# page

На уровне переопределения touch.blocks блок предоставляет шаблоны, создающие дополнительный набор HTML-элементов внутри head.

Обзор

Специализированные поля блока

Поле Тип Описание
zoom {Boolean} Наличие масштабирования.

Элементы блока

Элемент Способы использования Описание
icon BEMJSON Позволяет задать ссылку на значки Web Clips, для отображения на рабочем столе iOS при добавлении ссылки на сайт.

Специализированные поля элементов блока

Элемент Поле Тип Описание
icon src{X} {String} Используются для указания пути к файлу значка.

Публичные технологии блока

Блок реализован в технологиях:

  • bh.js
  • bemhtml

Подробности

Блок создает HTML-элементы:

  • <meta> с атрибутом name в значении 'format-detection'. Значением content служит 'telephone=no'. Элемент отключает автоматическое распознавание телефонных номеров в html-коде и их набор по нажатию.
  • <link> с атрибутом name в значении 'apple-mobile-web-app-capable'. Значением content служит 'yes'. Элемент задает для страницы полноэкранный режим отображения на устройствах с iOS.
  • <meta> с атрибутом name в значении 'viewport'. Элемент позволяет управлять масштабированием страницы. По умолчанию, масштабирование отключено. Для включения используйте специализированное поле zoom со значением true.

Кроме того, к элементу с классом page подмешивается блок ua.

Специализированные поля блока

Специализированное поле zoom

Тип: {Boolean}.

Управляет масштабированием страницы. Определяет значение атрибута content HTML-элемент <meta> с атрибутом name в значении 'viewport':

  • со значением true'initial-scale=1'. Масштабирование включено. Масштаб по умолчанию устанавливается равным 100%.
  • без значения или false'maximum-scale=1,initial-scale=1,user-scalable=no'. Масштаб по умолчанию устанавливается равным 100%. Масштабирование отключено.
Open in a new window

Элементы блока

Элемент icon

Позволяет задать ссылку на значки Web Clips, для отображения на рабочем столе iOS при добавлении ссылки на сайт. Ссылка задается через специализированное поле src{X}.

Специализированное поле src{X}

Тип: String.

Поле вида src{X} используются для указания пути к файлу значка. В зависимости от значения {X} элемент icon преобразуется в HTML-элемент:

  • src16<link> c атрибутом rel со значением 'shortcut icon'.
  • src57<link> c атрибутами:
    • sizes со значением '57x57';
    • rel со значением 'apple-touch-icon-precomposed'.
  • src72<link> c атрибутами:
    • sizes со значением '72x72';
    • rel со значением 'apple-touch-icon-precomposed'.
  • src114<link> c атрибутом rel со значением 'apple-touch-icon-precomposed'.
Open in a new window
Open in a new window
Open in a new window
Open in a new window
Open in a new window