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} |
Служит для задания скриптов в виде строки |
Публичные технологии блока
Блок реализован в технологиях:
Подробности
Блок отвечает за создание HTML-элементов верхнего уровня, подключение к странице CSS, JS, элементов <meta> и указание заголовка. Для этого в BEMJSON-декларации блока и элементов блока зарезервированы специализированные поля.
Специализированные поля блока
Поле doctype
Тип: {String}.
Позволяет явно указать строку с DTD (Document Type Definition) текущего документа. Если свойство не задано, по умолчанию будет использоваться <!DOCTYPE html>.
Поле title
Тип: {String}.
Название страницы. Становится HTML-элементом <title>.
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
</head>
<body class="page">Блок page</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
content: 'Блок page'
}
Поле favicon
Тип: {String}.
Позволяет указать URL значка страницы (фавиконки):
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body class="page">Страница с пользовательской фавиконкой</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
favicon: 'favicon.ico',
content: 'Страница с пользовательской фавиконкой'
}
Поле head
Тип: {BEMJSON}.
Позволяет дополнить содержимое HTML-элемента <head>, определенное в шаблоне блока:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<script src="jquery-min.js"></script>
<meta name="description" content="Yet another webdev blog">
</head>
<body class="page">Страница с подключенным JS и meta-данными</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
head: [
{
elem: 'js',
url: 'jquery-min.js'
},
{
elem: 'meta',
attrs: {
name: 'description',
content: 'Yet another webdev blog'
}
}
],
content: 'Страница с подключенным JS и meta-данными'
}
Поле styles
Тип: {BEMJSON}.
Позволяет подключить CSS:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<link rel="stylesheet" href="_index.css">
</head>
<body class="page">Страница с подключенным CSS</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
styles: {
elem: 'css',
url: '_index.css'
},
content: 'Страница с подключенным CSS'
}
Поле scripts
Тип: {BEMJSON}.
Позволяет подключать JS в тело страницы в конец HTML-элемента <body>:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
</head>
<body class="page">Страница со скриптом подключенным в body
<script src="_index.js"></script>
</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
scripts: {
elem: 'js',
url: '_index.js'
},
content: 'Страница со скриптом подключенным в body'
}
Поле content
Тип: {BEMJSON}.
Позволяет указать содержимое страницы.
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
</head>
<body class="page">
<div class="link link_pseudo_yes link_togcolor_yes link_color_green">Псевдоссылка, меняющая цвет по клику</div>
</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
content: {
block: 'link',
mods: {
pseudo: 'yes',
togcolor: 'yes',
color: 'green'
},
url: '#',
target: '_blank',
title: 'Кликни меня',
content: 'Псевдоссылка, меняющая цвет по клику'
}
}
[
'page',
{
block: 'link',
mods: {
pseudo: 'yes',
togcolor: 'yes',
color: 'green'
}
}
]
Элементы блока
Элемент css
Служит для подключения CSS по ссылке или в виде строки. В зависимости от того, указано ли в декларации элемента поле url, создается HTML-элемент с тегом:
<link> и свойством stylesheet, если url есть.<style>, если поле url неуказано. В этом случае предполагается, что содержимое элемента передается с помощью свойства content BEMJSON-декларации элемента.
Специализированное поле content
Тип: String.
Служит для явной передачи содержимого HTML-элементу <style>:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page title</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<style>
.page {
color: #f00
}
</style>
</head>
<body class="page">Страница с тэгом <style></body>
</html>
{
block: 'page',
title: 'Page title',
styles: {
elem: 'css',
content: '.page { color: #f00 }'
},
content: 'Страница с тэгом <style>'
}
Специализированное поле url
Тип: String.
Позволяет задать URL для загрузки таблицы CSS. Значение поля url BEMJSON-декларации передается свойству href создаваемого HTML-элемента.
Элемент js
Служит для подключения JS по ссылке или в виде строки. Создает HTML-элемент <script>.
Специализированное поле content
Тип: String.
Служит для явной передачи содержимого HTML-элементу <script>:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page title</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
</head>
<body class="page">Страница с тэгом <script>
<script>
console.log(document.title)
</script>
</body>
</html>
{
block: 'page',
title: 'Page title',
scripts: {
elem: 'js',
content: 'console.log(document.title)'
},
content: 'Страница с тэгом <script>'
}
Специализированное поле url
Тип: String.
Позволяет задать URL для загрузки скрипта. Значение поля url BEMJSON-декларации передается свойству src создаваемого HTML-элемента.
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page title</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<link rel="stylesheet" href="_index.css">
</head>
<body class="page">Страница с тэгом style</body>
</html>
{
block: 'page',
title: 'Page title',
styles: {
elem: 'css',
url: '_index.css'
},
content: 'Страница с тэгом style'
}
Элемент meta
Служит для создания HTML-элементов <meta> и указания для них пользовательских метаданных. Метаданные передаются как ключи и значения хеша атрибутов – свойства attrs BEMJSON-декларации элемента:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<link rel="stylesheet" href="example.css">
<meta name="keywords" content="js, css, html">
</head>
<body class="page">Страница с подключенным CSS и meta-данными</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
head: [
{
elem: 'css',
url: 'example.css'
},
{
elem: 'meta',
attrs: {
name: 'keywords',
content: 'js, css, html'
}
}
],
content: 'Страница с подключенным CSS и meta-данными'
}
Подробнее смотрите в документации к <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. |
Публичные технологии блока
Блок реализован в технологиях:
Подробности
Создает HTML-элемент <meta> с атрибутом http-equiv X-UA-Compatible, определяющий совместимость с юзер-агентами. По умолчанию, значением атрибута content элемента является IE=edge (совместим с последними версиями Internet Explorer).
Специализированные поля блока
Поле x-ua-compatible
Тип: {String}|{Boolean}.
Управляет поведением создаваемого блоком HTML-элемента <meta> с атрибутом http-equiv X-UA-Compatible:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello, World!</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
</head>
<body class="page">Совместим с Internet Explorer 6</body>
</html>
{
block: 'page',
title: 'Hello, World!',
'x-ua-compatible': 'IE=6',
content: 'Совместим с Internet Explorer 6'
}
Элементы блока
Элемент 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<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page title</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<link rel="stylesheet" href="example.css">
<link rel="stylesheet" href="example.ie.css">
</head>
<body class="page">Страница с отдельными CSS правилами для IE</body>
</html>
{
block: 'page',
title: 'Page title',
head: [
{
elem: 'css',
url: 'example.css',
ie: false
},
{
elem: 'css',
url: 'example.ie.css',
ie: 'lt IE 8'
}
],
content: 'Страница с отдельными CSS правилами для IE'
}
Элемент conditional-comment
Позволяет обернуть содержимое поля content, определенное в BEMJSON-декларации элемента, в условные комментарии. Условие, при котором содержимое поля будет доступно, определяется специализированным полем condition.
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>page__conditional-comments</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
</head>
<body class="page">
</body>
</html>
{
block: 'page',
title: 'page__conditional-comments',
styles: {
elem: 'conditional-comment',
condition: '<= IE 8',
content: {
elem: 'css',
url: '_page.ie.css'
}
},
scripts: {
elem: 'conditional-comment',
condition: 'lte IE 8',
content: {
elem: 'js',
url: 'https://yastatic.net/es5-shims/0.0.1/es5-shims.min.js'
}
}
}
Специализированное поле condition
Тип: {String}.
Условие, при выполнении которого содержимое поля content декларации элемента, будет доступно. Например, определенная версия Internet Explorer.
Значение поля составляется из:
- квантора –
>, <, =, <=, >=, lt, gt, e или ! (логическое «не»);
- слова
IE отделенного с обеих сторон пробелами;
- номера версии (6, 7, 8, 9). Может отсутствовать, если указан квантор
!. Тогда, значение поля content будет доступно для всех браузеров, кроме Internet Explorer.
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
Not for IE
</head>
<body class="page"></body>
</html>
{
block: 'page',
head: {
elem: 'conditional-comment',
condition: '! IE',
content: 'Not for IE'
}
}
Специализированное поле msieOnly
Тип: {Boolean}.
Указывает на то, предназначен ли данный условный комментарий для использования исключительно в Internet Explorer. Со значением true поле можно не указывать.
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
For IE9+ and all other browsers
</head>
<body class="page"></body>
</html>
{
block: 'page',
head: {
elem: 'conditional-comment',
condition: '> IE 8',
msieOnly: false,
content: 'For IE9+ and all other browsers'
}
}
Элемент 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' }
}
]
})