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
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
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
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.
