How to redirect with CSS

Question

Is there a way to make a Web page of which one can modify only the CSS display an entirely different page when viewed by a user?

I can't manage to do it with CSS. However, you can do it with HTML: ``. — BarryCap, Jun 10 '21 at 11:44

score 2 · Answer 1 · answered Feb 24 '11 at 23:50

2

Does csszengarden.com do what you are thinking?

answered Feb 24 '11 at 23:50

Keltex

26,220
11
79
111

1

Well, I'm not quite sure if it can do what I'm looking for. Basically, I'm looking for something similar to a redirect (e.g. overlaying Google on top of the styled page, or swapping in totally different HTML). Is this doable? I was able to do it with an image by setting body's content equal to url(image path), but other than that I'm a bit lost. – Ryan Lester Feb 25 '11 at 00:21

score 2 · Answer 2 · answered Feb 24 '11 at 23:51

2

Cascading Style Sheets affect only the styling of the page. To my understanding, they provide no functionality to change the behavior or location of the page.

That said, you can completely change the appearance of a well-designed page with CSS. See http://csszengarden.com/ as an example of a site that can change dramatically by manipulating only CSS.

answered Feb 24 '11 at 23:51

kbrimington

25,142
5
62
74

1

Well, I'm not quite sure if that can do what I'm looking for (or if what I'm looking to do is possible). Basically, I'm looking for something similar to a redirect (e.g. overlaying Google on top of the styled page, or swapping in totally different HTML). Is this doable? I was able to do it with an image by setting body's content equal to url(image path), but other than that I'm a bit lost. – Ryan Lester Feb 25 '11 at 00:22
If your page contains an `` element aimed at the remote site, you could use CSS to position and style the `<iframe>` within your page; however, CSS will not help you make changes to the DOM on your page. To manipulate more than merely styles, you should use either client-side scripting (JavaScript) or server-side scripting (whichever your server supports and with which you are comfortable). If you suspect an IFrame might help, but haven't used one before, check out this resource: http://www.w3schools.com/tags/tag_iframe.asp. – kbrimington Feb 25 '11 at 02:00
**CSS can also affect the content of a page** using `content` or `::before` and `::after`. – BarryCap Jun 10 '21 at 11:48

score 1 · Answer 3 · answered Feb 24 '11 at 23:49

1

if i think i get what you are saying, use media queries

answered Feb 24 '11 at 23:49

albert

8,112
3
47
63

Oh, cool, so it can be done! Would you be able to go into more detail as to how media queries could accomplish this? – Ryan Lester Feb 25 '11 at 00:24
1

Media Queries will load different CSS styles depending on things like screen size, or if you're viewing it on a screen vs. printing it. – drudge Feb 25 '11 at 22:48
1

Oh.. No, that isn't what I was asking about. I want to simulate a page redirect in CSS. – Ryan Lester Feb 26 '11 at 04:47

drudge · Answer 4 · 2011-02-27T08:48:47.000

1

Update: Is what you want a Full-Screen Overlay? (Live Demo)

Old Answer: I've used something like this on a site that did not provide any server-side scripting.. All I had to change was the class on <body> to change content. The downside is that the content is still visible in the source of the page.
<style type="text/css"> body div { display: none; } body.blue div.blue { display: block; } body.red div.red { display: block; } </style> <body class="blue"> <div class="blue">Blue content!</div> <div class="red">Red content!</div> <div class="blue red">Content for both!</div> </body>

edited Feb 27 '11 at 08:48

answered Feb 24 '11 at 23:58

drudge

35,471
7
34
45

Can this be applied to my problem? Basically, I'm looking for something similar to a redirect (e.g. overlaying Google on top of the styled page, or swapping in totally different HTML). Is this doable? I was able to do it with an image by setting body's content equal to url(image path), but other than that I'm a bit lost. – Ryan Lester Feb 25 '11 at 00:25
CSS is for styling, not scripting. My example is rather limited, and only does what it does. :) – drudge Feb 25 '11 at 00:39
Hm. Well, I have seen someone implement (within these constraints) some kind of overlay atop the entire page that, when clicked, redirected to a different URL. I don't suppose there's a better method than that one? – Ryan Lester Feb 25 '11 at 22:45
@buu700: I think you're trying to use the wrong tool for what you want to do. – drudge Feb 25 '11 at 22:49
I'm not sure you understand. As stated in the main text, it's the only tool. – Ryan Lester Feb 26 '11 at 03:09
@buu700: Updated my answer. Is this what you're after? – drudge Feb 27 '11 at 08:49

score 1 · Answer 5 · answered Feb 25 '11 at 00:25

You may want to think carefully about what you are trying to achieve. If your intentions are to hide certain information from the user, depending on their state, you really wont be hiding anything. Sure CSS can help not display an element but it's still in the page's source.

You can conditionally load CSS based on the type of browser/device the end-user is reporting back with but outside of that, you will need some sort of underlying business logic in your page/app.

I use a web framework called Django (www.djangoproject.com) which gives me the ability to do what you are wanting to do. An example could look like this (in Django's template markup language):

{% if request.user.is_staff %} DISPLAY COOL DIV HERE {% else %} NOTHING TO SEE HERE {% endif %}

This is impossible to define with CSS. CSS is for presentation only.

Sorry, I must have been unclear; just edited the title for clarity. Any way you know of to achieve the same effect as a redirect in CSS? — Ryan Lester, Feb 25 '11 at 01:07

score 1 · Answer 6 · answered Feb 25 '11 at 01:21

You can't do this with CSS alone.

You can do it using JavaScript and CSS together, but it doesn't sound like a good idea. Here's an example of how you could do it.

<style>
#colorCode1{
    color:blue;
}
<style>

<script language=javascript type="text/javascript">
    function setVisible( setting ){
       var myElement = document.getElementById("colorCode1");
       if(myElement.style.color=="blue"){
            myElement.innerHTML = getPageContentForBlueCode();
       }
       if(myElement.style.color=="red"){
            myElement.innerHTML = getPageContentForRedCode();
       }
     }
</script>

and somewhere below you have <div id="colorCode1">. This would basically allow you to signal a JavaScript function to render a different page based on a style that is defined in the CSS class. I can't think of any reason this would be a good idea though

score 1 · Answer 7 · edited May 23 '17 at 10:28

You can add content with css, however it is severely limited and not supported in some browsers. Adding elements (which is needed to display an 'overlay') is a lot more complicated and generally frowned upon, however it is still possible (in some browsers).You need to manipulate the content css attribute.

See this question for more information.

To achieve your overlay or redirect effect, you would need to use content to add either javascript that would allow you to redirect or an element capable of showing other content, like an iframe.

How to redirect with CSS

7 Answers7

Related