Główna » Kodowanie » 10 nowych funkcji HTML 5.1 i jak z nich korzystać IRL

    10 nowych funkcji HTML 5.1 i jak z nich korzystać IRL

    Specyfikacja HTML otrzymała Poważny remont kilka tygodni temu, kiedy W3C opublikował swoje nowe zalecenie HTML 5.1 w listopadzie 2016 r. W swoim ostatnim wpisie na blogu W3C nazwał nowe wydanie główne złotym standardem, ponieważ HTML 5.1 zapewnia nam nowe sposoby wykorzystania HTML do tworzenia bardziej elastycznych doświadczeń internetowych.

    W tym artykule przyjrzymy się jego nowym funkcjom, z których możesz korzystać bez dotykania JavaScript, Jednak ulepszenia tła JavaScript są również godne uwagi, jak widać w oficjalny dziennik zmian.

    Pamiętaj, że obecnie nie wszystkie przeglądarki obsługują wszystkie te funkcje, więc nie zapomnij sprawdź obsługę przeglądarki zanim użyjesz ich w produkcji. Jeśli jesteś zainteresowany dalszy rozwój standardu HTML, możesz również sprawdzić roboczą wersję HTML 5.2.

    1. Zdefiniuj wiele zasobów obrazu dla responsywnego projektowania

    W HTML 5.1 możesz użyć tag razem z srcset atrybut do wykonania responsywny wybór zdjęć możliwy. The tag reprezentuje pojemnik z obrazem który pozwala programistom na deklaruj różne zasoby obrazu w celu dostosowania się do UArozmiar rzutni, gęstość pikseli ekranu, typ ekranu i inne parametry używane w elastyczny projekt.

    The sam znacznik niczego nie wyświetla, działa jedynie jako kontekst dla wielu zasobów obrazu. Musisz zadeklarować domyślny zasób obrazu jako wartość src atrybut tag i alternatywne zasoby obrazu idź w srcset atrybuty i elementy.

    Przykład kodu:

    2. Pokaż lub ukryj dodatkowe informacje

    Z

    i znaczniki, możesz dodaj rozszerzone informacje do kawałka treści. Dodatkowe informacje domyślnie nie jest wyświetlany, ale jeśli użytkownicy są zainteresowani, oni mieć możliwość spojrzenia. W twoim kodzie powinieneś Umieść oznaczyć wewnątrz
    . Po tag możesz dodaj dodatkowe informacje chcesz się ukryć.

    Przykład kodu:

     
     
    Komunikat o błędzie
     
     Nie mogliśmy zakończyć pobierania tego filmu. 
     
    Nazwa pliku:
    twój plik.mp4
     
    Rozmiar pliku:
    100 MB
     
    Trwanie:
    00:05:27

    Oto jak wygląda ten przykład kodu w Firefoksie 50.0.2:

    3. Dodaj funkcjonalność do menu kontekstowego przeglądarki

    Z element i jego type = "context" atrybut, możesz dodaj niestandardową funkcjonalność do menu kontekstowe przeglądarki. Musisz przypisać jako element podrzędny

    etykietka. The ID z element musi mieć taką samą wartość jak menu kontekstowe atrybut elementu, do którego chcemy dodać menu kontekstowe (czyli

    The tag może mają trzy różne typy, „pole wyboru”, "dowództwo" (do którego należy dodać akcję za pomocą JavaScript) i radio. Możliwe jest dodanie więcej niż jednego elementu menu do menu kontekstowego, jednak obsługa przeglądarki dla tej funkcji jest jeszcze niezbyt dobry. Chrome 54 go nie obsługuje, a Firefox 50 zezwala tylko na obecność jednego dodatkowego menu kontekstowego. Poniżej możesz zobaczyć, jak działa przykład kodu w Firefoksie 50.

    4. Zagnieżdż nagłówki i stopki

    HTML 5.1 pozwala na to nagłówki i stopki gniazda jeśli każdy poziom jest zawarte w treści sekcji. Poniższa uwaga to zrzut ekranu z dokumentów W3C i radzi programistom o właściwym sposobie zagnieżdżania nagłówków i stopek.

    Ta funkcja może być przydatna, jeśli chcesz dodać opracowane nagłówki do elementów sekcyjnych semantycznych, Jak na przykład

    i
    . Poniższy przykład kodu tworzy pasek boczny wewnątrz nagłówka