Znaczniki HTML których (prawdopodobnie) nie znasz

Jest 2020 rok a nadal bardzo wielu programistów kojarzy semantyczny HTML z „nowymi” znacznikami takimi jak np. headerfooter czy figure. Jest to kompletnie błędne skojarzenie ponieważ semantyczny HTML, to taki HTML który znaczy to co chcemy żeby znaczył, i w tym kontekście powinien zawierać semantyczne znaczniki, czyli takie które mają przypisane znaczenie. Np. kiedy chcemy użyć nagłówka skorzystamy ze znacznika np h1, kiedy akapitu to p, kiedy coś ma być przyciskiem to będzie to button, a kiedy linkiem to a itd. W tym wpisie chciałbym opisać kilka znaczników które są mniej popularne a ich znaczenie jest dość ciekawe.

Details

Kiedy myślimy o wykorzystaniu JavaScriptu na stronie, w celu nadania interaktywności pierwsze co może przyjść nam do głowy to np klikanie w jakiś przycisk którym będziemy dodawać klasy CSS do toggle’owania listy rozwijalnej. Można to również zrobić wykorzystując pewne tricki w CSS, ale jak się okazuję możemy to zrobić zarówno bez tego jak i również bez korzystania z JS’a ponieważ HTML zawiera już taki znacznik który reaguje na zdarzenia. mowa tu o znaczniku details.

 <details>
     <p>Ten kontent pojawia się pojawia się kiedy klikniesz w nagłówek.</p>
 </details>

Ten kontent pojawia się pojawia się kiedy klikniesz w nagłówek.

W powyższym przykładzie, kiedy klikniemy w znacznik details pokazuje nam się ukryty kontent. Dzięki zagnieżdżeniu w nim znacznika summary możemy dostosować do własnych potrzeb treść nagłówka. Domyślnie kontent zawarty w details jest ukryty, jednak możemy to zmienić poprzez dodanie atrybutu open.

 <details open>
     <summary>Nagłówek</summary>
     <p>Ten kontent będzie widoczny po załadowaniu strony.</p>
 </details>
Nagłówek

Ten kontent będzie widoczny od razu po załadowaniu strony.

Znacznik ten jest wykorzystywany we wszystkich przeglądarkach, i warto o nim pamiętać chociaż z uwagi na to że jego wykorzystanie to najprostszy sposób na stworzenie akordeonu.

Template

Kolejnym ciekawy znacznik, który pojawił się w specyfikacji HTML5 to znacznik template. Ciekawe w nim jest to że pełnie swoich funkcjonalności jest w stanie zaprezentować dopiero we współpracy z JavaScript’em.

Więcej na temat tego co możemy zrobić w tym języku przeczytasz TUTAJ.

  <template>
      <h2>Image</h2>
      <img src="image.jpg" alt="image">
  </template>

Przeglądarka wyrenderuje następujący kod który nie będzie widoczny na stronie:

Render znacznika template

Po dodaniu następującego kodu JavaScript:

  function showContent() {
      var temp = document.getElementsByTagName("template")[0];
      var clon = temp.content.cloneNode(true);
      document.body.querySelector('.content-adding-area').appendChild(clon);
  }

Oraz button i przypisane do niego wywołanie powyższej funkcji po kliknięciu:

  <button onclick="showContent()">Show hidden content</button>

  <template>
      <h2>Image</h2>
      <img src="image.jpg" alt="image">
  </template>

  <div class="content-adding-area"></div>

Jeszce trochę CSS’a żeby dodawane pola ładnie wyglądały:

  .content-adding-area {
      display: flex;
      flex-wrap: wrap;
  }
  .content-adding-area img {
      max-width: 90%;
      height: auto;
      margin: auto;
      display: block;
  }
  .content-adding-area > div {
      width: 33%;
  }

Teraz po każdym kliknięciu w poniższy button będziemy dodawać elementy do naszego DOM.

Znacznik template jest jednym z narzędzi składowych standardu web components, który pozwala budować webowe komponenty wielokrotnego wykorzystania, i to bez konieczności podpinania takich framework’ów jak React, Angular czy Vue.

Progress

