While many designers of Web sites not likely to know HTML5 or why it is important, designers of Web sites have discussed this issue for months. There are many positive aspects that this “new” (revised) gives us the language for web design and web development .
* Support offline – There are some features that come with HTML5, which allow you to store more information Offline (more than cookies / cache) which is a huge advantage for developers of mobile applications. This will allow useful applications to continue running even when no Internet connection.
* Web and Video – These features make it easier than ever to add graphics (not really too big of a problem before) and video broadcasting (large front) to a web page and make inter- compatible mobile browser. * GeoLocation API – This is not really part of HTML5 but since HTML5 is mainly related to the use of mobile devices, geolocation is consistent with this discussion quite well.Developers can now more easily integrate location-specific user information based on an application and do things like this “augmented reality cool stuff people have spoken. That’s how it is possible to point your iPhone or Android device to a street and tell you where the nearest store coffee is (ever wondered why your iPhone requires you to use your “current location “?).* advanced forms – Now your mobile browser can handle some basic things necessary to ensure that the information you enter into an online form is correct (form validator) instead of having to run additional scripts for do. This will really speed up loading times and increase things like experience utilisateur.Cela said, HTML5 sounds good and all developers should stop what they are doing now and start using it they should not ? This is not necessarily the case. HTML5 is not yet supported by Internet Explorer (I know, shocking right?) And besides that, there are few other deal breakers “that will hold up HTML5 to be fully integrated into all platforms immediately .
* The biggest problem is the acceptance (or lack thereof) of microformats on multiple browsers. HTML5 uses a lot of new labels that add new semantic richness to a Web document, but does not fully utilize microformats (class attributes, etc.) which makes the backward compatibility of HTML5 nonexistent. Being a web designer, it’s a bad chose.La most other negative points are starting to kind of complex and difficult to explain if for now, I’ll stop there. It is important to know that HTML5 is always a good thing – it’s just going to be a bit before it is fully integrated with all the days of developer of your daily life. Surfing the mobile Internet continues to grow, however, it will soon have its place.
Undoubtedly every web-designer and developer who as made any attempt to use CSS will have found a situation where different web-browsers require different style statements. This irritation is due to the varying degree of completeness of the CSS implementation across browsers and browser versions. Conditional-CSS is a solution to this problem, taking the idea of the conditional comment syntax from Internet Explorer and placing it inline with your CSS statements.
Basic usage
The main use of Conditional-CSS is to be able to indicate if a particular CSS statement should be sent to a particular browser or not. Of course you won't wish to do this often, but it is exceptionally useful when you do need to target a browser. A very wide range of web browsers can be supported in this way, as can be seen by the list that we support at U4EA.
Any CSS statement or block can be prefixed by a conditional statement, of which there are three basic types:
* [if {!} browser]
* [if {!} browser version]
* [if {!} condition browser version]
where:
* ! - indicates negation of the statement (i.e. NOT) - optional
* browser - states which browser the statement targets
o 'IE' - Internet Explorer
o 'Gecko' - Gecko based browsers (Firefox, Camino etc)
o 'Webkit' - Webkit based browsers (Safari, Chrome, Shiira etc)
o 'SafMob' - Mobile Safari (iPhone / iPod Touch)
o 'Opera' - Opera's browser
o 'IEMac' - Internet Explorer for the Mac
o 'Konq' - Konqueror
o 'IEmob' - IE mobile
o 'PSP' - Playstation Portable
o 'NetF' - Net Front
* version - which version of the browser in question should be considered
* condition - arithmetic operator
o lt - Less than
o lte - Less than or equal to
o eq - Equal to
o gte - Greater than or equal to
o gt - Greater then
A few conditional statement examples:
1. // Conditional-CSS syntax examples
2. [if IE] - Used if the browser is IE
3. [if ! Opera] - Used if the browser is not Opera
4. [if IE 5] - Used if browser is IE 5
5. [if lte IE 6] - Used if the browser is IE 6 or less (IE 5, IE 4 etc)
6. [if ! gt IE 6] - Same effect as the previous statement, if not greater than IE 6
// Conditional-CSS syntax examples [if IE] - Used if the browser is IE [if ! Opera] - Used if the browser is not Opera [if IE 5] - Used if browser is IE 5 [if lte IE 6] - Used if the browser is IE 6 or less (IE 5, IE 4 etc) [if ! gt IE 6] - Same effect as the previous statement, if not greater than IE 6
As a more practical example consider a div of class box with width and padding. Let's also say that it needs to work in IE 5 (I realise that most people have dropped IE5 support now, but this is a classic example). The IE 5 box model is non-standard, so here is how you might get around it using Conditional-CSS:
1. // Conditional-CSS box example
2. div.box {
3. width: 400px;
4. [if IE 5] width: 600px;
5. padding: 0 100px;
6. }
// Conditional-CSS box example div.box { width: 400px; [if IE 5] width: 600px; padding: 0 100px; }
As you can see Conditional-CSS allows you to maintain a single CSS file, rather than multiple files, as would be needed when using IE's conditional comments. 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. This reduces the load time of your page, as the browser only needs to make one HTTP request for your CSS files.
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.
Here is a more complete example:
* View the demo in your browser
* View the original CSS
* View the parsed CSS
The following image shows how the page renders in IE7, Safari 3, Firefox 2 and Opera 9.
Conditional-CSS demo page rendered
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.
Installation
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:
* PHP - Perfect for installing Conditional-CSS on your server very quickly and easily.
* C# - Suitable for use under .Net (IIS / Mono) this version will run natively on Windows as either an ASHX handler, as a CGI interpreter or on the CLI.
* C binary - A little more involved to install, but much faster than the PHP version and can be used as an interpreter (see below for an explication).
PHP version
If you wish to try out Conditional-CSS, or only have a couple of CSS files on your site, then the PHP version is perfect for you. You will require PHP 4 or PHP 5+ to be available on your server. To install:
1. Use the online Conditional-CSS compiler to download a customised version of Conditional-CSS, by entering the name(s) of your CSS files.
2. Place the downloaded file (c-css.php) on your server in the same location as your CSS files.
3. Load the 'c-css.php' file you uploaded in your web-browser and admire the parsed CSS.
4. Include the 'c-css.php' file as you would any CSS file on your web-pages using: @import "{path_to_}/c-css.php"; (or similar).
C# version (for Windows / .Net / Mono)
The C# version of Conditional-CSS provides all the functionality, features and usefulness of the PHP and C version on the Windows platform, and is perfect for use on IIS or Apache with Mono. There are two options available for installing Conditional-CSS in a .Net environment:
* ASHX handler - very simple to install and use
* CGI interpriter - a little more tricky to install but perfect for site wide installations
ASHX handler
The C# ASHX version of Conditional-CSS is perfect if you wish to try out Conditional-CSS in a .Net environment, or only have a couple of CSS files on your site. To install:
1. Use the online Conditional-CSS compiler to download a customised version of Conditional-CSS, by entering the name(s) of your CSS files.
2. Place the downloaded file (c-css.ashx) on your server in the same location as your CSS files.
3. Load the 'c-css.ashx' file you uploaded in your web-browser and admire the parsed CSS.
4. Include the 'c-css.ashx' file as you would any CSS file on your web-pages using: @import "{path_to_}/c-css.ashx"; (or similar).
CGI program
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. To download Conditional-CSS for Windows as a CGI program:
1. Use the online Conditional-CSS compiler to download a customised version of Conditional-CSS, by entering the name(s) of your CSS files and selecting the 'C#' version.
2. Use the CLI to run Conditional-CSS and parse CSS files, or follow the instructions below to install as an interpreter.
Using Conditional-CSS as an interpreter is exceptionally useful when you want to use multiple Conditional-CSS files across one or many sites. In this way you need to install only one program, and can select an extension (.ccss typically) which will involve the program and have the specified filed parsed for the user's browser on-the-fly. To illustrate: the user's browser would request '/media/css/site.ccss' (via an @import statement) which is a standard CSS file, but with conditional comments inline. IIS would invoke Conditional-CSS which will parse the file, and send the required CSS back to the user.
To install Conditional-CSS on IIS as a CGI interpreter:
1. Use the online Conditional-CSS compiler to download a customised version of Conditional-CSS. Select the C# version and leave the file names blank. Add copyright and author information if you wish.
2. Open the 'IIS Manager' from the Start menu.
3. Select the 'Handler Mappings' option for either a specific web-site or as a global setting, and add a new mapping ('Add Script Handler...').
4. In the dialogue box which appears in the request path enter the extension that you wish to use for Conditional-CSS files (*.ccss is recommenced and typical).
5. In the 'Executable' field browse to the location where you downloaded and stored 'c-css.exe' and select this file.
6. Click okay!
7. Create your Conditional-CSS file and call is {something}.ccss
8. Load this file in your web-browser though your web-server and that's that!
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 .ccss file, you might need to take this into account. In Windows, ensure that the downloaded program (c-css.exe) is 'Unblocked' - right click -> 'Properties'.
C version (for Linux / Unix / Mac OS X
The C version was developed because it is considerably faster than the PHP version and it doesn't require the overhead of the PHP libraries. Therefore, if you don't have PHP on your server, you will be able to use this version. In it's basic form it's installation is similar to the PHP version:
1. Use the online Conditional-CSS compiler to download a customised version of Conditional-CSS, by entering the name(s) of your CSS files and selecting the 'C' version.
2. Place the downloaded file (c-css) on your server in the same location as your CSS files.
3. Ensure you give 'c-css' execute permissions (755) as it will be run as a CGI script.
4. Include the 'c-css' file as you would any CSS file on your web-pages using: @import "{path_to_}/c-css"; (or similar).
Note that if you wish to use the C version of Conditional-CSS on any platform other than Linux x86, then you can download the source code at the bottom of this page and compile it using any C compiler. The source is very portable, and will run on a huge range of hardware and operating systems.
The biggest advantage of the C version of Conditional-CSS is not, however, it's speed, but rather than can also be used as an interpreter. What this means is that if you install the Conditional-CSS binary file on your server as you would any normal program (in /usr/bin/ for example) then you can include a single (hash-bang) line at the top of your CSS files and Conditional-CSS will parse your file for you. This makes system wide installation very easy. Think of using Conditional-CSS as you would do a scripting language such as Perl or Bash.
An example CSS file using c-css as an interpreter is shown below:
1. #!/usr/bin/c-css -i
2.
3. /*
4. * CSS file
5. */
6. html, body {
7. margin: 0;
8. padding: 0;
9. }
10.
11. //etc
#!/usr/bin/c-css -i /* * CSS file */ html, body { margin: 0; padding: 0; } //etc
Note that the i switch (-i) tells Conditional-CSS to output the headers required to tell the web-browser that it is about to receive CSS. For more detailed information about command line options, please refer to the advanced page on this site.
If you use this method, you must ensure that your CSS file can be executed as a CGI program. Do this by first added execute permissions to the file (755). You may also have to tell your HTTP server to run the file as a program. You do this in Apache using an '.htaccess' file, similar to the one shown below (alternative methods are available on other HTTP servers):
1. Options +ExecCGI
2. AddHandler cgi-script .css
Options +ExecCGI AddHandler cgi-script .css
Credits
Conditional-CSS is based on one of my projects developed at U4EA Technologies. U4EA have kindly allowed me to release Conditional-CSS as open source software on this site. Special thanks go to Graham Willmott for reviewing the project, and to Sean Pedley for sharing his expertise with me. Without the help of everyone at U4EA Conditional-CSS would not have been possible - so thank you to all!
