:has() 우수사례

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

CSS에는 웹 UI에 따라 상위 요소를 직접 선택할 수 있는 방법이 살펴보겠습니다 수년 동안 개발자들의 가장 큰 요청이었습니다. 이 이제 모든 주요 브라우저에서 지원되는 :has() 선택기로 이 문제를 해결할 수 있습니다. 전 :has(): 긴 선택기를 체이닝하거나 후크 스타일을 지정하는 클래스를 추가하는 경우가 많습니다. 진행 중 요소와 하위 요소의 관계에 따라 스타일을 지정할 수 있습니다. 자세히 알아보기 :has() 선택기 정보 CSS 래핑 2023 및 모든 프런트엔드 개발자가 알아야 하는 5가지 CSS 스니펫

이 선택기는 작은 것처럼 보이지만 수많은 사용 사례를 지원할 수 있습니다. 이 도움말에서는 전자상거래 회사가 Google Ads에서 :has() 선택기.

:has()은(는) 새로 사용 가능한 기준의 일부입니다.

브라우저 지원

  • Chrome: 105 <ph type="x-smartling-placeholder">
  • Edge: 105. <ph type="x-smartling-placeholder">
  • Firefox: 121 <ph type="x-smartling-placeholder">
  • Safari 15.4. <ph type="x-smartling-placeholder">

소스

이 도움말이 속한 전체 시리즈에서 그 방법을 알아보세요. 전자상거래 회사들은 새로운 CSS 및 UI 기능을 사용하여 웹사이트를 향상시켰습니다.

정책바자

:has() 선택기로 JavaScript 기반 유효성 검사를 없앨 수 있었습니다. 잘 작동하는 CSS 솔루션으로 교체합니다. 매끄럽게 원활하게 전환할 수 있도록 지원하고자 합니다.—아만 소니, Policybazaar 기술 책임자

Policybazaar의 투자팀은 :has() 선택기를 영리하게 적용하여 요금제를 비교하는 사용자에게 시각적으로 명확하게 표시됩니다. 다음 이미지 비교 UI 내에 두 가지 유형의 계획 (노란색과 파란색)이 표시되어 있습니다. 각 요금제 자체 유형과만 비교할 수 있습니다. 사용자가 하나를 선택할 때 :has() 사용 요금제 유형은 다른 요금제 유형을 선택할 수 없습니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
:has()를 구현하여 상위 요소 및 하위 요소의 스타일을 지정합니다. 범주에 구속된 선택 기능을 제공합니다.

코드

:has()를 사용하면 상위 요소와 그 하위 요소의 스타일을 지정할 수 있습니다. 이 다음 코드는 상위 컨테이너에 .disabled-group 클래스가 설정되어 있는지 확인합니다. 이 경우 카드가 비활성화되고 '추가' 모든 포드가 pointer-events를 none로 설정하여 클릭에 반응

.plan-group-container:has(.disabled-group) {
  opacity: 0.5;
  filter: grayscale(100%);
}

.plan-group-container:has(.disabled-section) .button {
  pointer-events: none;
  border-color: #B5B5B5;
  color: var(--text-primary-38-color);
  background: var(--input-border-color);
}

Policybazaar의 보건팀은 사용 사례가 있습니다 사용자를 위한 인라인 퀴즈가 있으며 :has()하여 질문 체크박스 상태를 확인하여 질문이 다음과 같았는지 확인합니다. 답변했습니다. 맞으면 다음 질문으로 넘어가기 위한 애니메이션이 적용됩니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
health.policybazaar.com/

코드

요금제 비교 예시에서 :has()를 사용하여 클래스에 대해 자세히 알아보세요. 또한 다음 명령을 사용하여 체크박스와 같은 입력 요소의 상태를 확인할 수 있습니다. :has(input:checked) 퀴즈를 보여주는 시각 자료에서 보라색 배너는 체크박스입니다. 정책바자(Policybazaar)는 질문이 :has(input:checked)를 사용하여 응답하고, 설정된 경우 다음을 사용하여 애니메이션을 트리거합니다. 다음으로 슬라이드하려면 animation: quesSlideOut 0.3s 0.3s linear forwards 있습니다. 다음 코드에서 작동 원리를 참고하세요.

.segment_banner__wrap__questions {
 position: relative;
 animation: quesSlideIn 0.3s linear forwards;
}

.segment_banner__wrap__questions:has(input:checked) {
 animation: quesSlideOut 0.3s 0.3s linear forwards;
}


@keyframes quesSlideIn {
 from {
   transform: translateX(50px);
   opacity: 0;
 }
 to {
   transform: translateX(0px);
   opacity: 1;
 }
}

@keyframes quesSlideOut {
 from {
   transform: translateX(0px);
   opacity: 1;
 }
 to {
   transform: translateX(-50px);
   opacity: 0;
 }
}

Tokopedia

Tokopedia는 :has()를 사용하여 제품 썸네일이 표시되는 경우 오버레이 이미지를 만들었습니다. 에는 동영상이 포함됩니다. 제품 썸네일에 .playIcon 클래스, CSS 오버레이가 추가됩니다. 여기서는 :has() 선택기가 &와 함께 사용됩니다. .thumbnailWrapper 클래스 내에 중첩 선택기를 적용합니다. 적용됩니다 이렇게 하면 더 모듈화되고 읽기 쉬운 CSS가 생성됩니다.

<ph type="x-smartling-placeholder">
</ph> has 선택기 사용 전후의 Tokopedia 페이지 스크린샷
:has() 사용 전후 비교

코드

다음 코드는 CSS 선택자 및 조합자 (& 및 >)를 사용하고 :has()로 중첩하여 썸네일의 스타일을 지정합니다. 지원하지 않는 경우 일반적인 추가 CSS 클래스 규칙이 대체로 사용됩니다. 이 @supports selector(:has(*)) 규칙은 브라우저 지원을 확인하는 데도 사용됩니다. 따라서 전반적인 환경은 브라우저 버전 간에 동일합니다.

export const thumbnailWrapper = css`
  padding: 0;
  margin-right: 7px;
  border: none;
  outline: none;
  background: transparent;

  > div {
    width: 64px;
    height: 64px;
    overflow: hidden;
    cursor: pointer;
    border-color: ;
    position: relative;
    border: 2px solid ${NN0};
    border-radius: 8px;
    transition: border-color 0.25s;

    &.active {
      border-color: ${GN500};
    }

    @supports selector(:has(*)) {
      &:has(.playIcon) {
        &::after {
          content: '';
          display: block;
          background: rgba(0, 0, 0, 0.2);
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }

    & > .playIcon {
      position: absolute;
      top: 25%;
      left: 25%;
      width: 50%;
      height: 50%;
      text-align: center;
      z-index: 1;
    }
  }
`;

:has() 사용 시 고려사항

:has()을 다른 선택기와 결합하여 더 복잡한 조건을 만듭니다. 확인 has() the family selector(가족 선택기)에 몇 가지 예를 보여줍니다.

리소스:

이 시리즈의 다른 기사에서 전자상거래가 어떻게 기업들은 스크롤 기반 전략과 같은 새로운 CSS 및 UI 기능을 사용하여 애니메이션, 뷰 전환, 팝오버 및 컨테이너 쿼리 등이 포함됩니다.