유니코드 별을 사용한 별 등급

당신은 이것을 알지 못했을 수도 있지만 지난주에 여기 Dev에서 그림자 전쟁이 일어났습니다. 그렇게 심각하지는 않지만 소수의 사람들이 html 및 css로 별 등급 구성 요소를 만드는 방법에 대한 게시물을 발표했습니다( 및 필요한 경우 JS), 유일한 규칙은 구성 요소에 액세스할 수 있어야 한다는 것입니다.

지금까지 참여한 기사는 다음과 같습니다.

별 5개 등급 시스템 - 실제로 액세스 가능, JS, WAI-ARIA 및 Semantic HTML 없음! ⭐⭐⭐⭐⭐ [어떤 프레임워크로도 쉽게 변환!]

InHuOfficial ・ 7월 2일 ・ 7분 읽기

#a11y #css #html #webdev

단일 입력을 사용한 별 등급

Mads Stoumann ・ 7월 3일 ・ 3분 읽기

#html #css #javascript #webdev

JS 없이 확장 가능한 "별 등급"(별에 대한 SVG 또는 이미지 없음)

Temani Afif ・ 7월 4일 ・ 4분 읽기

#css #html #webdev #beginners

참여하고 싶다면 이와 유사한 헛된 게시물을 자유롭게 작성하세요. 귀하가 만든 내용을 살펴보고 피드백을 제공하게 되어 기쁩니다.

그래, 내 게시물을 계속하자. 지금까지 언급한 세 가지 버전은 모두 훌륭하지만 모두 CSS를 사용하여 별을 그립니다. 괜찮습니다. 하지만 이미 유니코드에 별이 있습니다!! 우리는 채워진 별(★)을 가지고 있고 그것이 우리가 필요한 전부라고 생각합니다.

접근성이 중요한 이유는 무엇입니까?

웹을 위해 또는 실제로 모든 플랫폼을 위해 무언가를 구축할 때 문제를 해결하는 것이 주요 목표입니다. 그 문제는 대중의 손에 정보를 전달하는 것일 수도 있고 레스토랑 예약 관리와 같은 더 큰 것일 수도 있습니다. 목표는 문제를 해결하는 것이므로 '정상적인' 장원에서 플랫폼에 액세스할 수 없는 사람들을 위해 완전히 새로운 문제를 만드는 것은 좋지 않습니다. 이 때문에 WCAG (Web Content Accessibility Guidelines)은 가능한 한 많은 사람들이 웹을 활용할 수 있도록 만들어졌습니다.

코드

내 HTML은
솔직히 그들의 방법은 내가 현실 세계에서 별점을 매기는 방식과 거의 같았기 때문입니다. 우리가 변화하는 한 곳은 CSS입니다. 제가 언급했듯이 모두가 별을 만들기 위해 svgs와 그래디언트를 사용했지만 우리는 다른 경로를 택할 것이기 때문입니다. 내가 몇 번이고 다시 사용하는 곳은 w3와 별 등급this tutorial입니다.

'별'html

각각의 내 별은 html의 5줄로 구성되어 있으며 입력에는 별이 선택된 '상태'가 포함되어 있고 레이블은 별처럼 보이도록 스타일을 지정할 수 있는 클릭 가능한 영역을 만듭니다. 레이블과 입력이 입력의 ID를 사용하여 연결되어 있음을 알 수 있습니다.

클래스hide-visually와 함께 스팬도 있습니다. 이 클래스는 스크린 리더가 내용을 읽을 수 있도록 하지만 스크린 리더를 사용하지 않는 사람이 내용을 볼 수 없도록 숨깁니다.

<input name="rating" value="1" type="radio" id="rating1">
<label for="rating1">
  <span class="hide-visually">1 Star</span>
  <span aria-hidden="true" class="star">★</span>
</label>

'스타' CSS

hide-visual 클래스는 시력이 있는 사용자에게는 보이지 않지만 여전히 스크린 리더에서 읽을 수 있도록 만드는 데 사용됩니다.

실제 별은 텍스트와 같이 HTML에 직접 기록되지만 CSS를 사용하여 변경할 수 있습니다. 별이 '활성'일 때 기호를 변경하려면 ::before 의사 클래스를 사용할 수 있습니다.

.star-rating>label {
  -webkit-text-stroke: 2px black;
}

.star-rating input:checked~label>span.star,
.star-rating>label:hover~input~label>span.star{
  color: #fff;
}

.star-rating span.star,
.star-rating:hover>input+label>span.star,
.star-rating>input:checked+label>span.star,
.star-rating>input~label:hover>span.star{
  color: gold;
}

.star-rating>input~label:hover>span.star{
  color: orange;
}

합치기

각 별표 세트는 fieldset로 둘러싸여 있어 변경 사항을 더 쉽게 수신할 수 있습니다. 각 입력이 아닌 필드 세트당 변경 사항을 한 번 수신할 수 있습니다.

별점 0개 입력과 레이블도 포함했지만 숨겨져 있습니다. 원하는 경우 0개의 별을 표시하고 이를 누르면 모든 별이 지워진다는 것을 암시하는 명확한 아이콘을 제공할 수 있습니다.

모든 별 레이아웃을 멋지게 만드는 다른 스타일도 있지만 이러한 스타일은 그다지 흥미롭지 않으며 자신의 버전을 만들고 싶다면 변경할 수 있습니다.

결과

유니코드 사용의 즐거움은 별을 지원되는 어떤 모양으로든 교체할 수 있다는 것입니다.

종료

질문이나 피드백은 아래 댓글에 자유롭게 남겨주시고 '전쟁'의 다른 게시물을 확인하세요.

초보자이고 작업 방법을 살펴보는 사람에게 여러 사람이 같은 문제를 자신만의 방식으로 해결하는 이유를 설명하는 것이 도움이 됩니까?

읽어주셔서 감사합니다 🦄❤️🦄🧙‍♂️🧙‍♂️🧠🦄🧙‍♂️🧠🦄