CSS išskirtinis akordeonas: vieno atskleidimo valdymo vadovas

Akordeonai yra įprastas vartotojo sąsajos elementas, naudojamas laipsniškai atskleisti turinį. Jie leidžia pateikti informaciją kompaktišku, organizuotu būdu, gerinant vartotojo patirtį, ypač mobiliuosiuose įrenginiuose. Šiame vadove nagrinėsime, kaip sukurti išskirtinį akordeoną tik naudojant CSS, dar vadinamą vieno atskleidimo akordeonu. Tokio tipo akordeonas užtikrina, kad vienu metu būtų atidaryta tik viena skiltis, suteikiant vartotojams švarią ir sutelktą naršymo patirtį.

Kodėl verta naudoti išskirtinį akordeoną?

Nors standartiniai akordeonai leidžia vienu metu atidaryti kelias skiltis, išskirtiniai akordeonai siūlo keletą privalumų:

• Geresnis susitelkimas: Apribodami vartotoją ties viena atidaryta skiltimi, nukreipiate jo dėmesį ir sumažinate kognityvinę apkrovą.
• Patobulintas naršymas: Išskirtiniai akordeonai supaprastina naršymą, ypač sudėtingose turinio struktūrose. Vartotojai visada žino, kur jie yra ir kas rodoma.
• Patogus mobiliesiems: Mažesniuose ekranuose išskirtinis akordeonas padeda taupyti vertingą ekrano erdvę ir suteikia geresnę vartotojo patirtį.
• Aiškesnė hierarchija: Vieno atskleidimo mechanizmas sustiprina jūsų turinio hierarchinę struktūrą, todėl ją lengviau suprasti.

Prieiga tik su CSS

Nors akordeonams kurti galima naudoti „JavaScript“, prieiga tik su CSS suteikia keletą privalumų:

• Jokios priklausomybės nuo „JavaScript“: Pašalinamas „JavaScript“ poreikis, sumažinant puslapio įkėlimo laiką ir galimas suderinamumo problemas.
• Prieinamumas: Teisingai įgyvendinti, tik CSS pagrįsti akordeonai gali būti prieinamesni vartotojams su negalia.
• Paprastumas: Tik CSS pagrįsta prieiga gali būti paprasčiau įgyvendinama ir prižiūrima pagrindinėms akordeono funkcijoms.

Išskirtinio akordeono kūrimas: žingsnis po žingsnio

Panagrinėkime išskirtinio akordeono kūrimo procesą tik su CSS. Aptarsime HTML struktūrą, CSS stiliavimą ir vieno atskleidimo mechanizmo logiką.

1. HTML struktūra

Mūsų akordeono pagrindas yra HTML struktūra. Naudosime <input type="radio"> elementų, <label> elementų ir <div> elementų derinį akordeono skiltims sukurti.

<div class="accordion">
  <input type="radio" name="accordion" id="section1" checked>
  <label for="section1">1 skiltis</label>
  <div class="content">
    <p>Turinys 1 skilčiai.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">2 skiltis</label>
  <div class="content">
    <p>Turinys 2 skilčiai.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">3 skiltis</label>
  <div class="content">
    <p>Turinys 3 skilčiai.</p>
  </div>
</div>

Paaiškinimas:

• <div class="accordion">: Tai yra pagrindinis viso akordeono konteineris.
• <input type="radio" name="accordion" id="section1" checked>: Kiekviena skiltis prasideda su radio mygtuku. Atributas name="accordion" yra labai svarbus; jis sugrupuoja visus radio mygtukus, užtikrindamas, kad vienu metu galima pasirinkti tik vieną. Atributas id naudojamas susieti radio mygtuką su atitinkama žyma. Atributas checked ant pirmojo radio mygtuko nustato jį kaip numatytąją atidarytą skiltį.
• <label for="section1">1 skiltis</label>: Žyma veikia kaip paspaudžiama kiekvienos skilties antraštė. Atributas for turi atitikti atitinkamo radio mygtuko id.
• <div class="content">: Čia yra faktinis kiekvienos skilties turinys. Iš pradžių šis turinys bus paslėptas.

2. Stiliavimas su CSS

Dabar stilizuokime akordeoną naudodami CSS. Daugiausia dėmesio skirsime radio mygtukų slėpimui, žymų stiliavimui ir turinio matomumo valdymui, atsižvelgiant į radio mygtuko būseną.

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

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

.accordion label {
  display: block;
  padding: 10px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  font-weight: bold;
}

.accordion .content {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: none;
}

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

.accordion input[type="radio"]:checked + label + .content {
  display: block;
}

Paaiškinimas:

