Introducing the popover API - Chrome Developers

Încă un feature care mai elimină din necesitatea adăugării de cod js extra :slight_smile:

Sigur, poate că mai este nevoie de 1-2-3 ani până va fi cu adevărat utilizabil fără shim-uri, dar asta e o altă discuție.

2 Likes

Nu pot sa nu observ ce evolutie au avut browserele in ultimii cativa ani si unde au ajuns cand te uiti din prisma IE6. Pe vremea aia dura foarte multi ani pana o optiune noua devenea mainstream, in principal pentru ca nu exista concurenta. De aia nu trebuie lasat Chrome sa inghita tot market share-ul. Ar fi fost o idee mult mai sanatoasa daca MS adoptau motorul de pe FF (e si ala OS, nu?), nu Chromium.

1 Like

Exact. Copiii ăștia, crescuți cu React și browsere fără quirks (prea mari) nu pot aprecia suficient aceste features :smiley:

Cât despre ce a adoptat MS, două idei razna:

  • google este unul dintre cei mai mari furnizori de cod pentru… firefox :smiley: (auzită recent într-un podcast, nu am stat să verific; dar miezul era că google împinge implementări pentru features noi peste tot pe unde se poate)
  • chromium este open source, ceea ce înseamnă că poți face un browser nou bazat pe chrome care… nu este chrome. Știu că sună stupid, dar spre deosebire de maxton (sau ce mai era bazat pe engine-ul IE), microsoft nu depinde de google pentru a implementa … chestii. Drept dovadă: sunt câteva features în Edge care nu există în chrome (tab-uri verticale, colecții etc)

Google (adică Chromium) nu este un furnizor de cod pentru firefox. Chrome și firefox folosesc engine-uri diferite, deci și cod sursă diferit.

Google (Chromium), dacă vine cu idei de feature-uri noi, se consultă înainte atât cu cei de la mozilla (firefox) cât și cu cei de la Microsoft și Apple. Își share-uiesc ideea și încearcă să ajungă la un consens cu toții, dacă să se implementeze un anumit feature în browsere sau nu. Asta înseamnă că da, în general, atunci când un browser vine cu un web API nou (ce numim noi feature), toate celelalte o vor face.

Tot în general, decizia dacă să se implementeze un web API nou (de exemplu popover) vine de fapt de pe urma cererilor developer-ilor, dar și a frecvenței cu care ar putea fi folosit. Dacă ne uităm la popover, n-ai cum să nu-i vezi utilitatea într-un meniu de navigare (de exemplu).

Microsoft nu depinde de google când vine vorba de adăugări de feature-uri în Edge, dar asta nu înseamnă că Edge e complet independent. Edge folosește în continuare Chromium și trebuie să ia în considerare fiecare release al chromium-ului. Din cauza (datorită aș zice eu) noilor feature-uri, dar și din motive de securitate.

Cheers!

2 Likes

pana la urma vine si Apple
Safari 17 adds support for the popover attribute. It provides a framework for displaying overlays, popups, popovers, and dialogs. There are two types of popovers, which can be used as values for the popover attribute:

  • auto popovers, which automatically close when you click outside of the popover; and
  • manual popovers, which don’t have this automatic closing behavior.

Use a button (either a <button> element or button input type) to create the UI for opening and closing the popover. And add the appropriate HTML attributes to create the desired result.

The popovertarget attribute connects the button to the popover content through an ID. The optional popovertargetaction attribute takes show, hide, or toggle as values. By default, toggle is used.

<button popovertarget="info-box" popovertargetaction="show">More info</button>

<article id="info-box" popover="auto">
  <h2>Additional Information</h2>
  <p>Here’s something I wanted to tell you.</p>
  <button popovertarget="info-box" popovertargetaction="hide">Close</button>
</article>

This is just one UI pattern you might find useful. There are many possible combinations. Having a popover mechanism in HTML makes for quick work, while ensuring great usability and full accessibility.

To go beyond a simple button trigger, a JavaScript API opens up more powerful possibilities through showPopover(), hidePopover(), and togglePopover().