Poppin ' ~ 안에

이봐 요! 오랜만이에요! 그냥 튀어 나와 인사하고 싶었습니다. ? "팝핑"에 대해 말하면, 나는 새로운 팝 오버 API를 실험 해 왔습니다. 우리는 2018 년에 처음으로 언급했지만 현대식 브라우저에서의 완전한 지원은 최근 (2024 년 4 월)입니다. 초기에 전용

HTML 요소가 계획되었습니다. Chromium은 2021 년 9 월 까지이 작업을 수행했지만 궁극적으로 A

속성으로 대체되었습니다. 이제 모든 요소가 팝 오버 역할을 할 수 있으므로 이는 의미가 있습니다. 속성을 추가하십시오.

```HTML

<code>
Here's an interesting observation: a simple element like this:

```html
<div>?</div></code>

... 정상적으로 표시됩니다. 그러나 속성을 ​​추가하면 숨겨지게됩니다! 이것은 처음에 나를 혼란스럽게했지만 DevTools는 그것이 예상되는 행동임을 확인했습니다.

여러 팝 오버가 가능하며 IDS로 구분됩니다 popover 팝 오버를 활성화하려면 "트리거"가 필요합니다. 다른 속성은 모든 버튼 (또는 버튼과 같은 요소)을이 트리거로 변환합니다.

버튼을 클릭하면 팝 오버의 가시성이 전환됩니다. CSS는 가시성 로직을 처리하여 클릭 이벤트에 집중할 수 있습니다. 예를 들어, 두꺼운 검은 색 테두리는 팝 오버가 열릴 때 기본 스타일입니다.

DevTools는 다른 흥미로운 세부 사항을 드러냅니다. 팝 오버의 너비와 높이는

와 함께 인라인 요소처럼 행동합니다. 커스텀 CSS없이 컨텐츠에 크기가 크고 중앙에 있습니다!

<div popover="id1"></div>
<div popover="id2"></div>

기본 테두리를 제거하는 것은 만큼 간단하지 않습니다.

pseudo-class 스타일은 요소

만 Say Hello!

?

를 열면 이전 스타일을 우선시합니다. 또는 속성을 ​​선택하십시오 :

이것은 열린 상태에 애니메이션을 추가 할 수 있습니다 (Jhey 's Demos에서 영감을 얻음). 또한 팝 오버는 시각 효과를 위해 와 유사한

pseudo 요소를 포함 할 수 있습니다. Mojtaba의 Almanac 예제는 훌륭합니다 가능성은 광대합니다! CSS가 가시성을 처리하면 툴팁이 훨씬 간단 해집니다. Michelle Barker는 이것이 호버 툴팁보다 "토글 팁"(클릭 제어)에 더 가깝다고 지적하며, 그녀의 게시물은 CSS 앵커 포지셔닝과 얼마나 잘 통합되는지를 보여줍니다. Jhey의 또 다른 위대한 자원은 팝 오버가 팝 오버에만 국한되지 않는다는 것을 강조합니다. 슬라이드 아웃 메뉴와 같은 가시성이 전환 된 다른 UI 요소에 대해 용도를 변경할 수 있습니다. 늦어지고 있으며 탐험해야 할 것이 훨씬 많지만이 초기 발표조차도 유망합니다. 다음은 추가 학습을위한 리소스 목록입니다

팝 오버 접근성 : 브라우저 동작 (hidde de vries) 모달 (hidde de vries) display: block 사용 ui 및 Popover API (Brecht de Ruyte)

팝 오버 및 대화 (Adrian Roselli) 고급 양식 제어 스타일 (Brecht de Ruyte) HTML 툴팁 (Chris Coyier)의 팝 오버 API Popover API 및 (Logrocket) border: 0; 비교 :popover-open 튀어 나와 주셔서 감사합니다!

위 내용은 Poppin ' ~ 안에의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!