Using CSS without HTML

http://mathiasbynens.be/notes/css-without-html

by princeverma • 14 years ago

125 25 14 years ago

leddt3• 14 years ago

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.

potomak3• 14 years ago

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

leddt3• 14 years ago

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.

mathias6• 14 years ago

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

leddt3• 14 years ago

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.

downx3• 14 years ago

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.

potomak3• 14 years ago

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

mathias6• 14 years ago

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

potomak3• 14 years ago

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

frederico• 14 years ago

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• 14 years ago

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

robgibbons• 14 years ago

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

yock• 14 years ago

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.

dmvaldman2• 14 years ago

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?

mathias6• 14 years ago

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

dmvaldman2• 14 years ago

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.

mathias6• 14 years ago

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

pak2• 14 years ago

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.

mathias6• 14 years ago

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

pak2• 14 years ago

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.

secoif2• 14 years ago

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

Dylan16807• 14 years ago

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.

secoif2• 14 years ago

Ahh good point. I stand corrected.

Using CSS without HTML

Related Stories