Conditional-CSS has a standard set of browser groups built-in you can, of course, define your own if you wish to :. As you can see the syntax of a conditional statement with a browser group is formatted in the same way as a standard conditional statement.
Note that 'cssX' is a special browser group which causes Conditional-CSS to return nothing but it's default header. By default browsers are detected by Conditional-CSS and the corresponding stylesheet then processed by reading the user agent string of the browser. User agent detection is an effective method of detecting which browser and version should be used, however it's one draw back is that a few people change the user agent of their browser to appear to be something else usually IE.
Under these circumstances the end user will get the wrong CSS for their browser. My view on this is that if you state your browser is IE, you should expect to get what IE would see. The idea of using Conditional-CSS to generate a custom CSS file for each browser appears fine, it is only really suitable if you manage a relatively low volume web-site, since the program must be run on every request for the stylesheet.
For medium to high volume site, this really isn't suitable, particularly when there are a limited number of files which will be created. Therefore Conditional-CSS has the ability to accept command line arguments specifying which browser and version optional should be considered and then output the resulting CSS to stdout.
It is fair to say that this is the most likely combination of stylesheets you will need and therefore the following HTML with conditional comments can be employed with the above script to pull the required CSS file. Use the compiler on the left to generate the required PHP file and save it to your web-server. Generate the binary using the compiler on the left, or by downloading the source and compiling it yourself.
To use an interpreter, leave the files list blank, and include a hash-bang line to the interpreter at the top of the CSS file:. Finally, we discuss True and False in Sass and how they are different from those in other programming languages. Sass allows us to control the flow of our scripts through specific expressions that evaluate conditions.
An if statement will evaluate a condition. An if statement is written with the if rule, followed by the condition we want to evaluate and a code block. When we have multiple conditions that need to be evaluated with their own execution code, we use the else if ladder. To write a conditional else if statement, we add another if statement below our first, separated by the else keyword. This helps streamline maintenance, and also makes the code a lot clearer to editors.
Further to this, one important feature of Conditional-CSS is that when it finds an import CSS statement, it will automatically open and insert the imported file. Although your conditional CSS statements will most likely be targeted to IE of various versions, Conditional-CSS is exceptionally useful when you come across a CSS bug in other browsers, which can often be hard to fix and fixes typically use Javascript. Examples include lack of 'display: inline-block' support in Firefox 2 and background-image bugs in Safari 2.
These have been fixed in the latest versions of these browsers, but backwards compatibility is important while these browsers have significant market share. Note that this example is not particularly practical for deployment in a production environment as you will likely want to keep the layout similar across browsers and use Conditional-CSS only to fix CSS rendering bugs. However, it does give a good example of how different CSS can be targeted at different browsers. Further information, targeting browser groups and more complex conditional expressions are discussed in detail in the accompanying advanced page for Conditional-CSS.
Conditional-CSS is available in three different formats, both of which share exactly the same features, and parse the conditional statements in your CSS files in the same way. Which format you will wish to use will depend on your server, and the ease of installation. The available formats are:. To install:. There are two options available for installing Conditional-CSS in a. Net environment:. Net environment, or only have a couple of CSS files on your site. Like the C version, the C CGI version can be run either on the command line to pre-parse files, which can then be served up using IE conditional comments or as an interpreter CGI process.
This has a significant speed advantage over the ASHX version, and it is recommended that this version be used for high volume web-sites. In this way you need to install only one program, and can select an extension. Note that Conditional-CSS reads environment variables as you would expect a CGI program to do which can require additional consideration with security settings.
If you receive an uncaught security warning when trying to load a. In Windows, ensure that the downloaded program c-css.
0コメント