Menu

Blog

Start / Blog

Nowe elementy w HTML 5.1

2017-04-09
HTML5  
8_6.jpg

Od dłuższego czasu coraz częściej mówi się o HTML 5.1, czyli o najnowszej specyfikacji podstawowego języka do tworzenia stron internetowych. Ja sam całkiem niedawno wykorzystałem nowości jakie zostały wprowadzone w tej wersji.

Czym tak naprawdę jest HTML 5.1?

HTML 5.1 jest nowa wersją popularnego języka HTML. Nowa wersja jest oficjalnie rekomendowana przez organizację W3C. Wprowadza ona do języka cały zestaw ciekawych usprawnień którymi powinnieneś się zainteresować.

Nowe typy INPUT

W HTML 5.1 pojawiły się nowe typy m.in. „month” oraz „week”, które umozliwiają wybieranie w formularzu odpowiednio miesiąca oraz tygodnia.

<input type="week">

<input type="month">

Nowy meta tag "theme-color"

Teraz będziemy mogli ustawić kolor paska nażędzi. Ciekawie to wygląda na urządzeniach mobilnych.

<meta name="theme-color" content="#ffbf00">

Element PICTURE

Jest to moim zdaniem jedna z ciekawszych nowości wprowadzonych w tej wersji. Element picture pozwala nam ładować rózne wersje obrazu dla różnych urządzeń. Możesz np. dla smartfonów przygotować mały plik obrazka o niewielkiej objętości, a dla urządzeń o większym ekranie możesz załadowac plik odpowiednio większy. Pozwala to uniknąc sytuacji w której marnujemy transfer związany z wczytywaniem duzych obrazów na małym ekranie. Teraz możesz lepiej dobrać obrazy do urządzenia użytkownika Twojej strony.

<picture>
<source media="(min-width: 950px)" srcset="images/example.png">
<source media="(min-width: 650px)" srcset="images/example.png">
<img src="images/example.png" alt="example">
</picture>

Własne menu kontekstowe

Dzięki użyciu elementów MENU oraz MENUITEM możemy dodać do menu otwieranego prawym przyciskiem myszy na stronie własne akcje dostepne dla uzytkowników naszej strony. W praktyce możesz na swojej stronie stworzyć swoje własne menu kontekstowe.

<menu type="context" id="popup-menu">
<menuitem type="checkbox" onclick="toggleOption()"
checked="true">Checkbox</menuitem>
<menuitem type="command" label="Command" icon="icon.png"
onclick="doSomething()">Checkbox</menuitem>
<menuitem type="radio" name="group1" onclick="option()"
checked="true">Radio button 1</menuitem>
<menuitem type="radio" name="group1"
onclick="option()">Radio button 2</menuitem>
</menu>

Elementy DETAILS oraz SUMMARY

Teraz możesz ukrywac i odsłaniać elementy na stronie po kliknięciu i to bez konieczności pisania dodatkowych skryptów.

<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>

 

To nie wszystko!

Opisane przezemnie funkcjonalności to nie wszystkie nowości HTML 5.1. Jeśli chcesz dowiedzieć się więcej zajrzyj na oficjalną stronę W3C.


Szukaj na blogu