M

MLOG

Eesti

Õppige meisterlikult looma ainult CSS-i kasutavaid akordioneid, millel on ühe avatava osa funktsionaalsus, parandades seeläbi kasutajakogemust ja ligipääsetavust erinevatel veebiplatvormidel.

Ainult CSS-i akordionid: Üksikute avanevate vidinate loomine parema kasutajakogemuse saavutamiseks

Akordionid on kaasaegse veebidisaini põhielement, pakkudes puhast ja tõhusat viisi suure hulga teabe esitamiseks seeditavas vormingus. Need on eriti kasulikud KKK-de, tootekirjelduste ja navigeerimismenüüde jaoks. See artikkel süveneb ainult CSS-i kasutavate akordionite loomisesse, millel on ühe avatava osa käitumine, mis tähendab, et korraga saab avatud olla ainult üks akordioni jaotis. See lähenemine parandab kasutajakogemust, vältides sisu üleküllust ja soodustades keskendunud sirvimist.

Ainult CSS-i kasutavate akordionite eeliste mõistmine

Traditsioonilised JavaScriptil põhinevad akordionid nõuavad sageli oleku haldamist ja sündmuste käsitlemist, mis võib teie koodile keerukust lisada. Ainult CSS-i kasutavad akordionid seevastu kasutavad CSS-i selektorite ja `:checked` pseudoklassi võimsust, et saavutada soovitud funktsionaalsus ilma JavaScriptile tuginemata. Tulemuseks on:

Ehituskivid: HTML-struktuur

Meie ainult CSS-i kasutava akordioni aluseks on hästi struktureeritud HTML-märgistus. Kasutame järgmisi elemente:

Siin on põhiline HTML-struktuur:


<div class="accordion-container">
  <input type="radio" name="accordion" id="section1">
  <label for="section1">1. jaotise pealkiri</label>
  <div class="accordion-content">
    <p>1. jaotise sisu.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">2. jaotise pealkiri</label>
  <div class="accordion-content">
    <p>2. jaotise sisu.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">3. jaotise pealkiri</label>
  <div class="accordion-content">
    <p>3. jaotise sisu.</p>
  </div>
</div>

Selgitus:

Akordioni kujundamine CSS-iga

Nüüd lisame CSS-i, et kujundada akordion ja rakendada ühe avatava osa käitumine.


.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; /* Peida sisu algselt */
}

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

input[type="radio"]:checked + label + .accordion-content {
  display: block; /* Näita sisu, kui raadionupp on märgitud */
}

Selgitus:

Ligipääsetavuse parandamine ARIA atribuutidega

Et tagada meie akordioni ligipääsetavus puuetega kasutajatele, peame lisama ARIA atribuudid. ARIA (Accessible Rich Internet Applications) atribuudid pakuvad semantilist teavet abistavatele tehnoloogiatele, näiteks ekraanilugejatele.

Siin on, kuidas saame ligipääsetavust parandada:


<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">1. jaotise pealkiri</label>
  <div id="content1" class="accordion-content" role="region" aria-labelledby="section1">
    <p>1. jaotise sisu.</p>
  </div>

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

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

Selgitus:

Olulised kaalutlused ligipääsetavuse osas:

Kohandamine ja täiustused

Põhilist ainult CSS-i kasutavat akordioni saab edasi kohandada ja täiustada, et see vastaks konkreetsetele disaininõuetele.

Üleminekute lisamine

Sujuvama kasutajakogemuse loomiseks saame akordioni sisule lisada CSS-üleminekuid.


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

input[type="radio"]:checked + label + .accordion-content {
  display: block;
  max-height: 500px; /* Määra ülemineku jaoks maksimaalne kõrgus */
}

Selgitus:

Ikoonidega kujundamine

Ikoonide lisamine akordioni päistele võib parandada visuaalset atraktiivsust ja kasutaja arusaamist. Selleks saate kasutada CSS-i pseudoelemente või fondiikoone.

CSS-i pseudoelementide kasutamine:


label::after {
  content: '+'; /* Algne ikoon */
  float: right;
  font-size: 1.2em;
}

input[type="radio"]:checked + label::after {
  content: '-'; /* Muuda ikooni, kui on laiendatud */
}

Fondiikoonide kasutamine (nt Font Awesome):

  1. Lisage oma HTML-i Font Awesome'i CSS: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="..." crossorigin="anonymous" />
  2. Kasutage oma siltides vastavaid Font Awesome'i klasse:

<label for="section1">1. jaotise pealkiri <i class="fas fa-plus"></i></label>

Seejärel kasutage CSS-i, et muuta ikooni, kui jaotis on laiendatud:


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

input[type="radio"]:checked + label {
    /* sisesta miinusikoon */
}

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

Reageeriva disaini kaalutlused

Veenduge, et teie akordion töötaks hästi erineva suurusega ekraanidel, kasutades reageeriva disaini tehnikaid. Saate kasutada meediapäringuid, et kohandada akordioni stiili vastavalt ekraani laiusele.

Näide:


@media (max-width: 768px) {
  .accordion-container {
    width: 100%; /* Kohanda laius väiksemate ekraanide jaoks */
  }

  label {
    padding: 8px;
    font-size: 0.9em; /* Kohanda fondi suurust */
  }
}

Täiustatud tehnikad

Kuigi põhiline ainult CSS-i kasutav akordion pakub kindla aluse, on olemas täiustatud tehnikaid, mis võivad selle funktsionaalsust ja kasutajakogemust veelgi parandada.

Oleku säilitamine Local Storage'iga

Saate kasutada JavaScripti (kuigi see läheb vastuollu puhta CSS-i lähenemisega) ja Local Storage'it, et meeles pidada akordioni olekut, nii et kui kasutaja lehele naaseb, on varem avatud jaotised endiselt avatud.

Dünaamiline sisu laadimine

Suure sisumahuga akordionite jaoks saate sisu dünaamiliselt laadida AJAX-i abil. See võib parandada lehe esialgset laadimisaega ja vähendada ribalaiuse kasutust.

Levinud probleemide tõrkeotsing

Siin on mõned levinud probleemid, millega võite ainult CSS-i kasutavate akordionite rakendamisel kokku puutuda, ja kuidas neid lahendada:

Reaalse elu näited

Ainult CSS-i kasutavaid akordioneid saab kasutada mitmesugustes reaalsetes stsenaariumides:

Kokkuvõte

Ainult CSS-i kasutavad akordionid, millel on ühe avatava osa funktsionaalsus, pakuvad võimsat ja tõhusat viisi kasutajakogemuse ja ligipääsetavuse parandamiseks teie veebisaidil. Kasutades CSS-i selektorite ja ARIA atribuutide võimsust, saate luua interaktiivseid elemente, mis on jõudsad, hooldatavad ja ligipääsetavad laiale kasutajaskonnale. Olenemata sellest, kas loote lihtsat KKK lehte või keerulist veebirakendust, aitavad ainult CSS-i kasutavad akordionid teil teavet esitada selgelt ja kaasahaaravalt, aidates kaasa paremale üldisele kasutajakogemusele globaalsele publikule.

Täiendavad õppematerjalid