Maak kennis met de popover-API

Una Kravets

Popovers zijn overal op internet te vinden. U kunt ze zien in menu's, schakeltips en dialoogvensters, die zich kunnen manifesteren als accountinstellingen, openbaarmakingswidgets en productkaartvoorbeelden. Ondanks hoe gangbaar deze componenten zijn, is het bouwen ervan in browsers nog steeds verrassend omslachtig. Je moet scripting toevoegen om de focus te beheren, open- en sluitstatussen, toegankelijke hooks in de componenten, toetsenbordbindingen om de ervaring in en uit te gaan, en dat is allemaal nog voordat je begint met het bouwen van de nuttige, unieke kernfunctionaliteit van je popover.

Om dit op te lossen komt er een nieuwe set declaratieve HTML-API's voor het bouwen van popovers naar browsers, te beginnen met de popover API in Chromium 114.

Het popover-attribuut

Browserondersteuning

  • Chroom: 114.
  • Rand: 114.
  • Firefox: 125.
  • Safari: 17.

Bron

In plaats van alle complexiteit zelf te beheren, kunt u de browser dit laten afhandelen met het popover attribuut en de daaropvolgende reeks functies. Ondersteuning voor HTML-popovers:

  • Promotie naar de bovenste laag. Popovers verschijnen op een aparte laag boven de rest van de pagina, zodat u niet met de z-index hoeft te rommelen.
  • Lichtuitschakelingsfunctionaliteit. Als u buiten het popover-gebied klikt, wordt de popover gesloten en keert de focus terug.
  • Standaard focusbeheer. Als u de popover opent, stopt het volgende tabblad in de popover.
  • Toegankelijke toetsenbordbindingen. Als u op de esc -toets drukt, wordt de popover gesloten en keert de focus terug.
  • Toegankelijke componentbindingen. Het semantisch verbinden van een popover-element met een popover-trigger.

U kunt nu popovers bouwen met al deze functies zonder JavaScript te gebruiken. Voor een eenvoudige popover zijn drie dingen nodig:

  • Een popover attribuut voor het element dat de popover bevat.
  • Een id voor het element dat de popover bevat.
  • Een popovertarget met de waarde van de popover- id voor het element dat de popover opent. 
<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Nu heb je een volledig functionele basis-popover.

Deze popover kan worden gebruikt om aanvullende informatie over te brengen of als openbaarmakingswidget.

Standaardwaarden en overschrijvingen

Standaard betekent het instellen van een popover met een popovertarget zoals in het vorige codefragment, dat de knop of het element waarmee de popover wordt geopend, deze open en dicht schakelt. U kunt echter ook expliciete popovers maken met popovertargetaction . Dit overschrijft de standaard schakelactie . popovertargetaction -opties omvatten:

popovertargetaction="show" : Toont de popover. popovertargetaction="hide" : Verbergt de popover.

Met popovertargetaction="hide" kunt u een knop 'sluiten' maken binnen een popover, zoals in het volgende fragment:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

Automatische versus handmatige popovers

Het gebruik van het popover attribuut op zichzelf is eigenlijk een snelkoppeling voor popover="auto" . Wanneer de popover wordt geopend, worden andere automatische popovers gesloten, behalve voorouderpopovers. Het kan worden uitgeschakeld via de lichtuitschakeling of een sluitknop.

Aan de andere kant creëert de instelling popover=manual een ander type popover: een handmatige popover. Deze forceren het sluiten van geen enkel ander elementtype en sluiten niet via light-dismiss. Je moet ze sluiten via een timer of expliciete sluitactie. Typen popovers die geschikt zijn voor popover=manual zijn elementen die verschijnen en verdwijnen, maar die geen invloed mogen hebben op de rest van de pagina, zoals een toastmelding.

Als u de bovenstaande demo verkent, ziet u dat klikken buiten het popover-gebied de popover niet lichtelijk sluit. Bovendien, als er andere popovers open waren, zouden deze niet sluiten.

