:has() 의사 클래스가 CSS에서 JavaScript 해킹의 필요성을 제거하는 방법

자식을 기반으로 상위 요소의 스타일을 지정해야 했고 결국 간단한 클래스를 추가하기 위해 수많은 JavaScript를 작성했던 시절을 기억하시나요? 글쎄, 그 시절은 마침내 우리 뒤에 있습니다! CSS :has() 의사 클래스를 사용하면 모든 곳의 프런트엔드 개발자를 위한 판도를 바꿀 수 있습니다.

:has()에 대한 모든 소란은 무엇입니까?

:has()를 CSS 수정구슬이라고 생각하세요. 이를 통해 요소 내부를 살펴보고 요소에 포함된 내용을 확인할 수 있습니다. 내부에 이미지가 있는 div의 스타일을 다르게 지정하고 싶으십니까? div:has(> img)를 작성하는 것만큼 간단합니다. JavaScript가 필요하지 않습니다!

/* This targets any div that contains an image */
div:has(img) {
  padding: 1rem;
  background: #f5f5f5;
}

/* This one's more specific - only direct children */
div:has(> img) {
  border: 2px solid #ddd;
}

현재 대부분의 최신 브라우저는 :has()를 지원하지만 Internet Explorer 사용자(여전히 지원이 필요한 경우)에는 대체 기능이 필요합니다. 하지만 그렇다고 해서 멈추지 마세요. 점진적인 향상이 바로 여러분의 친구입니다!

오래된 방식과 새로운 매력

우리를 미치게 만들었던 몇 가지 일반적인 시나리오에 대해 이야기해 보겠습니다. 기억하시나요?

양식 필드 유효성 검사 댄스

기존 방식:

const formGroup = document.querySelector('.form-group');
const input = formGroup.querySelector('input');

input.addEventListener('invalid', () => {
  formGroup.classList.add('has-error');
});

새로운 방식:

.form-group:has(input:invalid) {
  border-color: red;
  background: #fff8f8;
}

더 이상 이벤트 리스너나 클래스 전환이 필요하지 않습니다. 순수하고 선언적인 CSS만 있으면 됩니다. 정말 아름답지 않나요?

드롭다운 메뉴 변신

우리 모두는 메뉴가 열려 있을 때 드롭다운 컨테이너의 스타일을 지정하려고 시도한 적이 있습니다. 이전에는 클래스를 DOM 트리 위아래로 전환하려면 JavaScript가 필요했습니다.

기존 JavaScript 접근 방식:

const dropdown = document.querySelector('.dropdown');
const menu = dropdown.querySelector('.menu');

menu.addEventListener('click', () => {
  dropdown.classList.toggle('is-open');
});

새로운 CSS 접근 방식:

.dropdown:has(.menu:focus-within) {
  background: #f0f0f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

:has()를 이용한 실제 마술 트릭

:has()가 실제로 빛나는 몇 가지 실제 예를 살펴보겠습니다.

1. 스마트 이미지 갤러리

갤러리가 포함된 콘텐츠 유형에 따라 레이아웃을 조정하길 원하시나요? 쉽사리!

.gallery:has(img) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery:has(video) {
  display: flex;
  flex-direction: column;
}

Medium 기사 링크를 참조, 인용 또는 영감 소스로 사용하여 새 기사에 통합할 수 있습니다. 효과적으로 포함할 수 있는 방법은 다음과 같습니다.

대화형 양식, 드롭다운 메뉴, 형제 상태 관리는 이제 CSS가 주도하는 몇 가지 예에 불과합니다. 이 통찰력 있는 Medium 글에서 언급했듯이 :has()와 같은 최신 기술을 사용하면 CSS가 JavaScript에 의존하지 않고 이러한 작업을 직접 관리할 수 있습니다.

2. 양식 필드 종속성

체크박스를 선택할 때 전체 섹션을 강조표시해야 합니까? 문제없습니다!

.section:has(input[type="checkbox"]:checked) {
  background: #e8f4ff;
  padding: 1rem;
  border-radius: 4px;
}

3. 빈 상태 처리

컨테이너가 비어 있을 때 메시지를 표시하고 싶으십니까? :has()가 여러분을 도와드립니다:

/* This targets any div that contains an image */
div:has(img) {
  padding: 1rem;
  background: #f5f5f5;
}

/* This one's more specific - only direct children */
div:has(> img) {
  border: 2px solid #ddd;
}

성능 승리

JavaScript 대신 :has()를 사용하면 다음과 같은 이점이 있습니다. 단순히 코드를 적게 작성하는 것만이 아닙니다. 귀하의 페이지는 실제로 다음과 같은 이유로 더 나은 성과를 낼 것입니다.

1. 브라우저의 스타일 엔진이 모든 작업을 기본적으로 처리합니다
2. 자바스크립트 실행 오버헤드 없음
3. 지속적인 클래스 추가/제거로 인한 레이아웃 스래싱 없음
4. 페이지를 가득 채우는 이벤트 리스너 수가 감소했습니다

모범 사례 및 문제점

:has()는 훌륭하지만 명심해야 할 몇 가지 사항이 있습니다.

1. 간단하게
   복잡한 선택기를 너무 많이 사용하지 마세요. div:has(>span:has(>img)):has(p)를 쓸 수 있다고 해서 꼭 그래야 한다는 뜻은 아닙니다!

2. 점진적 개선
   :has():
   를 지원하지 않는 브라우저에 대해서는 항상 합리적인 대체 조치를 취하세요.

const formGroup = document.querySelector('.form-group');
const input = formGroup.querySelector('input');

input.addEventListener('invalid', () => {
  formGroup.classList.add('has-error');
});

1. 성능 고려 사항 :has()는 일반적으로 성능이 뛰어나지만 매우 복잡한 선택기는 여전히 렌더링에 영향을 줄 수 있습니다. 광범위하게 사용하는 경우 DevTools 성능 패널을 주의 깊게 살펴보세요.

마무리

:has() 의사 클래스는 단순한 새로운 CSS 기능 그 이상입니다. 이는 스타일시트에서 부모-자식 관계를 처리하는 방법의 패러다임 전환입니다. 이는 유지 관리하기 쉬운 코드를 작성하고 성능을 향상시키는 데 도움이 되며 가장 중요한 것은 CSS가 CSS가 가장 잘 수행할 수 있는 작업, 즉 선언적으로 스타일을 처리할 수 있게 해준다는 것입니다.

다음번에 상위 요소의 클래스를 전환하기 위해 JavaScript를 사용할 때 :has()를 사용하면 더 간단하고 우아한 솔루션이 있을 수 있다는 점을 기억하세요. 한 번 시도해 보세요. 귀하의 코드(및 사용자)가 감사할 것입니다!

브라우저 지원이 훌륭하고 점점 좋아지고 있지만 항상 caniuse.com에서 최신 호환성 정보를 확인하세요. 그리고 실험하는 것을 두려워하지 마세요. 그것이 우리 모두가 개발자로서 배우고 성장하는 방법입니다!

위 내용은 :has() 의사 클래스가 CSS에서 JavaScript 해킹의 필요성을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!