Single-Tag Website | Hacker News Reader

Single-Tag Website

cj-johnson.github.io

160 pointstbassetto42 comments

I remember seeing a demo of a website which didn't have any tag - I think the stylesheet was served by an http header that the browsers were automatically linking. I can't find the url.

[edit] Here it is! It still doesn't work in Chrome. http://css-tricks.com/using-css-without-html/

Far more interesting than a simple exploitation of the 'content' CSS attribute.

I can see where the next exploits will come from, the stylesheet doesn't even appear on Firefox Dev Tools.

It does for me (Fx35, Windows), but yeah this looks pretty obscure, like the recent bash exploits from 30-year-old features barely anyone knew.

Apart from exploits, semi-related, I just hope the ad industry won't find out about using inline data URIs any soon. This would make ad blocking way more difficult.

Adds are served from a separate IP in part to keep websites honest. As long as this happens browsers can fairly easily tell what's an add. IMO, a more risky option is for add networks to start hosting webpages and I can easily see Google taking this approach.

Pity that it doesn't work in Webkit/Blink browsers, only in Firefox (and old Opera).

I remembered using this trick to put a "THIS IS STAGING" banner for my project back few years ago (after reading Eric Meyer's article[1]) It was pretty cool back then.

[1]: http://meyerweb.com/eric/thoughts/2009/01/22/using-http-head...

This, combined with data: URIs, could be fun...

Since we're talking about obscure hacks, I've seen a website putting ads in an <iframe>, whose URL was the same as the parent (top) URL, and there was even no HTTP request being done for an iframe document (probably due to the URL being already cached by the browser) - so it was not possible to block it via a blocking proxy.

I only managed to block it with the adblock's element hiding query like `domain.com##iframe` or through a userscript.

You went to all that trouble to block an ad? It must have been one hell of a distraction.

Or an interesting technical challenge. I know that's why I would have done it.

Makes text uncopiable in all browsers. Combined with entity-encoded source, this could make a decent protection against most users. Not that I approve such things.

[edit] unicode encoding (\67). html-entities do not work.

uncopiable : for most users.

Nothing is uncopiable for someone with a good OCR library and a lot of time.

Nothing is uncopiable for someone with a lot of time.

And a pen.

Or a keyboard.

Or view source (of css file).

Ctrl+A seems to work fine (IE11)

Interesting, doesn't work in Chrome or Firefox for me. In Firefox you can't select anything. In Chrome you can select all, but nothing gets copied over; also the formatting of some boxes is fucked up.

You can do this /without/ a link tag in Firefox by using a link header. Syntax is:

Link:<[filename]>;rel=stylesheet

It's fun to use:

Link:<.>;rel=stylesheet

and detect the Accept: text/css header to serve a css file conditionally, too.

HTML is to seperate Content from Presentation. This is just a demo of capability of CSS :).

Well, thank goodness for accessibility requirements, at least in California. There would be plenty of site owners, including the government, who'd love to make their sites much more difficult to scrape or excerpt from.

I embraced this idea a while ago on https://macko.mici.hu — purely for childish entertainment, without any actual content. Source here: https://github.com/underyx/mici.hu

macko.mici.hu loosely translates to pooh.winnie.hu; mici is also the nickname a friend of mine goes by, which is why I bought the mici.hu domain.

Seems to be a clever idea for caching and reducing traffic. All static content can be stored within the CSS, which is tagged with a long HTTP expire date. This allows to send all dynamic content within a tiny HTML page that only references the CSS above, thereby adding the static content.

if there isn't a module to automate such thing, maintaining content will be a bitch though.

Interesting for Wikileaks type content - where mirroring across thousands or millions of browsers is of value.

This is exactly what I did when a friend of mine asked how to make the text uncopy-able. I did server-side rendering, create a bunch of randomize tag and generate inline css with ::before and ::after. It was brutal but it works.

I think this shows that the "Content" tag in CSS is a bad idea, at least if you're concerned about separating presentation and content. It's a bit like a single-image website.

No, it just shows that shoveling all content into your CSS is a bad idea. The content property has legitimate uses, especially when combined with tools like icon fonts, etc.

Impressive! How did you end up debugging things as you were developing?

I bet the css file is not developed per se but created by some sort of CMS.

meh, not even responsive. ;)

I see mountainous CSS abuse... now you could be really clever and do it without any elements. Go on. I dare you.

Expected a custom element.

<x-website></x-website>

me too

1. need a 'compiler' to compile html and css into one css file 2. seems it can make embedding content a bit easier and cleaner. eg. embed a facebook/twitter button.

Amazing what pseudo-elements can do these days.

anyone know why parts of the page become links?

Firefox35

edit: Oh, I suppose the <link> would be styled, wouldn't it?

Why would you do this?

#CSSporn

Pretty cool. Thanks for sharing

Reply on news.ycombinator.com