• .accordion input[type="radio"] { display: none; }: Tai paslepia radio mygtukus. Jie vis dar veikia, bet vartotojui nematomi.
• .accordion label { ... }: Tai stilizuoja žymas, kad jos atrodytų kaip paspaudžiamos antraštės. Nustatome cursor į pointer, kad parodytume, jog jos yra interaktyvios.
• .accordion .content { ... display: none; }: Iš pradžių paslepiame kiekvienos skilties turinį naudodami display: none;.
• .accordion input[type="radio"]:checked + label { ... }: Tai stilizuoja šiuo metu pasirinkto (pažymėto) radio mygtuko žymą. Pakeičiame fono spalvą, kad parodytume, jog ji yra aktyvi. + (gretimo brolio selektorius) taikomas žymai, esančiai iškart po pažymėto radio mygtuko.
• .accordion input[type="radio"]:checked + label + .content { ... display: block; }: Tai parodo šiuo metu pasirinktos skilties turinį. Vėlgi, naudojame gretimo brolio selektorių (+) du kartus, kad pasiektume .content div'ą, kuris eina po žymos, kuri savo ruožtu eina po pažymėto radio mygtuko. Tai yra raktas į tik CSS pagrįsto akordeono logiką.

3. Prieinamumo aspektai

Prieinamumas yra labai svarbus bet kuriam interneto komponentui. Štai keletas aspektų, į kuriuos reikia atsižvelgti, kad jūsų tik CSS pagrįstas akordeonas būtų prieinamas:

• Naršymas klaviatūra: Užtikrinkite, kad vartotojai galėtų naršyti akordeoną naudodami klaviatūrą. Radio mygtukai yra savaime fokusuojami klaviatūra, bet galbūt norėsite pridėti vaizdinių užuominų (pvz., fokusavimo rėmelį), kai žyma yra fokusuojama.
• ARIA atributai: Naudokite ARIA atributus, kad suteiktumėte papildomos semantinės informacijos ekrano skaitytuvams. Pavyzdžiui, galite naudoti aria-expanded, kad nurodytumėte, ar skiltis yra atidaryta, ar uždaryta, ir aria-controls, kad susietumėte žymą su atitinkama turinio skiltimi.
• Semantinis HTML: Kur tinka, naudokite semantinius HTML elementus. Pavyzdžiui, apsvarstykite galimybę naudoti <h2> arba <h3> elementus skilčių antraštėms, o ne tiesiog stilizuoti žymas.
• Kontrastas: Užtikrinkite pakankamą spalvų kontrastą tarp teksto ir fono, kad būtų geras skaitomumas.

Štai pavyzdys, kaip pridėti ARIA atributus į mūsų HTML struktūrą:

<div class="accordion">
  <input type="radio" name="accordion" id="section1" checked aria-controls="content1">
  <label for="section1" aria-expanded="true">1 skiltis</label>
  <div class="content" id="content1" aria-hidden="false">
    <p>Turinys 1 skilčiai.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false">2 skiltis</label>
  <div class="content" id="content2" aria-hidden="true">
    <p>Turinys 2 skilčiai.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false">3 skiltis</label>
  <div class="content" id="content3" aria-hidden="true">
    <p>Turinys 3 skilčiai.</p>
  </div>
</div>

Ir atitinkamas CSS, kad atnaujintumėte aria-expanded ir aria-hidden:

.accordion [aria-expanded="true"] {
 background-color: #ddd;
}

.accordion [aria-hidden="false"] {
 display: block;
}

.accordion [aria-hidden="true"] {
 display: none;
}

4. Išplėstinis pritaikymas

Pagrindinę akordeono struktūrą galima įvairiai pritaikyti pagal jūsų specifinius dizaino reikalavimus:

• Animacijos: Pridėkite CSS perėjimus ar animacijas, kad turinio skiltys atsidarytų ir užsidarytų sklandžiai. Pavyzdžiui, galite naudoti transition savybę, kad animuotumėte turinio height ar opacity.
• Piktogramos: Įtraukite piktogramas į žymas, kad vizualiai parodytumėte kiekvienos skilties atidarytą/uždarytą būseną. Piktogramoms pridėti galite naudoti CSS pseudo-elementus (::before arba ::after).
• Temos: Pritaikykite spalvas, šriftus ir tarpus, kad atitiktų bendrą jūsų svetainės dizainą.

Štai pavyzdys, kaip pridėti paprastą perėjimą turinio aukščiui:

