...

View Full Version : is it possible to add "ifs" in CSS ?



Charmed
12-22-2006, 10:51 PM
in javascript, you can add "ifs" like this:

<script type="text/javascript">
<!--
if (location.href.match(/board=/i))
{
//mass of gigantic codes here
}
//-->
</script>

but my question is, is it possible to do it in CSS ?
if yes, how ?

Thank you :)

whizard
12-22-2006, 10:54 PM
Yes, but only to define special instructions for Internet Explorer.

For more info: http://www.quirksmode.org/css/condcom.html

HTH, Dan

Charmed
12-22-2006, 11:09 PM
no other way to define something for diferent addresses ? (like the example code given)

whizard
12-22-2006, 11:13 PM
Not through CSS, but you could do something like this:

Page1.html:

<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="page1.css" rel="stylesheet" type="text/css" />
</head>


Page2.html:


<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="page2.css" rel="stylesheet" type="text/css" />
</head>

In page1.css and page2.css, you could define everything that was specific to a certain page

Dan

codingmasta
12-23-2006, 08:46 AM
No. IF statements are only in scripts.

codingmasta
12-23-2006, 08:48 AM
Yes, but only to define special instructions for Internet Explorer.

For more info: http://www.quirksmode.org/css/condcom.html

HTH, Dan
That is endif tag...

whizard
12-23-2006, 05:07 PM
<!--[if IE 6]>

And that, my friend, is an IF tag

Dan

Arbitrator
12-23-2006, 10:04 PM
Itís not an if statement for CSS though. Itís a conditional comment that serves anything in between only to Internet Explorer. It can also be modified to serve code to everything except Internet Explorer, but that still doesnít help for the described problem either: serving CSS based upon the current URI, not the current browser.

CSS selectors are basically if statements though. So for the selector html#board div, the attached CSS declarations will only be applied if the element is a div element with an ancestor element called html that has an id attribute with a value of ďboardĒ. Otherwise (else), itís ignored.

So there are two options: use very specific selectors or use multiple, specific style sheets (as was suggested). Calling specific style sheets is also like an if statement since those style sheets will only be used if the code calling them is present in the document. That means using a JavaScript‐like means of calling them based on URI would be redundant.

ikilledsanta
12-23-2006, 10:28 PM
You can use Javascript and CSS. Say you wanted to change the CSS style depending on a cookie the user set:



<html>
<head>
<script>
// This section reads the cookie
function getCookie(NameOfCookie){
if (document.cookie.length > 0) {
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1) {
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}
}
return null;
}
// This is the section that determines the CSS
function DoTheCookieStuff()
{
csscookie=getCookie('csscookie');
if (csscookie=="Black")
{
document.getElementById('cssarea').innerHTML='<link rel="stylesheet" type="text/css" href="black.css">'
// If the cookie is stored as Black, show the Black CSS
}
if (csscookie=="White")
{
document.getElementById('cssarea').innerHTML='<link rel="stylesheet" type="text/css" href="white.css">'
// If the cookie is stored as White, show the White CSS
}
if (!csscookie)
{
document.getElementById('cssarea').innerHTML='<link rel="stylesheet" type="text/css" href="black.css">'
// If there is no cookie, show the Black CSS....should be unnecessary
}
}
</script>
</head>
<body>
<span id="cssarea">
<link rel="stylesheet" type="text/css" href="black.css">
</span>
INFORMATION
</body>
</html>


I didn't test it but it should work.

VIPStephan
12-23-2006, 11:33 PM
<html>
<head>
<script>
// some JavaScript code
</script>
</head>
<body>
<span id="cssarea">
<link rel="stylesheet" type="text/css" href="black.css">
</span>
INFORMATION
</body>
</html>


.....


Failed validation, 4 errors

[...]


Error Line 1 column 0: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>".

<html>

The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to validate with a fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is highly recommended that you insert the proper DOCTYPE declaration in your document -- instructions for doing this are given above -- and it is necessary to have this declaration before the page can be declared to be valid.


Error Line 3 column 7: required attribute "TYPE" not specified.

<script>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.


Error Line 38 column 6: end tag for "HEAD" which is not finished.

</head>

Most likely, You nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, <head> generally requires a <title>, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.


Error Line 41 column 55: document type does not allow element "LINK" here.

<link rel="stylesheet" type="text/css" href="black.css">

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

jkd
12-23-2006, 11:57 PM
random validation crap

How is that even helpful, VIPStephan? None of that stuff would prevent the code from working. It would be one thing to add something constructive on top of that, but your post was otherwise completely unnecessary.

VIPStephan
12-24-2006, 01:46 AM
Hm... now that you say it... must have gotten carried away a little by another post of ikilledsanta. Sorry for that.

ikilledsanta
12-24-2006, 05:36 AM
I know I don't code how I should, but why does that matter if it works? My answer solved his problem, didn't it? As for your other post, I can edit the page fine. I never plan on making a site professionally, I'm just doing this for a project for one of my clubs. If I do well enough I can miss a lot of school and play Halo in a hotel instead. It really doesn't help that my team knows nothing about even basic web design.

Arbitrator
12-24-2006, 06:27 AM
My answer solved his problem, didn't it?I believe the question asked if CSS had an if statement, not JavaScript.

In any case, for all the trouble you would have to go through to insert that cookie script into every page, you could just as well insert references to the correct style sheets in every page and not be subjected to the weaknesses of JavaScript.

ikilledsanta
12-25-2006, 05:13 AM
That is true, but what if, for instance, he wanted to switch stylesheets while staying on the same page? That is what I assumed he meant. That is a way to add an "if" that doesn't switch pages. My if example was if cookie says black. I just copied that, with a few alterations, from a page I had made before.

Arbitrator
12-25-2006, 05:30 AM
Well, in that case, itís probably easier to add the two style sheets to the page and disable or enable them with something like this:


document.styleSheets[0].disabled = true;
document.styleSheets[1].disabled = false;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum