Dynamic css

When adjusting sites to a single view in all browsers, the layout designer uses more than one css hack.

But why would an ordinary user with IE receive an excess of code for other browsers firefox, opera, safari ?!

This problem is easily solved with the help of dynamic css.



The first time I heard about dynamic css styles on the cms “ModX” site, but since this cms did not suit me, I didn’t dwell on dynamic styles either.



Today, there is an excellent ready-made solution for generating dynamic css files called “Conditional-CSS”. It is open source and distributed under the license CDDL license .



I will give an example of css code using "Conditional-CSS":

  [if IE] .container {
      height: 100%;
      width: 100%;

      [if IE 7] background: url ('ie7.png') no-repeat center;
      [if lte IE 6] background: url ('ie.jpg') no-repeat center;
 }

 [if Webkit] .container {
      height: 70px;
      width: 400px;
      background: url ('webkit.png') no-repeat center 30px;

 }

 [if Opera] .container {
      height: 60px;
      width: 100%;

      background: url ('opera.png') no-repeat center 10px;

 } 

It works like this - for the user, for example, the opera browser will be given a code only for the opera browser.

Basic constructions:

• [if {!} browser]
• [if {!} browser version]
• [if {!} condition browser version]

Supported browsers:

• IE - Internet Explorer
• Gecko - Gecko Browsers (Firefox, Camino etc)
• Webkit - Webkit browsers (Safari, Shiira etc)
• Opera
• IEMac - Internet Explorer for Mac
• Konq - Konqueror
• IEmob - IE Mobile
• PSP - Playstation Portable
• NetF - Net Front

')

Well, the design for the version:

• lt - Below
• lte - Below or equal
• eq - Equals
• gte - Higher or equal
• gt - above

Conditional-CSS is written in three languages: PHP, C, C #. My choice of course falls on the native favorite php.

In more detail with this library you can get acquainted on the official. site link below.



Usage example

Official site "Conditional-CSS"

Subscribe to Chernev's notes (RSS)