XNUMXD덴탈의 :has()
의사 클래스 제가 가장 좋아하는 새로운 CSS 기능입니다. 나는 그것이 적어도 많은 당신들에게도 그러하다는 것을 압니다. CSS 상태 설문조사에 참여하신 분들. 셀렉터를 거꾸로 쓰는 능력은 내가 가능하다고 생각하지 못했던 더 많은 초능력을 우리에게 줍니다.
내가 "더 많은 초능력"이라고 말한 이유는 다음과 같이 매우 똑똑한 사람들이 발표한 정말 놀랍고 영리한 아이디어가 엄청나게 많기 때문입니다.
이 문서는 최종 가이드가 아닙니다. :has()
. 또한 이미 말한 것을 역류시키려는 것도 아닙니다. 나야(hi 👋) 내가 가장 많이 사용할 수 있는 몇 가지 방법을 공유하기 위해 잠시 시류에 편승했습니다. :has()
내 일상 업무에서… 즉, Firefox에서 공식적으로 지원되면 임박한.
그런 일이 발생하면 내가 사용하기 시작할 것이라고 장담할 수 있습니다. :has()
모든 곳에. 다음은 제가 최근에 구축한 몇 가지 실제 사례입니다. :has()
완벽하게 지원됩니다.”
JavaScript 구성 요소 외부에 도달하지 않아도 됩니다.
때때로 페이지의 다른 곳에서 스타일에 영향을 주어야 하는 대화형 구성 요소를 구축한 적이 있습니까? 다음 예를 들어 보십시오. 여기서 <nav>
하는 메가 메뉴, 그것을 열면 색상이 변경됩니다. <header>
그 위에 내용.
이런거 해야될거같은데 all the time.
이 특정 예는 사이트용으로 만든 React 구성 요소입니다. 페이지의 React 부분을 "외부로 도달"해야 했습니다. document.querySelector(...)
에서 수업을 토글합니다. <body>
, <header>
, 또는 다른 구성 요소. 그것이 세상의 끝은 아니지만 약간 엉뚱한 느낌이 듭니다. 완전한 React 사이트(예: Next.js 사이트)에서도 menuIsOpen
구성 요소 트리에서 훨씬 더 높은 상태를 유지하거나 동일한 DOM 요소 선택을 수행합니다. 이는 React-y가 아닙니다.
와 :has()
, 문제가 사라집니다.
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
더 이상 내 JavaScript 구성 요소에서 DOM의 다른 부분을 만지작거리지 않아도 됩니다!
더 나은 테이블 스트라이핑 UX
테이블에 대체 행 "스트라이프"를 추가하면 멋진 UX 개선이 될 수 있습니다. 테이블을 스캔할 때 눈이 어느 행에 있는지 추적하는 데 도움이 됩니다.
그러나 내 경험상 이것은 행이 두세 개뿐인 테이블에서는 잘 작동하지 않습니다. 예를 들어 XNUMX개의 행이 있는 테이블이 있는 경우 <tbody>
모든 "짝수" 행을 "스트라이핑"하면 하나의 스트라이프만 남을 수 있습니다. 그것은 실제로 패턴의 가치가 없으며 사용자가 강조 표시된 행에 대해 무엇이 그렇게 특별한지 궁금해 할 수 있습니다.
이 기술을 사용하여 브라무스는 :has()
자식 수에 따라 스타일 적용, 예를 들어 XNUMX개 이상의 행이 있을 때 tble 스트라이프를 적용할 수 있습니다.
무엇을 더 좋아할까요? 테이블에 최소한 특정 수의 열이 있는 경우에만 이 작업을 수행하도록 결정할 수도 있습니다.
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
템플릿에서 조건부 클래스 논리 제거
페이지 내용에 따라 페이지 레이아웃을 변경해야 하는 경우가 많습니다. 사이드바가 있는지 여부에 따라 기본 콘텐츠의 배치가 그리드 영역을 변경하는 다음 그리드 레이아웃을 사용하십시오.
이는 CMS에 설정된 형제 페이지가 있는지 여부에 따라 달라질 수 있습니다. 일반적으로 조건부로 추가할 템플릿 논리를 사용하여 이 작업을 수행합니다. BEM 수정자 클래스 두 레이아웃을 모두 고려하기 위해 레이아웃 래퍼에. 해당 CSS는 다음과 같을 수 있습니다(간결성을 위해 응답 규칙 및 기타 항목 생략).
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
물론 CSS 측면에서는 괜찮습니다. 그러나 그것은 템플릿 코드를 약간 지저분하게 만듭니다. 템플릿 언어에 따라 많은 클래스를 조건부로 추가하는 것이 매우 추해질 수 있습니다. 특히 많은 자식 요소를 사용하여 이 작업을 수행해야 하는 경우 더욱 그렇습니다.
그것을 대조 :has()
기반 접근 방식:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
솔직히, 그것은 CSS 측면에서 훨씬 더 나은 것은 아닙니다. 그러나 HTML 템플릿에서 조건부 수정자 클래스를 제거하는 것이 좋습니다.
마이크로 디자인 결정을 생각하기 쉽습니다. :has()
- 이미지가 있는 카드처럼 — 하지만 이러한 매크로 레이아웃 변경에도 정말 유용할 것 같습니다.
더 나은 특이성 관리
당신이 읽는다면 나의 마지막 기사, 당신은 내가 특이성을 고수한다는 것을 알게 될 것입니다. 나처럼 추가할 때 특이성 점수가 날아가는 것을 원하지 않는다면 :has()
및 :not()
스타일 전반에 걸쳐 :where()
.
의 특이성 때문이다. :has()
~에 근거하다 인수 목록에서 가장 구체적인 요소. 따라서 거기에 ID와 같은 것이 있으면 캐스케이드에서 선택기를 재정의하기 어려울 것입니다.
반면에, 미국에서 체류를 연장하고자 이전의 승인을 갱신하려던 특이성 :where()
항상 XNUMX입니다, 특이성 점수에 추가하지 마십시오.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
미래가 밝다
이것들은 프로덕션에서 사용할 수 있기를 기다릴 수 없는 몇 가지에 불과합니다. CSS-Tricks Almanac에도 많은 예제가 있습니다. 당신은 무엇을 기대하고 있습니까 :has()
? 어떤 종류의 실제 사례가 어디에 있습니까? :has()
완벽한 해결책이었을까?
- SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
- 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
- 출처: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- 능력
- 할 수 있는
- 소개
- 위의
- 계정
- 영향을
- All
- 이미
- 항상
- 놀라운
- 및
- 다른
- 신청
- 접근
- 지역
- 논의
- 기사
- 기반으로
- 때문에
- 베팅을
- 더 나은
- 사이에
- 비트
- 취주
- 내장
- 다발
- 얻을 수 있습니다
- 카드
- 폭포
- 어떤
- 이전 단계로 돌아가기
- 변경
- 아이
- 왼쪽 메뉴에서
- 수업
- 수업
- CMS를
- 암호
- 열
- 구성 요소
- 이 포함되어 있습니다
- 함유량
- 수
- 코스
- CSS
- 결정
- 결정적인
- 의존
- 디자인
- 하지 않습니다
- 하기
- DOM
- 말라
- 아래 (down)
- 요소
- 특히
- 등
- 조차
- EVER
- 모든
- 예
- 예
- 경험
- 아이메이크업
- 즐겨찾기
- 특색
- 를
- 끝
- 파이어 폭스
- 수행원
- 앞으로
- 에
- 충분히
- 얻을
- 제공
- 간다
- 가는
- 큰
- 그리드
- 그리드 템플릿 영역
- 안내
- 발생
- 데
- 도움
- 여기에서 지금 확인해 보세요.
- hi
- 더 높은
- 강조
- HTML
- HTTPS
- 악
- 아이디어
- 영상
- 개량
- in
- 대화형
- IT
- 자바 스크립트
- 딱 하나만
- 유지
- 종류
- 알아
- 언어
- 성
- 레이아웃
- 아마도
- 작은
- 보기
- 찾고
- 롯
- 매크로
- 만든
- 본관
- 확인
- 관리
- .
- 수도
- 순간
- 배우기
- 가장
- 모질라
- 필요
- 요구
- 신제품
- 다음 것
- 다음 .js
- 일반적으로
- 번호
- 공무상
- ONE
- 열기
- 기타
- 외부
- 부품
- 특별한
- 부품
- 무늬
- 사람들
- 완전한
- 장소
- 플라톤
- 플라톤 데이터 인텔리전스
- 플라토데이터
- 가능한
- 제시
- 예쁜
- 문제
- 생산
- 출판
- 도달
- 반응
- 읽기
- 현실 세계
- 최근에
- 제거
- 반응
- 열
- 규칙
- 달리기
- 말했다
- 같은
- 주사
- 선택
- 세트
- 공유
- 대지
- 스마트 한
- So
- 해결책
- 일부
- 무언가
- 어딘가에
- 특별한
- 구체적인
- 특성
- 스타트
- 주 정부
- 줄무늬
- 문
- 스타일
- 감독자
- 지원
- 테이블
- 받아
- TD
- 이 템플릿
- XNUMXD덴탈의
- 국가
- 세계
- 맡은 일
- 일
- 생각
- 세
- 도처에
- 에
- 톤
- 너무
- 완전히
- 선로
- 참된
- 위
- us
- 사용
- 사용자
- ux
- 기다리다
- 방법
- 뭐
- 여부
- 어느
- 누구
- 승리
- 궁금해하는
- 작업
- 세계
- 가치
- 겠지
- 쓰다
- 자신의
- 너의
- 제퍼 넷