Christian Oliff

JavaScript

CSS

CSS

CSS

CSS

Using icon fonts in HTML markup is still very popular, despite their many drawbacks. Using them means even if you only use a single icon, you still need to load the font file and the CSS for that entire icon set which c…

CSS

As an iPad Pro owning front-end developer, I’ve often been a bit frustrated at the lack of developer tools for testing and debugging websites on the go. So I created Web DevTools+, a free Safari extension for iOS…

developer tools

When working on Bootstrap projects I often find myself wanting to quickly see the current CSS breakpoint. I created a simple CSS snippet that shows the current Bootstrap CSS breakpoint in the browser’s viewport. I…

CSS

Continuing my series of posts on building Bootstrap components using just CSS and native HTML elements, this post demonstrates how to create a Bootstrap modal dialog using the <dialog> HTML element. The <dialog> element…

CSS

I used to regularly use a simple browser extension that showed image size information, you just right-clicked on any image and it would display a simple dialog with the image dimensions, file size, and full URL. It was…

A few years ago I wrote a short post about building a Bootstrap accordion using the <details> and <summary> HTML tags. The idea was to create a collapsible accordion without needing any JavaScript, relying solely on CSS…

JavaScriptCSS

If you have a multi-page site and want to improve performance when navigating between pages, I recommend using speculation rules to prefetch and render pages on hovering over a link. This can substantially reduce load t…

The Safari browser has come a long way in recent years, but there are still a few CSS/HTML features that I&rsquo;d like to see added that would make it even better for web developers and users alike. I&rsquo;ve previous…

CSS

When working on building websites with Bootstrap I often find myself copying and re-using a bunch of useful little JavaScript snippets to enhance functionality and I thought I&rsquo;d make a quick blog post to share a f…

JavaScript

Apple&rsquo;s iOS, iPadOS and macOS all feature an accessibility option to add labels to switches. This can be helpful for users who may not be able to distinguish between the on and off states of a switch via color alo…

Apple

Safari introduced a native HTML switch element in version 17.4 which is easy to use just by adding the switch attribute to a checkbox input. This is a great feature that allows developers to create a switch without the…

Windows has supported High Contrast Themes in Windows since Windows 10. These customizable themes can be useful for users with visual impairments or for users who prefer high contrast colors. When a Contrast theme is ac…

CSS

Following on from building a Bootstrap accordion using the details HTML tag, I thought I&rsquo;d try to build a Bootstrap dropdown using the same details HTML tag. Open dropdown Action Another action Something else here…

Migrating a website project from Bootstrap 4 to Bootstrap 5 involves renaming a lot of classes which can be a tedious task. To help with this, I created a command-line tool that will do all the renaming for you across a…

Hugos&rsquo;s Markdown Render Hooks allow custom templates to override Markdown rendering functionality. Render hooks are easy to setup and use and can make your site more useful and allow your Markdown content files to…

Last year I published the official HTMLHint extension for VS Code after Microsoft deprecated their version. Thanks to the fine folks over at Microsoft in assisting with the migration to the HTMLHint org on GitHub! I&rsq…

Microsoft

I recently spent a while looking for a CSS inspector JavaScript library that would function in a way similar to DevTools elements inspector that would show the CSS rules applied to a component. I couldn&rsquo;t find one…

JavaScriptCSS

I recently had to build an accordion for a small single-page project. As I was using Bootstrap 5 for the CSS I wanted to see if I could apply the accordion styling to the <details> HTML5 tag without needing to use Boots…

CSS

PurgeCSS is a great tool which can dramatically reduce the amount of compiled CSS deployed to your site by removing any classes that are not being used in your HTML markup - leaving only the CSS which is used. This will…

CSS

With WWDC 2022 now just a couple of weeks away here is my Web Developers wish list for Safari on iOS 16. Native iframe Lazy Loading Native lazy loading of iframes with loading='lazy' has shipped in Chrome and Edge alrea…