Tests
It'd be awesome to have a tests/example folder of how each hack is used ala caniemail. That way there is a clear way to know when the hack no longer works and gives people a larger example to learn from.
I agree with this. I think .foo in particular can be confusing for non-CS types (and even then).
Providing larger, more contextual snippets would be easy enough but not quite sure how we could automate testing. 🤔
I think at a minimum there could be a simple HTML example with each CSS targeting technique so the developer knows what they need to add to their HTML. Each technique could have multiple tabs (e.g. CSS and HTML) if applicable.
Reading the targeting technique to Nine still doesn't clearly tell me everything I need to add to my HTML and a simple HTML example would clarify that.
A simple HTML example for Gmail Android could be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div > u + .body .foo {
/* your styles */
}
</style>
</head>
<body class="body">
<div class="foo"></div>
</body>
</html>