Diese Seite ist ein wirklich nacktes, brutales HTML Quine.

Avatar of Geoff Graham
Geoff Graham am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Hier ist eine unterhaltsame Seite von secretGeek.net. Man denkt normalerweise nicht an "Spaß" bei brutalistischem Minimalismus, aber die CSS-Tricks, die es auf dieser Seite zum Funktionieren bringen, sind es sicherlich.

Das HTML wird buchstäblich auf der Seite als Tags angezeigt. In diesem Sinne ist das HTML sowohl das Seiten-Markup *als auch* der Inhalt. Das Design ist so minimal (oder "nackt"), dass der Code durchscheint! Sehr cool.

Die Seite erklärt den Trick, aber ich werde ihn hier paraphrasieren

  • Alles ist ein Block-Level-Element über * { display:block; }
  • ...außer Anker, Code, Betonung und stark, die als Inline bleiben mit a,code,em,strong {display:inline}
  • Verwenden Sie ::before und ::after, um die HTML-Tags als Inhalt anzuzeigen (z. B. p::before { content: '<p>'})

Die Seite endet mit einem schönen Ausschnitt aus Josh Lis „58 Bytes CSS, um fast überall gut auszusehen“

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

Direkter Link →

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. secretGeek
    Permalink zum Kommentar#

    Danke Css-Tricks, ich bin sehr stolz, von Ihnen vorgestellt zu werden.

    Beachten Sie, dass in Ihrer Erklärung ein erheblicher Tippfehler vorliegt: ein fehlendes Sternchen direkt vor dem „{ display:block }

    ...es ist ziemlich signifikant, da es der Haupt-CSS-Trick ist!

  2. Denai
    Permalink zum Kommentar#

    Ich sehe 959 B CSS auf seiner Website.

    • Geoff Graham
      Permalink zum Kommentar#

      Haben Sie mehr oder weniger erwartet? Die Technik in dem Beitrag dreht sich alles darum, CSS zu verwenden, um den Quine-Effekt zu erzielen.

  3. Cinnfhaelidh
    Permalink zum Kommentar#

    Das ist cool!

    Ich habe es nicht geschafft, fröhlich an den 28 "beleidigend repetitiven Zeilen" vorbeizuscrollen, und beschloss zu sehen, ob es mit weniger gehen würde

    *::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'}

    Ziemlich zufrieden mit 17 Zeilen

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.

© .