M

MLOG

Hrvatski

Savladajte izradu harmonika isključivo u CSS-u s funkcionalnošću jednog prikaza, poboljšavajući korisničko iskustvo i pristupačnost na različitim web platformama.

Harmonike isključivo u CSS-u: Izrada widgeta s jednim prikazom za poboljšano korisničko iskustvo

Harmonike (engl. accordions) su standard u modernom web dizajnu, pružajući čist i učinkovit način za predstavljanje velikih količina informacija u probavljivom formatu. Posebno su korisne za često postavljana pitanja (FAQ), opise proizvoda i navigacijske izbornike. Ovaj članak se bavi izradom harmonika isključivo u CSS-u s ponašanjem jednog prikaza, što znači da samo jedan odjeljak harmonike može biti otvoren u isto vrijeme. Ovaj pristup poboljšava korisničko iskustvo sprječavanjem preopterećenja sadržajem i promicanjem fokusiranog pregledavanja.

Razumijevanje prednosti harmonika isključivo u CSS-u

Tradicionalne harmonike temeljene na JavaScriptu često zahtijevaju upravljanje stanjem i rukovanje događajima, što može dodati složenost vašem kodu. S druge strane, harmonike isključivo u CSS-u koriste snagu CSS selektora i pseudo-klase `:checked` kako bi postigle željenu funkcionalnost bez oslanjanja na JavaScript. To rezultira:

Gradivni blokovi: HTML struktura

Temelj naše harmonike isključivo u CSS-u leži u dobro strukturiranom HTML-u. Koristit ćemo sljedeće elemente:

Ovo je osnovna HTML struktura:


<div class="accordion-container">
  <input type="radio" name="accordion" id="section1">
  <label for="section1">Naslov odjeljka 1</label>
  <div class="accordion-content">
    <p>Sadržaj za odjeljak 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">Naslov odjeljka 2</label>
  <div class="accordion-content">
    <p>Sadržaj za odjeljak 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">Naslov odjeljka 3</label>
  <div class="accordion-content">
    <p>Sadržaj za odjeljak 3.</p>
  </div>
</div>

Objašnjenje:

Stiliziranje harmonike pomoću CSS-a

Sada, dodajmo CSS kako bismo stilizirali harmoniku i implementirali ponašanje s jednim prikazom.


.accordion-container {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

input[type="radio"] {
  display: none;
}

label {
  display: block;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none; /* Inicijalno sakrij sadržaj */
}

input[type="radio"]:checked + label {
  background-color: #ddd;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block; /* Prikaži sadržaj kada je radio gumb odabran */
}

Objašnjenje:

Poboljšanje pristupačnosti s ARIA atributima

Kako bismo osigurali da je naša harmonika pristupačna korisnicima s invaliditetom, moramo dodati ARIA atribute. ARIA (Accessible Rich Internet Applications) atributi pružaju semantičke informacije pomoćnim tehnologijama, kao što su čitači zaslona.

Evo kako možemo poboljšati pristupačnost:


<div class="accordion-container" role="presentation"> 
  <input type="radio" name="accordion" id="section1" aria-controls="content1">
  <label for="section1" aria-expanded="false" aria-controls="content1">Naslov odjeljka 1</label>
  <div id="content1" class="accordion-content" role="region" aria-labelledby="section1">
    <p>Sadržaj za odjeljak 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false" aria-controls="content2">Naslov odjeljka 2</label>
  <div id="content2" class="accordion-content" role="region" aria-labelledby="section2">
    <p>Sadržaj za odjeljak 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false" aria-controls="content3">Naslov odjeljka 3</label>
  <div id="content3" class="accordion-content" role="region" aria-labelledby="section3">
    <p>Sadržaj za odjeljak 3.</p>
  </div>
</div>

Objašnjenje:

Važna razmatranja za pristupačnost:

Prilagodba i poboljšanja

Osnovna harmonika isključivo u CSS-u može se dodatno prilagoditi i poboljšati kako bi zadovoljila specifične dizajnerske zahtjeve.

Dodavanje prijelaza

Kako bismo stvorili glađe korisničko iskustvo, možemo dodati CSS prijelaze (transitions) na sadržaj harmonike.


.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none;
  transition: max-height 0.3s ease-out; /* Dodaj prijelaz */
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block;
  max-height: 500px; /* Postavi maksimalnu visinu za prijelaz */
}

