Directory of RSS feeds
Statistics

RSS feeds in the directory: 374

Added today: 0

Added yesterday: 0

Hi-Tech / Internet

Proper cheat sheet CSS cascade

Css-live - Severstal your world! 26.11.2018 at 19:03

Community that speaks the languages of HTML, CSS and JavaScript

To Write this article I pushed relatively recent article on CSS-tricks (you probably have already seen it, the link will not give out of spite:). The author has done a great and wonderful work painted a beautiful visual scheme-a"cheat sheet", written explanation in plain language, gave a bunch of examples, I have not forgotten even about presentation attributes, also affect the styles (in SVG)... Alas, even that article confirmed two sad rules: 1) no one knows CSS, 2) no one reads the specs. So the first edition was broadcast one of the popular misconceptions about the cascade. To the credit of the author, he promptly corrected and the scheme, and the article — but if he looked in the standard, this would not be necessary...

so I decided shameless SPE to borrow the idea of simple and visual "crib" from that article — but just to make it proper, reflecting not only the personal experience of the author, but standard.

As we already know, for each property of each object CSS-cascade collects all rules that mention this property applied to that element. And then sorts them according to certain criteria. For today's practical problems is enough for us three criteria listed in the module of the cascade and inheritance penultimate, 3 levels: first in origin and importance, then by specificity, and finally, in order in the code. In newer spec mentions other criteria, but we come up to them when they start real on something to influence.

in Addition, in obtaining the computed values of CSS properties can participate in the value that is inherited from a parent (inherited properties). And Yes, sometimes the final element styles depend on other characteristics of the item — most of the attributes. This is most clearly in SVG, where these presentation attributes (stroke, fill, r, etc.) match those of the CSS properties. On current standard SVG2 even d corresponds to a CSS property that allows you to animate the styles themselves are SVG paths-like figures (although still only in "chromatech"). But there are similar attributes in HTML. With some of them, like width and height for , we still meet regularly. Others, like the text and bgcolor from (specifies the color of text and background, respectively) is almost forgotten and are found only on the relic pages from the 90s — but browsers support them, because these pages many more. And each property has an initial value that is assigned to him, if for this item anywhere nothing else is specified (on the "tournament" cascade none appeared and it did not take place:).

now, if we arrange all these possible sources of values for the properties in ascending order of priority, will result in the plate:

the Source of the Specificity of the Possible number of values an Initial value is Always the same Inherited value (for inherited properties) — a Maximum of one Browser styles without !important 0, 0, 1 indefinitely 0, 0, 2 indefinitely, etc. Custom styles without !important ... More styles without !important

(CSS-in-JS also fall here!)

the presentation attributes Of HTML or SVG, 0, 0, 0 at most one Of and 0, 0, 0 indefinitely 0, 0, 1 indefinitely, etc. From the attribute style="..." ∞ as Many Styles of animation (standard and Firefox) — a Maximum of one More styles !important Of and 0, 0, 0 indefinitely 0, 0, 1 indefinitely, etc. From the attribute style="..." ∞ as Many Custom styles !important ... Browser styles !important 0, 0, 1 indefinitely 0, 0, 2 indefinitely, etc the Styles in animation (WebKit/Blink/Edge, not the standard) — a Maximum of one Styles during the transition (if any) — a Maximum of one

the table is divided into large "tiers" (left column). On some tiers can be at most one value: the property of the parent element, or inherited, or not, the property either is animated or not, etc., Other tiers are divided into "sub-levels" — for example, the element can match a lot of different selectors, as in our usual styles (the standard calls them copyrighted) and in the built-in styles of the browser. The values coming from these selectors are first sorted by specificity. And with equal specificity — just in order.

will Apply the value that falls in the table below.

Let's quickly apply this cheat sheet in practice. I have prepared a special example on Codepen which tries to set the color for the body in several ways:

See the Pen Example of steps of the cascade by Ilya Streltsyn (@SelenIT) on CodePen.

there is no "tricky" selectors where it is necessary to carefully count the numbers of specificity: the main trick is not in it. But the color property is inherited. For the body element, which we are now "dissect", there is a historical HTML-text attribute is also affect the color of the text.

All values for the color property, which in principle could be applied to our element , are collected in the right part of the picture in the order they appear in the code. And left in sight, on which "tier" of the table is the value in the end will be. For a better view, you can open a larger version of the picture by clicking.

will go over this list and note interesting points.

At the initial value, obviously, in this situation there is no chance: it can be used only if nothing else, and we've got a whole bunch of stuff.

With the inherited value (from the parent element , aka :root) the situation is similar: it would apply if the body did not specify any styles. How this value came to the parent — it doesn't matter: the outcome is inherited, the calculated value (more on the "life stages" CSS-values — in our previous article about the cascade). So !important styles for the html does not affect the priority of the parent style for body. Well, if we didn't have a color property, and any non-inheritable property, like width or display — we would all have missed this step entirely.

here are the styles, "hardwired" in the code of the browser itself. For the color property from the body, as far as I can tell, the browser styles (neither the WebKit nor Gecko) no value is specified. Default color specify the root element and inherited from him around the tree. So at this stage we have no change. And custom styles too: there is no (most likely). You all have seen custom styles?..

