% CSS: &#s border 모든 요소에 대한 녹아웃 동작 !-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

% CSS: &#s border 모든 요소에 대한 녹아웃 동작 !

Susan Sarandon

Jan 08, 2025 pm 04:09 PM

전설에 따르면, 어떤 HTML 요소에서도 아름다운 필드셋 테두리 녹아웃 효과가 가능할 날이 올 것입니다.

그리고 좋은 소식이 있습니다. Chrome에서는 그 날이 바로 오늘입니다!

필드셋? 전설?

낯설다면 다음은 범례가 있는 필드세트의 테두리 녹아웃 효과입니다.

a picture of two simple fieldset elements with their legend (titles) leaving a gap the width of their text in the fieldset's border _{VanillaHTML에서 약간 수정된 스크린샷의 필드 세트 범례 예}

범례(제목)의 너비는 필드 세트 테두리의 구멍을 자동으로 자릅니다.

기술적으로는

및 어느 곳에서든 일반적으로

를 사용하는 것은 권장되지 않습니다.

외부 없이 필드 세트의 주요 목적은 관련 양식 입력을 의미적으로 그룹화하는 것입니다. 관련 없는 맥락에서 사용하면 의도한 의미에 어긋나며 스크린 리더의 접근성에 부정적인 영향을 미칠 수 있습니다.

어디서나 Fieldset 테두리 범례 녹아웃 동작

이것은 달성하기 쉬운 일이 아니기 때문에 복제하기 쉬운 일에 가깝게 만들기 위해 복잡성을 모두 숨겼습니다.

@ CSS에서 fieldset-legend 유틸리티를 가져옵니다.
래퍼에 fieldset-legend 클래스 추가
--fl-left 속성을 임의의 값(원하는 경우 음수 값도 가능)

그리고 라이브러리는 :first-child를 배치하여 요소 상단의 수직 중앙에 위치하게 하고 그 뒤에 있는 항목을 녹아웃시킵니다!

제목 주위에 간격을 만들려면 원하는 대로 :first-child에 패딩을 추가하세요.

여기서 가장 큰 문제는 일반 텍스트 노드를 fieldset-legend 래퍼에 직접 넣을 수 없다는 것입니다. 텍스트는 자체 요소 내에 중첩되어야 합니다.

또한 기술적으로 fieldset의 테두리 녹아웃은 위와 같이 범례 요소의 맨 아래로 가라앉 배경도 잘리지 않습니다.

국경을 통과하여 가라앉는 녹아웃을 선호하는 경우 추가 --fl-sink 속성을 사용하여 테두리 너비와 동일하게 설정하세요.

다른 기능도 있나요?

그렇습니다!

--fl-왼쪽 대안

--fl-left 대신 --fl-center를 사용할 수 있습니다.
--fl-center를 0px로 설정하면 제목이 상단 가장자리를 따라 수평 중앙에 배치됩니다.
-10px로 설정하면 중심에서 왼쪽으로 10px만큼 오프셋됩니다.
15px로 설정하면 중앙에서 오른쪽으로 15px만큼 이동합니다.

--fl-left 또는 --fl-center 대신 예상 동작에 --fl-right를 사용할 수도 있습니다.

이 세 가지는 모두 양수, 0px 또는 음수일 수 있습니다.

제목:첫 번째 자녀 대안

fieldset-legend 컨테이너 내부의 제목 앞에 스크린리더 전용 페이지 점프와 같은 다른 요소를 배치하는 것이 중요할 수 있습니다.

fieldset-legend 요소의 직계 자손 중 하나에 fieldset-legend-title 클래스를 배치하면 라이브러리가 해당 요소를 원하는 것과 동일한 상단 위치로 올리고 :first-child는 그대로 둡니다.

fieldset-legend는 ::before 의사를 사용합니다.

대신 ::after 가상을 사용하도록 할 수 있습니다. 클래스 이름을 fieldset-legend에서 fieldset-legend-after로 변경하면 됩니다

fieldset-legend 의사가 없나요?

고급 사용법이지만...

삽입 가능: 0px; 래퍼 내부의 요소를 원하는 대로 사용자 정의하고 fieldset-legend 또는 fieldset-legend-after 대신 fieldset-legend-custom을 사용하세요.

이렇게 하면 라이브러리의 모든 클리핑이 삭제되고 fieldset-legend-custom 요소 내부 어디에서나 사용할 수 있는 사용자 정의 마스크가 제공됩니다.

예를 들어, 좋아하는 SF 쉐이핑 라이브러리인 Augmented-ui와 함께 사용하려는 경우:

대체 동작

이 유틸리티를 사용하는 데 필요한 제한적인 기능 지원은 타임라인 범위입니다.

컨테이너 스타일 쿼리도 필요합니다.

Chrome이 아닌 브라우저에서 본 기사의 첫 번째 데모는 다음과 같습니다.

picture of the fallback behavior as described below

비정적 위치 및 격리와 같은 차이를 최소화하기 위해 동일한 기계적 스타일을 적용합니다. 하지만 가장 주목할만한 점은 제목을 다시 인라인으로 이동하고 두 가지 중요한 작업을 수행한다는 것입니다.

제목 색상은 currentColor가 됩니다. 제목 뒤의 콘텐츠는 본문에서 fieldset-legend 컨테이너 내부로 전환되며 배경이 매우 다를 수 있습니다. currentColor를 사용하면 not-a-fieldset의 나머지 콘텐츠가 이미 적절하게 설정되어 있기 때문에 콘텐츠를 읽을 수 있습니다.
같은 맥락에서 제목 요소에 이미 자체 배경이 있는지 알 수 없으므로(만약 그렇다면 테두리 위에 배치하는 데 이 유틸리티가 필요하지 않음) 배경이 강제로 투명하게 됩니다. 대부분의 경우 이미 읽을 수 있는 fieldset-legend의 배경에서 currentColor를 보장합니다.

특정 대체 동작을 결정하려면 다음을 설정할 수 있습니다.
--fl-fallback-title-color 및 --fl-fallback-title-Background는 currentColor 대신 사용되거나 지원 없이 어딘가에 렌더링되는 경우 투명하게 사용됩니다.

fieldset-legend를 지원하지 않는 브라우저에서 위의 사용자 정의 데모는 다음과 같습니다.

picture of the fallback behaviors as described above