想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
Post on:2024年2月1日
sponsors
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。
そんなスイッチがHTMLだけで実装できるようになります。
Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。
switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。
スイッチUIを実装するHTMLは、下記の通りです。
|
1 |
<input type="checkbox" switch> |
チェックボックスなので、accent-colorでカラーを変更したり、checkedでチェック状態にすることもできます。サイズはscale()で縮小拡大はできますが、幅だけ変更とかはできません。
|
1 2 3 |
input[type="checkbox"][switch] { accent-color: blue; } |
accent-colorプロパティについて詳しくは、下記をご覧ください。
実際の動作は、デモページをご覧ください。
※2024年1月現在、Safari TP 185+でスイッチが表示されます。その他のブラウザでは普通のチェックボックスが表示されるだけです。
See the Pen
<input type="checkbox" switch> by coliss (@coliss)
on CodePen.
Safari TPをインストールしていない人用に、ブラウザで表示するとこんな感じです。
sponsors
