There's a new HTML element in town! You can now use <search> to semantically mark up a search box. It's great for letting screen-readers and other assistive tech know what a form does. It's only supported in WebKit for now - other browsers will get it eventually. The WordPress default search widget hasn't yet updated, but I'm going to show you how you can start using it today! In your theme,…
Continue reading →
In linguistics, a "False Friend" is a word which looks similar in multiple languages, but means something different in each of them. For example the word "gift" in English means "a present", in German means "poison", and in Norwegian it means "married". The Internet uses Top Level Domains (TLD) to organise information into hierarchies. This website uses .mobi - you may also be familiar with .com …
Continue reading →
As part of my never-ending quest to banish this skeuomorph from the world… I was reading a fascinating eBook recently which was, sadly, designed to mimic a legacy / paper book. To the point where the authoring software had hard-coded in page numbers and forced them to be displayed. Here's what it looked like: There are two abominations here. There's no need to interrupt the reading e…
Continue reading →
Every day is a school day. I'd recently seen a post about highlighting images without alt text. That got me thinking. Is it possible to style alt text? Yes. Yes it is. And it's pretty simple. Well, OK, it's CSS, so simple is a relative term! Let's take a broken image like <img src="http://example.com/bigfoot.jpg" alt="The best quality photo of bigfoot!" /> There are two slightly different…
Continue reading →
Originally posted as part of HTML Hell's advent calendar. While browsing Mastodon late one night, I came across this excellent blog post called HTML is all you need to make a website. It describes a few websites which are pure HTML. No CSS and no JS. And I thought… do you even need HTML to make a website? A few hours later, I launched the NO-HT.ML website. Proving, once and for all, that you d…
Continue reading →
Facebook Meta - like many other tech titans - has institutional Shiny Object Syndrome. It goes something like this: Launch a product to great fanfare Spend a few years hyping it as ✨the future✨ Stop answering emails and pull requests If you're lucky, announce that the product is abandoned but, more likely, just forget about it. Open Graph Protocol (OGP) is one of those products. The val…
Continue reading →
How I miss the days when phone manufacturers were innovative. Nowadays everything is just a boring black rectangle. Tawanda Nyahuye👨💻@towernterHow to end a frontend developer's career pic.x.com/AYsI0pghh5❤️ 5,589💬 151🔁 006:19 - Fri 06 May 2022 I imagine that this (concept) device would probably just put the browser only on one row / column. Probably sensible, but utterly BORING! Let's imagine …
Continue reading →
Quite often on the web, you'll see a set of "things" with a separator between them. For example, at the top of this post, you'll see Thing 1 | Something Else | Another Thing. This provides clear visual separation between logical groups. But there are a couple of problems. Firstly, the separator character may not be interpreted correctly by screen readers. They may read out "Vertical Pipe",…
Continue reading →
This is a regular HTML page. But if you click or tap on the text, you will be able to edit it!HTML is magic! This isn't a fancy styled <textarea>, it's a <div> element which uses the contenteditable global attribute.There are some nifty features - depending on your browser.You canadd more bulletsby pressing enterHow 🆒 is that?!Same goesfor numbered listsclick here and type a new lineSplelcheck is …
Continue reading →
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: pink 1px; draws a pink outline around text. This…
Continue reading →
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; position: absolute; /* or fixed if you want it to always be visible */ …
Continue reading →
(You may already know this, but I didn't. Every day is a school day.) HTML has the concept of the lang attribute. It allows you to say that a specific element contains text in a specific human language. For example, this page starts with: <html lang="en-GB"> That says the entire page is written in English, with the sub-type of Great Britain. This means your browser might offer to translate…
Continue reading →
