{"id":324942,"date":"2020-11-04T14:46:15","date_gmt":"2020-11-04T21:46:15","guid":{"rendered":"https:\/\/css-tricks.com\/?p=324942"},"modified":"2020-11-04T17:22:43","modified_gmt":"2020-11-05T00:22:43","slug":"this-page-is-a-truly-naked-brutalist-html-quine","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/this-page-is-a-truly-naked-brutalist-html-quine\/","title":{"rendered":"This page is a truly naked, brutalist html quine."},"content":{"rendered":"\n<p>Here&#8217;s a fun page coming from <a href=\"https:\/\/secretgeek.net\" rel=\"noopener\">secretGeek.net<\/a>. You don&#8217;t normally think &#8220;fun&#8221; with <a href=\"https:\/\/www.viget.com\/articles\/web-brutalism-seamfulness-and-notion\/\" rel=\"noopener\">brutalist minimalism<\/a> but the CSS trickery that makes it work on this page is certainly that.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>The HTML is literally displayed on the page as tags. So, in a sense, the HTML is both the page markup <em>and<\/em> the content. The design is so minimal (or &#8220;naked&#8221;) that it&#8217;s code leaks through! Very cool.<\/p>\n\n\n\n<p>The page explains the trick, but I&#8217;ll paraphrase it here:<\/p>\n\n\n\n<ul><li>Everything is a block-level element  via <code>* { display:block; }<\/code><\/li><li>&#8230;except for anchors, code, emphasis and strong, which remain inline with <code>a,code,em,strong {display:inline}<\/code><\/li><li>Use <code>::before<\/code> and <code>::after<\/code> to display the HTML tags as content (e.g. <code>p::before { content: '&lt;p>'}<\/code>)<\/li><\/ul>\n\n\n\n<p>The page ends with a nice snippet culled from Josh Li&#8217;s <a href=\"https:\/\/jrl.ninja\/etc\/1\/\" rel=\"noopener\">&#8220;58 bytes of css to look great nearly everywhere&#8221;<\/a>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">html {\n  max-width: 70ch;\n  padding: 2ch;\n  margin: auto;\n  color: #333;\n  font-size: 1.2em;\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a fun page coming from secretGeek.net. You don&#8217;t normally think &#8220;fun&#8221; with brutalist minimalism but the CSS trickery that makes it work on this page is certainly that.<\/p>\n","protected":false},"author":2508,"featured_media":324949,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/brutalist-html-quine.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":340390,"url":"https:\/\/css-tricks.com\/vs-code-extensions-for-html\/","url_meta":{"origin":324942,"position":0},"title":"VS Code Extensions for HTML","date":"June 7, 2021","format":false,"excerpt":"Let's look at some extensions for VS Code that make writing and editing HTML (and languages that are basically HTML with extra powers) better. You may not like all of them. Maybe some of them don't appeal to you, solve a problem you don't have, or feel like more clutter\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/vscode-shadow.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305641,"url":"https:\/\/css-tricks.com\/why-do-some-html-elements-become-deprecated\/","url_meta":{"origin":324942,"position":1},"title":"Why Do Some HTML Elements Become Deprecated?","date":"April 2, 2020","format":false,"excerpt":"The internet has been around for a long while, and over time we\u2019ve changed the way we think about web design. Many old techniques and ways of doing things have gotten phased out as newer and better alternatives have been created, and we say that they have been deprecated. Deprecated.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/deprecated.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363745,"url":"https:\/\/css-tricks.com\/write-html-the-html-way-not-the-xhtml-way\/","url_meta":{"origin":324942,"position":2},"title":"Write HTML, the HTML Way (Not the XHTML Way)","date":"March 21, 2022","format":false,"excerpt":"You may not use XHTML (anymore), but when you write HTML, you may be more influenced by XHTML than you think. You are very likely writing HTML, the XHTML way. What is the XHTML way of writing HTML, and what is the HTML way of writing HTML? Let\u2019s have a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/xhtml.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":197334,"url":"https:\/\/css-tricks.com\/introduction-to-wordpress-front-end-security-escaping-the-things\/","url_meta":{"origin":324942,"position":3},"title":"Introduction to WordPress Front End Security: Escaping the Things","date":"March 23, 2015","format":false,"excerpt":"If you're a WordPress developer that writes HTML\/CSS\/JS (which is 100% of theme developers and 99% of plugin developers), you need to know the basics of front end security for WordPress. WordPress gives you all the tools you need to make your theme or plugin secure. You just need to\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":304009,"url":"https:\/\/css-tricks.com\/inspiring-high-school-students-with-html-and-css\/","url_meta":{"origin":324942,"position":4},"title":"Inspiring high school students with HTML and CSS","date":"February 21, 2020","format":false,"excerpt":"Here\u2019s a heartwarming post from Stephanie Stimac on her experience teaching kids the very basics of web development: [...] the response from that class of high school students delighted me and grounded me in a way I haven't experienced before. What I view as a simple code was absolute magic\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/stephaniestimac-demo.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":321004,"url":"https:\/\/css-tricks.com\/editing-html-like-a-boss-in-vs-code\/","url_meta":{"origin":324942,"position":5},"title":"Editing HTML Like A Boss In VS Code","date":"September 16, 2020","format":false,"excerpt":"Here's a seven minute video from Caleb Porzio that focuses on some of Emmet's HTML editing features. You might think of Emmet as that thing that expands abbreviations like table.stats>tr*3>td*3 into glorious, expanded, and perfect HTML. But Emmet has other HTML editing trickery up its sleeve. My favorite is \"wrap\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/emmet-codepen-expand.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/324942"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=324942"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/324942\/revisions"}],"predecessor-version":[{"id":325227,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/324942\/revisions\/325227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/324949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=324942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=324942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=324942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}