Начална » кодиране на стоките » 10 нови функции на HTML 5.1 & Как да ги използваме IRL

    10 нови функции на HTML 5.1 & Как да ги използваме IRL

    HTML спецификацията получи a основен ремонт преди няколко седмици, когато W3C публикува своя нова препоръка за HTML 5.1 През ноември 2016 г. В последния си блог W3C нарече новата основна версия на златен стандарт, като HTML 5.1 ни предостави нови начини за това как можем да използваме HTML за създаване на по-гъвкав уеб опит.

    В тази статия ще разгледаме новите функции, които можете да използвате без да докосвате JavaScript, Въпреки това подобренията на JavaScript фон също са забележителни, както можете да видите в официален регистър на промените.

    Имайте предвид, че в момента не всички браузъри поддържат всички тези функции, така че не забравяйте проверете поддръжката на браузъра преди да ги използвате в производството. Ако се интересувате от по-нататъшно развитие на HTML стандарта, можете да разгледате и работния проект на HTML 5.2.

    1. Дефинирайте множество ресурси за образи за отзивчив дизайн

    В HTML 5.1 можете да използвате с етикет srcset атрибут да се направи отзивчив избор на изображения възможен. Най- представлява знак контейнер за изображения което позволява на разработчиците да декларират различни ресурси за изображения за да се адаптират към UAразмер на екрана за преглед, плътност на пикселите на екрана, тип на екрана и други използвани параметри. \ t адаптивен дизайн.

    Най- Самият таг не показва нищо, той функционира само като контекст за множество ресурси за изображения. Трябва да декларирате ресурс за изображение по подразбиране като стойността на SRC атрибут на и етикет алтернативни ресурси за изображения отидете в рамките на srcset атрибути на. \ t и елементи.

    Пример за код:

    2. Показване или скриване на допълнителна информация

    С

    и етикети, можете добавете разширена информация към част от съдържанието. Допълнителната информация по подразбиране не се показва, но ако потребителите се интересуват, те имате възможност да погледнете. Във вашия код трябва да го направите поставете таг вътре
    . След можеш добавете допълнителната информация искате да се скриете.

    Пример за код:

     
     
    Съобщение за грешка
     
     Не можахме да завършим изтеглянето на този видеоклип. 
     
    Име на файл:
    yourfile.mp4
     
    Размер на файла:
    100 MB
     
    Продължителност:
    00:05:27

    Така изглежда примерът с кода в Firefox 50.0.2:

    3. Добавете функционалност в контекстното меню на браузъра

    С елемент и неговия тип = "контекст" атрибут, можете добавете персонализирана функционалност към контекстното меню на браузъра. Трябва да зададете като детски елемент на

    маркер. Най- документ за самоличност от елемент трябва носят същата стойност като contextmenu атрибут на елемента, към който искаме да добавим контекстното меню към (което е

    Най- tag може имат три различни типа, "Отметката", "Команда" (към което трябва да добавите действие с JavaScript) и радио. Възможно е да добавите повече от един елемент от менюто към контекстното меню, обаче поддръжка на браузъра за тази функция е все още не е много добър. Chrome 54 не го поддържа, а Firefox 50 позволява само едно допълнително контекстно меню. По-долу можете да видите как примерният код работи във Firefox 50.

    4. Гнезда и колонтитули на гнездата

    HTML 5.1 ви позволява гнезда и долни колонтитули ако всяко ниво е съдържащи се в секционното съдържание. Бележката по-долу е скрийншот от документите на W3C и съветва разработчиците за правилния начин за вмъкване на заглавна и долна част.

    Тази функция може да бъде полезна, ако искате да добавите разработени заглавия до елементи на семантично разделяне, като

    и
    . Примерният код по-долу създава странична лента в заглавната част