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.
Related
Are there a css property that would change nothing?
I need this for testing purposes very often when writing scss just to see that I created a css selector correctly. For instance, I would be glad to have something like this foo: "helloworld1"; and later on I would be able to change the value of the foo and check the value in the developer tools to see that my selectors have indeed reached a correct element.
I thought about using the width: auto;, but sometimes the width is specified (e.g. width: 100px;).
Define your own properties using custom properties (aka CSS variables)
Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.
Also
Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules, can be made conditional with #media and other conditional rules, can be used in HTML’s style attribute, can be read or set using the CSSOM, etc.
This is clearly not the case as each element can have it's own default.
See here:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Initial value: inline
Applies to: all elements
And of course contradicting documentation which seems more correct in this case.
https://www.w3schools.com/css/css_display_visibility.asp
Is there something I'm missing here?
It seems to clearly state that "all elements" have "initial value" set to inline.
First of all w3schools isn't the official Documentation, W3C is!
TL:DR: You are confusing things -- The initial value of the property which is inline and to which elements the property applies (no matter the value it has)
They are not related.
Here is the official Documentation about it
Which match MDN Docs.
And yes the initial value of display is inline the line below (in your question) says it can apply display property to all elements, which is true and not starting "all elements" with inline, because if you read the MDN Docs you see this:
The display CSS property specifies the type of rendering box used for
an element. In HTML, default display property values are taken from
behaviors described in the HTML specifications or from the
browser/user default stylesheet. The default value in XML is inline,
including SVG elements.
(Emphasizes is mine)
And what that line means is any browser/user-agent are free to set the initial value of the element as they think it is better.
N.B. Remember that by initial value means using initial value itself, so whenever you set display:initial it will became display:inline as per the Documentation above states.
Initial value: inline
...states that official recommendation for user agents is to interpret display:initial as display:inline, not as the default value for the type of element (i.e. block for <div>, inline-block for <span>, etc...).
So, in practice, setting display:initial; on a <div> will apply display:inline; to it in user agents respecting the standard recommendation, instead of display:block; as most developers would be tempted to assume. Setting display:initial; on any element should be interpreted as display:inline. That is what it means.
Ultimately, this is useful as it reduces ambiguity around a complex attribute, such as display.
As for why does MDN provide this information, generally speaking, there are very few (if any) contradictions between MDN and W3C/official sources, which makes it a valuable and reliable resource. Its main quality is it presents the information in a more accessible format (than the official docs) for people without a solid background on web technologies/concepts.
Personally, besides reading the articles/examples themselves, I find myself using it a lot as the fastest way to get the full list of official resources about any web concept, as you'll always find the links at the end of the MDN article on the subject (where applicable).
Those two things aren't related.
The initial value of a property refers to the CSS-defined default value for that property. Every single CSS property has an initial value, regardless of element type, because CSS properties aren't tied to elements of any document language in any way. This initial value is intended as a default value for unrecognized elements, to guarantee that every element has a value for every property for the purposes of the cascade and therefore ensure that a browser knows how to render that unrecognized element as it encounters it.
The so-called "default value" of a property is just an arbitrary value set by a browser in its UA default stylesheet. The HTML5 spec contains a reference document on what default values should apply to what HTML elements, which browsers follow mostly, but this is completely unrelated to CSS's concept of an initial value (nor does it contradict its definition of initial value, because it defines default styles separately as "user-agent-level styles").
"Applies to", on the other hand, is unrelated to the initial value. Even if a property only applies to certain types of elements, those elements will always have every single CSS property, including properties that don't apply to them. What "Applies to" actually means is "Has effect on". If a property doesn't apply to an element, it simply means that it has no effect.
For example, you may find that the flex property only applies to flex items. However, every single element has a flex property, regardless of whether it's actually a flex item, and they pretty much all have its initial value simply because I'm not aware of any UA styles altering its value from the initial value for any element. You could still set an arbitrary value on an element that isn't a flex item, and it simply would have no effect — but you could, for example, force flex items that are children of this element to inherit this value with flex: inherit (you wouldn't actually do this, I'm just stating an example).
In fact, a real-world example of this exists in the ul and ol elements — many authors (including myself) set list styles on those elements, when really the list markers you see belong to their li children that are inheriting their list styles, since list styles only apply to list-items and ul and ol are not themselves list items.
And as mentioned, W3Schools isn't official documentation. To save you any more confusion, assume W3Schools does not exist. Continue using MDN if it is easier to understand, but always cross-reference with the official specs located at w3.org and whatwg.org (which MDN usually does a good job linking to, it pretty much never links to W3Schools).
Each user agent(browser) applies a default style sheet for an HTML page. You can see in the default HTML4 style sheet:
dir, hr, menu, pre { display: block; unicode-bidi: embed }
li { display: list-item }
head { display: none }
...
The default display property is changed depending on the element.
That would be true for a native xhtml browser. HTML browser is something else completely, it doesn't have to wait for separate instructions. In HTML all known elements have their display rendering predefined by default.
(Which of course can be overridden).
There were browsers which didn't support styles at all. HTML tags are semantic. All xhtml is generic and of course to it all tags are equally [unknown] and indiscriminately inline by default.
I am currently merging functionality of 2-3 open-source projects and am dealing with a couple of large CSS files. To make a long story short, there are a couple of textboxes that are not being styled correctly. Namely, they seem to inherit styles from both libraries.
Hence, I am wondering if there is a Jade or CSS way of disabling all styles on those boxes and then applying only the ones indicated in its class property. That is, somehow I need to make sure that the only thing that are applied are those that are specified within the class property.
Check out this link on 'unset', 'initial', and 'inherit'.
Likewise, check this out as well. There is always the option of using '!important' in your own CSS file to override existing styles.
Hope that helps!
the all property offers the ability to force a reset off all properties, but browser support is limited. Because of the nature of CSS, the element will always inherit any properties that are not overridden. I'm assuming if you are using jade you are also using a css pre-processor, so you can mange some of this by name-spacing your libraries. For example
//sass
.foo {
#import 'bar';
}
//csss
.foo .class-from-bar {...}
.foo .class-from-bar-2 {...}
I have a GWT code that creates a list (grid as result) and I set the style to a CSS class like
.test tr {
height: 26px;
}
now...if from code I need to obtain that "26px" when the render isn't completed or when the grid has no element? ho can I obtain that value? I know i can do
obj.getElement().getStyle().getProperty("height");
to obtain some style attribute but how can I obtain the sub-element tr related value?
As you've discovered, the element's style property only contains styles that are directly set on the element itself - it does not automatically pick up css that has applied to it, or css that has been applied to parent nodes and inherited to it, etc.
To do this, you need to get the 'computed' style of the element. This is a somewhat expensive operation so should be done carefully, and will not work in older versions of IE, so different code entirely must be written. Some libraries like GXT have a built-in feature to do this work for you (XElement.getComputedStyle(...)), if you are not using a library like that, you will need to write JSNI that can call into this api and ask for these details.
Check out http://caniuse.com/#feat=getcomputedstyle (IE8 and below do not have it, old Android Browser and Opera Mini apparently have issues), and https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle for the details on the call. In your JSNI, remember to use $wnd to refer to the window object, something like this:
$wnd.getComputedStyle(element).getPropertyValue('height');
There is no need to get that value programmatically. I imagine that you have only one or two styles that define your tables, so you can always infer the row height from your style name. For example, if you have "standard" height set at 26px and have a "big-table" style setting it at 36px, you can simply:
int rowHeight = myTable.getStyleName().contains("big-table") ? 36 : 26;
How do you reset ALL inherited properties for a class in a CSS file? I need to be able to set new properties on elements without pre-defined properties having an effect on it.
Is this possible using only CSS?
I am not talking about a CSS reset, such as:
body {
margin:0px;
padding:0px;
}
Simple answer - you can't.
Unless you override ALL the properties with something more specific, you cannot do this efficiently. This is extremely redundant, and I don't suggest doing it.
Instead you should avoid this completely. Don't set properties in the first place and you won't have this problem.
Also, don't do what other are suggesting and use !important this is a bad practice.
You cannot reset css properties, you can overwrite your css properties one by one, nothing automatic so far.
* {
property:inherit
...
... long list of all .css properties ...
propertyZ:inherit
}
and maybe (wishing)) comming soon :initial
See this answer : Reset/remove CSS styles for element only
A class can't inherit properties. Inheritance is done through the DOM tree from the parent element. This will only happen if the default style for an element is to inherit, or if you have explicitly said some-property: inherit;.
If you are asking how to stop rules from CSS rulesets that have selectors which match a given element from applying, then you can use the initial value. Note that:
It is from a working draft specification, so browser support may be weak to non-existent (I haven't see any documentation or performed any tests on support levels for it)
You still need to use a more specific selector (or some other method to win the cascade) for it to override any other styles.
You'd probably be best off rewriting your stylesheet to be less broad in the elements it affects in the first place though. That approach will certainly have the best browser support.
You Cant reset properties, as they will always be inherited
You can surely Override them by using !important
ex:
childselector
{
height:auto !important;
}