Om de verschillen te bekijken:

Popovers met popover=auto :

  • Wanneer u deze opent, sluit u andere popovers geforceerd.
  • Kan licht uitschakelen.

Popovers met popover=manual :

  • Forceer het sluiten van een ander elementtype niet.
  • Niet licht uitdoen. Sluit ze met een schakel- of sluitactie.

Pop-overs stylen

Tot nu toe heb je kennis gemaakt met de basispopovers in HTML. Maar er zijn ook enkele leuke stijlkenmerken die bij popover horen. Eén daarvan is de mogelijkheid om ::backdrop te stylen.

Bij auto popovers is dit een laag direct onder de bovenste laag (waar de popover zich bevindt), die zich boven de rest van de pagina bevindt. In het volgende voorbeeld krijgt de ::backdrop een semi-transparante kleur:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

Het verschil tussen een popover en een dialog

Het is belangrijk op te merken dat het popover attribuut op zichzelf geen semantiek biedt. En hoewel je nu modale dialoogachtige ervaringen kunt opbouwen met popover="auto" , zijn er een paar belangrijke verschillen tussen de twee:

Een dialog dat wordt geopend met dialog.showModal (een modale dialoog) is een ervaring die expliciete gebruikersinteractie vereist om het modale te sluiten. Een popover ondersteunt lichtuitschakeling. Een modale dialog doet dat niet. Een modale dialoog maakt de rest van de pagina inert . Een popover doet dat niet.

De bovenstaande demo is een semantische dialoog met popover-gedrag. Dit betekent dat de rest van de pagina niet inert is en dat de dialoogvenster-popover wel een light-dismiss-gedrag vertoont. U kunt dit dialoogvenster bouwen met popover-gedrag met behulp van de volgende code:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

Binnenkort beschikbaar

Interactieve in- en uitgang

De mogelijkheid om discrete eigenschappen te animeren, inclusief animeren van en naar display: none en animeren van en naar de bovenste laag zijn nog niet beschikbaar in browsers. Ze staan ​​echter gepland voor een komende versie van Chromium, die deze release nauw volgt.

Met de mogelijkheid om discrete eigenschappen te animeren, en met behulp van :popover-open en @starting-style , kunt u stijlen vóór en na de wijziging instellen om vloeiende overgangen mogelijk te maken bij het openen en sluiten van popovers. Neem het vorige voorbeeld. Het in en uit animeren ziet er veel soepeler uit en ondersteunt een vloeiendere gebruikerservaring:

Anker positionering

Popovers zijn geweldig als u een waarschuwing, modaal of melding wilt plaatsen op basis van de viewport. Maar popovers zijn ook handig voor menu's, tooltips en andere elementen die ten opzichte van andere elementen moeten worden gepositioneerd. Dit is waar CSS-verankering van pas komt.

De volgende radiale menudemo gebruikt de popover-API samen met CSS-ankerpositionering om ervoor te zorgen dat de popover #menu-items altijd verankerd zijn aan de schakeltrigger, de #menu-toggle knop.

Het instellen van ankers is vergelijkbaar met het instellen van popovers:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

U stelt een anker in door het een id te geven (in dit voorbeeld #menu-toggle ) en gebruikt vervolgens anchor="menu-toggle" om de twee elementen met elkaar te verbinden. Nu kunt u anchor() gebruiken om de popover op te maken. Een gecentreerd popover-menu dat is verankerd aan de basislijn van de ankerschakelaar kan als volgt worden opgemaakt:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

Nu heb je een volledig functioneel popover-menu dat is verankerd aan de schakelknop en dat alle ingebouwde functies van popover heeft, geen JavaScript vereist!

Conclusie

De popover API is de eerste stap in een reeks nieuwe mogelijkheden om het bouwen van webapplicaties standaard eenvoudiger te beheren en toegankelijker te maken. Ik ben benieuwd hoe jij popovers gebruikt!

Aanvullende lectuur