Chris’ Corner: Overflow, Documents, and Visibility

Posted on by

Chen Hui Jing has a good point about testing small screens in the article The horizontal overflow problem, which is: did you actually test them? You might think you did because you squished your browser window all the way. But:

The last I checked, Firefox stops at 435px, Chrome stops at 500px and Safari stops at 559px. That is, if you have your Devtools in a separate window.

If you dock DevTools on the right or left in any of those browsers, you can squish further, though. This matters because plenty of mobile devices go much narrower than those numbers.

My phone is a Realme 3 Pro which is still happily chugging along, and it has a viewport width of 360px. Also, according to iOS resolution, even the iPhone 13 has a logical width of 390px, so dock those Devtools, I say.

There are several ways to pull off gradient borders in CSS. Perhaps the most satisfying way is using border-image-* properties because there is no trickery involved, it’s just applied right to the element itself using standard properties.

Sadly, it doesn’t support border-radius at all. It does support putting borders on only some of the sides, though, which Ben Frain goes into detail about here. And if you really need border-radius, you can use a pseudo-element behind the element and some clever clipping. This has always been fun territory for experimentation.

Jeremy Keith: Three attributes for better web forms

  1. inputmode can provide a better keyboard on mobile devices.
  2. enterkeyhint can make the enter key say something more relevant and useful, like “search”.
  3. autocomplete can give a hint to the browser about what kind of value is appropriate (or not) to fill in a particular field.

Have you seen GitHub’s new free, open-source, variable fonts yet? Mona Sans & Hubot Sans.

Speaking of Jeremy he used it to style a document the other day.

Roman Komarov digs into the visibility property in CSS. Totally agree with Roman, it’s one of my favorites as well, partially because it has an extremely unique feature. Child elements to inherit the visibilty property, but it can be overridden and actually honored. 

<ul style="visibility: hidden;">
  <li>Hidden</li>
  <li style="visibility: visible;">Visible</li>
  <li>Hidden</li>
</ul>

That’s neat! Maybe that’s intuitive to some of you, but that’s not how other related CSS works at all. If, instead of using visibility, we used opacity or display to hide the parent, child elements absolutely cannot override their way out of it.

A little thing that didn’t make Roman’s article: visibility is animate-able. It doesn’t slowly fade out or anything, it’s just smart in that it doesn’t flip one way or the other until the end of the animation. Plus, hidden turns off pointer-events in a way that opacity doesn’t. So you can actually pair a fade-out animation using both visibility and opacity and it actually does what you probably want. Unless what you want is to have it not take up any space in the flow, that’s still tricky and we’re stilling waiting for “animate to auto” in CSS for that.