CSS 앵커 포지셔닝의 매혹적인 세계로 뛰어 들어! 이 튜토리얼은 Juan Diego Rodriguez의 포괄적 인 "앵커 포지셔닝 가이드"(CSS- 트릭에서 제공)를 사용 하여이 혁신적인 CSS 기능을 탐구합니다.
이것은 흥미 진진한 발전입니다. 많은 사람들이 CSS- 트릭의 "Flexbox 레이아웃 가이드"및 "그리드 레이아웃 가이드"의 영향을 기억할 것입니다. 나는 종종 코드펜 실험에서 올바른 구문을 보장하기 위해 여러 탭을 저글링합니다.
Juan의 가이드 이후, 나는 CSS 앵커 포지셔닝을 실험 해 왔으며, 연구 결과를 공유하고, 더 배우고, 더 실험하고, 물론
를 구축하기를 간절히 바라며!
CSS 앵커 포지셔닝 소개
앵커 포지셔닝을 사용하면 하나 이상의 다른 요소에 하나의 요소를 연결할 수 있습니다. 결정적으로, > 폴백 포지셔닝 를 포함하여
"target"요소 (앵커에 부착 된 요소)가 앵커에 비해 위치하는 방법을 정의합니다.
간단히 말해서, 앵커 포지셔닝은 를 크게 향상시켜 절대적으로 배치 된 요소가 예측 가능하게 행동하도록 돕습니다. 우리는 이것을 자세히 살펴볼 것입니다.
현재 W3C 드래프트 사양 인 앵커 포지셔닝은 비교적 새롭습니다. 기준선에서 "제한된 가용성"으로 표시되어 있으며, 이는 주로 크롬 기반 브라우저에서 지원됩니다 (버전 125). 그러나 Oddbird는 더 넓은 브라우저 호환성을위한 유용한 폴리 필드를 제공합니다.
브라우저 지원 세부 정보는 caniuse.com에서 확인할 수 있습니다. 숫자는 지원이 시작되는 버전을 나타냅니다
데스크탑 브라우저 지원
모바일/태블릿 브라우저 지원
Oddbird는 많은 새로운 CSS 기능에 대한 폴리 플릴을 만듭니다. Github 또는 Open Collective에 대한 그들의 작업을 지원하십시오!
W3C 사양의 기고자 인 .
과제
이제 우리는 CSS 앵커 포지셔닝을 이해 했으므로 그 기능을 탐색합시다. 테 더링 요소는 엄청난 잠재력을 제공하여 이전에 복잡한 절대 포지셔닝 및
조정으로 이전에 다루는 많은 문제를 해결합니다.
기본 구문을 살펴 보겠습니다. 우리는 두 가지 요소가 필요합니다 : 앵커 위치 요소와 테 더링 된 대상.
우리는 고유 한 이름 (CSS 사용자 정의 속성과 같은 이중 대시로 접두사)을 사용하여 앵커 위치 요소를 지정합니다.
대상 요소는 및
(앵커와 일치)가 필요합니다.
이 요소는 이제 연결되어 있습니다. 앵커 요소 위에 보이지 않는 3x3 그리드를 생성하여 정확한 대상 배치를 허용합니다.
z-index
대상은 이제 앵커 요소의 상위 센터에 고정되었습니다!
앵커링 유사 요소
pseudo elements는 일반 요소처럼 고정 될 수 있습니다
이것은 시각적 향상 또는 표시기를 추가하는 데 유용합니다
움직이는 앵커
앵커는 대신 함수를 사용하여 재배치 할 수 있습니다.
<div>
Anchor
</div>
<div>
Target
</div>
함수는 앵커 요소의 계산 된 값을 사용합니다. 여기서 대상의 는 앵커의 와 일치합니다. 호버링 변경 및 부드러운 전환이 가능합니다
Advanced Experiments anchor-name
크롬 팀은 및 ()에 대한 새로운 의사 선택자를 발표했습니다. 이것들은 또한 고정 될 수 있습니다. 이것은 실험적이지만 잠재력을 보여줍니다. https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
anchor-name: --anchor;
}
실용 응용 프로그램
CSS 앵커 포지셔닝 (현재 크롬 전용)의 실제 용도를 탐색합시다.
툴팁 position: absolute;
툴팁은 자연스럽게 맞습니다. 아이콘 위에 호버링하면 인근 레이블이 표시됩니다. 툴팁 모범 사례에 관한 Zell Liew의 기사
position-anchor
툴팁은 앵커 요소의 형제입니다 (anchor-name 링크). CSS는 포지셔닝 및 가시성을 처리합니다
작업 CSS- 고정 툴팁! 터치 장치의 토글 팁을 고려하십시오 플로팅 공개
공개 (예 : )는 앵커 위치, 특히 부동 요소에 대한 혜택을받습니다. Popover API는 Light Dismissals와 같은 기능을 갖춘 비 모달, 최고층 솔루션을 제공합니다. Zell Liew는 팝버, 대화 및 양식에 대한 추가 정보를 제공합니다.
CSS는 고정 및 폴백 포지셔닝을 처리합니다
쇼핑 카트 구성 요소 <details>/<summary></summary></details>
이전 기술을 결합하여 쇼핑 카트 구성 요소를 만들 수 있습니다.
CSS는 툴팁, 쇼핑 카트 대화 상자 및 배지를 고정시킵니다
3 개의 요소가 단일 앵커에 고정되어 있습니다!
결합 기술
이 섹션은 툴팁, 공개 및 배지의 결합 된 사용을 보여 주어 앵커 포지셔닝의 힘을 보여줍니다.
최종 프로젝트 : 온 보딩 도구
최종 프로젝트로서 CSS 앵커 위치 온 보딩 도구 (Codepen 사용 가능)를 만들었습니다. 이것은 이전의 JavaScript 기반 시도 ( "Handholdjs")의 복잡성을 피합니다.
사용자 정의 요소
는 <div>
Anchor
</div>
<div>
Target
</div>
를 사용하여 투어 단계를 정의합니다. JavaScript는 앵커 위치를 동적으로 업데이트하고보기 전환은 원활한 전환을 보장합니다. 이 프로젝트는 브라우저 지원이 제한되어 있기 때문에 실험적이고 생산 준비가되지 않습니다.
결론
CSS 앵커 포지셔닝은 Flexbox 및 Grid와 유사한 CSS 개발에 혁명을 일으킬 가능성이 있습니다. 그 응용 프로그램은 방대하고 커뮤니티의 미래 혁신을 보게되어 기쁩니다. https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
anchor-name: --anchor;
}위 내용은 앵커 포지셔닝이있는 '온 보딩'UI 중 하나의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
