CSS의 새로운 @position-try의 편리함

CSS 앵커 포지셔닝이 얼마 전에 나왔습니다. 저처럼 CSS 작성을 좋아하지 않는다면 이 새로운 API를 사용하면 확실히 상황이 개선될 것입니다.

앵커 위치 지정

CSS Anchor Positioning API를 사용하면 개발자는 추가 라이브러리나 복잡한 JavaScript 없이도 다른 요소(앵커라고 함)를 기준으로 요소의 위치를 ​​쉽게 지정할 수 있습니다. 이 기능은 메뉴, 도구 설명, 대화 상자 및 기타 계층형 인터페이스를 만드는 데 적합합니다.

이 API를 사용하면 요소의 크기/위치가 앵커에 따라 조정되도록 할 수 있습니다. 이를 통해 수동으로 조정할 필요가 없으며 동적인 대화형 레이아웃을 구축할 때 더욱 원활하고 반응성이 뛰어난 환경을 제공합니다.

포지션 트라이란 무엇인가요?

Anchor CSS에는 position-try라는 새로운 CSS at-rule도 함께 출시되었습니다. 고정된 요소가 화면이나 컨테이너에 맞지 않을 때 대체 위치를 정의할 수 있습니다. 요소가 오버플로되면 브라우저는 자동으로 다음 대체 위치를 선택하여 완전히 표시되고 기능적인 상태를 유지합니다. position-try-fallbacks 속성은 브라우저가 시도할 여러 대체 위치를 정의하는 데 사용할 수 있습니다. 이전에는 뷰포트가 변경될 때마다 상황이 진행되고 있는지 확인하는 리스너를 실행하여 이 작업을 수행했습니다.

이제 오버플로 조건을 확인하기 위해 사용자 정의 로직을 작성할 필요가 없으므로 드롭다운, 툴팁 등으로 작업하는 동안 많은 골치 아픈 문제를 방지할 수 있습니다.

데모

다음은 위의 CSS 속성을 사용하여 작성한 코드의 간단한 데모입니다.

끔찍해 보이는 탐색 모음의 하위 메뉴는 뷰 포트의 너비에 따라 위치가 변경됩니다.

코드는 React로 작성되었습니다. 이전에는 이 작업을 수행하려면 효과를 사용해야 했습니다. 결과적으로 하위 메뉴 요소가 뷰포트 경계를 넘어가는지 확인했을 것입니다. 그렇다면 하위 메뉴의 스타일을 업데이트하기 위해 또 다른 재렌더링을 실행했을 것입니다. useEffect는 페인트 후에 실행되고 사용자가 잘못된 위치에 있는 하위 메뉴를 보는 것을 원하지 않기 때문에 이를 위해 useLayoutEffect를 사용해야 했습니다.

이제 해야 할 일은 다음과 같은 CSS를 작성하는 것뿐입니다.

.button-anchor {
  anchor-name: --anchorButton;
}

@position-try --bottom {
  position-area: bottom;
}

.menu-list {
  position-anchor: --anchorButton;
  border: 1px solid #000;
  font-family: sans-serif;
  width: 60px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  padding: 8px;
  position: fixed;
  position-area: right span-y-end;
  position-try-fallbacks: --bottom;
}

@position-try - --bottom이라는 규칙을 생성합니다.
앵커 이름 - 버튼을 앵커 요소로 설정합니다.
position-anchor - 메뉴 목록에서 --anchorButton을 앵커 요소로 사용할 수 있습니다.
position-try-fallbacks - 시도할 여러 대체 항목을 나열하는 데 도움이 됩니다. 이는 --bottom이 실패하더라도 더 많은 위치가 있을 수 있음을 의미합니다.

요약

Anchor CSS가 개발자를 위한 몇 가지 매우 흥미로운 사용 사례를 해결했습니다. 위의 내용 외에도 테더 위치 지정이 매우 쉬워집니다. 모든 것이 순전히 CSS이므로 성능도 뛰어납니다. 현재 브라우저 지원은 좋지 않지만 곧 더 많은 채택이 이루어지길 바랍니다.

위 내용은 CSS의 새로운 @position-try의 편리함의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!