HTML-импорт — include для веба: часть 1

Перевод статьи «HTML Imports #include for the web», Eric Bidelman.

От переводчика

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

Для чего нужен HTML-импорт?

Начало работы

В наборе стандартов Web Components есть стандарт HTML Imports, который позволяет подключение HTML-документов друг в друга. В подключаемых HTML-документах разрешается Javascript и CSS, словом, все что .html обычно содержит. Это замечательный инструмент для загрузки пакетов HTML/CSS/JS кода.

Основы

Указанный URL, это расположение импорта(import location). Чтобы использовать импорт с другого домена, его расположение должно позволять междоменное разделение ресурсов(CORS):

Примечание: браузеры игнорируют повторные запросы на один и тот же URL. Это значит, что из одного адреса будет выполнена только одна загрузка сколько бы ни было подключений на странице

Проверка на поддержку браузером

function supportsImports() < return 'import' in document.createElement('link'); >if (supportsImports()) < // Good to go! >else < // Use other libraries/require systems to load files. >

Браузерная поддержка пока на ранней стадии(прим. переводчика: оригинал статьи опубликован 11 ноября 2013, теперь, наверное, другая ситуация с поддержкой). Chrome 31 первый браузер поддерживающий HTML-импорт. Chrome 36 обновлен до последней спецификации этой фичи. Вы можете включить поддержку импорта, отметив флаг «Включить экспериментальные функции веб-платформы» по адресу

в Chrome Canary. Для других браузеров это пока не работает.

Примечание: Включение экспериментальных функций позволит использовать и другие полезные фичи веб-компонентов

Бандлинг ресурсов

HTML-импорт позволяет собирать пакеты HTML/CSS/JS кода, которые в свою очередь могут использовать другие пакеты. Этот простой, но мощный функционал, может пригодиться, если вы хотите импортированием одного ресурса предоставить другим программистам какую-то библиотеку или набор стилей. Также это полезно для поддержки модульности вашего приложения. Вы даже можете отдавать на импорт целые приложения. Только подумайте, чего можно добиться таким образом.

Вы сможете экспортировать целые пакеты веб содержимого всего одной линкой.

Bootstrap это хороший пример того, как мог бы пригодиться импорт компонентов. Бутстрап состоит из различных файлов (bootstrap.css, bootstrap.js и др.), использует JQuery (как импортируемый компонент), а в результате выдает инструменты для верстки. Разработчикам нравится возможность подключать те или иные модули, по мере необходимости. Но обычно мы идем простым путем, подключая все модули бутстрапа сразу.

Импорт был бы очень полезен при использовании таких пакетов, как Bootstrap. Вот как в будущем может выглядеть его подключение:

Нужно всего лишь добавить один линк импорта. Больше не нужно подключать кучу файлов, вместо этого весь Bootstrap завернут в файл bootstrap.html:

События load/error

Импорт всегда загружается сразу же, в порядке нахождения тега

 function handleLoad(e) < console.log('Loaded import: ' + e.target.href); >function handleError(e)

Примечание: обработчики событий загрузки/ошибки нужно объявлять перед импортом, так как браузер загружает импорт в тот момент, когда встречает тег импорта. Если на момент импорта нет обработчика загрузки, в консоли выведется ошибка undefined function.

Вы, также, можете динамически создавать импорт:

var link = document.createElement('link'); link.rel = 'import'; link.href = 'file.html' link.onload = function(e) ; link.onerror = function(e) ; document.head.appendChild(link); 

Использование содержимого импорта

Элемент импорта на странице не указывает браузеру, где размещать содержимое импорта. Он только говорит браузеру получить документ для его дальнейшего использования. Чтобы использовать содержимое импорта, нам нужно написать немного JS кода.

Вот он момент прозрения, импорт, это всего-лишь документ. На самом деле, содержимое импорта так и называется документ импорта(import document). А использовать результат импорта вы можете стандартными средствами DOM API!

link.import

var content = document.querySelector('link[rel="import"]').import; 

• Браузер не поддерживает импорт.
• У элемента нет атрибута rel=»import» .
  Объект не добавлен в DOM.
  Или был удален из DOM
  Ресурс не поддерживает CORS.

Полный пример

Допустим у нас есть страница warnings.html :

 
 h3 
Warning!
 
This page is under construction
 
 
Heads up!
 
This content may be out of date
 
 

Вы можете использовать только необходимую вам часть импортированной страницы:

  .   

Скрипты в импорте

Импорт работает не совсем, как часть документа, который его использует. Но вы, все же, можете работать с подключившей его страницей. Из импортированной страницы можно работать, как с внутренним DOM, так и с главным документом:

Пример — import.html добавляет один из своих стилей главному документу

   /* Примечание: Внутренние стили, по умолчанию применяются к импортирующему документу. Их не нужно явно добавлять в главную страницу. */ #somecontainer .  

document.currentScript.ownerDocument

мы получаем доступ к внутреннему элементу-корню импортированного документа и добавляем его кусок в главный документ (

). Это конечно бесполезный код, но нам он нужен, чтобы понять, что мы можем обращаться как к главному, так и ко внутреннему корню DOM.

Скрипты внутри импорта могут как сами исполнять код, так и предоставлять функции для выполнения в главном документе. Это похоже на модули в Питоне.

• Код импорта выполняется в контексте содержащего его документа. Из этого исходят две удобные вещи:
  • Функции объявленные в импорте содержатся в главном объекте window .
  • Вам не нужно делать действий вроде добавления в главный документ тегов

  Источник

  How To Add CSS

  When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.

  Three Ways to Insert CSS

  There are three ways of inserting a style sheet:

  External CSS

  With an external style sheet, you can change the look of an entire website by changing just one file!

  Each HTML page must include a reference to the external style sheet file inside the element, inside the head section.

  Example

  External styles are defined within the element, inside the section of an HTML page:

  This is a heading

  This is a paragraph.

  An external style sheet can be written in any text editor, and must be saved with a .css extension.

  The external .css file should not contain any HTML tags.

  Here is how the «mystyle.css» file looks:

  «mystyle.css»

  body <
  background-color: lightblue;
  >

  h1 color: navy;
  margin-left: 20px;
  >

  Note: Do not add a space between the property value (20) and the unit (px):
  Incorrect (space): margin-left: 20 px;
  Correct (no space): margin-left: 20px;

  Internal CSS

  An internal style sheet may be used if one single HTML page has a unique style.

  The internal style is defined inside the element, inside the head section.

  Example

  Internal styles are defined within the element, inside the section of an HTML page:

  This is a heading

  This is a paragraph.

  Inline CSS

  An inline style may be used to apply a unique style for a single element.

  To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

  Example

  Inline styles are defined within the «style» attribute of the relevant element:

  This is a heading

  This is a paragraph.

  Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.

  Multiple Style Sheets

  If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.

  Assume that an external style sheet has the following style for the element:

  Then, assume that an internal style sheet also has the following style for the element:

  Example

  If the internal style is defined after the link to the external style sheet, the elements will be «orange»:

  Example

  However, if the internal style is defined before the link to the external style sheet, the elements will be «navy»:

  Cascading Order

  What style will be used when there is more than one style specified for an HTML element?

  All the styles in a page will «cascade» into a new «virtual» style sheet by the following rules, where number one has the highest priority:

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section)
  3. Browser default

  So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

  Ever heard about W3Schools Spaces? Here you can create your own website, or save code snippets for later use, for free.

  Источник