Znacznik ten jak sama nazwa wskazuje pokazuje nam pasek postępu, i powinniśmy go wykorzystać w połączeniu z JavaScript’em aby stworzyć np. animację ładowania jakiegoś procesu.

  <progress></progress>

Kiedy dodamy powyższy znacznik do naszego HTML to przeglądarka wyświetli domyślny widok poniżej, który nieco różni się wyglądem w zależności od przeglądarki.

Kiedy dodamy i określimy takie atrybuty takie jak value oraz max, definiujemy wizualną reprezentacje postępu.

  <progress max="100" value="57">57%</progress>
57%

Możemy ostylować nasz znacznik, np tak:

  progress {
    display: block;
    width: 300px;
    margin: 2em 0;
    padding: 4px;
    border: 0 none;
    background: #444;
    border-radius: 14px;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  }
  progress::-moz-progress-bar {
    border-radius: 12px;
    background:  linear-gradient(90deg,#ff8a00,#e52e71);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 5px 0px rgba(0,0,0,0.3);
    
  }
  /* webkit */
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    progress {
      height: 25px;
    }
  }
  progress::-webkit-progress-bar {
      background: transparent;
  }  
  progress::-webkit-progress-value {  
    border-radius: 12px;
    background:  linear-gradient(90deg,#ff8a00,#e52e71);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 5px 0px rgba(0,0,0,0.3); 
  } 

A oto efekt jaki uzyskamy po zastosowaniu powyższego kodu CSS:

57%

Aby dodać animację do naszego progress bar, dodałem poniższy skrypt:

 window.addEventListener('DOMContentLoaded', function(){

    const progressBar = document.querySelector(".progress--custom.animated");
    const obj = document.getElementById("value");
    obj.textContent = progressBar.getAttribute("value");
    
    function animateValue(id, start, end, duration) {
      if (start === end) return;
      const range = end - start;
      let current = start;
      const increment = end > start ? 1 : -1;
      const stepTime = Math.abs(Math.floor(duration / range));
      const obj = document.getElementById(id);
      const timer = setInterval(function() {
        current += increment;
        obj.textContent = current;
        if (current == end) {
          clearInterval(timer);
        }
        progressBar.setAttribute("value", current);
      }, stepTime);
    };

    document.getElementById("animateButton").onclick = function(){
      animateValue("value", 29, 100, 2000);
    };
  });

Jak widać stworzyłem funkcję animacji znacznika progress, oraz przycisk pod który podpiąłem wywołanie tej funkcji:

  <button id="animateButton">URUCHOM ANIMACJĘ</button>

Klikając go odpalimy naszą animację.

25%
25
%

W powyższym przykładzie funkcja przypisana jest do zdarzenia click które zachodzi na przycisku. Animacje można odpalać podczas wielu innych zdarzeń jak np. scroll kiedy podczas przewijania strony znacznik pojawi się na ekranie lub gdy wpiszemy jakiś tekst w input i wiele, wiele innych.

Datalist

Dzięki temu znacznikowi dodamy do zwykłego inputa możliwość wyboru opcji z listy. W znaczniku datalist umieszczamy pre definiowaną listę opcji z której nasi użytkownicy będą mogli wybierać. Oprócz tego w trakcie wpisywanie tekstu w pole formularza nasza lista będzie się zawężać.

Aby przypisać odpowiednią listę do konkretnego inputa, musimy nadać mu atrybut list o wartości takiej samej jaką nadamy wartości atrybutu id tejże listy.

  <label for="browser">Choose your browser from the list:</label>
  <input list="browsers" name="browser" id="browser">

  <datalist id="browsers">
      <option value="Edge">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
  </datalist>

Funkcję auto-uzupełniania możesz oczywiście zbudować od podstaw w JavaScripcie, ale na pewno datalist to ciekawa alternatywa.

Meta[name=”theme-color”]

W sekcji head oprócz kilku znanych podstawowych znaczników meta z atrybutami takimi jak title czy description, możemy również umieścić poniższy:

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

Atrybut name z wartością theme-color zmusi przeglądarkę mobilną do przybrania określonego koloru. Podajemy go we właściwości atrybutu content.

Widok z domyślnym
kolorem interface’u.
Widok ze zdefiniowanym
kolorem interface’u.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Wymagane pola są oznaczone *