This page is a truly naked, brutalist html quine.

Here’s a fun page coming from secretGeek.net. You don’t normally think “fun” with brutalist minimalism but the CSS trickery that makes it work on this page is certainly that.

The HTML is literally displayed on the page as tags. So, in a sense, the HTML is both the page markup and the content. The design is so minimal (or “naked”) that it’s code leaks through! Very cool.

The page explains the trick, but I’ll paraphrase it here:

• Everything is a block-level element via { display:block; }
• …except for anchors, code, emphasis and strong, which remain inline with a,code,em,strong {display:inline}
• Use ::before and ::after to display the HTML tags as content (e.g. p::before { content: '<p>'})

The page ends with a nice snippet culled from Josh Li’s “58 bytes of css to look great nearly everywhere”:

html {
  max-width: 70ch;
  padding: 2ch;
  margin: auto;
  color: #333;
  font-size: 1.2em;
}

Direct Link to Article — Permalink

---

The post This page is a truly naked, brutalist html quine. appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

source https://secretgeek.github.io/html_wysiwyg/html.html