Lmst

Контекстные меню с popover и anchor positioning. Крис Койер показывает, как сделать кебаб-меню без JavaScript через HTML-инвокеры для popover, anchor-name и position-anchor, а также анимацию открытия и закрытия на CSS. А ещё умное позиционирование с помощью свойства position-try, чтобы меню всегда оставалось видимым. #css #popover

https://frontendmasters.com/blog/popover-context-menus-with-anchor-positioning/

Графика с панелями интерфейса и всплывающими меню под заголовком «Popover Context Menus with Anchor Positioning», текстом меню «This Little Piggy Went to Market!», и логотипом Frontend Masters.

#Development #Techniques
Better defaults for popovers · A small anchor-repositioning with a big effect https://ilo.im/169wki

_____
#ModernCSS #Popover #Buttons #AnchorPositioning #HtmlDialog #ProgressiveEnhancement #WebDev #Frontend #CSS

JavaScript: заметка об Invoker Commands API

Привет, друзья! В этой небольшой статье я хочу рассказать вам о новом Web API - Invoker Commands . Invoker Commands API позволяет декларативно управлять поведением некоторых интерактивных элементов с помощью кнопок. "Декларативно" означает, что управления элементами осуществляется только с помощью HTML, без JavaScript. На сегодняшний день этот API поддерживается всеми основными браузерами (в Safari пока только в качестве экспериментальной возможности).

https://habr.com/ru/companies/timeweb/articles/972668/

#invoker_commands_api #html #web_api #dialog #popover #command #commandfor #диалог #поповер #timeweb_статьи_перевод

Today I learned about Yorkshire Pudding - and I've decided I need to try my hand at making them.

This recipe seems to be an exhaustive examination of the different myths and factors that surround the famous popover accomplice to decadent Prime Rib...

https://www.seriouseats.com/the-best-yorkshire-pudding-popover-recipe

#popover #yorkshire #beef #recipe

Attention aux conflits potentiels en HTML entre modale native et popover natif.

🔗 https://htmhell.dev/adventcalendar/2025/1/

#HTML #modal #popover

#Development #Guides
Baseline layered UI patterns · What you can do with HTML ‘dialog’ and ‘popover’ today https://ilo.im/168qp1

_____
#Popover #Dialog #Invoker #Animation #Accessibility #Browser #WebDev #Frontend #HTML #CSS

HTML sait désormais gérer une modale sans JavaScript, grâce à popover.

Pratique, accessible et moderne.

🎥 Démonstration en 2 min → https://youtube.com/shorts/BVMJjXWTD3c

#html #frontend #webdev #accessibility #popover

What is popover=hint?

https://fed.brid.gy/r/https://frontendmasters.com/blog/what-is-popoverhint/

yes indeed - this is no option at all: „Not showing it on mobile devices is one of the options - I am completely against that idea“ #popover #mobile #a11y

discussion about important content in popovers is useless. who will define if content is „important“ enough to show on mobile?
https://utilitybend.com/blog/html-popovers-shown-on-interest-should-be-accessible-on-mobile-devices/

And another one, the HTML validator does indeed now also support the `popoper*` attributes.

(I wonder if I slowly turn into a maintainer…)

https://validator.w3.org/

#html #popover

#Development #Explorations
A first look at the Interest Invoker API · Playing around with hover-triggered popovers https://ilo.im/165lbk

_____
#Tooltips #Popover #Invoker #API #Chrome #Browser #WebDev #Frontend #HTML #CSS

Let's build an Accessible Menu with Modern Web Features: A step by step guide, using the Popover API and CSS Anchor Positioning.
https://oidaisdes.org/accessible-popover-menu.en

#a11y #webdev #accessibility #css #popover #webdesign

#Development #Guides
What is HTML popover=hint? · Its function and relation to interest invokers https://ilo.im/1657qt

_____
#ModernCSS #Popover #Invokers #Tooltips #Chrome #Browser #WebDev #Frontend #CSS

The #popover #api is now baseline and will make #accessible #megamenus easier
#backwardcompatibility issue:

if (!('Popover' in window)) {

load old script
}

Has anyone ever tried this? I am worried about the time delay and ask myself if I should just wait a while ....

@lolaodelola podcast this week features @hdv

https://pods.link/ep/i/1000709138784

I love this podcast you should check it out
#browsers #a11y #popover

TFW...

You get all ramped up to use awesome #CSSWG features like Anchor Position and #OpenUI features like #popover and you run into nuanced blockers point you towards having to go back to the bad old days... 😖

Hello `transform: ...` and wanting to break clipping but only _some_ stacking. 🤔

Also, I've love to have the Popover API in CSS so that I could pop a pseudo element over my UI. 🤞

#webDev #CSS #isItTheFutureYet

#Development #Approaches
Glossary web component · A slick way to add links and context to your content https://ilo.im/163pvz

_____
#Glossary #Content #Markdown #JSON #Popover #WebComponent #WebDev #Frontend #HTML #JavaScript