Домашня » Кодування » 10 нових можливостей HTML 5.1 і як їх використовувати

    10 нових можливостей HTML 5.1 і як їх використовувати

    Спеціаліст HTML отримав a капітальний ремонт пару тижнів тому, коли W3C опублікував свою нова рекомендація HTML 5.1 У листопаді 2016 року. У своєму нещодавньому блозі W3C назвав новий великий реліз Золотий стандарт, як HTML 5.1 надає нам нові способи, як ми можемо використовувати HTML для створення більш гнучких веб-досвіду.

    У цій статті ми розглянемо її нові можливості, які ви можете використовувати не торкаючись JavaScript, проте поліпшення фону JavaScript також є чудовими, як ви можете бачити в офіційний журнал змін.

    Зауважте, що в даний час не всі браузери підтримують всі ці функції, тому не забувайте перевірити підтримку браузера перш ніж використовувати їх у виробництві. Якщо вас цікавить подальший розвиток стандарту HTML, Ви також можете перевірити робочий проект HTML 5.2.

    1. Визначте кілька ресурсів зображень для адаптивного проектування

    У HTML 5.1 можна використовувати з тегом srcset зробити атрибут відповідне вибір зображення можливо. The тег являє собою зображення контейнера що дозволяє розробникам оголошувати різні ресурси зображення для того, щоб пристосуватися до UAРозмір вікна перегляду, щільність пікселів екрана, тип екрану та інші параметри, які використовуються в чуйний дизайн.

    The сам тег не показує нічого, він функціонує лише як контексту для декількох ресурсів зображень. Потрібно оголосити ресурс зображення за замовчуванням як значення src атрибут і тегом альтернативних ресурсів зображень перейти в межах srcset атрибути і елементи.

    Приклад коду:

    2. Показати або приховати додаткову інформацію

    З

    і теги можна додати розширену інформацію до змісту. Додаткова інформація за умовчанням не відображається, але якщо користувачі зацікавлені, вони мати можливість подивитися. У вашому коді ви повинні місце тега всередині
    . Після тег можна додайте додаткову інформацію хочете сховатися.

    Приклад коду:

     
     
    Повідомлення про помилку
     
     Не вдалося завершити завантаження цього відео. 
     
    Назва файлу:
    ваш файл.mp4
     
    Розмір файлу:
    100 Мб
     
    Тривалість:
    00:05:27

    Так виглядає приклад коду у Firefox 50.0.2:

    3. Додайте функціональність до контекстного меню браузера

    З елемент і його type = "context" атрибут можна додайте спеціальні функції до контекстного меню браузера. Потрібно призначити як дочірній елемент

    . The id з елемент повинен мають таке ж значення, як і контекстного меню атрибут елемента, до якого ми хочемо додати контекстне меню (яке є

    The тег може мають три різні типи, "прапорець", "команда" (до якого потрібно додати дію з JavaScript), і радіо. Можна додати більше одного пункту меню до контекстного меню, однак підтримка браузера для цієї функції є ще не дуже добре. Chrome 54 не підтримує його, і Firefox 50 дозволяє лише наявність одного додаткового контекстного меню. Нижче наведено приклад роботи коду у Firefox 50.

    4. Верхні та нижні колонтитули гнізда

    HTML 5.1 дозволяє колонтитули якщо кожен рівень є містяться в змісті розділів. Примітка нижче - це знімок з документів W3C і надає консультації розробникам про правильний спосіб вкладання колонтитулів та колонтитулів.

    Ця функція може бути корисною, якщо ви хочете додати її розроблені заголовки до елементів семантичного розділення, як от

    і
    . Приклад коду нижче створює бічну панель в заголовку