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>
HTML{
block: 'page',
title: 'Заголовок страницы',
content: 'Блок page'
}
BEMJSONdeps
Поле 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>
HTML{
block: 'page',
title: 'Заголовок страницы',
favicon: 'favicon.ico',
content: 'Страница с пользовательской фавиконкой'
}
BEMJSONdeps
Поле 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>
HTML{
block: 'page',
title: 'Заголовок страницы',
head: [
{
elem: 'js',
url: 'jquery-min.js'
},
{
elem: 'meta',
attrs: {
name: 'description',
content: 'Yet another webdev blog'
}
}
],
content: 'Страница с подключенным JS и meta-данными'
}
BEMJSONdeps
Поле 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>
HTML{
block: 'page',
title: 'Заголовок страницы',
styles: {
elem: 'css',
url: '_index.css'
},
content: 'Страница с подключенным CSS'
}
BEMJSONdeps
Поле 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>
HTML{
block: 'page',
title: 'Заголовок страницы',
scripts: {
elem: 'js',
url: '_index.js'
},
content: 'Страница со скриптом подключенным в body'
}
BEMJSONdeps
Поле 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>
HTML{
block: 'page',
title: 'Заголовок страницы',
content: {
block: 'link',
mods: {
pseudo: 'yes',
togcolor: 'yes',
color: 'green'
},
url: '#',
target: '_blank',
title: 'Кликни меня',
content: 'Псевдоссылка, меняющая цвет по клику'
}
}
BEMJSON[
'page',
{
block: 'link',
mods: {
pseudo: 'yes',
togcolor: 'yes',
color: 'green'
}
}
]
deps
Элементы блока
Элемент 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>
HTML{
block: 'page',
title: 'Page title',
styles: {
elem: 'css',
content: '.page { color: #f00 }'
},
content: 'Страница с тэгом <style>'
}
BEMJSONdeps
Специализированное поле 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>
HTML{
block: 'page',
title: 'Page title',
scripts: {
elem: 'js',
content: 'console.log(document.title)'
},
content: 'Страница с тэгом <script>'
}
BEMJSONdeps
Специализированное поле 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>
HTML{
block: 'page',
title: 'Page title',
styles: {
elem: 'css',
url: '_index.css'
},
content: 'Страница с тэгом style'
}
BEMJSONdeps
Элемент 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>
HTML{
block: 'page',
title: 'Заголовок страницы',
head: [
{
elem: 'css',
url: 'example.css'
},
{
elem: 'meta',
attrs: {
name: 'keywords',
content: 'js, css, html'
}
}
],
content: 'Страница с подключенным CSS и meta-данными'
}
BEMJSONdeps
Подробнее смотрите в документации к <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>
HTML{
block: 'page',
title: 'Hello, World!',
'x-ua-compatible': 'IE=6',
content: 'Совместим с Internet Explorer 6'
}
BEMJSONdeps
Элементы блока
Элемент 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>
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'
}
BEMJSONdeps
Элемент 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>
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'
}
}
}
BEMJSONdeps
Специализированное поле 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>
HTML{
block: 'page',
head: {
elem: 'conditional-comment',
condition: '! IE',
content: 'Not for IE'
}
}
BEMJSONdeps
Специализированное поле 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>
HTML{
block: 'page',
head: {
elem: 'conditional-comment',
condition: '> IE 8',
msieOnly: false,
content: 'For IE9+ and all other browsers'
}
}
BEMJSONdeps
Элемент 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' }
}
]
})