Playgrounds
インタラクティブなWeb技術のデモ集。最新のWeb API、CSS機能、React技術を実際に体験できます。
テキストのコピー・ペースト
クリップボードの読み取り: 読み込めませんでした
クリップボードの書き込み: 読み込めませんでした
画像のコピー・ペースト
ペーストされた画像
権限があれば、外部でコピーした画像も貼り付けられます
基本的なポップオーバー
このポップオーバーはPopover APIによって表示されました。 ESCキーやこのコンテンツの外側のクリック、toggleまたはhideボタンで閉じられます。
ツールチップ・ドロップダウン
Tooltip
Dropdown Menu
このUIの実装はPopover APIを使っていません。
ダイアログの閉じる動作検知
印刷時の色調整デモ
色調整の設定（print-color-adjust）
ブラウザの印刷設定で色調整を正確にするか、ブラウザにお任せするかを選択できます。
現在の設定: ブラウザにお任せ（economy）
スクリーンスリープ防止
SuspenseListによる読み込み制御
<SuspenseList revealOrder="together">
Cache Key: key1
Time: 1500ms
Cache Key: key2
Time: 2000ms
Cache Key: key3
Time: 500ms
Cache Key: key4
Time: 1000ms
CSS数学関数デモ
座標: (-50, 30)
座標の絶対値の和: 80
象限: 第二象限
※absを用いて、座標の絶対値の和が大きいほど要素のサイズを大きくしています。透明度も同じようにしています。
要素のサイズ: transform: scale(calc(1 + (abs(x) + abs(y)) / 200))
透明度: opacity: calc(0.5 + (abs(x) + abs(y)) / 200)
※signを用いて、座標の点の色を変えています。座標の和が正であればhsl(280, 70%, 50%)、負であればhsl(120, 70%, 50%)、0であればhsl(200, 70%, 50%)にしています。
座標の点の色: background-color: 'hsl(calc(sign(var(--x) + var(--y)) * 80 + 200), 70%, 50%)'
基本的なハイライト
知らざるを知らずとなす、これ知るなり
優先度ベースハイライト
Imagination is more important than knowledge
スペリング・文法エラーハイライト
食べれる
スペル・文法エラースタイリング
Check a speling error and an grammar error.