Why Yahoo CSS reset is using font:inherit for below tags?
address,button,caption,cite,code,dfn,em,input,optgroup,
option,select,strong,textarea,th,var {
font:inherit
}
I guess it has to do with css inheritance that for some properties like font-size which might not be inherited by default (font is the css shorthand for the different font-* rules).
The inherit value is used to enforce inheritance of values or to make inherit values of properties which are normally not.
You can see on this fiddle that the first input does not inherit font properties, compared to the second one which has font: inherit.
Related
Is it possible to override the display property with its default value? For example if I have set it to none in one style, and I want to override it in a different with its default.
Or is the only way to find out what the default of that element is and then set it to that? Would like to not have to know if the element is usually block, inline or whichever...
A browser's default styles are defined in its user agent stylesheet, the sources of which you can find here. Unfortunately, the Cascading and Inheritance level 3 spec does not appear to propose a way to reset a style property to its browser default. However there are plans to reintroduce a keyword for this in Cascading and Inheritance level 4 — the working group simply hasn't settled on a name for this keyword yet (the link currently says revert, but it is not final). Information about browser support for revert can be found on caniuse.com.
While the level 3 spec does introduce an initial keyword, setting a property to its initial value resets it to its default value as defined by CSS, not as defined by the browser. The initial value of display is inline; this is specified here. The initial keyword refers to that value, not the browser default. The spec itself makes this note under the all property:
For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.
This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.
So I guess the only way right now using pure CSS is to look up the browser default value and set it manually to that:
div.foo { display: inline-block; }
div.foo.bar { display: block; }
(An alternative to the above would be div.foo:not(.bar) { display: inline-block; }, but that involves modifying the original selector rather than an override.)
If using javascript is allowed, you can set the display property to an empty string. This will cause it to use the default for that particular element.
var element = document.querySelector('span.selector');
// Set display to empty string to use default for that element
element.style.display = '';
Here is a link to a jsbin.
This is nice because you don't have to worry about the different types of display to revert to (block, inline, inline-block, table-cell, etc).
But, it requires javascript, so if you are looking for a css-only solution, then this is not the solution for you.
Note: This overrides inline styles, but not styles set in css
Unset display:
You can use the value unset which works in both Firefox and Chrome.
display: unset;
.foo { display: none; }
.foo.bar { display: unset; }
No, it is generally not possible. Once some CSS (or HTML) code sets a value for a property on an element, there is no way to undo it and tell the browser to use its default value.
It is of course possible to set a property a value that you expect to be the default value. This may work rather widely if you check the Rendering section of HTML5 CR, mostly reflecting what browsers actually do.
Still, the answer is “No”, because browsers may have whatever default values they like. You should analyze what was the reason for wanting to reset to defaults; the original problem may still be solvable.
What worked for me was revert!
revert resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet.
If you have access to JavaScript, you can create an element and read its computed style.
function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
var pseudoElement = opt_pseudoElement || null;
var element = document.createElement(elementTagName);
document.body.appendChild(element);
var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
element.remove();
return computedStyle;
}
// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'
Concerning the answer by BoltClock and John, I personally had issues with the initial keyword when using IE11. It works fine in Chrome, but in IE it seems to have no effect.
According to this answer IE does not support the initial keyword:
Div display:initial not working as intended in ie10 and chrome 29
I tried setting it blank instead as suggested here:
how to revert back to normal after display:none for table row
This worked and was good enough for my scenario. Of course to set the real initial value the above answer is the only good one I could find.
According to my understanding to your question, as an example: you had a style at the beginning in style sheet (ex. background-color: red), then using java script you changed it to another style (ex. background-color: green), now you want to reset the style to its original value in style sheet (background-color: red) without mentioning or even knowing its value (ex. element.style.backgroundColor = 'red')...!
If I'm correct, I have a good solution for you which is using another class name for the element:
steps:
set the default styles in style sheet as usual according to your desire.
define a new class name in style sheet and add the new style you want.
when you want to trigger between styles, add the new class name to the element or remove it.
if you want to edit or set a new style, get the element by the new class name and edit the style as desired.
I hope this helps. Regards!
It is common when writing CSS (especially overlays) for Firefox to use:
identifier { -moz-appearance: none !important; }
This removes the default CSS property assignments for the element specified by identifier.
But what if you just want to remove some of the default property assignments made by a default -moz-appearance?
For example, if you want to just change the line-height of an element that has a default -moz-appearance, you can't just specify line-height: 20px !important;. This won't override the line-height specified in the -moz-appearance.
The only way I've found to override any part of the -moz-appearance is to assign none to the appearance, but the problem with doing this is that you lose all the CSS defined by the -moz-appearance.
Is there a way to just override a single CSS property of an element that has a -moz-appearance?
I suspect the answer is "no", but perhaps I can learn something here.
Update (problem): Once application is pushed to dev server, asp includes inject styles that override the actual custom coded needed styles. One instance below, wrapper div with a tag overrides all styled <a> tags and links within. It would be really quick to use none !important on the CSS color module. As disabling that everything resolves correctly. Now, I can do this with jQuery or (can move all a tag classes to the <head> with !important and override. Just wondering any thoughts or hacks about using or getting a 'none' effect in this type of scenario, that is all.
Let's just say situation / environment out of your hands.
And you must override a style.
Say your trying to override a color assigned to a div. Is the below valid / will it work? Is there an alternative. Defining a color not a possibility as will override other <a> tag colors.
#HUGEwrapperdiv a {
color: none !important;
}
No, it won't work. It will be ignored because none is an invalid value for the color property.
Depending on what you're trying to achieve, you could set it to transparent/inherit/initial.
These values are somewhat self-explanatory. The value inherit will cause the element to inherit the computed value of the color property from its parent element. The value initial will set the color to the browser's default color (likely specified in the user agent stylesheet). It's worth pointing out that the initial value isn't fully supported in all browsers.
I believe, as it seems to me that you're trying to get font to have no color/be transparent, that if you set the CSS color property (color:) to rgba(0,0,0,0), it will set the text to black, but also set its opacity to 0 so it won't be seen. I hope this helps.
to prevent overide you also can use in styles or make a custom class
color: unset !important
Is it possible to override the display property with its default value? For example if I have set it to none in one style, and I want to override it in a different with its default.
Or is the only way to find out what the default of that element is and then set it to that? Would like to not have to know if the element is usually block, inline or whichever...
A browser's default styles are defined in its user agent stylesheet, the sources of which you can find here. Unfortunately, the Cascading and Inheritance level 3 spec does not appear to propose a way to reset a style property to its browser default. However there are plans to reintroduce a keyword for this in Cascading and Inheritance level 4 — the working group simply hasn't settled on a name for this keyword yet (the link currently says revert, but it is not final). Information about browser support for revert can be found on caniuse.com.
While the level 3 spec does introduce an initial keyword, setting a property to its initial value resets it to its default value as defined by CSS, not as defined by the browser. The initial value of display is inline; this is specified here. The initial keyword refers to that value, not the browser default. The spec itself makes this note under the all property:
For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.
This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.
So I guess the only way right now using pure CSS is to look up the browser default value and set it manually to that:
div.foo { display: inline-block; }
div.foo.bar { display: block; }
(An alternative to the above would be div.foo:not(.bar) { display: inline-block; }, but that involves modifying the original selector rather than an override.)
If using javascript is allowed, you can set the display property to an empty string. This will cause it to use the default for that particular element.
var element = document.querySelector('span.selector');
// Set display to empty string to use default for that element
element.style.display = '';
Here is a link to a jsbin.
This is nice because you don't have to worry about the different types of display to revert to (block, inline, inline-block, table-cell, etc).
But, it requires javascript, so if you are looking for a css-only solution, then this is not the solution for you.
Note: This overrides inline styles, but not styles set in css
Unset display:
You can use the value unset which works in both Firefox and Chrome.
display: unset;
.foo { display: none; }
.foo.bar { display: unset; }
No, it is generally not possible. Once some CSS (or HTML) code sets a value for a property on an element, there is no way to undo it and tell the browser to use its default value.
It is of course possible to set a property a value that you expect to be the default value. This may work rather widely if you check the Rendering section of HTML5 CR, mostly reflecting what browsers actually do.
Still, the answer is “No”, because browsers may have whatever default values they like. You should analyze what was the reason for wanting to reset to defaults; the original problem may still be solvable.
What worked for me was revert!
revert resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet.
If you have access to JavaScript, you can create an element and read its computed style.
function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
var pseudoElement = opt_pseudoElement || null;
var element = document.createElement(elementTagName);
document.body.appendChild(element);
var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
element.remove();
return computedStyle;
}
// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'
Concerning the answer by BoltClock and John, I personally had issues with the initial keyword when using IE11. It works fine in Chrome, but in IE it seems to have no effect.
According to this answer IE does not support the initial keyword:
Div display:initial not working as intended in ie10 and chrome 29
I tried setting it blank instead as suggested here:
how to revert back to normal after display:none for table row
This worked and was good enough for my scenario. Of course to set the real initial value the above answer is the only good one I could find.
According to my understanding to your question, as an example: you had a style at the beginning in style sheet (ex. background-color: red), then using java script you changed it to another style (ex. background-color: green), now you want to reset the style to its original value in style sheet (background-color: red) without mentioning or even knowing its value (ex. element.style.backgroundColor = 'red')...!
If I'm correct, I have a good solution for you which is using another class name for the element:
steps:
set the default styles in style sheet as usual according to your desire.
define a new class name in style sheet and add the new style you want.
when you want to trigger between styles, add the new class name to the element or remove it.
if you want to edit or set a new style, get the element by the new class name and edit the style as desired.
I hope this helps. Regards!
Is it possible to override the display property with its default value? For example if I have set it to none in one style, and I want to override it in a different with its default.
Or is the only way to find out what the default of that element is and then set it to that? Would like to not have to know if the element is usually block, inline or whichever...
A browser's default styles are defined in its user agent stylesheet, the sources of which you can find here. Unfortunately, the Cascading and Inheritance level 3 spec does not appear to propose a way to reset a style property to its browser default. However there are plans to reintroduce a keyword for this in Cascading and Inheritance level 4 — the working group simply hasn't settled on a name for this keyword yet (the link currently says revert, but it is not final). Information about browser support for revert can be found on caniuse.com.
While the level 3 spec does introduce an initial keyword, setting a property to its initial value resets it to its default value as defined by CSS, not as defined by the browser. The initial value of display is inline; this is specified here. The initial keyword refers to that value, not the browser default. The spec itself makes this note under the all property:
For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.
This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.
So I guess the only way right now using pure CSS is to look up the browser default value and set it manually to that:
div.foo { display: inline-block; }
div.foo.bar { display: block; }
(An alternative to the above would be div.foo:not(.bar) { display: inline-block; }, but that involves modifying the original selector rather than an override.)
If using javascript is allowed, you can set the display property to an empty string. This will cause it to use the default for that particular element.
var element = document.querySelector('span.selector');
// Set display to empty string to use default for that element
element.style.display = '';
Here is a link to a jsbin.
This is nice because you don't have to worry about the different types of display to revert to (block, inline, inline-block, table-cell, etc).
But, it requires javascript, so if you are looking for a css-only solution, then this is not the solution for you.
Note: This overrides inline styles, but not styles set in css
Unset display:
You can use the value unset which works in both Firefox and Chrome.
display: unset;
.foo { display: none; }
.foo.bar { display: unset; }
No, it is generally not possible. Once some CSS (or HTML) code sets a value for a property on an element, there is no way to undo it and tell the browser to use its default value.
It is of course possible to set a property a value that you expect to be the default value. This may work rather widely if you check the Rendering section of HTML5 CR, mostly reflecting what browsers actually do.
Still, the answer is “No”, because browsers may have whatever default values they like. You should analyze what was the reason for wanting to reset to defaults; the original problem may still be solvable.
What worked for me was revert!
revert resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet.
If you have access to JavaScript, you can create an element and read its computed style.
function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
var pseudoElement = opt_pseudoElement || null;
var element = document.createElement(elementTagName);
document.body.appendChild(element);
var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
element.remove();
return computedStyle;
}
// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'
Concerning the answer by BoltClock and John, I personally had issues with the initial keyword when using IE11. It works fine in Chrome, but in IE it seems to have no effect.
According to this answer IE does not support the initial keyword:
Div display:initial not working as intended in ie10 and chrome 29
I tried setting it blank instead as suggested here:
how to revert back to normal after display:none for table row
This worked and was good enough for my scenario. Of course to set the real initial value the above answer is the only good one I could find.
According to my understanding to your question, as an example: you had a style at the beginning in style sheet (ex. background-color: red), then using java script you changed it to another style (ex. background-color: green), now you want to reset the style to its original value in style sheet (background-color: red) without mentioning or even knowing its value (ex. element.style.backgroundColor = 'red')...!
If I'm correct, I have a good solution for you which is using another class name for the element:
steps:
set the default styles in style sheet as usual according to your desire.
define a new class name in style sheet and add the new style you want.
when you want to trigger between styles, add the new class name to the element or remove it.
if you want to edit or set a new style, get the element by the new class name and edit the style as desired.
I hope this helps. Regards!