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

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

Обзор

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

Поле Тип Описание
x-ua-compatible {String}|{Boolean} Управляет поведением создаваемого блоком HTML-элемента <meta> с атрибутом http-equiv X-UA-Compatible.

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

Элемент Способы использования Описание
css BEMJSON Элемент служит для подключения CSS.
conditional-comment BEMJSON Помогает использовать условные комментарии.

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

Элемент Поле Тип Описание
css ie {String}|{Boolean} Используется для указания применимости стилей к Internet Explorer версий 6-9 и подключения специальных стилей для Internet Explorer.
conditional-comment condition {String} Позволяет указать условие, при выполнении которого содержимое поля content декларации элемента, будет доступно.
msieOnly {Boolean} Указывает, предназначен ли данный условный комментарий для использования исключительно в Internet Explorer.

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

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

  • bh.js
  • bemhtml

Подробности

Создает HTML-элемент <meta> с атрибутом http-equiv X-UA-Compatible, определяющий совместимость с юзер-агентами. По умолчанию, значением атрибута content элемента является IE=edge (совместим с последними версиями Internet Explorer).

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

Поле x-ua-compatible

Тип: {String}|{Boolean}.

Управляет поведением создаваемого блоком HTML-элемента <meta> с атрибутом http-equiv X-UA-Compatible:

  • со значением false HTML-элемент <meta> не будет создаваться.
  • Open in a new window
  • строчное значение будет присвоено свойству content HTML-элемента <meta>.

Open in a new window

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

Элемент css

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

Тип: {String}|{Boolean}.

Используется для указания применимости стилей к Internet Explorer версий 6-9 и подключения специальных стилей Internet Explorer.

Допустимы следующие значения:

  • строка вида 'lt IE 8' – элемент <link> будет обернут в условные комментарии, для использования в соответствующих версиях Internet Explorer (для текущего примера lt IE 8 – ниже восьмой версии).
  • false – будут использоваться условные комментарии, предотвращающие использование стилей в IE 9 и ниже.
  • true – используется в случае, если в проекте есть отдельный CSS для каждой версии Internet Explorer. Значением свойства url, при этом, должна быть строка с путем и именем файла без суффикса. Во время подключения создаются элементы <link> с отдельным суффиксом для каждой версии. Другими словами, при значении url равном foo.com/index будут подключены стили foo.com/index.ie6.css, foo.com/index.ie7.css и т.д. до ...ie9.css. При этом каждый HTML-элемент будет обернут в условный комментарий, обеспечивающий его подключение только в соответствующей версии Internet Explorer.
Open in a new window

Элемент conditional-comment

Позволяет обернуть содержимое поля content, определенное в BEMJSON-декларации элемента, в условные комментарии. Условие, при котором содержимое поля будет доступно, определяется специализированным полем condition.

Open in a new window

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

Тип: {String}.

Условие, при выполнении которого содержимое поля content декларации элемента, будет доступно. Например, определенная версия Internet Explorer.

Значение поля составляется из:

  • квантора – >, <, =, <=, >=, lt, gt, e или ! (логическое «не»);
  • слова IE отделенного с обеих сторон пробелами;
  • номера версии (6, 7, 8, 9). Может отсутствовать, если указан квантор !. Тогда, значение поля content будет доступно для всех браузеров, кроме Internet Explorer.
Open in a new window

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

Тип: {Boolean}.

Указывает на то, предназначен ли данный условный комментарий для использования исключительно в Internet Explorer. Со значением true поле можно не указывать.

Open in a new window

Элемент conditional-comments блока page

({
    block : 'page',
    title : 'page__conditional-comments',
    head : [
        {
            elem : 'conditional-comment',
            condition : '<= IE 8',
            content : { elem : 'css', url : '_page.ie.css' }
        },
        {
            elem : 'conditional-comment',
            condition : '! IE',
            content : 'Not for IE'
        },
        {
            elem : 'conditional-comment',
            condition : '> IE 8',
            msieOnly : false,
            content : 'For IE9+ and all other browsers'
        }
    ],
    scripts : [
        {
            elem : 'conditional-comment',
            condition : 'lte IE 8',
            content : { elem : 'js', url : 'https://yastatic.net/es5-shims/0.0.1/es5-shims.min.js' }
        }
    ]
})
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
Open in a new window