The CSS background-image property as an anti-pattern

Andrew Welch:

There are some seri­ous down­sides to using the CSS background-image prop­er­ty, and more impor­tant­ly, we have bet­ter ways to imple­ment images in our browsers today. Time is now to ditch background-image from your toolset and use <picture> tag instead.

Old way:

1
2
3
<div style="background-image: url('/some/man-with-a-dog.jpg'); 
            background-size: cover;">
</div>

New Way:

1
2
3
4
5
<picture>
  <img src="/some/man-with-a-dog.jpg"
       alt="Man with a dog"
       style="object-fit: cover;" />
</picture>

Unraveling the JPEG

This article is about how to decode a JPEG image. In other words, it’s about what it takes to convert the compressed data stored on your computer to the image that appears on the screen. It’s worth learning about not just because it’s important to understand the technology we all use everyday, but also because, as we unravel the layers of compression, we learn a bit about perception and vision, and about what details our eyes are most sensitive to.

Accessible Icon Buttons

Sara Soueidan:

If your button isn’t supposed to visually contain any text, you can still provide the text inside the <button> so that it’s picked up and used by screen readers, while hiding it visually using CSS.

1
2
3
4
5
6
7
<button>
   <svg viewBox="0 0 32 32" width="32px" height="32px" 
           aria-hidden="true" focusable="false">
        <!-- svg content -->
    </svg>
    <span class="sr-only">Menu</span>
</button>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* 
 * Utility class to hide content visually while keeping it screen reader-accessible.
 * Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html 
 */

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}