「スイッチ」は、Web上のかなり一般的なデザインパターンです。それはほとんどチェックボックスです。実際、HTMLフードの下では、それは本当に またはおそらくa たった2つ S（または3分の1が不確定な状態がある場合）。
しかし、残念ながら、Webは私たちに原始的なものを与えません ルックス 特にスイッチのように、ある種のノブが何らかの方法でひっくり返されます。したがって、CSSを使用します。たとえば、チェックボックスを何らかの形で非表示にして、まだ発見可能なクリック可能な領域があることを確認し、次に :checked セレクター、スイッチのように見えるものをスタイルします。
たとえば、何らかのアプリのオフで電子メール通知設定を切り替えるためにそれを使用することを想像できると確信しています。ここでは、ペンのプライバシーを切り替えるなど、Codepenでそれらをかなり使用します。または、トグルを使用して、ダークモードとライトモードの間にサイトを切り替えることができます。
それといえば、Aleksandr Hovhannisyanは持っています しっかりした記事 ダークモードのトグルの闘争について。あなたはそれがかなり簡単だと思うでしょうが、それは本当にそうではありません。ユーザーは、サイトレベルの好みに加えてシステムレベルの好みを持っていることを考えてください。また、適切な順序でそれらを尊重する必要があります。さらに、コントロールを適切に設定する必要があります。また、実際には、それに応じてサイトのスタイルを設定する必要があります。理想的には、間違った色を一時的に点滅させることはありません。 （おなら）。 Aleksandrはそれをうまくやっており、同様に良い仕事をした他の投稿にリンクしています。それは常にあなたが望むよりもはるかに多くのコードであり、私はブラウザーや標準がより多くの関与する可能性があると考えるように導きますが、私は彼らが何をすべきかについて完璧なアイデアを持っていないことも認めています。 Chromeは一緒に遊んでいます オートダークモード、しかし、その裁判がどのように進んだかは明らかではありません。 （そしてダークモードについて言えば、 このギャラリー かなりうまくできています。）
とにかく、私はスイッチについて話そうとしていました！
見た ジェン・シモンズのメモ そのサファリはネイティブスイッチで遊んでいます。これがHTMLです：
ニース。
そして、これがデフォルトでどのように見えますか：
そこには大きな驚きはありません！それはネイティブのiOSトグルが生き返ることです。それは尊敬しています accent-color 他のフォームコントロールのようなCSSでは、これは素晴らしいです。しかし、より良いことに、それは本当に賢明な擬似要素をつかんでスタイルとすることができます。あなたは得ます ::thumb そして ::track 要素（素敵なクリアネーミング）プラス ::before そして ::after 要素自体に取り組むので、多くの可能性があります。
.custom-switch { }
.custom-switch::thumb { }
.custom-switch::track { }
.custom-switch:checked::thumb { }
.custom-switch:checked::track { }
.custom-switch::checked::after { }
.custom-switch::checked::before { }ティム・ヌグエン デモがあります それは、読みやすいCSSで可能性を誇示するのに良い仕事をします。
私にとってこの種のことを提供するブラウザの最大の部分は、今ではアクセシビリティを廃止することを心配する必要がないことです。さて、フォームのラベル付きチェックボックスの通常のHTML構造に従う限り、あなたは良いです。元のチェックボックスを隠していた方法について心配する必要はありません。ただし、視覚的に制御しているので、チェックされた値と未確認の値がチェックされたチェックボックスまたはチェックされていないチェックボックスと同じくらい明確であることを確認するように注意してください。
Be the first to comment
