I want to make a part of my website display html in its defualt style essentially ignoring all other css files only for certain elements.
So I try all: initial !important; It gives me the output I want but when using h1 tag the output text has font-size 19px which should be 32px instead, is there something I am doing wrong or is this a browser bug?
edit: when using revert I get weard effect see:https://imgur.com/a/pEmJFpw
for more explanation see my comment below this post
You need to consider the use of revert
The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. Thus, it 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 ref
initial won't be good because it does something different
The initial CSS keyword applies the initial (or default) value of a property to an element. It can be applied to any CSS property. This includes the CSS shorthand all, with which initial can be used to restore all CSS properties to their initial state.
Note the of a property. So initial won't consider the default CSS of the browser.
Related: What's the difference between `all: unset` and `all: revert'
Related
I'd like to reset a <button> to browser defaults in the high contrast mode of our website. Simply removing the styles is not an option as I would have to change a lot of code.
I thought this would be an easy task by assigning initial to every changed CSS property. Turns out, it doesn't work: while some properties are actually reset, the browser won't apply its original background-color and border and, in the case of Chrome, the text color when the button is disabled.
Is there a way to do this or can I only approximately reconstruct the browser defaults? And what is initial for if not for that?
JSFiddle showcasing the problem.
While some properties are actually resetted, the browser won't apply
its original background-color and border
It looks to me like the OP is looking for the revert value functionality.
See the spec regarding revert - one of the CSS-wide property values:
Rolls back the cascaded value to the user level, so that the specified
value is calculated as if no author-level rules were specified for
this property on this element. ...
Unfortunately, the revert value is currently not well supported.
Caniuse on revert actually nicely summarizes (and also hi lights the difference between revert and initial)
A CSS keyword value that resets a property's value to the default
specified by the browser in its UA stylesheet, as if the webpage had
not included any CSS. For example, display:revert on a <div> would
result in display:block. This is in contrast to the initial value,
which is simply defined on a per-property basis, and for display would
be inline.
I suppose your html for high contrast mode has a parent with a class... let's say as an example you have the class "highcm" at body
You could change your actual css sheet where you have styled your buttons to something like:
body:not(.highcm) .youractualclass button {
color: red;
}
This way just your button with not "highcm" at body will be styled while the rest will be rendered browser defaults
I have the same page in two chrome tabs. This page has a configuration that if you change it, some styles are modified.
The problem i have is that a particular style should not be changed but in fact it does. This is a line-height style.
The problem i'm having is that in one page the line-height is 14px and in the other is 18px and the same thing happens with font-size.
I search in the computed section of chrome developer tools but i can't found the source of that change because the line-height and font-size says inherit but all the values bellow are strikethrough. So my question is more in a general way to know where this values are been set?
- Open Chrome Web Inspector.
- Select the "Element" where you want to check the line height.
- On the right hand side, you will find "styles".
- Now scroll on the "styles" to find all the "line-height" styles from different styling files.
You will see Inherited From section there.
Example:
"Inherit" means the element gets its value for line-height from another (parent) element. I guess you modified such a parent element. You can avoid this by giving your element an exact value for line-height with !important.
.your-element{line-height: 14px!important;}
Does padding:initial have any advantage over padding:0? Example:
<style>
textarea {
padding: 0;
}
</style>
<textarea>Hello, world!</textarea>
They mean the same thing, as the initial value of padding is, in fact, zero on all sides. You can find this in the propdefs for padding and its longhands in this section of the spec.
In this case, given the nature of the padding property, and the fact that its initial value is basically common knowledge at this point, there isn't much of an advantage of setting padding: initial over padding: 0.
In fact, there's one disadvantage, and that is its as yet incomplete browser support owing to the fact that it's a relatively new keyword. Namely, if padding wasn't already zero on this element, browsers that don't support the keyword would ignore the declaration entirely, resulting in the property not being reset to zero.
The initial keyword is most useful when used with the new properties defined in the CSS3 Cascading module (none of which are implemented yet AFAIK, and where the keyword itself is defined). It can also be used when you simply want to reset a property to its initial value without caring what that value actually is, which is particularly useful for properties that are either inherited by default, such as color (although the initial value in that case would be currentColor), or in cases where the "initial" value can otherwise vary depending on the layout and thus cannot be determined as a fixed value. Such cases, however, are admittedly quite rare.
Lastly, note that "initial value" and "browser default value" are not the same; the initial value is defined by spec, which is separate from what value the browser assigns to certain properties on certain elements as part of its default stylesheet. There is no reliable way to reset a property to its browser default for the given element without using prior knowledge or even JavaScript to determine this default value. See this answer for an illustration.
Actualy both are same,But Initial gives the developer more freedom.(#simon's comment)It cannot be always zero,it can be any initial value.
So there isn't much advantage of using padding: initial over
padding: 0
The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the
element for which it is specified to use the initial value of the
property.
Another Example
<p style="color:red">
this text is red
<em style="color:initial">
this text is in the initial color (e.g. black)
</em>
this is red again
</p>
read through https://developer.mozilla.org/en-US/docs/Web/CSS/initial
There is a new value in CSS3 called 'initial', it will reset the prop's value to the browser's default.
The spec here: https://developer.mozilla.org/en-US/docs/Web/CSS/initial
But in most times, a website/webpage often have a reset.css or normalize.css file apply to the site/page.
So in most cases, I want the prop which set to 'initial' to be the reset.css or normalize.css's value but not the browser's default, how to solve the conflict between those two?
There is a new value in CSS3 called 'initial', it will reset the prop's value to the browser's default.
That's where most people are mistaken (even I got it wrong once). The initial value is not the same thing as the browser's default value.
A browser default is set by the browser in its default stylesheet.
The initial value of a property is the default that is stated in the spec. The initial value is usually the same regardless of what element you apply the property to; it's the browser that decides whether it should apply a different value to different elements by default.
For example, the initial value of display is inline — many HTML elements default to display: block, but setting display: initial will turn them into inline elements, not block elements.
Even the document you link to itself links to another document defining the term "initial value":
The initial value given in the summary of the definition of each CSS property has different meaning for inherited and non-inherited properties.
With all that said, there is currently no way using CSS to reset a property to either a browser's default or an arbitrary level in the cascade (e.g. normalize.css or a reset stylesheet).
How is the all property used in CSS?
This question is related to this one.
According to this:
The ‘all’ property is a shorthand that resets all CSS properties.
Name: all
Value: initial | inherit | default
Initial: See individual properties
Applies to: See individual properties
Inherited: See individual properties
Percentages: See individual properties
Media: See individual properties
Computed value: See individual properties
Animatable: See individual properties
So, it has to reset CSS properties for a selector.
This means, for example, that if we import Twitter Bootstrap and add the style below, the .btn class has to be reseted:
.btn {
all: default;
}
This doesn't happen. See this jsFiddle.
Am I correct? Isn't this implemented in web browsers?
The W3C specification you linked to says it's currently in "Working Draft" stage. Also, there's no mention of the all property on CanIUse.com, so I think it's safe to say it's experimental.
You might want to try -webkit-all or -moz-all.
Y'know, reading the spec for this feature, it feels like a hack. If you design your style cascade appropriately there shouldn't be a need for this property.
Right now I believe only Firefox supports all (as of version 27). You can use the all property (e.g. all: unset;) to apply the value to every property (except direction and unicode-bidi).
See this pen in latest FireFox: http://codepen.io/tomliv/pen/AejFH
There are 3 inputs in the grey area (really!).
This is not what I was expecting, but maybe setting all to initial will be more what you need?
There really is no default value for every property - at least one that is consistent across all browsers.
That's really where a CSS reset comes in. I'd recommend looking at Eric Meyer's CSS reset: http://meyerweb.com/eric/tools/css/reset/. Typically, these types of resets are used to reduce browser inconsistencies.
If you're looking to apply something to all elements (you'll still need to individually list each property), use
* { /* Universal Selector */ }
Using a reset stylesheet or some CSS framework like bootstrap is probably a better solution for both normalizing your CSS and cross browser consistency.