Howto: Stop Firefox Forcing Dark Mode on Websites

by @edent | , , , | 2 comments

Firefox dev tools. A pop up informs you that the colour scheme can be toggled.

Here's how to stop Firefox automatically turning on dark-mode for websites. In the address bar, type in about:config and press ⏎ and accept the warning it gives you. Add a new value ui.systemUsesDarkTheme set it to type number and pick one of the following: 0 to tell websites to always use the light theme. 1…

-webkit-text-stroke and emoji

by @edent | , , | 6 comments | Read ~147 times.

Group of emoji.

The CSS property -webkit-text-stroke is a curious beastie. MDN gives a big scary warning saying "Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web." And yet, it works everywhere. All modern browsers support it. Except on Emoji. Here's how it work. -webkit-text-stroke:…

Pure CSS Corner Banner

by @edent | , | 2 comments | Read ~171 times.

Scratching my own itch. Here's how to make a "beta" ribbon in CSS. Place this HTML at the end of your document: <hr id="beta" aria-label="Warning this page is a beta."> (Doesn't have to be <hr> - use whatever makes sense in your design.) Then, add this CSS: #beta { float: left; top: 1.5em; left: -3em;…

Replacing broken avatar images with background SVG Emoji

by @edent | , , | 1 comment

Group of emoji.

When someone on Twitter mentions my blog, the WordPress WebMentions plugin automatically fetches those Tweets and turns them into comments on the blog post. It looks something like this: That is pretty cool - but has one slight problem. If someone changes their Twitter avatar, or deletes their account, the image disappears and I'm left…

What's the window size of a background tab?

by @edent | , , , , , | 1 comment | Read ~499 times.

The Outer window size is zero by zero.

Whenever I open Twitter in a new tab on my phone, the page layout looks weird for a few seconds. It starts out looking like the desktop view and then, after a few seconds, it snaps back to the mobile view. What's causing this? Try opening this link to a window size detector in a…

You can't print this blog post

by @edent | , , | 41 comments | Read ~1,040 times.

A hand-held pink cube with paper coming out of it.

Update! It's fair to say no one liked this idea - so I've reverted it. Thanks for all the feedback 🙂 Do you ever see those daft email footers which say "Please consider the environment before printing this email." Like, who the fuck is still printing out their emails? Anyway, a few years ago I…

Just because I have a vertical screen, doesn't mean I'm on a phone!

by @edent | , | 9 comments | Read ~30,727 times.

The Just Eat website.

I'm a weirdo - I fully admit that. As part of my home working set up, I use a vertical monitor. I read and write a lot of long documents - and this form factor suits me perfectly. I've been doing this for a long time. It is a natural part of my workflow. For…

Better Keyboard Buttons in CSS

by @edent | , , , | 2 comments | Read ~1,216 times.

A pet cat typing on a computer keyboard.

Here's a simple scrap of CSS which you can Ctrl+C and Ctrl+V kbd { border: .1em solid #aaa; border-radius: 15%; display: inline-block; padding: .1em .5em; background: linear-gradient(180deg, #fff, #fff, #fff, #ddd); user-select: none; cursor: pointer; color: #000; font-weight: bold; } kbd:hover { background: linear-gradient(0deg, #fff, #fff, #fff, #ddd); } Features Semantic use of the kbd…

How to fake Progressive WebP Images

by @edent | , , , | 9 comments | Read ~423 times.

Extremely fuzzy photo.

WebP is the hip new image format on the scene. It offers unrivalled image compression at superior visual quality. But, in my opinion, it is deficient compared to JPG in one significant aspect. It doesn't have a progressive mode. Progressive mode is useful because it can quickly load a low resolution preview of an image,…

This blog strips off for CSS Naked Day

by @edent | , , , | 2 comments | Read ~213 times.

Firefox menu. Go to View, the Page Style, then No Style.

Half-a-dozen years ago, I proposed that web developers spend one day a year browsing without JavaScript. It's a great way to see how the web works when things break. Similarly, April 9th is CSS Naked Day. A chance to throw off the shackles of good design, and see the raw beauty of your HTML. Today…