Dynamic css

    Browsers-small
    When fitting sites to a single look in all browsers, the layout designer uses more than one css hack.
    But why should a regular user with IE get code excess for other browsers firefox, opera, safari ?!
    This problem is easily solved using dynamic css.

    The first time I heard about dynamic css styles on the cms website “ModX”, but since this cms did not suit me, I did not go into dynamic styles either.

    Today there is an excellent turnkey solution for generating dynamic css files called "Conditional-CSS". It is open source and distributed under the 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 center;
         [if lte IE 6] background: url ('ie.jpg') no-repeat center 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, only the code for the opera browser will be given.
    Basic designs:
    • [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 designs for the version:
    • lt - Below
    • lte - lower or equal
    • eq - Equal
    • gte - Higher or equal
    • gt - Higher


    Conditional-CSS is written in three languages: PHP, C, C #. My choice of course falls to my native favorite php.
    You can find out more about this library at the officer. website, the link is below.

    Example of use
    Official site “Conditional-CSS”
    Subscribe to notes from Chernev (RSS)

    Also popular now: