CSS Popover API: Natiivsed modaalaknad ja lihtsustatud kattekihi positsioneerimine

CSS Popover API on veebiarendajate jaoks murranguline, pakkudes natiivset viisi ligipääsetavate modaalakende, tööriistavihjete, menüüde ja muude interaktiivsete kattekihtide loomiseks otse HTML-is ja CSS-is. See kaotab vajaduse keerukate JavaScripti lahenduste järele ja parandab veebi jõudlust. See põhjalik juhend tutvustab teile Popover API aluseid, näitab selle praktilisi rakendusi ja uurib selle eeliseid traditsiooniliste meetodite ees.

Mis on CSS Popover API?

CSS Popover API tutvustab uut komplekti HTML-atribuute ja CSS-i omadusi, mis on loodud hüpikakna-laadsete elementide loomise ja haldamise lihtsustamiseks. See pakub standardiseeritud viisi elementide loomiseks, mis:

• Ilmuvad lehel muu sisu kohale.
• Saab avada ja sulgeda ühe klõpsu või puudutusega.
• Haldavad ligipääsetavuse tagamiseks automaatselt fookust.
• On CSS-i abil lihtsalt stiliseeritavad.

Enne Popover API-d tuginesid arendajad sageli JavaScripti teekidele või kohandatud lahendustele sarnase funktsionaalsuse saavutamiseks. Need lähenemisviisid võisid olla keerulised, ressursimahukad ja altid ligipääsetavusprobleemidele. Popover API pakub puhtamat, tõhusamat ja ligipääsetavamat alternatiivi.

Põhimõisted ja atribuudid

Nende põhikomponentide mõistmine on Popover API tõhusaks kasutamiseks ülioluline:

1. Atribuut popover

See atribuut on Popover API nurgakivi. Selle rakendamine HTML-elemendile muudab selle elemendi hüpikaknaks. Atribuut popover aktsepteerib kolme väärtust:

• auto: (Vaikimisi) Esindab "automaatset" hüpikakent. Samaaegselt võib olla avatud mitu automaatset hüpikakent. Hüpikaknast väljapoole klõpsamine või Escape-klahvi vajutamine sulgeb selle ("kerge sulgemine").
• manual: Loob "manuaalse" hüpikakna. Neid hüpikaknaid kasutatakse tavaliselt püsivate kasutajaliidese elementide jaoks, nagu menüüd või tööriistavihjed, mis nõuavad oma nähtavuse üle suuremat kontrolli. Manuaalseid hüpikaknaid ei sulgeta väljapoole klõpsates ega Escape-klahvi vajutades; need tuleb selgesõnaliselt sulgeda JavaScripti või mõne muu nupu/lingi abil.
• (Väärtuseta): (Kaudselt `auto`): Atribuudi `popover` kasutamine ilma väärtuseta seab selle kaudselt väärtusele `auto`.

Näide:

            <button popovertarget="my-popover">Ava hüpikaken</button>
<div id="my-popover" popover>
  <p>See on lihtne hüpikaken!</p>
</div>
            

              
                Copy
              
            
          

2. Atribuut popovertarget

See atribuut ühendab nupu või lingi konkreetse hüpikakna elemendiga. Nupule või lingile klõpsamisel lülitub popovertarget atribuudis määratud ID-ga seotud hüpikakna nähtavus ümber (avaneb, kui on suletud; sulgub, kui on avatud). Samuti saate määrata `popovertargetaction="show"` või `popovertargetaction="hide"`, et sundida konkreetset tegevust.

Näide:

            <button popovertarget="my-popover">Ava hüpikaken</button>
<button popovertarget="my-popover" popovertargetaction="hide">Sulge hüpikaken</button>
<div id="my-popover" popover>
  <p>See on kontrollitav hüpikaken!</p>
</div>
            

              
                Copy
              
            
          

3. CSS-i pseudoklass :popover-open

See pseudoklass võimaldab teil stiliseerida hüpikakna elementi, kui see on nähtav. Saate seda kasutada hüpikakna välimuse kontrollimiseks, näiteks selle taustavärvi, äärise või varju määramiseks.

