구 Edge의 장점을 발견했다 www
<select>
요소에 Tab
키를 사용해 포커스했을 때에 알 수 있다.무려, CSS의
outline
를 0
로 해도, 반드시 포커스 한 요소의 내용을 파랑 칠해 주므로, 포커스하고 있는 것이 알기 쉬운 것이다.크로노 드라이브의 HTML 사전의 샘플 을 구 Edge에서 열어 보면…
이것은 IE의 표시를 인수하고 있습니다. 기술적 부채의 대표격이라고 할 수 있는 IE이지만, 이것은 GJ.
이곳은 Chrome. 깨끗한 흰색이겠지. 거짓말 같아. 초점을 맞추고 있습니다. 이것으로. 또한 내용이 같은 신생 Edge도 마찬가지. 퇴화하고 있어.
Firefox는 죄송합니다. 구 Edge에 비하면 쇼보입니다. 이해하기 어렵다.
아는 Mac을 빌려 Safari를 보았지만 역시 포커스가 없다.
뭐야? 접근성을 감안할 때, 구 Edge (및 IE)는 매우 훌륭하지 않습니까? 간신히 다음 점이 인기가 없다 (하지만 나는 좋아) Firefox. 뭐,
outline
를 지워야 하는 이야기인데.다른 브라우저에서도 이 거동을 재현해 본다
<select>
의 내용이 파랗게 칠해져 있고, 보기 쉬운 구 Edge의 포커스를 CSS로 재현해 보면…
select_color_blue.cssselect: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 .
select:focus {
color: white !important;
background-color: dodgerblue !important;
}
select:focus option {
color: black !important;
background: white !important;
}
원래, 봐 주시는 것이 멋져도 사용성이 나쁘면 악인상이다. 좋은 아이 모두는 dodgerblue
의 dodgerblue
를 덮어쓰지 말아라. 게다가 이번 파란색 배경을 채용하면 더욱 유저에게 편해진다. 마우스를 움직일 수없는 사람뿐만 아니라 마우스를 만지는 것이 어두운 사람도있다 (액세서빌러티는 생강을 가진 사람에 대한 특별한 배려에 머무르지 않는다) 것을 잊지 않도록 해주세요. 오빠와의 약속이야!
Reference
이 문제에 관하여(구 Edge의 장점을 발견했다 www), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/NagayamaToshiaki/items/c675e0c50f3eecf18e0e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)