CSSとの時間旅行：ターゲット

わかりました、どうやってそれを行うのですか？ ある意味では、私たちはCSSをまったく割れているのではなく、CSSを神の意志として使用しています。 「スマート」は、HTMLが生成される方法にあります。これは、Tic-Toeマルチバースのすべての可能な状態を含む「あなた自身の冒険を選ぶ」本のようなもので、空の正方形がコンピューターの最良の次の動きにつながっています。

Rubyに実装されたMinimaxアルゴリズムのバリアントを使用して生成します。 CodepenがHaml（Ruby Blocksをサポート）をサポートしていることをご存知ですか、Rubyの遊び場として密かに使用できますか？今、あなたは知っています。

驚くほどシンプルなCSSだけで、

クラスを追加します。これにより、コンピューターの最新の動きで手書きアニメーションのみをトリガーします。これにより、私たちはボードでゲームをしているように感じます。実際には、ドキュメントのさまざまな部分の間でジャンプしています。

<div>
  <svg><circle></circle></svg><a href="//m.sbmmt.com/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

  <svg><circle></circle></svg><svg><circle></circle></svg><div></div>

  <a href="//m.sbmmt.com/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="//m.sbmmt.com/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="//m.sbmmt.com/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="//m.sbmmt.com/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

空の正方形をクリックしてジャンプリンクを選択すると、:targetpseudoクラスに更新されたゲームステータス（.s）が表示され、コンピューターに設定された事前に計算された応答がアニメーション化されています（.c）が表示されます。

ゲームを開始するときの特別な状況に注意してください：ユーザーがジャンプリンクを選択する前に、最初の空のグリッドを表示する必要があります。 スタイルのコンテンツは最初に設定されていないため、ジャンプリンクが選択されると、:targetセレクターを使用して初期状態を非表示にします。同様に、:body:has(:target) #---------を使用して実験を作成する場合、ユーザーがページとの対話を開始する前に、最初のビューをレンダリングする必要があります。 :target

を使用する興味深いものはありますか？そうだと思います。なぜなら：:target

• CSSでゲームを保存できます！ 残して返品したステータスブックマークを使用して、いつでもURLにアクセスします。
• ブラウザの「バック」および「フォワード」ボタンをゲームコントロールとして使用できます。 動きは、戻ることで取り消すことができます。 Braidの伝統の中でタイムトラベルメカニッ​​クとゲームを作成するために、をチェックボックスのトリックと組み合わせることを想像してください。 :target
• ゲームのステータスを共有します。 これには、ワードルのような見せびらかしの権利を獲得する可能性があります。 Invincible CSS TIC TOEアルゴリズムに勝つか、描画することができれば、URLを共有することで世界に成果を示すことができます。
• 完全にセマンティックなHTMLです。 チェックボックスのトリックでは、チェックボックスまたはラジオボタンを非表示にする必要があるため、アクセシビリティに関しては常にスキルと痛みを伴う掘り出し物です。この方法には間違いなくトリックがありません。なぜなら、ジャンプリンクとDIVとそのスタイルを使用しているからです。これは、より簡単なアクセスエクスペリエンスを提供するために、「簡単に言う」とさえするかもしれません。しかし、それは箱から出して簡単にアクセスできると言っているわけではありません。