Näide:

            #my-popover:popover-open {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
            

              
                Copy
              
            
          

4. JavaScripti meetodid togglePopover(), showPopover() ja hidePopover()

Kuigi Popover API on peamiselt loodud töötama ilma JavaScriptita, pakuvad need meetodid vajadusel programmilist kontrolli hüpikakna nähtavuse üle. Neid saab kasutada hüpikakna oleku avamiseks, sulgemiseks või ümberlülitamiseks.

Näide:

            const popoverElement = document.getElementById('my-popover');

// Hüpikakna näitamiseks
popoverElement.showPopover();

// Hüpikakna peitmiseks
popoverElement.hidePopover();

// Hüpikakna ümberlülitamiseks
popoverElement.togglePopover();
            

              
                Copy
              
            
          

Lihtsa hüpikakna loomine

Loome lihtsa hüpikakna, kasutades Popover API-d:

            <button popovertarget="my-popover">Näita detaile</button>

<div popover id="my-popover">
  <h3>Tooteinfo</h3>
  <p>See on kvaliteetne toode, mis on loodud optimaalseks jõudluseks.</p>
</div>
            

              
                Copy
              
            
          

Lisage hüpikakna stiliseerimiseks veidi põhilist CSS-i:

            #my-popover {
  display: none; /* Algselt peidetud */
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Veenduge, et see oleks teiste elementide kohal */
}

#my-popover:popover-open {
  display: block; /* Näita hüpikakent, kui see on avatud */
}
            

              
                Copy
              
            
          

See kood loob nupu, millele klõpsates kuvatakse tooteinfoga hüpikaken. Pseudoklass :popover-open tagab, et hüpikaken on nähtav ainult siis, kui see on avatud olekus.

Täpsem kasutus ja näited

Popover API-d saab kasutada keerukamate kasutajaliidese elementide loomiseks. Siin on mõned näited:

1. Modaalakna loomine

Kuigi element <dialog> on olemas, võib Popover API seda täiendada või seda saab kasutada olukordades, kus <dialog> element ei ole ideaalne. Atribuudi `popover="manual"` kasutamine võimaldab teil modaalsust täpsemalt kontrollida. Siin on, kuidas luua modaalakna-laadset kogemust:

            <button popovertarget="my-modal">Ava modaalaken</button>

<div id="my-modal" popover="manual" style="display:none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border: 1px solid black; padding: 20px; z-index: 1000;">
  <h2>Vajalik kinnitus</h2>
  <p>Kas olete kindel, et soovite jätkata?</p>
  <button onclick="document.getElementById('my-modal').hidePopover()">Tühista</button>
  <button onclick="alert('Jätkan!'); document.getElementById('my-modal').hidePopover()">OK</button>
</div>
<script>
  const modalButton = document.querySelector('[popovertarget="my-modal"]');
  modalButton.addEventListener('click', () => {
    const modal = document.getElementById('my-modal');
    modal.style.display = 'block'; //Pane stiilid kehtima *enne* näitamist.
    modal.showPopover();
  });
</script>
            

              
                Copy
              
            
          

Selles näites on modaalaken algselt peidetud ja paigutatud CSS-i abil ekraani keskele. JavaScript tagab, et õige stiil rakendatakse *enne* modaalakna kuvamist, ja pakub `showPopover()` meetodi väljakutseid. Oluline on see, et atribuut popover="manual" nõuab JavaScripti modaalakna selgesõnaliseks peitmiseks. Nupud "Tühista" ja "OK" kasutavad inline JavaScripti, et kutsuda välja hidePopover(), sulgedes modaalakna.

2. Tööriistavihje loomine

Tööriistavihjed on väikesed hüpikaknad, mis pakuvad lisateavet, kui elemendi kohal hõljuda. Siin on, kuidas luua tööriistavihje Popover API abil:

            <span popovertarget="my-tooltip">Hõlju minu kohal</span>
