CSS만으로 Popover 구축

popover는 JavaScript 영역의 중요한 구성 부분이었습니다.오늘, 그것들을 구축하는 비 JS 옵션을 살펴보자.

목표

Popover 구축(열기/닫기 클릭)

DOM 사용 제한

0 0 JavaScript

필요

결실

책략

은 대화식 켜기/끄기 기능에 <details> 요소를 사용합니다.

은 기본 내연이 아닌'popover'상자에 내용을 표시합니다.

거기 어떻게 가요?

사용된 CSS 선택기

Attribute selector [attribute] - attribute을 제외한

의 요소 선택

Child combinator > - 두 개의 선택기를 조합한다.오른쪽의 선택 범위를 왼쪽에서 선택한 엔티티의 직접 후손인 엔티티로 좁힙니다.

Adjacent sibling combinator + - 두 개의 선택기를 조합한다.오른쪽의 선택 범위를 왼쪽에서 선택한 요소에 대한 직접 후속 동급 요소로 좁힙니다.

Universal selector * - 모든 요소 선택

:focus Psuedo-class - 현재'초점'을 가진 요소를 선택합니다(예를 들어 지난번에 클릭하거나tabbed to 등을 사용).

::-webkit-details-marker Psuedo-element - Chrome(ish) 브라우저

에 요약된 기본 화살표를 선택하는 방법

주요 CSS 스타일 사용

outline - details 요소

에 초점을 맞출 때 윤곽선을 표시하는 기본 동작을 변경합니다.

list-style - 요약

옆에 표시되는 기본 화살표를 제어하는 표준 방법

text-decoration - 시각적으로 어떤 요소가 Popover에서 사용할 수 있는지

transform 및 position 스타일 - 포플린을 올바른 위치로 이동

시작:HTML
우리의 전략 중 하나: <details> 라벨을 사용합니다.우리는 표준적인 <summary>을popover의 전도 텍스트로 하고 <div>을 <summary>의 형제로 삼아popover의 내용을 하나의 블록으로 쉽게 포지셔닝할 수 있다.
우리가 추가할 유일한 특수 내용은 data-popover 속성입니다. 이것은popover가 나타나기를 원하는 특정한 방향을 유지합니다.

<details data-popover="up">
  <summary>I'm a popover</summary>
  <div>
    <h1>Popovers can have lots of content!</h1>
    <p>Like paragraphs</p>
    <a href="#">and links</a>
  </div>
</details>

팝콘 유행
우선, 우리가 시작했을 때와 같이 기본 디테일 스타일을 삭제합시다.

details[data-popover] > summary:focus {
  outline: none;
}
details[data-popover] > summary::-webkit-details-marker {
  display: none;
}
details[data-popover] > summary {
  list-style: none;
}

더 많은 내용을 표시할 수 있는 모든 지시를 삭제했기 때문에, 시각적 지시기를 추가합니다. (점선 밑줄은 흔히 볼 수 있는 모드인 것 같습니다.)

details[data-popover] > summary {
  list-style: none;
  text-decoration: underline dotted teal;
}

다음은 일반 렌더링 흐름에서 Popover 컨텐츠를 꺼내는 position을 사용하겠습니다.

details[data-popover] {
  position: relative;
}
details[data-popover] > summary + * {
  position: absolute;
}

주의: 제 예시에서 보듯이popover가 단락에서 더 잘 재생될 수 있도록 display: inline 옵션에 display: inline-block 또는 details[data-popover]을 추가하십시오.

스타일: 정확한 위치로 팝업
포지셔닝은 실제로 우리가 고객을 포지셔닝할 때와 완전히 같다.나는 그것이 어떻게 일을 하는지 완전히 다시 설명하지는 않겠지만, 하나의 예를 통해 설명할 것이다.

details[data-popover="up"] > summary + * {
  bottom: calc(0.5rem + 100%);
  right: 50%;
  transform: translateX(50%);
}

Popover에는 이미 position: absolute이 설치되어 있기 때문에 우리는 현재 bottom, top, right, left과 transform을 사용하여 원소의 위치를 조종할 수 있다.bottom과 right의 스타일을 결합하면 기본적으로 다음과 같다. 나의 밑바닥을 100% 부모님의 높이에 놓고 0.5rem을 부모님의 밑바닥에서 멀리하고 나의 오른쪽 50%를 부모님의 오른쪽에 놓는다.
그리고 transform: translateX은 그 위치에서 내 너비의 50%를 오른쪽으로 옮겼다고 말했다.
결합하면 그것은 우회적인 표현이 되었다. 나의 중심을 부모님의 중심에 맞추고, 나를 완전히 부모님의 위에 놓고, 우리 사이에 약간의 추가 공간을 남겨 두는 것이다.

마감과 방주
읽어주셔서 감사합니다!나는 이러한 구축 블록이 이전의'CSS만 사용'문장에서 사용된 기술을 바탕으로 무엇을 실현할 수 있는지에 대해 깨우침을 줄 수 있기를 바란다.
popover도 스톱 효과(:hover 사용)로 사용할 수 있다.DOM은 같은 통용 구조를 사용하지만 <details> 또는 <div>을 <span> 대신 사용할 가능성이 높다.'요약' 이나 내용을 동시에 표시하려면popover를 표시해야 합니다. (사용자와popover가 상호작용할 수 있도록 합니다.)
나는 이런 것을 공유하고 발견하는 것을 좋아한다. 그곳에서 통용되는 웹 디자인 모델은 방대한 자바스크립트 라이브러리나 프레임워크 없이 완성되어 페이지를 곤경에 빠뜨릴 수 있다.
너도 좋아하면 따라와!나는 이 시리즈에 더 많은 댓글을 올릴 계획이다.