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
Related
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'
I would like to know why some CSS properties are not applied as expected to html elements. I am not trying to fix a particular issue but I am looking for a general approach to be followed.
inspector screenshot
As seen in the above screenshot, I have a media query to be applied when the width is equal to or exceeds 40 rem.
But the width that I want to be applied to the plan class is 30% which is not applied but instead a width of 100% defined as a property of the plan class is still applied.
Though the inspector shows the property crossed out, is there any tool to find out the reason it is not applied?
The list of styles is shown in reverse order of how they are applied.
You can see that the top set of styles is the style property, and it is empty.
The next one is .plan and sets width: 100%.
The next one is .plan inside the media query, and is overridden because of the previous one.
You can see a simple view, but focused on specific properties, but looking in the Computed tab and clicking the triangle next to the property you are interested in to expand the list.
See The Cascade in the CSS specification for an explanation about what order properties are applied in.
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;}
I have a piece of HTML that I need to modify and I need to keep the changes minimal (out of CSS). All I need to do is to hide a table cell until something happens. So I went ahead and added the style tag as shown below:
<td style="display:none;">
However, this causes the style class to reset, e.g. the cell which used to be vertically center-aligned is now top-aligned, and so on. My understanding is that this is because the style attribute overrides the default CSS stuff. Is that correct? If yes, how can I prevent it? I just need to add the display attribute, not reset the rest of style attributes.
I spend some time searching online and noticed that HTML5 has introduced something called scoped style. Is there an HTML4 easy-to-do equivalent for it?
It might be because doing display:none remove the node from the DOM display calculation. You no longer have a placeholder for that cell in your table. You might try visibility:hidden, which will have the DOM element keep its place in the document rendering but just not be visible.
Try visibility:hidden; instead of display:none;
Let me know if that does the trick.
My understanding about CSS is that, generally if you set <div style="color: Red">, all content inside <div> will be affected. However if you put a html button inside, the color on the words on the button is not affected. I'm a bit disturbed by this exception. How do I give a reasonable explanation to it?
It's about users' expectations of the user interface.
Buttons (and other user interface widgets) prefer to look like their operating system counterparts. On Windows, users expect buttons to be grey with black text, so that's how browsers present them. It's intentional that you have to try quite hard to override that behaviour.
It's because it would be impractical for input elements to inherit style information from parent elements, this means whenever you style a form, you would have to create style rules for every type of input used in it, to make sure they don't turn out unexpected. you can however force inputs to inherit their parent's style with css:
input {
color: inherit;
}
That code will cause all input elements to inherit their parent's text color style.
The "cascading" part of "Cascading Style Sheets" (CSS) means that in general, you're right: a property set on an object will cascade down to objects below it.
However for some properties this doesn't make sense, so those properties are explicitly non-cascading (eg if you set a border on a div, you don't want all its children to have borders as well).
If we were dealing with raw XML in our DOM, that's where it would end. The colour would indeed cascade all the way down. However, we're dealing with HTML, and HTML has some pre-existing conditions, exceptions and overrides. For example, a <div> always defaults to display:block; whereas a <span> will default to display:inline;.
Buttons and input fields have a lot of defaults and overrides, which is why they show up as buttons and input fields without you having to do loads of styling on them. This is also why they override the cascading effect of certain CSS rules, including color.
You can override the override by specifying inherit for the overridden styles. So if you want you button to take the red colour you specified previously, you would do something like this:
.mybutton {
color:inherit;
}
You will want to look up the rules for inheritance in CSS; certain property values will cascade to certain descendant elements, and certain ones won't. In fact, one of the possible values for many CSS properties is inherit, which suggests that this value is not always the default.
The browser itself has default styles for input types, dependent on the OS it's running on. So for Windows, it will most likely be grey, for Apple OS' blue and round (fancy).
There are very easy ways to override this in CSS, I use it all the time in my websites, customising buttons and input fields to better match my site design with images and as mentioned before color values either inherited or changed.
Here is a nice article explaining the cascade and inheritance rules native to using CSS that might help you out.
:)
Buttons and some elements else come with their own style. This style is browser dependent. In different browsers the buttons can look a bit different.