Chris’ Corner: Overflow, Docs, and Visibility

The Importance of Testing Small Screens

Chen Hui Jing makes a compelling argument about the significance of testing small screens in her article The horizontal overflow problem. It’s easy to assume that you’ve tested them just by shrinking your browser window, but have you really?

Many browsers, such as Firefox, Chrome, and Safari, have limitations on how narrow you can make the viewport using DevTools. For example, Firefox stops at 435px, Chrome stops at 500px, and Safari stops at 559px if you have your DevTools in a separate window.

However, if you dock DevTools on the right or left, you can squish even further, which is important because many mobile devices have narrower viewport widths.

For instance, my phone, a Realme 3 Pro, has a viewport width of 360px. Even the iPhone 13 has a logical width of 390px, according to iOS resolution. So, make sure to dock those DevTools!

Exploring Gradient Borders in CSS

There are various methods to create gradient borders in CSS. One of the most straightforward ways is to use the border-image-* properties, which involves no trickery and is applied directly to the element using standard properties.

Although this method doesn’t support border-radius, it does allow you to apply borders to specific sides only. If you require border-radius, you can utilize a pseudo-element behind the element with some clever clipping. This topic has always been a fun area for experimentation.

Enhancing Web Forms with Three Attributes

Jeremy Keith recently shared an insightful article on “Three attributes for better web forms”. These attributes include:

1. inputmode to provide a better keyboard on mobile devices.
2. enterkeyhint to customize the enter key for specific actions.
3. autocomplete to guide the browser on appropriate field values.

GitHub’s New Variable Fonts

GitHub has unveiled new free, open-source variable fonts – Mona Sans & Hubot Sans. These fonts offer a fresh approach to typography.

Jeremy Keith used these fonts to style a document recently.

Understanding the Visibility Property in CSS

Roman Komarov delves into the visibility property in CSS, emphasizing its unique features. One interesting aspect is that child elements inherit the visibility property, allowing it to be overridden when necessary.

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

What’s even more fascinating is that the visibility property is animatable. Unlike opacity or display, it enables child elements to override the parent’s visibility. This property also interacts with pointer-events and opacity in a unique way, allowing for creative animations.