Intrinsic style, or least specificity
This might be a silly question, but I want to create a custom component from scratch (an input element for forms that uses Javascript), and I'm wondering how to give it some initial dimensions (and other styles) in a way that can be easily overridden.
There doesn't seem to be a way to apply styles with a minimum specificity, kind of like user agent styles, or is there? For example, the
textarea in my browser (Safari) has a size of 155px by 26px which seems to be its intrinsic size (https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size) as there isn't even a UA style setting that size that I can see in the web inspector.
I would like to be able to set such an intrinsic size (and other styles) on an element so that it doesn't have either a size of zero (or just too tiny) or fills the whole screen/container -- like the textarea. And without the user/me later having to know/overpower some arbitrary specificity, a sort of !unimportant if you will. Am I making much sense here?MDN Web Docs
Intrinsic size - MDN Web Docs Glossary: Definitions of Web-related ...
In CSS, the intrinsic size of an element is the size it would be based purely on its content without taking into account the effects of the context it appears in. For example, the sizing applied by CSS box model properties. An element's intrinsic sizes are represented by its min-content and max-content sizes.
5 Replies
I'd recommend starting here https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
MDN Web Docs
Specificity - CSS: Cascading Style Sheets | MDN
Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.
you can't edit the intrinsic sizes or the built-in browser styles, so you'll have to settle for very low specificity styles
Here's the order in which various style sources get applied
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#order_of_overriding_declarations
MDN Web Docs
Cascade, specificity, and inheritance - Learn web development | MDN
If you understood most of this article, then well done ā you've started getting familiar with the fundamental mechanics of CSS. Next up, we'll take a deeper look at Cascade Layers.
you'll probably exist entirely in 3. Normal declarations in author style sheets, but so will your end-user, so you'll have to make sure to follow specificity rules
Thanks! š I will use
:where() to reduce the specificity.@layer is gaining browser support too and will be super helpful for setting up layers of importance
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
https://youtu.be/NDNRGW-_1EE?si=8zUwrxmPgYJdSCw7
MDN Web Docs
@layer - CSS: Cascading Style Sheets | MDN
The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.
Kevin Powell
YouTube
No more specificity issues?! (or all new ones š¤) - A look at CSS Ca...
Cascade layers are pretty much here, so it's time to learn how they work!
š Links
ā
Stephanie Eckles article: https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/
ā
Bramus' article: https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/
ā
Una's video: https://www.youtube.com/watch?v=ilrPpSQJb3U
ā
...