Posts

Showing posts with the label Stylesheet

Can I Override !important?

Image
Answer : Ans is YES !important can be overridden but you can not override !important by a normal declaration. It has to be higher specificity than all other declarations. However it can be overridden with a higher specificity !important declaration. This code snippet in Firefox's parser will explain how it works: if (HasImportantBit(aPropID)) { // When parsing a declaration block, an !important declaration // is not overwritten by an ordinary declaration of the same // property later in the block. However, CSSOM manipulations // come through here too, and in that case we do want to // overwrite the property. if (!aOverrideImportant) { aFromBlock.ClearLonghandProperty(aPropID); return PR_FALSE; } changed = PR_TRUE; ClearImportantBit(aPropID); } Good read Specifics on CSS Specificity CSS Specificity: Things You Should Know Here's an example to show how to override CSS HTML <div id="hola" class="hola"...

Can You Use If/else Conditions In CSS?

Answer : Not in the traditional sense, but you can use classes for this, if you have access to the HTML. Consider this: <p class="normal">Text</p> <p class="active">Text</p> and in your CSS file: p.normal { background-position : 150px 8px; } p.active { background-position : 4px 8px; } That's the CSS way to do it. Then there are CSS preprocessors like Sass. You can use conditionals there, which'd look like this: $type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } Disadvantages are, that you're bound to pre-process your stylesheets, and that the condition is evaluated at compile time, not run time. A newer feature of CSS proper are custom properties (a.k.a. CSS variables). They are evaluated at run time (in browsers supporting them). With them you could do somet...