🇺🇦 Popover на CSS, без JavaScript? Кросбраузерні поліфіли та альтернативне позиціонування? Ч.2

Ч.1 –

Зроби цей світ краще 👇 👇 👇
🇺🇦 Фонд Притули – https://prytulafoundation.org/
🇺🇦 Стерненко – https://www.youtube.com/@STERNENKO

👻 На розвиток каналу Frontend Shinobi
БАНКА – https://send.monobank.ua/jar/5tEodxQoEu
Крипта – USDT 0x284eF2F4db8B27905d68bBBECBC95a119259A395

Таймкоди:
00:00:00 – position-area
00:02:30 – кросбраузерні css поліфіли
00:05:00 – альтернативні варіанти позіціанування
00:07:30 – анімація display none у flex
00:10:30 – can i use

Посиланнячка:

https://caniuse.com/mdn-api_htmlelement_popover
https://caniuse.com/css-anchor-positioning
https://developer.mozilla.org/en-US/docs/Web/CSS/@position-try
https://github.com/oddbird/popover-polyfill?tab=readme-ov-file
https://css-irl.info/anchor-positioning-and-the-popover-api/
https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
https://bitbucket.org/fairproject/frontend-shinobi-yt/src/main/36-css-popover/

Опис відео роліка:
У роліку детально роберебо як зробити поповер на чистому css без використання javascript. Просто вказавши атрибут “popover” та “popovertarget” – для html елеменів що будуть відповідно у ролі самого поповера і кнопки, що його викликає
А також розберемося – як позіціанувати алементи за допомогою нових властивостей і можливостей CSS? а саме – position-anchor, anchor-name, anchor-name, top, left, right, bottom та anchor(). Також поговоримо про те, як прописувати альтернативні позиціі для елемента, у випадку якщо в позиції за замовчування – викликається overflow сорінки, що дозволяє, автоматично перемістити позицію елементу в інше місце, без використання javascript
Та які інструменти є на гітхабі щоб змусити поліфіли та anchor позіціанування працювати на усіх браузерах
Приємного перегляду!

#css #html #positionTry #js #курсиCSS #урокиCSS #csspopover #cssonly #nojavascript #purecss #css3 #html5 #webdevelopment #frontend #coding #tutorial #howto #positionanchor #anchorname #top #left #right #bottom #anchor #overflow #responsive #csspositioning #webdeveloper #frontenddeveloper #programmer #coder #csstips #csshacks #csslearning #webdesign #webdevtips #webdevelopmenttutorial #cssпоповер #чистийcss #безjavascript #позиціонування #cssвластивості #htmlатрибути #українськіпрограмісти #навчанняcss #дляпочатківців #дляпрофесіоналів #itукраїна #українськаспільнота #webdevua #українськийютуб #українськітехнології #українськийіт