I had to make a toggle switch widget for work recently. I had not done one before, having used built in or custom check-boxes for that purpose. My boss thought the switch would better fit a simple “form” that turns off and on a single setting though, so I made one.Continue reading post "HTML + CSS toggle switch"
Today, I learned that
display: block on a
<summary> element removes the disclosure triangle in Firefox.
min-content in CSS grid apparently takes into account the full width of a
<pre> element content, even if you put
max-width: 100%; on it.
@supports is a good way to apply an entire block of styles only if (modern) browsers support a particular property-value combo. There is no similar block-level mechanism for selector support. Selectors are automatically ignored if their values or syntax aren’t recognized by the browser, so they basically already do this at the ruleset level.
Except, sometimes you want to apply styles to other elements that don’t use the selector, but only if the browser supports the selector.Continue reading post "CSS: checking support for selectors"
I had forgotten that CSS
attr() is only supported for values of
Crazy Mac IE 5 bugs with the HTML class attribute: If you have a space after any class in the attribute, it will treat any CSS class selector that contains that string at its beginning as a match for the element.Continue reading post "IE 5 Mac class attribute with space bug"
A couple years ago, I wrote a post titled “CSS: Inner Border Grid List” about solutions to a problem I was having. The post is not about CSS grid layout, but recent interest in the post leads me to believe people are visiting expecting it to be. In the interest of serving those visitors, I decided to create a solution using the now well supported spec.Continue reading post "CSS: inner border grid list with grid layout"
I’ve been using cssnano for compressing my CSS on some projects recently. Apparently, it rebases
z-index values, ie reduces them to the minimum values that have the same stacking context within the file.
CSS has a concept of specificity wherein more “specific” selectors take precedence over less specific. Sometimes specificity rules cause a set of property values to be applied while another is desired. This can result in the developer increasing specificity on the desired set to outweigh the other set. When I’ve needed extra specificity, I’ve often use an ‘html’ class on the
<html> element or a ‘body’ class on the
<body> element. The downsides of are it:
- is more specific, as in precise, meaning the selector won’t match in a document without those helper classes.
- has a performance penalty for needing to check a(nother) parent element of the target element.
- only allows one more unit of specificity at the class level for each parent used.
Today (yesterday), I found a better way that can add any amount of class level specificity (weight) without being more specific (precise), thanks to CSS Wizardry. I’ve been doing this CSS thing for a while, but I hadn’t realized
.foo.foo would match
<div class="foo">. In essence, you can duplicate a selector and chain it onto itself to create an equivalent selector, but with double the specificity. You can duplicate it as many times as needed to get the desired specificity, e.g.
.foo.foo.foo.foo to override
.foo.foo.foo, without requiring any parent selectors. Besides the benefits already mentioned, it could be seen as more explicit in its purpose than using parent elements, because there is no other reason to do it. I will have to start using this.
There must’ve been a flexbox bug in Firefox 45. Today, it was brought to my attention that nav was getting cut off on a site. I added a
flex-shrink: 0 to ensure the logo shrank to accommodate, fixing the problem in Safari, but not Firefox. Thinking it odd that Firefox was behaving so differently from other browsers, I decided to check for an update, and 46 happened to be available. After updating, the problem disappeared. I’ve ran into browser bugs with flexbox before.