Time Travelling CSS With :target

Creating games with CSS, checkboxes and radio button techniques are notorious (or widely known). But it turns out that other elements based on user input can also be cleverly utilized and used for gamification. Developers have created many very cool CSS game cases, which are based on :hover pseudo-category, and even games based on :valid pseudo-category.

However, I found that the :target pseudo-classes seem to be underexplored in this field of CSS skills. After thinking about it, this is an underestimated powerful CSS feature: :target allows us to style any element based on the selected jump link, which means that the browser has a simple version of client routing built-in! Let's become mad scientists and see where it can take us.

Invincible AI in CSS

Did I connect these words together? Should we use CSS frantically until we reach the singularity? Try to defeat the tic toe game in the style sheet below and decide for yourself.

Stylesheets sometimes allow the game to end in a tie, so you have at least a silver lining.

Don't worry! CSS has not become Skynet yet. Like any CSS trick, the rule of thumb to determine whether a game can be implemented with CSS is possible in the number of game states . I realized this when I was able to create a 4×4 Sudoku solver and found that the 9×9 version was nearly impossible to implement. This is because CSS tricks ultimately depend on selectors that respond to user input to hide and display game state.

If X goes first, tic toe has 5478 legal states that can be achieved, and there is a well-known algorithm that can calculate the best movement in any legal state. Therefore, we can fully use CSS to implement tic toe games.

Okay, how to do it?

In a sense, we are not cracking CSS at all, but using CSS as God’s will: hide, show and animate content. "Smart" lies in the way HTML is generated. It's like a "Choose Your Own Adventure" book that contains all possible states in the tic-toe multiverse, with empty squares linking to the best next move of the computer.

We use a variant of the minimax algorithm implemented in Ruby to generate it. Did you know that CodePen supports HAML (supports Ruby blocks), and can we use it secretly as a Ruby playground? Now you know.

Each state generated by our HAML looks like this in HTML:

<div>
  <svg><circle></circle></svg><a href="https://www.php.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

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

  <a href="https://www.php.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

With just a small amount of surprisingly simple CSS, we can use the

selector to display only the currently selected game status. We will also add a :target class to the computer's historical moves - so that we will only trigger handwriting animations in the computer's latest moves. This makes us feel like we are playing games on a board, and in reality, we are jumping between different parts of the document. .c

<div>
  <svg><circle></circle></svg><a href="https://www.php.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

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

  <a href="https://www.php.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

When selecting the jump link by clicking on the empty square, the :target pseudo-class will display the updated game status (.s), and the pre-calculated response set to the computer appears in animated manner (.c).

Please note the special situation when we start the game: Before the user selects any jump link, we need to display the initial empty grid. The content of the style is not set at the beginning, so once the jump link is selected, we use the :target selector to hide the initial state. Similarly, if you create an experiment using :body:has(:target) #---------, you need to render the initial view before the user starts interacting with the page. :target

Summary

I won't go into the depth of why we're going to implement this in CSS, rather than using JavaScript's "easier" approach. This is just a fun and educational way to push the CSS boundaries. For example, we can do this using classic checkbox tricks—in fact, someone has done it.

Is there anything interesting to use

? I think yes, because: :target

• We can save games in CSS! Access the URL at any time with the status bookmark you left and return.
• You can use the "Back" and "Forward" buttons of the browser as game controls. The movement can be undoed by going back, or playback movement by going forward. Imagine combining with checkbox tricks to create a game with a time travel mechanic in Braid's tradition. :target
• Share your game status. This has the potential to gain Wordle-like show-off rights. If you manage to win or draw in the invincible CSS tic toe algorithm, you can show the world your achievements by sharing URLs.
• It is completely semantic HTML. Checkbox tricks require you to hide checkboxes or radio buttons, so it is always a skill and painful bargain when it comes to accessibility. This method is arguably without tricks, because we are just using jump links and divs and their styles. This may even make it — dare I say — “easier” to provide an easier access experience. But that's not to say it's easy to access out of the box.

The above is the detailed content of Time Travelling CSS With :target. For more information, please follow other related articles on the PHP Chinese website!