This post started as a scratch pad as I was looking at helping a colleague implement WEBP images with a JPG fallback for older browsers. They had an issue in modern browsers because the fallback image was being loaded in all cases. Here’s a code example and demo: <picture> <source height=”500″ width=”500″ src=”webp.webp” type=”image/webp”> <source […]
You can subscribe to the html tag micro-feed.
As my grandma used to say, “there’s only one thing worse than a scroll-linked positioning effect and that’s not being able to scroll at all”. So, with this in mind I have written a temporary fix for the issue in the latest version of HERE Maps that prevents users from scrolling past the map with […]
The original question for the below answer was wanting to hide a link when a button that’s next to the link has a “selected” class. This is interesting because this requires a sibling selector, but sibling selectors in CSS are a bit funky… with a sibling selector, the target element is always _subsequent_. That means […]
There is a problem I have wrestled with a couple of times, which was frustrating to solve… but can now be easily solved using clamp, which is currently in an Editors Draft of the CSS Values and Units Module Level 4 specification. It is sat alongside similar mathmatical CSS nuggets, such as min and max […]
The toggle switch has very suddenly become a ubiquitous feature of web user interfaces. You can’t hardly fill in an HTML form these days without finding one; especially as 99% of forms we now fill in are concerned with “cookie consent”. Why isn’t the toggle switch a first-class citizen of HTML, you may ask… to […]
A common problem with images, especially if they are user-generated, is that they don’t have the correct aspect ratio for their intended purpose. Also, as we re-flow pages for many different devices, we often want the image to work with different aspect ratios. This is where the CSS object-fit property comes in very useful. There […]
When HTML5 was created, the new elements came from a study of class names from millions of websites. If HTML5 was conceived today, the new elements would probably have been called “container” and “col-md-6”.
This is just a nod to the handy little Visual Studio Code Extension: Preview on Web Server. Now you can configure a task, or run a command, or set up a local web server yourself… but why not just install this extension and then just hit CTRL + SHIFT + L to load the web […]
There is often a bit of confusion surrounding the CSS sibling selector, or ~ as it is known to its friends. Here is how it works. This CSS translated into English says: If there are is a paragraph next to another paragraph inside a division, make the text red Here is an example HTML snippet […]