M

MLOG

Suomi

Opi luomaan vain CSS:llä toteutettuja harmonikoita, joissa vain yksi osio on auki kerrallaan, parantaen käyttökokemusta ja saavutettavuutta eri verkkoympäristöissä.

Vain CSS:llä toteutetut harmonikat: Yksittäisen osion näyttävien widgetien luominen parannetun käyttökokemuksen saavuttamiseksi

Harmonikat ovat modernin verkkosuunnittelun peruspilareita, jotka tarjoavat siistin ja tehokkaan tavan esittää suuria tietomääriä helposti omaksuttavassa muodossa. Ne ovat erityisen hyödyllisiä UKK-osioissa, tuotekuvauksissa ja navigointivalikoissa. Tässä artikkelissa syvennytään vain CSS:llä toteutettujen harmonikkojen luomiseen, joissa vain yksi osio voi olla auki kerrallaan. Tämä lähestymistapa parantaa käyttökokemusta estämällä sisältötulvaa ja edistämällä kohdennettua selaamista.

Vain CSS:llä toteutettujen harmonikkojen etujen ymmärtäminen

Perinteiset JavaScript-pohjaiset harmonikat vaativat usein tilan hallintaa ja tapahtumien käsittelyä, mikä voi lisätä koodin monimutkaisuutta. Vain CSS:llä toteutetut harmonikat sen sijaan hyödyntävät CSS-valitsimien ja `:checked`-pseudoluokan voimaa saavuttaakseen halutun toiminnallisuuden ilman JavaScriptiä. Tämä johtaa:

Rakennuspalikat: HTML-rakenne

Vain CSS:llä toteutetun harmonikkamme perusta on hyvin jäsennelty HTML-merkkaus. Käytämme seuraavia elementtejä:

Tässä on perus-HTML-rakenne:


<div class="accordion-container">
  <input type="radio" name="accordion" id="section1">
  <label for="section1">Section 1 Title</label>
  <div class="accordion-content">
    <p>Content for Section 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">Section 2 Title</label>
  <div class="accordion-content">
    <p>Content for Section 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">Section 3 Title</label>
  <div class="accordion-content">
    <p>Content for Section 3.</p>
  </div>
</div>

Selitys:

Harmonikan muotoilu CSS:llä

Nyt lisätään CSS harmonikan muotoilemiseksi ja yksittäisen avoimen osion toiminnallisuuden toteuttamiseksi.


.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; /* Piilota sisältö aluksi */
}

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

input[type="radio"]:checked + label + .accordion-content {
  display: block; /* Näytä sisältö, kun radio-painike on valittu */
}

Selitys:

Saavutettavuuden parantaminen ARIA-attribuuteilla

Varmistaaksemme, että harmonikkamme on saavutettava vammaisille käyttäjille, meidän on lisättävä ARIA-attribuutteja. ARIA (Accessible Rich Internet Applications) -attribuutit tarjoavat semanttista tietoa aputeknologioille, kuten ruudunlukijoille.

Näin voimme parantaa saavutettavuutta:


<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">Section 1 Title</label>
  <div id="content1" class="accordion-content" role="region" aria-labelledby="section1">
    <p>Content for Section 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false" aria-controls="content2">Section 2 Title</label>
  <div id="content2" class="accordion-content" role="region" aria-labelledby="section2">
    <p>Content for Section 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false" aria-controls="content3">Section 3 Title</label>
  <div id="content3" class="accordion-content" role="region" aria-labelledby="section3">
    <p>Content for Section 3.</p>
  </div>
</div>

Selitys:

Tärkeitä huomioita saavutettavuudesta:

Mukauttaminen ja parannukset

Perusmuotoista, vain CSS:llä toteutettua harmonikkaa voidaan edelleen mukauttaa ja parantaa vastaamaan erityisiä suunnitteluvaatimuksia.

Siirtymien lisääminen

Luodaksemme sulavamman käyttökokemuksen voimme lisätä CSS-siirtymiä harmonikan sisältöön.


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

