Using CSS without HTML | Hacker News Reader

Using CSS without HTML

mathiasbynens.be

125 pointsprinceverma25 comments

This would have been the ultimate trump card back in the days when websites tried to prevent people from stealing their JavaScript and images by disabling things like right click and using twiddly bits of obfuscation. View source, eh? There is no source, punk!

Of course, the Link: header hadn't even been proposed yet, and the whole "DOM scripting" movement plus tools like Firebug/Webkit inspector has turned obfuscation of web content into a pointless exercise. So, like the author says, this is just a fun parlor trick.

FWIW, the `Link` HTTP header is defined in RFC 5988: http://tools.ietf.org/html/rfc5988

Right, proposed in October 2010. It would have been unfair of me to pick on IE6 for not supporting it. The IE6 era is when I most vividly remember javascriptsource.com and friends touting things like onclick="alert('Not allowed!'); return false" as ways to "protecting" your content.

While it's certainly a neat trick, I wonder if there is any real world application to such techniques.

When I saw the title I expected to see something about using CSS for things other than styling HTML. It may be useful, for example, to use CSS to style native GUI applications or similar.

You can in fact apply CSS to non-HTML documents through the `Link` header. Here’s an example: http://eligrey.com/blog/post/title-image-files-in-opera

Similarly, full `Link` header support would also make it possible to have feed-autodiscovery on non-HTML pages (like images, audio, video, plain text files, etc).

That is very interesting, thank you. I hope the Link header gets wider support in the future. It seems that it could be very useful.

One idea is injecting some temporary content in all pages of a site without changing the actual content. For example in the recent SOPA blackout, server owners could have injected a css file with a simple configuration of their webserver.

Doing the same trick also with Javascript (if you could) could keep the html pretty clean and tidy.

I'm not suggesting you would use the technique to build the main page content. Just the added extras.

Do the link elements add any semantic goodness to the document?

You could also use the web server to transparently add those headers to html output - rather than a scripting language such as php.

Yes there is, see my comment at http://news.ycombinator.org/item?id=3612459

Nice site. However you seem to be using CSS as it's intended: styling content. The featured article uses CSS to generate the entire content, which I doubt is of any use besides showing off.

> The featured article uses CSS to generate the entire content, which I doubt is of any use besides showing off.

That’s absolutely correct. (To be fair, this is mentioned in the article under “Disclaimer”.)

I feel like this is exactly what CSS was ment not to do; It shouldn't be something which adds content; it's simply there for styling.

Something more will confuse new developers into misusing it, and ultimately breaking more things that shouldn't have been even able to do.

To be fair though, the author warns about this several times.

The most interesting bit is the part about the Link header. Does anyone know if this would be a way of concealing your frontend javascript files?

This is not possible; scripts cannot be added through `<link>`, so there’s no way to add them through the `Link` HTTP header.

Would the functionality be possible if browsers wanted to make the functionality possible? I feel like this would be a big deal when it comes to the IP concerns of frontend code.

Your browser would still download the files. You can still the downloads using Live HTTP Headers, Firebug, Fiddler etc. to see what is going on in the background. So it would be like disabling right-click - deter only the least knowledgeable.

In Opera, it is possible in a way:

    Link: <javascript:alert(1)>; rel="next"

This won’t do anything until you hit the “next” button in the Opera UI (or hit the Space bar, which is a keyboard shortcut for said button).

Example: http://xss-shafigullin-pro.appspot.com/reflector

I used this technique to make the isometric effect at http://drawbang.com, see https://github.com/potomak/drawbang/blob/develop/public/styl...

Which technique? `::before` / `::after`? That’s not really what this article is about. (Nice site, though!)

Well, you're right, sorry for my nearly out of topic comment.

Meh. It's not really 'without html' at all, it's simply without 'directly creating html'.

There may be a DOM but that doesn't mean there's HTML. The only way to get HTML is to use an inspector to convert the DOM.

Ahh good point. I stand corrected.

Very cool and interesting idea, but basically useless. Without HTML you can't even have simple HREFs or semantic content like H1, H2.

Using a tool outside of its intended scope can indeed yield interesting and unexpected results. Perhaps there is value in an exercise such as this, yet, I can't help but be put off by it. CSS is intended to separate document style from document content. I can't help but wonder what the author would think of seeing align="center" and its ilk back in HTML documents, since it's essentially the opposite extreme.

Reply on news.ycombinator.com