CSS If Statements - How to Use the If Statement in CSS
Introduction: What is CSS?
CSS, or cascading style sheets, is an efficient way to add uniform styles to an HTML webpage. The style sheet can be defined in the HEAD portion of the webpage, or be linked from an external file. Having an entirely separate CSS file is sensible as it can be linked to multiple web pages, thereby allowing a website developer to create a uniform style across the site.
Style sheets are divided into style definitions, where an HTML element is given certain properties. For example, in the case of a table, attribute like the background colour and font could be set in a style definition. Then when an element in created in the BODY part of the webpage, the style definition is merely called, and all the attributes are applied.
The if-else Conditional Statement
Conditional statements are programming constructs used to change the execution pattern of code, based on certain parameters. As code is always executed sequentially, “if” statements were designed to either executed one piece of code or another, based on a certain condition.
“If” statements can be placed within each other, so long as the inner code completes before the outer code. These are known as nested conditional constructs, and although are useful, the nesting tends to make code confusing and messy to read.
Conditional Constructs in CSS
The “if” statement in CSS is placed within an HTML comment construct. It is used to identify the browser version for Internet Explorer, and load various parts of the style sheet based on that parameter.
The construct only works with Internet Explorer because the browser is the only one that interprets HTML comments instead of ignoring them entirely. Other browsers, on the other hand, do not interpret comments at all.
The notation is similar to a standard ‘if’ statement, as demonstrated in the following example:
The “lt” notation in the statement is an escape character and indicates the sign ‘<’, which cannot be used in its normal guise at it is a command character.
Conclusion
“If” statements are essentially programming constructs, used in sequentially executed code. However CSS is not precisely code, as it is an extension, of sorts, of HTML. HTML is a mark-up language, where the code is interpreted to display text in a certain way, but not to actually manipulate it. Therefore there is no use of programming constructs in HTML.
However, CSS has a number of hacks that sometimes allow the use of programming constructs. The “if” statement is one of these but its use is severely limited as compared to other languages. The same functionality can be achieved by creating separate CSS files for browser versions and linking them to the webpage. Dynamic scripting can be used to discover the browser and its version, and accordingly call the correct CSS file.
The use of the CSS “if” statement is less than reliable, and should be avoided as the interpretation may change at a later stage; therefore the code written is rendered unsustainable.
