This page is a truly naked, brutalist html quine.

Avatar of Geoff Graham
Geoff Graham on

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 →

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. secretGeek
    Permalink to comment#

    Thanks Css-Tricks, I am very proud to be featured by you.

    Note there is a significant typo in your explanation: a missing asterisk right before the “{ display:block }

    …it’s quite significant as it is the main css-trick!

  2. Denai
    Permalink to comment#

    I see 959 B of CSS on his site.

    • Geoff Graham
      Permalink to comment#

      Were you expecting more or less? The technique in the post is all about using CSS to get the quine effect.

  3. Cinnfhaelidh
    Permalink to comment#

    This is cool!

    I failed to happily scroll past the 28 “offensively repetitive lines”, decided to see if it could be done with fewer:

    *::before {content:'<'var(--name)'>'}
*::after  {content:'</'var(--name)'>'}
* {--name:initial}
html {--name:'html'}
head {--name:'head'}
title {--name:'title'}
body {--name:'body'}
h1 {--name:'h1'}
h2 {--name:'h2'}
p {--name:'p'}
pre {--name:'pre'}
code {--name:'code'}
a {--name:'a'}
aside {--name:'aside'}
blockquote {--name:'blockquote'}
em {--name:'em'}
strong {--name:'strong'}

    Quite pleased with 17 lines

This comment thread is closed. If you have important information to share, please contact us.