CSS Revolution - Use Condition Rules WITHIN Styles

August 13, 2008 in css

Undoubtedly you will have found many a situation where different web-browsers require different style statements. Conditional-CSS addresses this by letting you add Internet Explorer style conditions inline with your CSS statements.

Condition example

Why using it?

Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

Target CSS to any web-browser
Streamline maintenance of your CSS files
Optimise your CSS
Work around those annoying little CSS bugs
Automatic expansion and inclusion of @import statements
It’s free and open source!

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.

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]

To get started with Conditional-CSS use the compiler to download a version suitable for your server platform, and read the usage guide, or see a demo in your own browser (original CSS).

a.button_active, a.button_unactive { display: inline-block; [if lte Gecko 1.8] display: -moz-inline-stack; [if lte Konq 3.1] float: left; height: 30px; [if IE 5.0] margin-top: -1px; text-decoration: none; outline: none; [if IE] text-decoration: expression(hideFocus=’true’); }

Requirements: PHP or C or C#
Demo: http://www.conditional-css.com/demo/
Download: http://www.conditional-css.com/download
Link: http://www.conditional-css.com/

Share the love

BTW: Good Quality Brochures Online Color Printing at PsPrint.

Spread this KnowTe

Digg Del.icio.us Stumble Facebook Float Technorati Bump

Whatever you want to say!

Your turn »

vera
Feb 01, 2011
No: 9 / ID: 7894

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

joe
Jul 21, 2010
No: 8 / ID: 6529

is there a way to use this to alter already existing properties?

e.g.
i want the width of a list element in an un-ordered list to increase in length when a child un-ordered list is hovered over

Santhos Webdesign
Aug 21, 2008
No: 7 / ID: 2183

This looks great! I will check it out right away!

Shane
Aug 13, 2008
No: 6 / ID: 1929

I didn’t know you could do it inline like that. Thanks for the heads-up.

Or search by time

Subscribe to KnowTeBook

Loved KnowTes

Recommendation

Community Links

20 Mind Melting Examples of Light Painting
Photographers utilize their knowledge of the different colors produced by various lights, and how they interplay with white balance settings. Light paint brushes can be as simple as a flash light, laser pen, old lantern, or even off-camera flash combined with colored gels.
KP Design
Inspiration for all - photography, design, art, travels, and more!
30 Free Christmas Icon Sets for Designers
Christmas is just around the corner and this is the time when designers need loads of different resources and material to design Christmas related themes,
Domain Name Selection: How to choose the best
To have an appropriate domain name is always the cause of worry for most website owners, the reason being, it is the primary step to ensure the success of a website or an online business. But there are several other benefits of having a right domain name such as it helps in effective marketing, branding, attracting visitors, building credibility, etc.
60 Remarkable Examples Of Typography Design #6
It’s been a really long time since we did our last installment series of “Remarkable Examples Of Typography Design.” To be precise, the last post was way back in June, 2011. Christmas is right around the corner and many designers are using their creativity at a maximum expense.
Make Forms More Usable With HTML5
html5 introduces new form elements, new input types, and new attributes to help making building and using forms easier.
Examples of Street Art and Graffiti Art
With today’s collection, we aim to pay tribute to some of the best street art that will simply blow your mind away.
Showcase of Beautiful iPhone Wallpapers
Acknowledging the fact that the design and development community love to decorate their devices with stylish and classy wallpapers,
Beautiful Tera Environment Concept Art & Character Design
Developed by Korean game developer Bluehole Studio and published by Frogster who also manage Runes of Magic, these environments are breathtaking with some being just concept art and not the final version they show that the world will be beautiful. In addition featuring detailed character design I can not wait for the release of Tera next year.
25 Incredible Logo Designs Inspired by Plant
Logos are the visual representation of the organizations and their businesses,
How To Add Images To Your CSS Borders
How to use css3 border-images, instead of generic styles, as borders around your elements.
web 2.0 templatesWeb 2.0 templates with simplicity, cleanliness, and elegance in design and the less number of columns and work great for all your needs and have all the great features of Web 2.0 technology.

Subscribe to RSS | Submit a Link

CSS Revolution - Use Condition Rules WITHIN Styles

Condition example

Why using it?