Again, unfortunately, I go to use a feature that is apparently now supported in Safari/WebKit (and considered baseline on #MDN), only to discover that one of the features isn’t implemented.

Today’s example? The <dialog> element.

After messing around with it and wondering why clicking the backdrop wasn’t closing it even though closedby="any" was set, I find the closedby attribute isn’t implemented at all 😶

Now I have to add some JS that shouldn’t be needed.

#WebKit #CSS #WebCompat #Interop

Similarly… foiled again.

Me, earlier:

Oh cool, the @ page size descriptor is supported by Chrome, Firefox and Safari! I’ll use it for this print and PDF layout that needs to be A4 landscape.

Me, now, actually trying it:

Wait, why isn’t it working? Oh. Oh no. It does not work at all in Safari. And MDN/caniuse.com say it does, but they are wrong (and there is an open issue about it).

The WebKit bug 63575 is from… 14.5 years ago.

*dies* 💀

#WebKit #CSS #WebCompat #Interop #MDN #CanIUse

Another great new CSS feature that is starting to be available in more browsers is field-sizing, which allows you to size an input to fit its value with:

field-sizing: content;

Great for UI like tags, where you want to be able to type directly into them and have them automatically resize to fit the text.

(#CanIUse shows the feature as not being available in Safari Technology Preview, even though all the individual child features show that it is available)

#Interop #WebCompat #CSS

If you haven’t used it before, image-set() is used in CSS in any place where you’d normally use an image. Here’s a simple example where the browser will use JPEG XL if it supports it, or JPEG if it doesn’t:

background-image: image-set(
url("bg.jxl") type("image/jxl"),
url("bg.jpg") type("image/jpeg")
);

( you can also specify resolutions, e.g. url() 2x type() )

#Interop #WebCompat #JPEGXL