Somehow reference the hash value using CSS

Question

Let's assume I have a page that uses the location.hash to store info for the page, most of my visitors use js so there's no problem. Is there a way to use CSS to link to a non-JS version (using location.search instead) with the same value?

Imagine:

<noscript>Use this page instead</noscript>
<textarea></textarea>
<input id="save" type="checkbox" value="save">
<input id="run" type="checkbox" value="run">

JS:

$(document).ready( function() { $('textarea').val( unescape(location.hash) ) } );
$('#save').click(function() { location.hash = escape($('textarea').val()) });
$('#run').click(function() { /* Mess around with the DOM */ });

I'm thinking something along the lines of:

noscript:after {
    content: full url with hash with a ? instead of a #
}

I realize that if I used location.search I wouldn't have a problem but I want the page to be usable with people with JS even offline.

I tried background image URL but that ignores the current pagename. I need something in CSS that can access the current URL in it's entirety.

Answer 1

You don't have access to the current page's URL in a stylesheet.

The furthest you could go is with CSS3's :target selector on an element that you can apply content styles to (definitely not input), and attr(id) to get the value of the ID if its ID is the same as the URL hash fragment. And a hardcoded string representing the page URL (it might work in an internal stylesheet with <style> tags...):

/*
If the hash is #save, select [id="save"]
and make its ::after content 'http://example.com/?' followed by its ID.
*/
:target::after { content: 'http://example.com/?' attr(id); }

You cannot use the attr() function to get the ID of one element and put it in another, by the way, which is why I said you can't use it on input elements.