구 Edge의 장점을 발견했다 www

3602 단어 HTMLCSS접근성
Chromium을 도입함으로써, 지금까지의 매운 맛이 일신되고 부활을 훌륭하게 했다 Edge. 그러나, 과거의 EdgeHTML판 Edge(이후 구 Edge)에도 좋은 부분은 있다. 그것은 <select> 요소에 Tab 키를 사용해 포커스했을 때에 알 수 있다.
무려, CSS의 outline0 로 해도, 반드시 포커스 한 요소의 내용을 파랑 칠해 주므로, 포커스하고 있는 것이 알기 쉬운 것이다.

크로노 드라이브의 HTML 사전의 샘플 을 구 Edge에서 열어 보면…


이것은 IE의 표시를 인수하고 있습니다. 기술적 부채의 대표격이라고 할 수 있는 IE이지만, 이것은 GJ.


이곳은 Chrome. 깨끗한 흰색이겠지. 거짓말 같아. 초점을 맞추고 있습니다. 이것으로. 또한 내용이 같은 신생 Edge도 마찬가지. 퇴화하고 있어.


Firefox는 죄송합니다. 구 Edge에 비하면 쇼보입니다. 이해하기 어렵다.


아는 Mac을 빌려 Safari를 보았지만 역시 포커스가 없다.

뭐야? 접근성을 감안할 때, 구 Edge (및 IE)는 매우 훌륭하지 않습니까? 간신히 다음 점이 인기가 없다 (하지만 나는 좋아) Firefox. 뭐, outline 를 지워야 하는 이야기인데.

다른 브라우저에서도 이 거동을 재현해 본다


<select> 의 내용이 파랗게 칠해져 있고, 보기 쉬운 구 Edge의 포커스를 CSS로 재현해 보면…

select_color_blue.css
select:focus {
    color: white !important;
    background-color: dodgerblue !important;
}
select:focus option {
    color: black !important;
    background: white !important;
}

이제 Chrome에서도 select를 선택한다는 것을 알 수 있습니다. 덧붙여서 focus 포커스 한 <option> 의 색은 브라우저로 정해져 있어, Chrome, 구 Edge, IE는 dodgerblue 회색이다.

See the Pen Chrome에서도 구 Edge 스타일 select by Nagayama Toshiaki ( @ 나가야마 토시 아키 )
on CodePen .


원래, 봐 주시는 것이 멋져도 사용성이 나쁘면 악인상이다. 좋은 아이 모두는 dodgerbluedodgerblue를 덮어쓰지 말아라. 게다가 이번 파란색 배경을 채용하면 더욱 유저에게 편해진다. 마우스를 움직일 수없는 사람뿐만 아니라 마우스를 만지는 것이 어두운 사람도있다 (액세서빌러티는 생강을 가진 사람에 대한 특별한 배려에 머무르지 않는다) 것을 잊지 않도록 해주세요. 오빠와의 약속이야!


좋은 웹페이지 즐겨찾기