매운 부분

내장 탭 기능이있는 HTML을 상상해보십시오! 그것은 OpenUi의 Dave와 "Tabvengers"가 탐구하고있는 흥미로운 아이디어입니다. 그들의 연구는 놀라운 비틀기를 보여줍니다<tabs></tabs> 요소는 최상의 솔루션이 아닙니다.

다양한 플랫폼 (운영 체제, 게임, 라이브러리 및 웹 구성 요소)에서 기존 탭 구현에 대한 광범위한 연구는 중요한 설계 변형을 강조했습니다. 이 팀은 UI가 제시하는 디자인 여유 에 초점을 맞추는 것이 핵심이라고 결론지었습니다. 클래식 폴더와 같은 탭 디자인은 하나의 접근 방식이지만 기능적으로 아코디언 및 <details>/<summary></summary></details> 강요. 가장 효과적인 솔루션은 다중 설계 여유를 지원하고 (예 : 화면 크기에 따라) 전환을 허용하는 것입니다.

우아한 솔루션? 기존 시맨틱 HTML 활용 :

<h2> 헤더</h2>
<p>콘텐츠</p>

<h2>헤더</h2>
<p>콘텐츠</p>

<h2>헤더</h2>
<p>콘텐츠</p>

이 접근법은 몇 가지 장점을 제공합니다.

1. Solid Foundation : 기본 HTML 구조는 유효하며 올바르게 렌더링됩니다.
2. 설계 유연성 : 헤더는 선택한 디자인에 따라 탭 또는 요약 요소로 스타일링 할 수 있습니다.
3. 적응성 : CSS를 사용하여 다양한 설계 계약을 구현할 수 있습니다.

Tabvengers가 제안하고 있습니다<spicy-sections></spicy-sections> -이 시맨틱 HTML을 감싸는 웹 구성 요소. 그런 다음 CSS는 화면 너비와 같은 요소를 기반으로 설계를 동적으로 제어합니다.

<spicy-sections>
  <h2>헤더</h2>
  <p>콘텐츠</p>

  <h2>헤더</h2>
  <p>콘텐츠</p>

  <h2>헤더</h2>
  <p>콘텐츠</p>
</spicy-sections>

매운 섹션 {
  -Const-MQ-Affordances :
    [스크린 및 (Max-Width : 40em)] 붕괴 |
    [화면 및 (min-width : 60em)] 탭 바;
  디스플레이 : 블록;
}

이 접근법을 설명하는 예는 반응 형 디자인을 보여주는 비디오를 포함하여 쉽게 사용할 수 있습니다. 현재 맞춤형 웹 구성 요소이지만이 개념은 토론에 고무하여 기본 HTML 및 CSS 지원으로 이어지고 개발자를위한 탭 구현을 단순화하고 접근성을 향상시키기를 희망합니다.

자세한 내용은 Shoptalk 486 (15:17), Hidde de Vries의 연구 및 Dave의 프레젠테이션 "HTML과 함께 Superpowers가있는 HTML"을 탐색하여 웹 구성 요소의 힘에 대한 통찰력을 얻으십시오.

위 내용은 매운 부분의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!