![]() In order to do this without duplicating the list of values we're going to be using PostCSS to inject fallback values for our dynamic properties CAUTION: CSS Custom Properties (aka CSS variables) are not supported in IE. And, in fact, in Angular's simulated CSS encapsulation, it won't even work (unless you use the ::ng-deep deprecated selector). ![]() But, there's nothing special about ":root", other than that it's very high in the DOM tree. Since this is the highest point in the component tree, this will be the place where we define the CSS custom property values for each theme:ĪSIDE: Most CSS Custom Property demos have a strange obsession with the ":root" selector. First, let's look at the Angular application's root component. Now that we can see why CSS Custom Properties have advantages over :host-context() bindings, let's look at refactoring the previous theming demo to use CSS Custom Properties. This may seem like an insignificant point but, it acts to further decouple each component from the larger application. This means that the components don't even have to care where the CSS Custom Properties are being defined - they only need to know that they are being made available somewhere higher-up in the chain of ancestor nodes. With CSS Custom Properties, we get to leverage the natural inheritance of the DOM (Document Object Model) tree. This means that themes can be added to and removed from the application without having to touch these component styles.įurthermore, when the variables were being provided by the LESS CSS pre-processor, I had to include the "variables.less" file. ![]() But, those variables are no longer tied to any specific theme. ![]() Yes, it needs to know about some variables (-color and -background-color). But, the more profound value-add is the fact that this component no longer needs to know about themes in the broader sense. There's clearly less code here, which is an immediate win. To see what I mean, let's refactor the previous snippet to use CSS Custom Properties instead of :host-context():īackground-color: var( -background-color ) This means that the breath of themes and much of their implementation are tied to the definition of the CSS Custom Properties, not to their consumption. Unlike theming with :host-context(), CSS Custom Properties allow you to change the value, not the variable. The breadth of themes is essentially hard-coded into the CSS files since the application has to know about the themes ahead of time in order to setup the necessary :host-context() blocks.ĬSS Custom Properties / CSS Variables can essentially eliminate all of these drawbacks.And, when a new theme is added, new :host-context() blocks will have to be added to all themed components. The amount of CSS will increase with the number of themes in the application.This makes it harder to develop a holistic understanding of a given component's phenotype. You have to separate out the dynamic portions of the CSS.This approach is simple and worked really well. Then, I applied different LESS Variables inside each :host-context() block. Import the LESS CSS variables for our host-context "./variables.less" Īs you can see, I included a "variables.less" file in order to make the LESS Variables available to the component.
0 Comments
Leave a Reply. |