CSS :has() 의사 클래스는 많은 브라우저에서 출시되고 있습니다. 크롬 및 Safari 이미 완벽하게 지원하고 있습니다. 종종 "상위 선택자"라고 부르기도 합니다. 자식 선택자에서 부모 요소의 스타일을 선택할 수 있기 때문입니다. :has() 우리가 해결하는 데 도움이 될 수 있습니다. 그 중 하나는 우리 중 많은 사람들이 때때로 사용하기 좋아하는 클릭 가능한 카드 패턴을 재창조하는 것입니다.
방법을 살펴보겠습니다. :has() 연결된 카드를 처리하는 데 도움이 될 수 있지만 먼저…
이게 뭐지? :has() 의사 수업?
이미 있습니다 다발 of 큰 게시물 떠다니는 무엇을 설명하는 훌륭한 일을 :has() 이고 그것이 무엇을 위해 사용되는지, 그러나 그것은 우리가 여기에서도 그것에 대해 몇 마디 말해야 할 만큼 충분히 새롭습니다.
:has() 의 일부인 관계형 의사 클래스입니다. W3C 선택자 레벨 4 작업 초안. 이것이 바로 괄호가 의미하는 바입니다. 즉, 특정 하위 요소와 관련되거나 보다 정확하게는 포함하는 일치하는 요소입니다.
/* Matches an article element that contains an image element */
article:has(img) { }
/* Matches an article element with an image contained immediately within it */
article:has(> img) { }따라서 "부모" 선택자라고 부르는 이유를 알 수 있습니다. 그러나 더 구체적으로 만들기 위해 다른 기능적 의사 클래스와 결합할 수도 있습니다. 기사의 스타일을 지정하고 싶다고 가정해 보겠습니다. 지원 모든 이미지를 포함합니다. 의 관계적 힘을 결합할 수 있습니다. :has() 부정의 힘으로 :not() 하기 위해서:
/* Matches an article without images */
article:not(:has(img)) { }그러나 그것은 우리가 힘을 결합하여 더 많은 것을 할 수 있는 방법의 시작일 뿐입니다. :has(). 클릭 가능한 카드 문제를 구체적으로 해결하기 전에 현재 사용하지 않고 접근하는 몇 가지 방법을 살펴보겠습니다. :has().
현재 클릭 가능한 카드를 처리하는 방법
요즘 사람들이 완전히 클릭 가능한 카드를 만드는 방법에는 세 가지 주요 접근 방식이 있으며 이 유사 클래스의 힘을 완전히 이해하려면 약간의 정리가 필요합니다.
"래퍼로서의 링크" 접근법
이 접근법은 꽤 자주 사용되는 것입니다. 나는 이 접근 방식을 사용하지 않지만 이를 시연하기 위해 빠른 데모를 만들었습니다.
여기에는 특히 접근성과 관련하여 많은 우려가 있습니다. 사용자가 다음을 사용하여 웹사이트를 탐색할 때 로터 기능, 그들은 그 안에 전체 텍스트를 듣게 될 것입니다 요소 — 제목, 텍스트 및 링크. 누군가는 그 모든 것을 겪고 싶지 않을 수도 있습니다. 우리는 더 잘할 수 있습니다. HTML5부터는 블록 요소를 요소. 그러나 특히 이런 이유로 나에게는 결코 옳다고 느끼지 않습니다.
장점 :
- 빠른 구현
- 의미상 올바른
단점 :
- 접근성 문제
- 텍스트를 선택할 수 없음
- 기본 링크에서 사용한 스타일을 덮어쓰는 번거로움이 많습니다.
자바스크립트 방법
JavaScript를 사용하여 마크업에 작성하는 대신 카드에 링크를 첨부할 수 있습니다. 이 멋진 CodePen 데모를 찾았습니다. 비용 개발 프로세스에서 카드 텍스트를 선택 가능하게 만든 사람:
이 접근 방식에는 많은 이점이 있습니다. 우리의 링크는 포커스에 액세스할 수 있으며 텍스트를 선택할 수도 있습니다. 그러나 스타일링과 관련하여 몇 가지 단점이 있습니다. 예를 들어 이러한 카드에 애니메이션을 적용하려면 다음을 추가해야 합니다. :hover 우리의 주요 스타일 .card 링크 자체 대신 래퍼. 또한 키보드 탭으로 링크에 포커스가 있을 때 애니메이션의 이점을 얻지 못할 것입니다.
장점 :
- 완벽하게 접근 가능
- 텍스트 선택 기능
단점 :
- 자바스크립트 필요
- 오른쪽 클릭 불가(일부 추가 스크립팅으로 수정 가능)
- 링크에 초점을 맞출 때 작동하지 않는 카드 자체에 많은 스타일이 필요합니다.
XNUMXD덴탈의 ::after 선택기 접근 방식
이 방법을 사용하려면 상대 위치 지정으로 카드를 설정한 다음 링크의 절대 위치 지정을 설정해야 합니다. ::after 링크의 의사 선택자. 이는 JavaScript가 필요하지 않으며 구현하기 매우 쉽습니다.
여기에는 특히 텍스트 선택과 관련하여 몇 가지 단점이 있습니다. 카드 본문에 더 높은 Z-색인을 제공하지 않으면 텍스트를 선택할 수 없지만 선택하는 경우 텍스트를 클릭해도 링크가 활성화되지 않는다는 경고를 받습니다. 선택 가능한 텍스트를 원하는지 여부는 귀하에게 달려 있습니다. UX 문제일 수 있다고 생각하지만 사용 사례에 따라 다릅니다. 텍스트는 여전히 스크린 리더에서 액세스할 수 있지만 이 방법의 주요 문제는 애니메이션 가능성이 부족하다는 것입니다.
장점 :
- 손쉬운 구현
- 부푼 텍스트 없이 액세스 가능한 링크
- 호버 및 포커스에서 작동
단점 :
- 텍스트를 선택할 수 없습니다.
- 가리키고 있는 요소이므로 링크만 애니메이션으로 만들 수 있습니다.
새로운 접근 방식: 사용 ::after 과 :has()
이제 클릭 가능한 카드에 대한 기존 접근 방식을 설정했으므로 :has() 믹스에 이러한 단점의 대부분을 해결합니다.
사실, 이 접근 방식은 우리가 사용한 마지막 접근 방식을 기반으로 합시다. ::after 링크 요소에. 우리는 실제로 사용할 수 있습니다 :has() 접근 방식의 애니메이션 제약을 극복하기 위해 거기에 있습니다.
마크업부터 시작하겠습니다.
Some Heading
Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.
클래스 대신 CSS의 요소를 대상으로 하여 가능한 한 단순하게 유지하겠습니다.
이 데모에서는 호버링 카드에 이미지 확대/축소 및 그림자를 추가하고 링크의 텍스트 색상을 변경하는 동안 팝업 화살표로 링크에 애니메이션을 적용할 것입니다. 이를 쉽게 하기 위해 카드에 범위가 지정된 일부 사용자 지정 속성을 추가할 것입니다. 기본 스타일링은 다음과 같습니다.
/* The card element */
article {
--img-scale: 1.001;
--title-color: black;
--link-icon-translate: -20px;
--link-icon-opacity: 0;
position: relative;
border-radius: 16px;
box-shadow: none;
background: #fff;
transform-origin: center;
transition: all 0.4s ease-in-out;
overflow: hidden;
}
/* The link's ::after pseudo */
article a::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline: 0;
cursor: pointer;
}엄청난! 이미지의 초기 배율을 추가했습니다(--img-scale: 1.001), 카드 제목의 초기 색상(--title-color: black) 및 링크에서 화살표가 튀어 나오도록 하는 데 사용할 몇 가지 추가 속성입니다. 또한 빈 상태를 설정했습니다. box-shadow 나중에 애니메이션화하기 위해 선언합니다. 이제 클릭 가능한 카드에 필요한 것을 설정했으므로 애니메이션을 적용하려는 요소에 사용자 정의 속성을 추가하여 일부 재설정 및 스타일을 추가해 보겠습니다.
article h2 {
margin: 0 0 18px 0;
font-family: "Bebas Neue", cursive;
font-size: 1.9rem;
letter-spacing: 0.06em;
color: var(--title-color);
transition: color 0.3s ease-out;
}
article figure {
margin: 0;
padding: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}
article img {
max-width: 100%;
transform-origin: center;
transform: scale(var(--img-scale));
transition: transform 0.4s ease-in-out;
}
article a {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #28666e;
}
article a:focus {
outline: 1px dotted #28666e;
}
article a .icon {
min-width: 24px;
width: 24px;
height: 24px;
margin-left: 5px;
transform: translateX(var(--link-icon-translate));
opacity: var(--link-icon-opacity);
transition: all 0.3s;
}
.article-body {
padding: 24px;
}사람들에게 친절하고 스크린 리더 클래스 링크 뒤에 숨겨진:
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}우리 카드가 꽤 귀엽게 보이기 시작했습니다. 여기에 약간의 마법을 더할 때입니다. 와 더불어 :has() 가상 클래스를 사용하여 이제 링크가 마우스로 가리키거나 초점이 맞춰져 있는지 확인한 다음 사용자 지정 속성을 업데이트하고 box-shadow. 이 작은 CSS 덩어리로 카드가 실제로 살아납니다.
/* Matches an article element that contains a hover or focus state */
article:has(:hover, :focus) {
--img-scale: 1.1;
--title-color: #28666e;
--link-icon-translate: 0;
--link-icon-opacity: 1;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}거기에 뭐가 있는지 알아? 이제 다음과 같은 경우 업데이트된 스타일을 얻습니다. 어떤 카드의 하위 요소에 마우스를 올리거나 초점을 맞춥니다. 그리고 링크 요소가 호버 또는 포커스 상태를 포함할 수 있는 유일한 항목이지만 ::after 클릭 가능한 카드 접근 방식을 사용하여 상위 요소를 일치시키고 전환을 적용할 수 있습니다.
그리고 거기 당신은 그것을 가지고 있습니다. 에 대한 또 다른 강력한 사용 사례 :has() 선택자. 다른 요소를 인수로 선언하여 부모 요소를 일치시킬 수 있을 뿐만 아니라 의사를 사용하여 부모 요소를 일치시키고 스타일을 지정할 수도 있습니다.
장점 :
- 액세스
- 애니메이션 가능
- 자바 스크립트가 필요하지 않습니다
- 사용
:hover올바른 요소에
단점 :
- 텍스트를 쉽게 선택할 수 없습니다.
- 브라우저 지원은 Chrome 및 Safari로 제한됩니다(플래그 뒤의 Firefox에서 지원됨).
다음은 이 기술을 사용한 데모입니다. 카드 주위에 여분의 포장지가 있는 것을 눈치채셨겠지만, 그건 제가 가지고 놀고 있는 것일 뿐입니다. 컨테이너 쿼리, 이는 모든 주요 브라우저에서 출시되는 다른 환상적인 기능 중 하나일 뿐입니다.
일부있어 다른 예 공유하고 싶습니까? 의견 섹션에서 다른 솔루션이나 아이디어를 환영합니다.