<div popover id="my-tooltip">See on abistav tööriistavihje!</div>
<style>
  #my-tooltip {
    display: none;
    position: absolute;
    background-color: #333;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    z-index: 1000;
  }

  #my-tooltip:popover-open {
    display: block;
  }
  span[popovertarget] {
   position: relative; /* Vajalik tööriistavihje korrektseks positsioneerimiseks */
  }
</style>
            

              
                Copy
              
            
          

Praegu nõuab tööriistavihje kuvamine ainult hõljumisel väikest JavaScripti koodijuppi hüpikakna näitamise ja peitmise haldamiseks. Tulevased CSS-i funktsioonid võivad seda võimaldada ilma JavaScriptita.

3. Menüü loomine

Menüüd on tavaline kasutajaliidese element, mida saab Popover API abil lihtsalt implementeerida.

            <button popovertarget="my-menu">Ava menüü</button>

<div id="my-menu" popover>
  <ul>
    <li><a href="#">Valik 1</a></li>
    <li><a href="#">Valik 2</a></li>
    <li><a href="#">Valik 3</a></li>
  </ul>
</div>
            

              
                Copy
              
            
          

Ja vastav CSS:

            #my-menu {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

#my-menu:popover-open {
  display: block;
}

#my-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#my-menu li {
  margin-bottom: 5px;
}

#my-menu a {
  text-decoration: none;
  color: #333;
}
            

              
                Copy
              
            
          

Ligipääsetavuse kaalutlused

Popover API on loodud ligipääsetavust silmas pidades. See haldab automaatselt fookust, tagades, et kasutajad saavad hõlpsasti hüpikakna sisus klaviatuuri abil navigeerida. Siiski on oluline järgida parimaid tavasid, et tagada teie hüpikakende täielik ligipääsetavus:

• Kasutage semantilist HTML-i: Kasutage hüpikakna sisu jaoks sobivaid HTML-elemente. Näiteks kasutage pealkirjade jaoks päiseid, teksti jaoks lõike ja menüüde jaoks loendeid.
• Pakkuge selgeid silte: Veenduge, et kõikidel hüpikakna interaktiivsetel elementidel on selged ja kirjeldavad sildid.
• Testige abistavate tehnoloogiatega: Testige oma hüpikaknaid ekraanilugejate ja muude abistavate tehnoloogiatega, et tagada nende ligipääsetavus kõigile kasutajatele.

Popover API kasutamise eelised

Popover API pakub mitmeid eeliseid võrreldes traditsiooniliste hüpikakende loomise meetoditega:

• Lihtsustatud arendus: Vähendab vajaliku JavaScripti koodi hulka, muutes arenduse kiiremaks ja lihtsamaks.
• Parem jõudlus: Natiivne implementatsioon tagab parema jõudluse võrreldes JavaScriptil põhinevate lahendustega.
• Täiustatud ligipääsetavus: Sisseehitatud ligipääsetavuse funktsioonid tagavad parema kasutajakogemuse kõigile kasutajatele.
• Standardiseerimine: Pakub standardiseeritud viisi hüpikakende loomiseks, edendades järjepidevust erinevate veebisaitide ja brauserite vahel.

Brauseri tugi

2024. aasta lõpu seisuga on CSS Popover API-l tugev brauseritugi suuremates kaasaegsetes brauserites nagu Chrome, Firefox, Safari ja Edge. Siiski on oluline enne selle tootmisesse viimist kontrollida uusimaid brauserite ühilduvustabeleid veebisaitidel nagu Can I use.... Vanemate brauserite või keskkondade jaoks, kus API veel saadaval pole, võib olla vaja pakkuda polüfilli.

Polüfillid ja varulahendused

Kui peate toetama brausereid, mis veel Popover API-d ei toeta, võite kasutada polüfilli. A polüfill on JavaScripti teek, mis pakub puuduva API funktsionaalsust. Internetis on saadaval mitmeid Popover API polüfille. Otsige oma lemmikotsingumootorist "CSS Popover API polyfill".

