
Using CSS without HTML - princeverma
http://mathiasbynens.be/notes/css-without-html
======
pak
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.

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

~~~
pak
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.

------
leddt
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.

~~~
mathias
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).

~~~
leddt
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.

------
frederico
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.

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

------
dmvaldman
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?

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

~~~
dmvaldman
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.

~~~
willthames
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.

------
potomak
I used this technique to make the isometric effect at <http://drawbang.com>,
see
[https://github.com/potomak/drawbang/blob/develop/public/styl...](https://github.com/potomak/drawbang/blob/develop/public/stylesheets/style.css#L103)

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

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

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

~~~
Dylan16807
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.

~~~
secoif
Ahh good point. I stand corrected.

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

------
yock
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.