input[type="radio"]:checked + label + .accordion-content {
  display: block;
  max-height: 500px; /* Aseta enimmäiskorkeus siirtymää varten */
}

Selitys:

Muotoilu kuvakkeilla

Kuvakkeiden lisääminen harmonikan otsikoihin voi parantaa visuaalista ilmettä ja käyttäjän ymmärrystä. Voit käyttää tähän tarkoitukseen CSS-pseudo-elementtejä tai fonttikuvakkeita.

CSS-pseudo-elementtien käyttö:


label::after {
  content: '+'; /* Alkuperäinen kuvake */
  float: right;
  font-size: 1.2em;
}

input[type="radio"]:checked + label::after {
  content: '-'; /* Vaihda kuvake, kun osio on laajennettu */
}

Fonttikuvakkeiden käyttö (esim. Font Awesome):

  1. Sisällytä Font Awesome CSS HTML-tiedostoosi: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="..." crossorigin="anonymous" />
  2. Käytä asianmukaisia Font Awesome -luokkia label-elementeissäsi:

<label for="section1">Section 1 Title <i class="fas fa-plus"></i></label>

Käytä sitten CSS:ää kuvakkeen vaihtamiseen, kun osio on laajennettu:


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

input[type="radio"]:checked + label {
    /* lisää miinus-kuvake */
}

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

Responsiivisen suunnittelun huomioita

Varmista, että harmonikkasi toimii hyvin eri näyttöko'oilla käyttämällä responsiivisen suunnittelun tekniikoita. Voit käyttää mediakyselyitä säätääksesi harmonikan muotoilua näytön leveyden perusteella.

Esimerkki:


@media (max-width: 768px) {
  .accordion-container {
    width: 100%; /* Säädä leveys pienemmille näytöille */
  }

  label {
    padding: 8px;
    font-size: 0.9em; /* Säädä fonttikokoa */
  }
}

Edistyneet tekniikat

Vaikka perusmuotoinen, vain CSS:llä toteutettu harmonikka tarjoaa vankan perustan, on olemassa edistyneitä tekniikoita, jotka voivat edelleen parantaa sen toiminnallisuutta ja käyttökokemusta.

Tilan säilyttäminen Local Storagella

Voit käyttää JavaScriptiä (vaikka tämä kumoaa puhtaan CSS-lähestymistavan) ja local storagea muistaaksesi harmonikan tilan, jotta kun käyttäjä palaa sivulle, aiemmin avatut osiot ovat edelleen auki.

Dynaaminen sisällön lataus

Harmonikoille, joissa on suuria määriä sisältöä, voit ladata sisällön dynaamisesti AJAX-tekniikalla. Tämä voi parantaa sivun alkuperäistä latausaikaa ja vähentää kaistanleveyden käyttöä.

Yleisten ongelmien vianmääritys

Tässä on joitakin yleisiä ongelmia, joita saatat kohdata toteuttaessasi vain CSS:llä tehtyjä harmonikkoja, ja kuinka ratkaista ne:

Esimerkkejä todellisesta elämästä

Vain CSS:llä toteutettuja harmonikkoja voidaan käyttää monissa todellisen maailman tilanteissa:

Yhteenveto

Vain CSS:llä toteutetut harmonikat, joissa vain yksi osio on auki kerrallaan, tarjoavat tehokkaan ja vaikuttavan tavan parantaa käyttökokemusta ja saavutettavuutta verkkosivustollasi. Hyödyntämällä CSS-valitsimien ja ARIA-attribuuttien voimaa voit luoda interaktiivisia elementtejä, jotka ovat suorituskykyisiä, ylläpidettäviä ja saavutettavia laajalle käyttäjäkunnalle. Rakennatpa sitten yksinkertaista UKK-sivua tai monimutkaista verkkosovellusta, vain CSS:llä toteutetut harmonikat voivat auttaa sinua esittämään tietoa selkeällä ja mukaansatempaavalla tavalla, mikä edistää parempaa yleistä käyttökokemusta maailmanlaajuiselle yleisölle.

Lisäoppimateriaalit