The HTML specification is old and, while there is beauty in longevity, there's an inevitable build-up of boondoggles and baggage. Some elements like <marquee> have sadly been consigned to the dustbin of history - but there are still vestigial attributes just waiting to trip up the unwary. If you're young, you may never have heard of Image Maps. Back in the bad-old-days, there weren't many good…
Continue reading →
Pixels are a lie. Even if you think you're drawing something with "pixel perfect" accuracy, your monitor is lying to you. There is no grid of platonically perfect squares. In CSS, pixels are a double lie: Note that 1px doesn't necessarily equal one physical device pixel. On HD displays, it may span multiple physical pixels. Similarly, 1cm in CSS often doesn't correspond to one hundredth of SI…
Continue reading →
First up, you should go and watch The Importance of Being Earnest with Ncuti Gatwa. It is a brilliant set of performances and a joy to see. While perusing the programme on the National Theatre website I stumbled upon a little bug. The incredible Ronkẹ Adékọluẹ́jọ́ has her name rendered in a most unusual style: It rendered just fine in Chrome - but both Firefox and Safari misrendered some of t…
Continue reading →
There's (yet another) new piece of CSS to learn! Hurrah! Way back in 2011, jQuery mobile introduced the web to page-change animations. Clicking on a link would make your high-tech Nokia display a cool page-flip as you navigated from one page of a website to another. Just like an app!!!! A decade-and-a-half later, and CSS has caught up (mostly). No more JavaScript, just spec-compliant CSS. Well, …
Continue reading →
"If it's stupid but it works, it's not stupid." I want to draw some vertical bar charts. I don't want to use a 3rd party library, or bundle someone else's CSS, or learn how to build SVGs. HTML contains a <meter> element. It is used like this: <meter min="0" max="4000" value="1234">1234</meter> Which looks like this: 1234 There isn't much you can do to style it. Browser manufacturers seem to …
Continue reading →
A decade ago, I was writing about how you should test your user interface on drunk people. It was a semi-serious idea. Some of your users will be drunk when using your app or website. If it is easy for them to use, then it should be easy for sober people to use. Of course, necking a few shots every time you update your website isn't great for your health - so is there another way? Click the "🥴 …
Continue reading →
You can't. There is no way to use CSS to apply a style to every letter "E". It simply can't be done. At least, that's what they want you to think… What if I told you there was a secret and forbidden way to target specific characters in text and apply some styles to them? As part of my experiments in creating a "drunk" CSS theme, I thought it would be useful to change the presentation of s…
Continue reading →
I recently read a brilliantly provocative blog post called "This website has no class". In it, Adam Stoddard makes the case that you might not need CSS classes on a modern website: I think constraints lead to interesting, creative solutions […]. Instead of relying on built in elements a bit more, I decided to banish classes from my website completely. Long time readers will know that I'm a big f…
Continue reading →
Back in 2020, Andy Bell introduced me to the idea of grouping attribute values. You've probably seen something like this before: <article class="card-section-background1-colorRed" ></article> A single class over-encumbered by all sorts of things. The more modular way to write this would be: <article class="card section box bg-base color-primary" ></article> That's pretty good! Each…
Continue reading →
Consider these two HTML elements: <div class="a b">…</div> <div class="a b">…</div> Is there any semantic difference between them? Is there any way to target one but not the other? In other words, are they logically different? I think the answer is no. On every browser I've tested, both are the same. Whether using JS or CSS, there's no difference between them. You could replace every \n wit…
Continue reading →
I like to highlight bits of code on my blog. I was using GeSHi - but it has ceased to receive updates and the colours it uses aren't WCAG compliant. After skimming through a few options, I found Tempest Highlight. It has nearly everything I want in a code highlighter: PHP with no 3rd party dependencies. Lots of common languages. Modern, with regular updates. Easy to use fun…
Continue reading →
HTML elements can have attributes. For example id, class, src, alt, and many others. These attributes can contain values - an img element's src attribute has a value which is a link to an image. An id attribute's value is a single string. But some attributes can contain multiple values. Here's a thought experiment for you. Consider these two HTML elements: <p class="alpha bravo charlie">………</p> …
Continue reading →
