Comments on: The “C” in CSS: The Cascade https://css-tricks.com/the-c-in-css-the-cascade/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Thu, 13 Dec 2018 10:47:20 +0000 hourly 1 https://wordpress.org/?v=6.1.1 By: Thomas Yip https://css-tricks.com/the-c-in-css-the-cascade/#comment-1653917 Thu, 13 Dec 2018 10:47:20 +0000 http://css-tricks.com/?p=278596#comment-1653917 In reply to Guillaume.

Thanks a million @Guillaume , that is a very impressive work. Thank you so much for sharing it with us. We shall see how we can convert these information into a diagram, will be sharing a draft to you before finalizing it. Mind sending me your email address at thomas.radica@gmail.com ? Thanks!

]]> By: Guillaume https://css-tricks.com/the-c-in-css-the-cascade/#comment-1653749 Sat, 08 Dec 2018 17:41:27 +0000 http://css-tricks.com/?p=278596#comment-1653749 In reply to Guillaume.

Hi Thomas, I finally found a way to list those values. Long story short: I ran a fetch request from the Chromium site, via its search form endpoint. You can find the script here: https://gist.github.com/cdoublev/1a5c4498adde3c6e775de5f0327dead4. I edited my Google Sheet used as a personal CSS convention to order CSS properties: https://docs.google.com/spreadsheets/d/1JIeXks17Wuad_wtDCoB–GOl1RwBQX7VP1IEd-iDHgo/. The labels I used to group properties may be semantically incorrect but I don’t think any nomenclature actually exists. Feel free to use it for your own research (a sheet might be a good option for diagrams).

Note: deprecated properties were voluntary dismissed in my sheet.

Some inherited properties were missing with this method. That’s why I finally gave up and manually checked all of them on MDN… It appeared that almost all of them were inherited shorthand properties. But it was a better option than trying with MDN or W3C. Neither offers an API. It would have been a real pain to parse HTML to fetch the inheritance value of each property. Furthermore, some properties are missing in their respective reference list: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference and https://www.w3.org/TR/CSS/#properties.

]]> By: Thomas Yip https://css-tricks.com/the-c-in-css-the-cascade/#comment-1653332 Tue, 20 Nov 2018 03:33:58 +0000 http://css-tricks.com/?p=278596#comment-1653332 In reply to Guillaume.

@Guillaume, unfortunately that is correct but that sounds like a good opportunity to make a diagram for easy reference, and we love diagrams :) Let me see what I can do.

]]> By: Guillaume https://css-tricks.com/the-c-in-css-the-cascade/#comment-1653302 Sat, 17 Nov 2018 08:34:53 +0000 http://css-tricks.com/?p=278596#comment-1653302 I was wondering which kind of properties are inherited in CSS while reading this post, and which are not. It appears that it’s not easy to even get a list of all inherited properties, and it seems there is no clear/logical rules. I think it might be not so easy for a CSS beginner to guess which of them are inherited or not, without having to go on MDN or some other kind of reference.

]]> By: Thomas Yip https://css-tricks.com/the-c-in-css-the-cascade/#comment-1653258 Thu, 15 Nov 2018 06:54:12 +0000 http://css-tricks.com/?p=278596#comment-1653258 In reply to Ben.

@Ben, Thanks for the heads up, the correct example should be:

<div style=”border: 1px solid red; border: 1px solid blue;”>

In simple words, if you have 2 rules that applies to the same element, the rule that is on the right or bottom will apply due to ordering rules. Hopes that helps.

]]> By: Thomas Yip https://css-tricks.com/the-c-in-css-the-cascade/#comment-1653257 Thu, 15 Nov 2018 06:49:14 +0000 http://css-tricks.com/?p=278596#comment-1653257 In reply to Ilya Streltsyn.

@Ilya, Thanks a million for pointing out that mistake. I will amend the article and also the diagram accordingly, much appreciated!

]]> By: Ben https://css-tricks.com/the-c-in-css-the-cascade/#comment-1653252 Wed, 14 Nov 2018 23:45:24 +0000 http://css-tricks.com/?p=278596#comment-1653252 I’m very confused by this precedence of right over left. Your examples are incomplete as far as I can tell: style=”1px solid red” doesn’t do anything. Could you be more precise?
Or is it just because it is defined “after” the previous one? and thus on the right of the previous definition? This is not priority to the right, this is coding order…

]]> By: Ilya Streltsyn https://css-tricks.com/the-c-in-css-the-cascade/#comment-1653231 Tue, 13 Nov 2018 21:16:10 +0000 http://css-tricks.com/?p=278596#comment-1653231 Thomas, thank you for the beautiful visual guide to CSS cascade. Unfortunately, your article and this chart are not completely technically correct: the claim that embedded styles always override the linked styles is wrong. The CSS Cascading and Inheritance spec doesn’t distinguish these, instead it treats it as the same Cascading Origin (Author Origin) and effectively says that linked styles are replaces with the equivalent embedded styles when calculating precedence (“Declarations from style sheets independently linked by the originating document are treated as if they were concatenated in linking order”). And among the styles from the same Origin and with the same specificity only the resulting declaration order matters.

In your Codepen demo, there are actually two embedded stylesheets — one in <head> and one in <body> (at least, it’s what I see there in the DOM inspector), and the latter wins over the former only because of the order. Hovewer, if you add the link to the same styles as the external resource after the last embedded stylesheet, these external styles would override it, as in this fork of your Codepen: https://codepen.io/SelenIT/pen/pQRGEv

]]>