the most multi-colored arrows intertwined on the stage of the author's styles. Reason: this stage is for us the most important. So much so that many books and articles on CSS the other stages and is not considered (and for good reason;). It gets the lion's share of styles that define the elements we, web developers, no matter the old fashioned way, through the CSS files or the tag , or as, "in JS" (which would still be something of them). And any methodology and tools only save (at best) confusion with the specificity, but not from "cascade" at all:).

All the values of each property of the copyright styles, in principle, applicable to our element, are collected together and sorted first by specificity of selector, then the order of connection. Connection method, contrary to popular myth, generally has no effect. Is that @import can only connect in the beginning and because of this loses the subsequent styles, but the reason is the Declaration order, and not some kind of "specialness" @import.

the First separate line in the "More styles", with the value red can surprise: how are the CSS color property HTML attribute with a completely different name? Involved browser ancient magic under the title "tips for submission" (presentationl hints). Oddly enough, it is clearly spelled out in the standards. For each language, the standard describes which attributes correspond to which property, what rules are converted to their values (e.g., the same width/height for numeric values are translated in the same CSS properties by appending 'px'), and the place of these plus styles in the cascade. For HTML and SVG this place in the beginning of the author's styles with zero specificity, before all others (though in SVG2 them a funny incident, because nobody wants to learn the CSS cascade:). For simplicity, we can assume that the presentation attributes have specificity below zero (as proposed by Amelia Bellamy-Royds).

The universal selector (*), in any combination with any Combinator (whitespace, > , ~, +), the specificity is also equal to zero. If the styles for * > * ("any element that has a parent", i.e. all except the root) was not !important, the first line in the "author's style and" would be a line with a specificity of 0, 0, 0 and a yellow value. But still she would go after the styles of presentational attributes.

Further, the selector for tag (specificity 0, 0, 1) loses selectors class and pseudo-class (both have a specificity of 0, 1, 0, since :not() itself is "not considered"), and one of them wins the last.

our there is also a style attribute in which the color is set twice as much. This is normal: in any CSS rule can be as many declarations of the same properties and the same importance of wins last, that the browser understood — is based on this opportunity, "volbicela" behavior, ensure the stability of the CSS. In our case, and the importance is different, so the ads "fly" to different tiers table: average ad beats and styles from , but if you have important announcements it doesn't matter (pardon the pun:).

now the interesting thing the silent (or lie:) almost all articles about CSS cascade: animation.

To our animation, changing the color value. And even not one, but two! That's okay too: the animation property allows multiple values, so multiple animations can be applied to one item at a time. If these animations affect the same property (as we do), only the final value is taken from the last animation in the list (in our case the animation with the name purple). As with the parent value in the succession, it doesn't matter where and how !important or without, our item got the value of the property animation: when calculating the colors of us the only important thing is whether there is any element, the animation is affecting the color. Animation using @keyframes and Animations via a Web API (where supported) are considered the same.

In our example, the value in the animation is not actually changing (the start and end values are the same), but in the General case, we must remember that we are talking about the "momentary" property value, which is recalculated for each frame of the animation. If you transition too.

But that's where the "stick" these instantaneous values in cascade — until the matter. The standard is clear: after all the usual styles (browser, author and user), but all important. But in practice, only in Firefox. Therefore, the result of our example in this and other browsers varies. The behavior of Chrome is recognized as a bug, why change the standard working group CSS is not ready yet, but here's something to fix this bug already at least three years, no hurry...

After styles of animations (standard) are important author styles. They are sorted according to the same rules as usual — first specificity, then the order in the code, the styles from the style attribute "beat" everyone else.

In our example, at this level, "hiding" another interesting point — ad color: inherit !important from the selector by attribute. Do not confuse it with "automatic" inheritance, which happens when their styles the item no (which was a little higher). The keyword inherit is the same explicit value as any other. Only not constant, but something like "local variable", which substitutes the computed value of the parent. And both inherited properties and non-inheritable. And the priority of this Declaration is subject to the General rules. As for the other generic values (initial, unset and revert).

the Style !important in the style attribute — this is the limit of priority to the author's styles. So the standard browsers (today it is the one and only all) the value is there and will be the final winner in the cascade (what we see). To block it can only user-defined styles with !important (if any), and browser styles !important (for color simply logic:). Alas, other browsers do not comply with the standard and value of the animations is also important override author styles. Keep this in mind, especially when there is a temptation to "quickly podficcing" something on dynamic page adding !important.

And finally, the "king" of the cascade, even "the Joker", covering generally all everywhere is the instantaneous value of properties during the transition . But like any supermegadelphe, it has a serious limitation: it cannot override the initial value of static (at least I do this way, especially cross-browser, don't know if you know, welcome to the comments!), but it can only prevent a sudden change in dynamics. When the CSS properties specified transition, even if the instant change of the specified value (for example, the activation pseudo-class like :hover or a script) cascading value (and with it the actual) will not change abruptly, but gradually, with the given duration and smoothness. This change can even be deferred by using transition-delay — including a very long time. On this "almost infinite" delay-based one of the well known hacks to simulate a state in CSS (for example, after clicking).

an Example for this article, I decided to transition not to complicate things. But we have about him is a separate article. Although she was three, and in specifications since then much has changed, this key feature is still in force. So armed with knowledge and boldly command the element the CSS cascade! And just in case, don't forget to follow the updates of the standards (and our website, of course:).

Other feed items

Pump skills debugging with Chrome developer tools (part 2) 10.11.2018 at 13:45