.accordion .content {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: none;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

.accordion input[type="radio"]:checked + label + .content {
  display: block;
  height: auto; /* Svarbu: Leidžia turiniui išsiplėsti iki natūralaus aukščio */
}

5. Pavyzdžiai ir pritaikymai pasauliniu mastu

Tik CSS pagrįstas išskirtinis akordeonas yra universalus elementas, kurį galima pritaikyti įvairiems kontekstams skirtingose kultūrose ir regionuose. Štai keletas pavyzdžių:

• Elektroninės prekybos produktų puslapiai: Organizuotai pateikite produkto detales, tokias kaip specifikacijos, apžvalgos ir siuntimo informacija. Tai taikoma visame pasaulyje, nes informacija apie produktą yra labai svarbi perkant internetu, nepriklausomai nuo vietos.
• DUK skiltys: Rodykite dažniausiai užduodamus klausimus ir atsakymus. Tai yra įprastas naudojimo atvejis viso pasaulio svetainėse, padedantis vartotojams greitai rasti informaciją ir sumažinantis pagalbos užklausų skaičių.
• Dokumentacija ir mokymo medžiaga: Organizuokite sudėtingą dokumentaciją ar mokymo turinį į valdomas skiltis. Tai naudinga programinės įrangos įmonėms, švietimo įstaigoms ir bet kuriai organizacijai, teikiančiai internetinius mokymosi išteklius visame pasaulyje.
• Navigacija mobiliuosiuose įrenginiuose: Naudokite išskirtinį akordeoną, kad sukurtumėte mobiliiesiems įrenginiams pritaikytą navigacijos meniu, ypač svetainėms su dideliu meniu punktų skaičiumi. Tai labai svarbu vartotojams, kurie lankosi svetainėse išmaniaisiais telefonais ir planšetiniais kompiuteriais, užtikrinant sklandžią patirtį.
• Formos: Suskaidykite ilgas formas į mažesnius, lengviau valdomus žingsnius, naudojant akordeono struktūrą. Tai gali pagerinti vartotojų užpildymo rodiklius ir sumažinti formų atmetimą. Apsvarstykite galimybę išversti žymas į vietines kalbas, kad užtikrintumėte maksimalią vartotojo patirtį.

6. Dažniausios klaidos ir sprendimai

Nors prieiga tik su CSS yra veiksminga, yra keletas galimų spąstų, kuriuos reikia žinoti:

• CSS specifiškumas: Užtikrinkite, kad jūsų CSS taisyklės būtų pakankamai specifiškos, kad anuliuotų bet kokius prieštaraujančius stilius. Naudokite specifiškesnius selektorius arba atsargiai naudokite raktinį žodį !important.
• Prieinamumo problemos: Prieinamumo aspektų nepaisymas gali sukurti kliūtis vartotojams su negalia. Visada išbandykite savo akordeoną su ekrano skaitytuvais ir naršymu klaviatūra.
• Sudėtingas turinys: Labai sudėtingam turiniui akordeono skiltyse sprendimas, pagrįstas „JavaScript“, gali pasiūlyti daugiau lankstumo ir kontrolės.
• Naršyklių suderinamumas: Išbandykite savo akordeoną skirtingose naršyklėse, kad užtikrintumėte nuoseklų veikimą. Nors dauguma modernių naršyklių palaiko šiame metode naudojamus CSS selektorius, senesnėms naršyklėms gali prireikti polifilų ar alternatyvių sprendimų.

7. Alternatyvos tik CSS akordeonams

Nors šiame straipsnyje daugiausia dėmesio skyrėme tik CSS akordeonams, yra ir kitų galimybių:

• „JavaScript“ akordeonai: Siūlo daugiau lankstumo ir kontrolės akordeono elgesiui. „JavaScript“ galima naudoti animacijoms pridėti, sudėtingam turiniui valdyti ir prieinamumui gerinti. Bibliotekos, tokios kaip „jQuery UI“, ir karkasai, tokie kaip „React“ ir „Vue.js“, siūlo paruoštus akordeono komponentus.
• HTML <details> ir <summary> elementai: Šie natūralūs HTML elementai suteikia pagrindinę akordeono funkciją be jokio „JavaScript“. Tačiau jiems trūksta išskirtinio atskleidimo elgsenos ir jie reikalauja CSS stiliavimo pritaikymui.

Išvada

Tik CSS pagrįsto išskirtinio akordeono sukūrimas yra puikus būdas pagerinti vartotojo patirtį, ypač mobiliuosiuose įrenginiuose. Pasinaudodami CSS selektorių ir radio mygtukų galia, galite sukurti paprastą, prieinamą ir efektyvų akordeoną, nepasikliaudami „JavaScript“. Nepamirškite atsižvelgti į prieinamumą, išbandyti skirtingose naršyklėse ir pritaikyti kodą pagal savo specifinius dizaino reikalavimus. Laikydamiesi šiame vadove pateiktų žingsnių, galite sukurti profesionalų ir patogų akordeoną, kuris pagerina svetainės naršymą ir padeda vartotojams greitai ir lengvai rasti reikiamą informaciją. Šiuo metodu suteikiamas vieno atskleidimo mechanizmas lemia švaresnę, labiau sutelktą vartotojo patirtį.

Ši technika taikoma įvairiuose tarptautiniuose kontekstuose, užtikrinant nuoseklią vartotojo patirtį, nepriklausomai nuo vartotojo vietos ar kalbos. Pritaikydami turinį ir dizainą pagal vietines nuostatas, galite sukurti akordeoną, kuris rezonuoja su vartotojais visame pasaulyje.

Papildomi ištekliai

• MDN Web Docs: <input type="radio">
• MDN Web Docs: Gretimo brolio kombinatorius (+)
• WAI-ARIA kūrimo praktikos: akordeonas