There was no pseudo-element for targeting the generated label. However, I needed a solution now, not in the far future. Ideally, this should be fixed on the user agent level: Browsers should not generate a label box when there is no label attribute. There appears to be no way to remove said gap. However, using, even without a label attribute inserts an ugly gap in the select menu, where the label would have gone ( pen): (There were also gaps on the left of the labels, but we applied some CSS to remove them) Except, none of the rest renders any contents and thus, is not fit for my use case. The only elements that work inside a are:, , and script-supporting elements (currently and ). Let me stop you there, no, I could not just set classes on the options, I needed an actual container in the DOM.Īs you can see in this pen, neither nor custom elements work here: when included in the markup they are just discarded by the parser, and when inserted via script they are in the DOM, but the options they contain are not visible. I needed to wrap elements by a generic container for a library I’m working on. In fact, it was the latest one that prompted this post. Admittedly, there were way more use cases pre-Flexbox and friends, but it’s still useful, as we will see. I’ve come across many instances of this in the 16 years I’ve been writing CSS.
Most notably, when the current (or parent) font-size is set to 0 and we need to recover what it was one level up.
In other cases, it is simply not possible to multiply and divide by a factor and restore the ancestor font size. For example, a third party author may want to override the emoji size, they shouldn’t also need to override anything else, our CSS should just adapt. However, in the general case the font size may be defined elsewhere. And ok, when they’re both defined in the same rule we can just delegate this to a variable: -m: 2.5 Note that every time we change the font size we also need to adjust top. Note this in the CSS: /* This needs to change every time the font-size changes: */ For example, take a look at this speech bubble: Sometimes, there are workarounds, and it’s just a matter of keeping DRY. The next few paragraphs are for those thinking “but when would you ever need this?” If you’re already familiar with the problem and just want the solution, skip ahead. Either you need to set font-size to the grandparent font size instead of the parent one, or you need to set other properties to the parent font size, not the current one. However, I have often come across cases where you actually need to “circumvent” one level of this. It can be quite useful for making scalable components that adapt to their context size. We are going to refer to em for the rest of this post, but anything described works for all type-relative units.Īs you well know, em resolves to the current font size on all properties except font-size, where it resolves to the parent font size. If you’ve been writing CSS for any length of time, you’re probably familiar with the em unit, and possibly the other type-relative units.
0 kommentar(er)