Objašnjenje:

Stiliziranje ikonama

Dodavanje ikona u zaglavlja harmonike može poboljšati vizualnu privlačnost i razumijevanje korisnika. Za tu svrhu možete koristiti CSS pseudo-elemente ili ikone iz fontova.

Korištenje CSS pseudo-elemenata:


label::after {
  content: '+'; /* Početna ikona */
  float: right;
  font-size: 1.2em;
}

input[type="radio"]:checked + label::after {
  content: '-'; /* Promijeni ikonu kada je prošireno */
}

Korištenje ikona iz fontova (npr. Font Awesome):

  1. Uključite Font Awesome CSS u svoj HTML: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="..." crossorigin="anonymous" />
  2. Koristite odgovarajuće Font Awesome klase u svojim oznakama:

<label for="section1">Naslov odjeljka 1 <i class="fas fa-plus"></i></label>

Zatim, koristite CSS za promjenu ikone kada je odjeljak proširen:


input[type="radio"]:checked + label i.fas.fa-plus {
  display: none;
}

input[type="radio"]:checked + label {
    /* umetni ikonu minusa */
}

input[type="radio"]:checked + label::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f068"; /* fa-minus unicode */
    float:right;
}

Razmatranja o responzivnom dizajnu

Osigurajte da vaša harmonika dobro funkcionira na različitim veličinama zaslona koristeći tehnike responzivnog dizajna. Možete koristiti media querije za prilagodbu stiliziranja harmonike na temelju širine zaslona.

Primjer:


@media (max-width: 768px) {
  .accordion-container {
    width: 100%; /* Prilagodi širinu za manje zaslone */
  }

  label {
    padding: 8px;
    font-size: 0.9em; /* Prilagodi veličinu fonta */
  }
}

Napredne tehnike

Iako osnovna harmonika isključivo u CSS-u pruža čvrst temelj, postoje napredne tehnike koje mogu dodatno poboljšati njezinu funkcionalnost i korisničko iskustvo.

Očuvanje stanja pomoću Local Storagea

Možete koristiti JavaScript (iako to narušava čisti CSS pristup) i lokalnu pohranu (local storage) kako biste zapamtili stanje harmonike, tako da kada se korisnik vrati na stranicu, prethodno otvoreni odjeljci ostaju otvoreni.

Dinamičko učitavanje sadržaja

Za harmonike s velikom količinom sadržaja, možete dinamički učitavati sadržaj pomoću AJAX-a. To može poboljšati početno vrijeme učitavanja stranice i smanjiti potrošnju propusnosti.

Rješavanje uobičajenih problema

Ovdje su neki uobičajeni problemi na koje biste mogli naići pri implementaciji harmonika isključivo u CSS-u i kako ih riješiti:

Primjeri iz stvarnog svijeta

Harmonike isključivo u CSS-u mogu se koristiti u raznim scenarijima iz stvarnog svijeta:

Zaključak

Harmonike isključivo u CSS-u s funkcionalnošću jednog prikaza nude moćan i učinkovit način za poboljšanje korisničkog iskustva i pristupačnosti na vašoj web stranici. Korištenjem snage CSS selektora i ARIA atributa, možete stvoriti interaktivne elemente koji su performantni, jednostavni za održavanje i pristupačni širokom krugu korisnika. Bilo da gradite jednostavnu FAQ stranicu ili složenu web aplikaciju, harmonike isključivo u CSS-u mogu vam pomoći da predstavite informacije na jasan i privlačan način, pridonoseći boljem ukupnom korisničkom iskustvu za globalnu publiku.

Dodatni resursi za učenje