Teise võimalusena võite kasutada funktsioonide tuvastamist, et teha kindlaks, kas Popover API on toetatud, ja pakkuda varulahendust, kui see pole:

            if ('popover' in HTMLElement.prototype) {
  // Kasuta Popover API-d
  console.log('Popover API on toetatud!');
} else {
  // Kasuta varulahendust (nt JavaScripti teeki)
  console.log('Popover API ei ole toetatud. Kasutan varulahendust.');
  // Lisage oma varulahendus siia
}
            

              
                Copy
              
            
          

Globaalsed kaalutlused

Popover API implementeerimisel globaalsele publikule pidage silmas järgmist:

• Lokaliseerimine: Veenduge, et teie hüpikakende tekst on erinevate keelte ja piirkondade jaoks korralikult lokaliseeritud. Kasutage sobivaid keeleatribuute ja tõlkemehhanisme. Kaaluge tõlkehaldussüsteemi (TMS) kasutamist lokaliseerimisprotsessi sujuvamaks muutmiseks.
• Paremalt vasakule (RTL) tugi: Kui teie veebisait toetab RTL-keeli (nt araabia, heebrea), veenduge, et teie hüpikaknad oleksid RTL-paigutustes korralikult peegeldatud ja paigutatud. Kasutage CSS-i loogilisi omadusi (nt `margin-inline-start` `margin-left`-i asemel), et tagada korrektne paigutuse kohandamine.
• Ligipääsetavus: Ligipääsetavus on globaalse publiku jaoks veelgi olulisem. Veenduge, et teie hüpikaknad vastavad WCAG juhistele ja on ligipääsetavad erineva kultuuritaustaga puuetega kasutajatele.
• Kultuuriline tundlikkus: Olge hüpikakna sisu kujundamisel teadlik kultuurilistest erinevustest. Vältige piltide või teksti kasutamist, mis võivad teatud kultuurides olla solvavad või sobimatud.
• Ajavööndid: Kui teie hüpikaknad kuvavad ajatundlikku teavet, veenduge, et aeg kuvatakse kasutaja kohalikus ajavööndis. Kasutage ajavööndite teisenduste haldamiseks JavaScripti teeke nagu Moment.js või Luxon.

Parimad tavad

Siin on mõned parimad tavad, mida Popover API kasutamisel järgida:

• Hoidke hüpikakna sisu lühike: Hüpikaknad peaksid pakkuma täiendavat teavet, mitte asendama lehe põhisisu. Hoidke sisu lühike ja asjakohane.
• Kasutage selgeid ja kirjeldavaid silte: Veenduge, et hüpikaknaid käivitavatel nuppudel või linkidel on selged ja kirjeldavad sildid.
• Pakkuge viis hüpikakna sulgemiseks: Pakkuge alati kasutajatele selge ja lihtne viis hüpikakna sulgemiseks, näiteks sulgemisnupp või hüpikaknast väljapoole klõpsamine.
• Testige põhjalikult: Testige oma hüpikaknaid erinevates brauserites ja seadmetes, et tagada nende ootuspärane toimimine.
• Eelistage ligipääsetavust: Eelistage alati ligipääsetavust, et tagada teie hüpikakende kasutatavus kõigile, olenemata nende võimetest.

Kokkuvõte

CSS Popover API on võimas uus tööriist veebiarendajatele, pakkudes natiivset ja standardiseeritud viisi ligipääsetavate ja jõudluspõhiste hüpikakende loomiseks. By mõistes API põhimõisteid ja atribuute, saate luua laia valikut interaktiivseid kasutajaliidese elemente, alates lihtsatest tööriistavihjetest kuni keerukate modaalakendeni. Võtke Popover API kasutusele, et oma arendustöövoogu sujuvamaks muuta, ligipääsetavust parandada ning oma veebisaitide ja rakenduste kasutajakogemust täiustada. Kuna brauseritugi jätkuvalt kasvab, on Popover API-l potentsiaali saada iga veebiarendaja tööriistakasti oluliseks osaks.