최신 CSS를 사용하여 HTML

및

스타일 지정

공개 위젯에는 구성 부분의 스타일을 지정하는 두 개의 의사 요소가 있습니다.

1. ::marker 의사 요소:
   의 시작 부분에 있는 삼각형 마커를 나타냅니다. 이에 대한 스타일링 스토리는 다소 복잡합니다. 우리는 작은 CSS 속성 집합으로 제한됩니다. 브라우저 지원은 ::marker에 적합하지만 Safari는 현재 전체 속성 세트를 지원하지 않습니다. 이 기사의 "요약 표시 스타일 지정" 섹션에서 이에 대해 자세히 설명하겠습니다.
2. ::details-content 의사 요소:
   의 "추가 정보"를 나타냅니다. 이는 최근 추가된 것이므로 브라우저 지원은 현재 Chrome으로 제한됩니다.

다음 섹션에서는 공개 위젯을 사용자 정의하는 더 새롭고 잘 알려지지 않은 방법 중 일부를 보여 드리겠습니다.

열기 및 닫기 동작 애니메이션

공개 위젯을 열면 즉시 열립니다. 깜박이면 놓치게 됩니다!

사용자에게 작업의 영향을 보여주기 위해 보다 점진적인 방식으로 한 상태에서 다른 상태로 전환하는 것이 좋습니다. 공개 위젯의 열기 및 닫기 동작에 전환 애니메이션을 추가할 수 있나요? 요컨대 그렇습니다!

이를 애니메이션화하려면 숨겨진 콘텐츠의 높이를 0에서 최종 높이로 전환해야 합니다. height 속성의 기본값은 auto이며, 콘텐츠에 따라 높이를 계산하도록 브라우저에 맡깁니다. [interpolate-size](https://nerdy.dev/interpolate-size) 속성이 추가될 때까지는 CSS에서 auto 값으로 애니메이션을 적용할 수 없었습니다. 우리가 사용해야 하는 최신 CSS 기능(주로 interpolate-size 및 ::details-content)에 대한 브라우저 지원은 약간 제한되어 있지만 이는 점진적인 향상의 좋은 예입니다. 현재 Chrome에서 작동합니다!

다음은 애니메이션의 CodePen 예시입니다.

공개 애니메이션은 어떻게 작동하나요?

먼저 interpolate-size를 추가하여 자동 높이로 전환할 수 있습니다.

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

다음으로 닫힌 스타일에 대해 설명하겠습니다. 우리는 "추가 정보" 콘텐츠의 높이가 0이 되도록 하고 어떤 콘텐츠도 표시되지 않도록 하려고 합니다. 즉, 오버플로를 방지하고 싶습니다.

숨겨진 콘텐츠를 타겟팅하기 위해 ::details-content 의사 요소를 사용합니다. 논리적 속성을 사용하는 것이 좋은 습관이기 때문에 height 대신 block-size 속성을 사용합니다. 브라우저가 닫힌 상태에 있는 콘텐츠에 content-visibility:hidden을 설정하기 때문에 전환에 content-visibility를 포함해야 합니다. 이를 포함하지 않으면 닫는 애니메이션이 작동하지 않습니다.

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

콘텐츠 가시성 속성이 별개의 애니메이션 속성이기 때문에 애니메이션이 여전히 예상대로 작동하지 않습니다. 이는 보간이 없음을 의미합니다. 브라우저는 전체 애니메이션 기간 동안 전환된 콘텐츠가 표시되도록 두 값 사이를 전환합니다. 우리는 이것을 원하지 않습니다.

transition-behavior:allow-discrete;를 포함하면 애니메이션이 끝날 때 값이 반전되므로 점진적인 전환이 이루어집니다.

또한 공개 위젯이 중간 상태일 때 블록 크기를 0으로 설정하여 콘텐츠 오버플로가 발생합니다. 대부분의 콘텐츠는 열릴 때 표시됩니다. 이런 일이 발생하지 않도록 하려면 Overflow: Hidden을 추가합니다.

마지막으로 열린 상태에 대한 스타일을 추가합니다. 우리는 최종 상태의 크기를 auto로 설정하고 싶습니다.

details {
    interpolate-size: allow-keywords;
}

그것은 광범위한 스트로크입니다. 더 자세한 동영상 설명을 원하시면

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

/* open state */
details[open]::details-content {
  block-size: auto;
}

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

details {
    interpolate-size: allow-keywords;
}

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

details {
    interpolate-size: allow-keywords;
}

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

/* open state */
details[open]::details-content {
  block-size: auto;
}

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

details {
    interpolate-size: allow-keywords;
}

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

/* open state */
details[open]::details-content {
  block-size: auto;
}

>@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */

   details::details-content {
      transition-duration: 0.8s; /* slower speed */
   }
}

<details>
    <summary>Payment Options</summary>
    <p>...</p>
</details>
<details>
    <summary>Personalise your PIN</summary>
    <p>...</p>
</details>
<details>
    <summary>How can I add an additional cardholder to my Platinum Mastercard</summary>
    <p>...</p>
</details>