Що таке HTML імпорт і як це працює?

      Переклад статті «What are HTML Imports and How Do They Work?», Paula Borowska.
 
Ви коли-небудь помічали, що включення однієї HTML сторінки в іншу, це якась чужорідна концепція? Це те, що має бути просто, але не це не часто відбувається. Це не неможливо, але важко. На щастя є HTML імпорт , який дозволяє запросто поміщати HTML сторінки, а також CSS і JavaScript файли, всередину інших HTML сторінок.
 
 

Введення в HTML імпорт

HTML імпорт, це проста для розуміння річ; це спосіб вставки на сторінку інших HTML сторінок. Ви можете сказати, що в цьому немає нічого особливого, так от є; раніше ви не могли це так просто зробити.
 
Цікаво те, що HTML це найпростіші файли, але іноді з ними найважче працювати. Навіть PHP файли мають можливість включення, чому ж HTML цього не може? Завдяки веб-компонентів, ми, тепер, можемо включати одні HTML документи в інші . Також, за допомогою цього ж тега, ми можемо підключати CSS і JavaScript. (Жити стало набагато краще.)
 
 
Обхідні шляхи
Раніше, одним з обхідних шляхів було підключення за допомогою iFrame; це важкі HTML елементи, що завантажуються окремим вікном всередині поточного документа. Це трохи не те, що нам потрібно і при цьому з ними, не дуже то легко взаємодіяти. iFram'и можуть бути дивно розчаровують, коли з ними доводиться працювати. Наступним варіантом був AJAX, це коли ви завантажували сторінку за допомогою JavaScript і включали її контент. Це, насправді, досить незручний і виснажливий спосіб.
 
 

Почнемо

 
Базовий синтаксис
Перш ніж дивитися приклади, давайте глянемо на синтаксис подгрузки файлу через тег імпорту. Імпорт, це новий тип link тега, так що повинно бути неважко зрозуміти наступну рядок:
 
 
<link rel="import" href="/folder/page.html">

Такі рядки поміщаються в шапці, як ви вже звикли чинити з JavaScript або CSS файлами.
 
 
Базовий приклад
Щоб імпорт спрацював, сторінки повинні перебувати на одному і тому ж сервері. Почнемо з файлу index.html. Це проста HTML сторінка з базовим імпортом:
 
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>What are HTML imports and how do they work</title>
    <link rel="import" href="/intro.html">
  </head>
  <body>
    <h1>Hello from Designmodo</h1>
  </body>
</html>

 image
 
Бачите, я не брехала про те, як все просто; це так само просто, як завантаження таблиці стилів або JavaScript файлу.
 
 
Усередині intro.html
Що ж усередині імпортованої сторінки?
 
 
<div id="intro-dm">
  <h2>We're an awesome blog about web design</h2>
  <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p>
</div>

Це просто div з текстом всередині. Не потрібно body або head або чогось ще.
 
 
Вставка імпортованого HTML
Щоб відобразити імпортований HTML, нам потрібно написати кілька рядків на JavaScript. Цей код повинен знаходитися в головному HTML файлі, в нашому випадку, index.html. Даний код повинен знаходитися в тому місці, де ми хочемо побачити імпортований html. У нашому прикладі після 'Hello from Designmodo.'
 
У нашому скрипті ми отримуємо контент і присвоюємо його змінної. Потім ми просто додаємо вміст змінної в HTML.
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>What are HTML imports and how do they work</title>
    <link rel="import" href="/intro.html">
  </head>
  <body>
    <h1>Hello from Designmodo</h1>
 
    <script>
      var link = document.querySelector('link[rel=import]');
      var content = link.import.querySelector('#intro-dm');
      document.body.appendChild(content.cloneNode(true));
    </script>
 
  </body>
</html>

 image
 
 

Переходимо на наступний рівень

Ви коли-небудь чули про CSS атрибуті scoped? Атрибут scoped дозволяє вам обмежувати дію тега
<style>
всередині елемента. Добре те, що scoped стилі діють тільки всередині елемента, в якому вони задані, а не в усьому документі. Подивимося, як атрибут scoped може допомогти при роботі з імпортованими HTML файлами.
 
 Додамо h1 в імпортований документ , щоб побачити різницю між стилями імпортованого файлу і стилями index.html. Потім додамо стиль елементам імпортованого HTML документа. Як бачите
<style scoped>
знаходиться всередині імпортованої розмітки, а не в head тезі. Завдяки scoped, стилі застосуються тільки до h1 всередині імпортованої розмітки.
 
 
<div id="intro-dm">
  <style scoped>
    h1{ color: red; }
    p{ color: blue; }
  </style>
  <h1>About us<h1>
  <h2>We're an awesome blog about web design</h2>
  <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p>
</div>

 image
 
Якщо хочете почитати побільше про атрибут scoped, подивіться, що говорить W3C .
 
 
Це трохи схоже на Bootstrap
 Bootstrap , це набір окремих файлів, як bootstrap.css, boostrap.js і тд. Для плагінів, використовується jQuery; Bootstrap надає приклади верстки. Він дуже гнучкий і простий у використанні. Суть Bootstrap в тому, що ви можете використовувати тільки необхідні для вашого проекту файли. Більшість людей завантажують всі файли відразу, і це теж нормально. Ідея HTML імпорту та ж, ви підключаєте файли у міру потреби. Ця логіка стає популярною, через прискорення завантаження і спрощення організації.
 
 
Висновок
Завдяки HTML імпорту, ви можете виносити HTML, як і CSS або JavaScript, в окремі файли. Це, насправді, дуже круто. Включення HTML файлів один в одного не було простим, до появи HTML імпорту. Тепер ми можемо створювати повторно-використовуваний контент, що підключається одним рядком коду. Це дуже потужна річ — і це круто!
  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.