Today I Learned

13 posts by arkadiuszjanik

Enable ellipsis only on the larger sibling

We have an element that has a max-width, and contains 2 child elements with text. If the text gets too long, we use ellipsis on them. But there are a few cases to cover:

  • if one of the elements is smaller than 50%, we only truncate the bigger one (it can be either of these elements),
  • we truncate both equally if they exceed 50%,
  • and of course no truncation if both are smaller.

At first I thought it’s impossible with CSS, as in flex the truncation occurred on both elements and table had problems with width, but grid worked just fine, as you can see in the codepen here.

How to style broken images in CSS (and a bit of JS)

When working on a client’s website, I’ve spotted some images looking like that:

base

Turns out there are ways to change how the broken images look, but it’s a bit different for every browser, you can apply styles like background-color to:

  • the image itself,
  • the ::before element of the image,
  • using special selectors for not working images,
  • or you need to use the onerror property (or some other form of detecting a broken image in JS).

Click to see examples of how to deal with broken images, and run the examples in Chrome/Firefox/Safari to see the differences.

Great case for .webp format

While webp does not provide substantial size reduction when compared with JPG’s saved using MozJPEG encoder, there is a case where it really outperforms the competition and that is images with transparency.

For comparison we will use a photo of this fine gentleman, the base file is a full-color PNG that weighs 693kB. base

Normally to compress images with transparency, I used squoosh with OxiPNG, 256 colors and Dithering on, resulting in 214kB size. The image doesn’t look bad but we have lost some color, which is especially visible on the lips. png

With webp we set it to Browser WebP and quality 0,9. The result is only 63kB, with no colors lost and almost no artifacts. That is 30% of OxiPNG’s size! webp

Regarding the optimal compression setting, I would recommend 0,9 as the default base, with the max value of 0,99.

Box-shadow vs. drop-shadow from filters

When using box-shadow on an image with transparent background like png, the alpha channel gets neglected and the shadow is applied to the boundaries of the image, eg. box-shadow: 8px 16px 24px rgba(29,35,65,0.4). With CSS filters, like filter: drop-shadow(8px 16px 24px rgba(29,35,65,0.4)) the shadow is coming from the opaque sections of the image. You probably know that already.

shadows

Turns out the drop-shadow works the same way on background images. You can apply that effect either on the tag with the background image, or even the whole wrapper to get the same shadow from the text, inline svg icons, images and backgrounds.

backgrounds

Don't hide images with display: none

Images or wrapper elements that have display: none set, will still get loaded. So if you want to eg. load a different image for desktop and mobile, you can either:

  • use display: none, but with the loading="lazy" parameter set on img. Currently works on Firefox and Chromium
  • or use picture element with source. Over 95% support with a fallback to IE11 (just the img will be loaded.

See the example implementation of the 2 methods on Codepen.