반응형
초라한 쇠스랑에 숨이 멎는 순간은 바로 이 현장에서였다. CSS-Tricks v17이 FAT CHONKY BOI와 함께 출시되었을 때, 나는 입이 딱 벌어졌다.
body::-webkit-scrollbar {
/* required - the "base" of the bar - mostly for setting width */
}
body::-webkit-scrollbar-track {
/* the "track" of the bar - great for customizing "background" colors */
}
body::-webkit-scrollbar-thumb {
/* the actual draggable element, the star of the show! */
}
body::-webkit-scrollbar {
/* required - the "base" of the bar - mostly for setting width */
}
body::-webkit-scrollbar-track {
/* the "track" of the bar - great for customizing "background" colors */
}
body::-webkit-scrollbar-thumb {
/* the actual draggable element, the star of the show! */
}
From here, it works like any other selected element, so bring your full bag of single div CSS tricks! Media queries work! Background gradients work! Transparency works! Margins with all manner of CSS units work! (Not everything works… I’d love to style `cursor` on my scrollbars for that authentic GeoCities look). I tried it out on my site with Lea Verou’s stash of CSS background gradients (my stash of stashes is here) and ended up with an atrocious combo of stripy barber pole () for the thumb element and transparent hearts for the track. But it was most definitely mine—so much so that people have taken to calling it the “swyxbar” when I implemented a subtler version at work.
모든 프런트 엔드 개발자들은 적어도 한 번은 이것을 너무 멀리 가져가야 합니다.
위험하게 살아라!
규칙을 어겨라!
사용자 에이전트에 대한 분노!
그리고 사용자의 기대를 저버리는 스크롤 바를 대중 시장 제품(과거 Google Wave가 그랬던 것처럼)에 출하하지 마십시오!
'css' 카테고리의 다른 글
사용자가 아님을 기억하십시오. (0) | 2021.12.29 |
---|---|
텍스트 관리 (0) | 2021.12.29 |
사용자 지정 속성이 있는 CSS 페인트 API의 선호 색상 스키마 (0) | 2021.12.29 |
2021년 가장 좋아하는 Chrome 확장 기능 (0) | 2021.12.29 |
사이트에 서비스 직원 추가 (0) | 2021.12.29 |
댓글