CSS Properties Memory Test

Remember that HTML Tags Memory Test from before? Šime Vidas recently joked that a similar Memory Test but for CSS Properties should exist.

Of course I couldn’t resist, so here is the CSS Properties Memory Test 🤪


See the Pen CSS Properties Memory Test by Bramus (@bramus) on CodePen.

In total there are 653 properties for you to guess. Good luck! 😅

~

# Behind the scenes

The demo itself is a straight up fork from the aforementioned HTML Tags Memory Test with an adjusted list of items to guess and a small style change to tweak the appearance of the already guessed results.

The list of itself properties was generated from the “Properties and Descriptors” CSS Index. The index lists 705 properties, but I’ve filtered out -webkit-prefixed properties that also exist without such a prefix. The filtered array was eventually converted to a string and base64 encoded to discourage cheating.

// Get all listed properties
const allProps = $$('#properties + div > ul.index > li').map(($li) => $li.textContent.trim().split("\n")[0]); // ~> 705 props

// Filter out -webkit prefixed props that also exist without a prefix
const filteredProps = allProps.filter(prop => !(prop.startsWith('-webkit-') && allProps.includes(prop.replace('-webkit-', '')))); // ~> 650 props

// Base64 encode the whole lot string to discourage cheating ;)
const encodedProps = btoa(filteredProps.join(','));

Note that when decoded again there are 653 properties to guess. That’s because one of the entries lists 4 properties separated by a comma.

~

🔥 Like what you see? Want to stay in the loop? Here's how:

Chrome DevTools Pong – A game to play inside the Chrome DevTools

Move over Chrome Dino Game! Now you can play Pong inside the Chrome DevTools.

Chrome DevTools Pong →

Spoiler: How it works

In case you were wondering: it’s a regular Pong game, but with the elements visually hidden (opacity: 0;) so that they only show up in the DevTools’ Layers Panel.

So simple, that becomes awesome!

Half-Life: Alyx Gameplay Video

Having played and enjoyed the original Half-Life when it first came out (way back in 1998), I must say I’m quite looking forward to “Half-Life: Alyx”:

And oh, don’t be confused about moving-part in the game: shown above is teleport mode. There are two other modes you can use: shift (= smooth zoom, as shown in this video) and continuous (= move using an analogue stick, as shown in this video).

Half-Life: Alyx – VR →

How were the portals in Portal created?

YouTube user DigiDigger shows us how to recreate the portals from Portal. Highly interesting imo.

🤔 What happens when you mix Portal with Super Mario Bros? You get Mari0!

Pure CSS Crossword (CSS Grid)

Nice demo of a pure CSS Crossword Puzzle, built using CSS Grid. Be sure to check out the validation rules too, they’re built using the General Sibling Selector (e.g. ~):

#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-1 {
	opacity: 1;
}

UPDATE 2017.06.22: There’s a blogpost available, describing how this pure CSS crossword puzzle was made.

Pure CSS Crossword – CSS Grid →