Christian Oliff

Bootstrap Icons as CSS variables

Thu, 26 Mar 2026 01:00:00 +0000

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 can be a (relatively) significant performance overhead. Many sites are loading icon fonts from third-party CDNs too which can be blocked by users content blockers.

In fact, CSS Tricks did an Inline SVG vs Icon Fonts Cagematch article 12 years ago (!) which concluded that inline SVGs are a better choice for icons, and since then the benefits of avoiding icon fonts have only grown.

I can see the appeal of using icon fonts, though, if you’re using Bootstrap Icons for example.. just use markup like:

<i class="bi bi-heart"></i>

There’s a better way though! Instead of using icon fonts, we can set all the icons we need as CSS variables and then map them to a CSS class - so we can use them in a similar way to the webfonts but without the extra file downloads and the other drawbacks.

I’ve released Bootstrap Icons as CSS variables, a small project that exposes Bootstrap Icons as CSS custom properties.

So you have access to the icon as a CSS variable like this:

--bi-hearts: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path fill-rule=\"evenodd\" d=\"M4.931.481c1.627-1.671 5.692 1.254 0 5.015-5.692-3.76-1.626-6.686 0-5.015m6.84 1.794c1.084-1.114 3.795.836 0 3.343-3.795-2.507-1.084-4.457 0-3.343M7.84 7.642c2.71-2.786 9.486 2.09 0 8.358-9.487-6.268-2.71-11.144 0-8.358\"/></svg>");

and a class to reference it:

.bi-heart {
 mask-image: var(--bi-heart);
}

So your HTML markup is identical to using icon fonts:

<i class="bi-heart"></i>

You can size the icon with CSS like so:

<i class="bi-heart" style="height: 2rem; width: 2rem;"></i>

The package includes the generated CSS - with both CSS variables and class names referencing the CSS variables as SVG masks.

Browser compatibility: CSS mask-image is supported unprefixed in all modern browsers (Chrome 120, Safari 15.4, Firefox 53 — caniuse). To widen support further (Safari 4.0+, Opera), you can use Autoprefixer to automatically add -webkit-mask-image prefix (alongside mask-image). Because this uses CSS variables, the same variables are referenced from :root without increasing filesize much. Neat!

The stylesheet is approx 1.3 MB (~230 KB gzipped) and includes all 2078 icons. You can reduce file size and improve performance by only including the CSS (or variables) for the icons you need.

Demo & examples: https://coliff.github.io/bootstrap-icons-css/
GitHub repository: https://github.com/coliff/bootstrap-icons-css/
npm package: https://www.npmjs.com/package/bootstrap-icons-css

Web Developer Tools+ iOS App

Tue, 03 Mar 2026 09:01:22 +0000

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 and iPadOS.

Features

Elements inspector with ability to edit, automatically highlights currently selected section and syntax-highlighted code.
CSS Quick tools and CSS overview
Emulate vision deficiencies (such as color blindness, blurred vision)
Emulate CSS media features (prefers-contrast, prefers color-scheme etc)
Network inspector with sorting and filters, source viewer, HTTP headers tables and more.
Detailed SEO and Meta tag views with Open Graph previews, Web Manifest breakdowns and robots.txt file details.
Storage panel with options to view or delete cookies, localStorage and Session storage.
Accessibility audits, info and debug tools (ARIA inspect and img alt inspect).
Detailed Device Info panel with UserAgent, display and screen resolution, network speeds, connection type, ISP and more.

The ‘More Tools’ tab is useful as it gives one-tap quick audits from 8 popular, free services (Lighthouse, HTTP Observatory, Wave Web Accessibility etc). No need to login, it’ll open a new tab with your audit right there!

Roadmap

I’m looking to add a Console tab (currently in Settings > Labs tab), an Audits tab and optional themes.

Web DevTools+ is free with no adverts, tracking or subscriptions.

https://apps.apple.com/app/apple-store/id6759253731?pt=378206&ct=christianoliffcom&mt=8

Happy to hear any feedback, suggestions/feature requests (Mastodon and Bluesky links below)

Bootstrap 5 CSS Breakpoint Indicator

Wed, 17 Dec 2025 02:01:22 +0000

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.

It appears at all times in the bottom left corner of the viewport and as it’s small, partially transparent and blurred it doesn’t distract from the main content.

body::after {
 aspect-ratio: 1 / 1 !important;
 backdrop-filter: blur(99px) !important;
 background-color: rgb(0 0 0 / 0.8) !important;
 border-radius: 8px !important;
 bottom: 0.25rem !important;
 color: #fff !important;
 content: "XS";
 font-family: system-ui, sans-serif !important;
 font-size: 12px !important;
 left: 0.25rem !important;
 min-width: 28px !important;
 opacity: 0.9 !important;
 padding: 4px !important;
 pointer-events: none !important;
 position: fixed !important;
 text-align: center !important;
 z-index: 9999 !important;
}

/* SM ≥576px */
@media (width >= 576px) {
 body::after {
 content: "SM";
 }
}

/* MD ≥768px */
@media (width >= 768px) {
 body::after {
 content: "MD";
 }
}

/* LG ≥992px */
@media (width >= 992px) {
 body::after {
 content: "LG";
 }
}

/* XL ≥1200px */
@media (width >= 1200px) {
 body::after {
 content: "XL";
 }
}

/* XXL ≥1400px */
@media (width >= 1400px) {
 body::after {
 content: "XXL";
 }
}

Demo

You can see a demo on this page or view an isolate demo of the Bootstrap 5 CSS Breakpoint Debugger.

Tip: You can set the indicator to be hidden when using/interacting with the site with:

body:hover::after {
 opacity: 0 !important;
}

Building a Bootstrap Modal with the dialog HTML element

Sun, 14 Dec 2025 02:01:22 +0000

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 has been supported by all major browsers for a while now and can be used with Invoker Commands and is a great way to create a modal dialog without the need of JavaScript.

You can create a Bootstrap modal using the <dialog> element with just a tiny bit of custom CSS.

<button class="btn bg-primary btn-primary" type="button" id="btnDialog" commandfor="dialog"
 command="show-modal" closedby="any">
 Open modal
</button>

<dialog id="dialog" class="position-relative border-1" closedby="any">
 <div class="modal d-flex position-static">
 <div class="modal-dialog w-100 m-0">
 <div class="modal-content bg-body">
 <div class="modal-header">
 <h1 class="modal-title fs-5 mt-0">Modal title</h1>
 <form method="dialog" class="ms-auto me-1">
 <button type="submit" class="btn-close">
 <span class="visually-hidden">Close</span>
 </button>
 </form>
 </div>
 <div class="modal-body py-2">
 <p>Modal body text goes here.</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
</dialog>

<style>
dialog {
 background-clip: padding-box;
 background-color: var(--bs-body-bg);
 border-radius: var(--bs-border-radius-lg);
 border: 1px solid var(--bs-border-color);
 box-shadow: var(--bs-box-shadow-sm);
 color: var(--bs-body-color);
 max-width: 100%;
 min-width: 420px;
 overflow-x: hidden;
 overflow-y: auto;
 padding: var(--bs-modal-padding-y) var(--bs-modal-padding-x);
 z-index: var(--bs-modal-zindex);

 &::backdrop {
 background-color: rgba(0,0,0,.75);
 animation: .3s fade-in;
 }
}
</style>

Demo

You can also view an external demo.

Considerations

Invoker commands are now supported in all modern browsers. In order to support older browsers, you can add the invokers polyfill.
The above example allows the user to dismiss the modal by clicking outside of it or pressing the Escape key. If you want to prevent this behavior, you can remove the closedby="any" attribute from the <dialog> element.
The dialog element fades in when opened using the ::backdrop pseudo-element and Bootstrap’s own fade-in animation, but when dismissing the dialog it doesn’t fade out.
Bootstrap 6 will likely rename the modal component to dialog and use the <dialog> element and there’s an open PR on GitHub.

Image Size Info Browser Extension

Thu, 11 Dec 2025 02:01:22 +0000

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 useful for web development and design work, for example to know if an image was being scaled or if the file-size was too large.

Unfortunately, the extension was removed from the extension store. I couldn’t find a suitable replacement that met my needs, so I created my own.

It displays the image’s URL (with a button to open it in a new tab), actual dimensions, displayed/rendered dimensions, file size, and date-modified. It works in both Chrome and Edge browsers.

I didn’t publish it to the Firefox Extension store because I used a service worker to fetch the image headers, which isn’t supported in Firefox extensions, and there are already other extensions that provide similar functionality.

I may add additional features in the future such as MIME type detection and alt text display. If you have any suggestions or feature requests, feel free to let me know.

Download

Building a Bootstrap Accordion with the details/summary HTML tags in 2025

Thu, 21 Aug 2025 01:01:22 +0000

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 for styling and the native functionality of the <details> element.

At the time it wasn’t possible to animate the opening and closing of the accordion (with CSS), but thanks to the relatively new ::details-content CSS pseudo-element with transitions we can do that now. So I’m revisiting that solution with an update with no need for JavaScript at all.

Note that the transition for now are only in Chrome/Edge, but I think support for Firefox and Safari is planned. If you’d prefer a more consistent experience across browsers, you might consider using the JavaScript-based solution in my original post.

Accordion Title 1

Last Friday night, yeah I think we broke the law, always say we're gonna stop. And on my 18th Birthday we got matching tattoos. All to me, give it all to me. Don't be a chicken boy, stop acting like a bitch. Suiting up for my crowning battle. Respect.

Accordion Title 2

Why don't you let me stop by? We freak in my jeep, Snoop Doggy Dogg on the stereo. Got a motel and built a fort out of sheets. It’s in the palm of your hand now baby. I was gonna hit it and quit it. Trying to connect the dots, don't know what to tell my boss.

Accordion Title 3

I know you get me so I let my walls come down, down. A perfect storm, perfect storm. Yes, we make angels cry, raining down on earth from up above. Do you ever feel like a plastic bag. The girl's a freak, she drive a jeep in Laguna Beach.

HTML

<div class="accordion border-bottom-0">
 <details class="accordion-item border-bottom-0">
 <summary class="accordion-button rounded-top">
 <div class="accordion-header user-select-none">Accordion Title 1</div>
 </summary>
 <div class="accordion-body border-bottom">
 <p>....</p>
 </div>
 </details>
 <details class="accordion-item border-bottom-0">
 <summary class="accordion-button">
 <div class="accordion-header user-select-none">Accordion Title 2</div>
 </summary>
 <div class="accordion-body border-bottom">
 <p>....</p>
 </div>
 </details>
 <details class="accordion-item">
 <summary class="accordion-button">
 <div class="accordion-header user-select-none">Accordion Title 3</div>
 </summary>
 <div class="accordion-body">
 <p>....</p>
 </div>
 </details>
</div>

Custom CSS

details.accordion-item:not([open]) .accordion-button {
 background-color: var(--bs-accordion-bg);
}

details.accordion-item:not([open]):last-of-type .accordion-button {
 border-bottom-right-radius: var(--bs-accordion-border-radius);
 border-bottom-left-radius: var(--bs-accordion-border-radius);
}

details.accordion-item:not([open]) .accordion-button::after {
 background-image: var(--bs-accordion-btn-active-icon);
 transform: unset;
}

details.accordion-item[open] .accordion-button::after {
 background-image: var(--bs-accordion-btn-icon);
 transform: var(--bs-accordion-btn-icon-transform);
}

/* Hide the default disclosure triangle on Safari */
summary.accordion-button::-webkit-details-marker {
 display: none;
}

@media (prefers-reduced-motion: no-preference) {
 details.accordion-item {
 interpolate-size: allow-keywords;
 }
}

details.accordion-item::details-content {
 block-size: 0;
 overflow-y: clip;
 transition: content-visibility 0.2s allow-discrete, block-size 0.2s;
}

details.accordion-item[open]::details-content {
 block-size: auto;
}

View demo & code

Using the Speculation Rules API to Improve Performance

Fri, 18 Jul 2025 09:01:22 +0000

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 times and improve the user experience.

I’ve added it to this site and switching between pages is now even faster. Here’s how you can implement it - just stick this script in the <head> of your HTML and you’re good to go!

<script type="speculationrules">
{
 "prerender": [{
 "where": {
 "href_matches": "/*"
 },
 "eagerness": "moderate"
 }]
}
</script>

The eagerness - moderate setting means that this performs speculations if you hold the pointer over a link for 200 milliseconds (or on the pointerdown event if that is sooner, and on mobile where there is no hover event).

Speculation Rules are currently only available in Chrome/Edge and other Chromium-based browsers, so it doesn’t work in Safari or Firefox, however you can conditionally load the instant.page script. It’s only about 1 KB and provides similar functionality across all other browsers.

<script>
 // Fallback to instant.page for browsers that don't support speculation rules
 if (!(HTMLScriptElement.supports && HTMLScriptElement.supports('speculationrules'))) {
 const script = document.createElement('script');
 script.type = 'module';
 script.src = 'https://instant.page/5.2.0';
 script.fetchPriority = 'low';
 script.defer = true;
 document.head.appendChild(script);
 }
</script>

Unfortunately, ad blockers can interfere with speculation rules (the setting to disable preloading is checked by default on uBlock Origin and Privacy Badger), so users with ad blockers may not benefit from this feature.

Safari Wishlist (2025)

Fri, 11 Jul 2025 03:51:22 +0000

The Safari browser has come a long way in recent years, but there are still a few CSS/HTML features that I’d like to see added that would make it even better for web developers and users alike. I’ve previously shared my wishlists for Safari in Summer 2020, and again in Summer 2022, and I’m happy to look back and see that many of my wishes have since been added to Safari. Now that we’re deep into 2025, it’s time to revisit and update that list!

1. Support for Open & Close Transitions with <details>

Adam Argyle explains and demonstrates this best and I’d love to see Safari support the open and close transitions for the <details> element. This would allow developers to create smooth animations when expanding or collapsing details sections, enhancing the user experience - all without the need for JavaScript.

2. Support for Invoker Commands

The HTML commandfor/command attributes, as proposed by the Open UI group is already supported in Chrome/Edge, but not Safari. This would allow developers to create custom commands for elements, such as a button that opens a modal without the need for JavaScript. For now though, at least we have an awesome invokers-polyfill courtesy of Keith Cirkel which works great with Safari and Firefox.

Note: The HTML commandfor/command attributes is testable via Developer Feature Flags in Safari though it didn’t seem to work for me.

3. Support for the `prefers-reduced-transparency` Media Query

The prefers-reduced-transparency CSS media feature is used to detect if the user has requested the web content uses less transparency.

This would be very useful for creating a more accessible experience for users who may have difficulty with transparency effects. A pull requests for this feature had been submitted to WebKit but has unfortunately been closed due to a potential fingerprinting risk. I really hope this can be revisited in the future!

4. Customizable Select Support

Chrome 135 added appearance: base-select to the select element, which allows customizing the appearance of the select element with custom styles and HTML opening all kinds of possibilities. MDN has a great guide on how to use it.

5. Textarea field-sizing CSS

The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content. Learn more at Web Platform Features Explorer.

6. CSS Anchor Positioning

Anchor positioning was added to Chrome, Chrome Android, and Edge in Chromium 125. This makes it possible to position elements relative to an anchor element, which is a great way to create more flexible and accessible interfaces. It’s great to hear that it’s coming to Safari in iOS 26, but for now we can make do with this awesome polyfill.

7. Scroll-driven Animations

I love the scroll-driven animations in Chrome - you can really enhance interfaces without the need for a JavaScript library, and I’m happy to hear that they’re coming to Safari in iOS 26 this fall!

8. Low-data Mode JavaScript API

A ‘Low Data Mode’ has been available in iOS Network Settings for a few years now. Setting this will disable automatic app updates, background iCloud syncing and lower the video/audio streaming quality in some apps. It’d be great if this setting was available to web developers via a JavaScript API.

I requested this feature via Feedback Assistant - you can too.

9. Support for the `prefers-reduced-data` Media Query

Related to the request above, the prefers-reduced-data CSS media feature is used to detect if the user has requested the web content uses less data.

This would be very useful to use smaller file-size or no background images, or default to fallback fonts instead of downloading heavy custom fonts.

10. View Source Mode / Safari Web Inspector

There are a few simple ‘view source’ third-party apps in the App Store for this, but it’d be really nice to see a more feature-rich native option for debugging sites with iPadOS. Ideally it should have a JavaScript console, network page resources and element inspector tabs. As an iPad Pro-owning web developer I’d like to be able to do more work/website testing on my iPad without needing to use my laptop/desktop.

Web Inspector App for iPad (iOS 26 Developer Beta)

Bootstrap JavaScript Snippets

Mon, 26 May 2025 02:41:22 +0000

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’d make a quick blog post to share a few of my most used ones. They are all for Bootstrap 5, but could easily be adapted for earlier versions.

It can sometimes be useful to have a shareable URL which, automatically opens a modal on page load. e.g. Test. This can be achieved with this little script.

document.addEventListener("DOMContentLoaded", function() {
 if (window.location.hash === "#exampleModal") {
 const modalElement = document.getElementById("exampleModal");
 if (modalElement) {
 const modal = new bootstrap.Modal(modalElement);
 modal.show();
 }
 }
});

Open Accordion via URL Fragment

It can sometimes be useful to have a shareable URL which, automatically opens an accordion section on page load, perhaps to show a specific section of content.

document.addEventListener("DOMContentLoaded", function () {
 const hash = window.location.hash;
 if (hash) {
 const buttonElement = document.querySelector(hash + " .accordion-button");
 if (buttonElement) {
 buttonElement.click();
 }
 }
});

If you have a modal with a video in it, you may want to prevent the video from continuing to play when the modal is closed. This can be done by resetting the src attribute of the <iframe> when the modal is hidden.

You can test this by clicking the button below which will open a modal with a YouTube video in it. When you close the modal, the video will stop playing.

document.addEventListener("DOMContentLoaded", function () {
 document.addEventListener("hidden.bs.modal", function (event) {
 const iframes = event.target.querySelectorAll("iframe");
 iframes.forEach(function (iframe) {
 const currentSrc = iframe.src;
 iframe.src = "";
 setTimeout(function() {
 iframe.src = currentSrc;
 }, 100);
 });
 });
});

Dismiss Tooltips on Escape

I hope this feature is added to Bootstrap itself (I opened an issue!) as it’s needed for full WCAG21 compliance. You can test this by hovering over the share link button below this article which will display a tooltip and then pressing the Esc key.

document.addEventListener("keyup", function (event) {
 if (event.key === "Escape") {
 const tooltipTriggerList = document.querySelectorAll(
 '[data-bs-toggle="tooltip"]',
 );
 tooltipTriggerList.forEach(function (tooltipTriggerEl) {
 var tooltip = bootstrap.Tooltip.getInstance(tooltipTriggerEl);
 if (tooltip) {
 tooltip.hide();
 }
 });
 }
});

Bootstrap switches with on-off labels

Fri, 21 Feb 2025 06:03:00 +0000

Apple’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 alone.

It’s easy to add this feature to Bootstrap switches using a little CSS. Here’s how you can do it.

.form-switch .form-check-input::after {
 font-size: 0.5rem;
 position: absolute;
 margin-top: 1.4px;
}
.form-switch .form-check-input:checked::after {
 color: #fff;
 content: "⼁";
 margin-left: 5px;
}
.form-switch .form-check-input:not(:checked)::after {
 color: #bfbfbf;
 content: "○";
 margin-left: 22px;
}

Demo

Default switch checkbox input

Checked switch checkbox input

Disabled switch checkbox input

Disabled checked switch checkbox input

Codepen Demo

You can also view the demo on Stackblitz.

Notes and Observations

The CSS above works in both light and dark mode.
I add the switch attribute to the input element to give the switches haptic feedback on iPhones.
The ::after pseudo-element is used to add the labels.
The content property is used to add the labels.
The margin-left and margin-top properties are used to position the labels.
The font-size and color properties are used to style the labels.

Using Safari's native switch input with Bootstrap

Wed, 12 Feb 2025 00:01:39 +0000

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 need for JavaScript or CSS and I hope that other browsers adopt this too. For now you can use a native switch in Safari with fallback styling for other browsers using Bootstrap.

CSS

This @supports selector is used to target Safari 17.4 and later. It will turn off some of Bootstrap’s custom switch styles and use the native switch styles in Safari. If you want to use Bootstrap’s custom switch styles in Safari you can simply omit the CSS below.

@supports (-webkit-hyphens: none) and (word-spacing: 1%) {
 .form-switch .form-check-input[type="checkbox"][switch] {
 accent-color: #0d6efd;
 /* Sets the accent color of the switch to same color as what Bootstrap uses */
 background-color: transparent;
 /* Removes the background color used by Bootstrap's custom switch */
 background-image: none;
 /* Removes the background image used by Bootstrap's custom switch */
 border: 0;
 /* Removes the border used by Bootstrap's custom switch */
 opacity: inherit;
 /* Prevent the disabled state from having additional opacity applied */
 -webkit-appearance: auto;
 /* Resets the appearance to auto. */
 /* There's no need to define the prefix-less version since this is Safari-only */
 }
}

With `switch` attribute

The switch attribute is not supported on your browser so the examples below will show the fallback styles provided by Bootstrap. To test you must use Safari 17.4 or later.

Default switch checkbox input <input type='checkbox' class='form-check-label' switch>

Checked switch checkbox input <input type='checkbox' class='form-check-label' switch checked>

Disabled switch checkbox input <input type='checkbox' class='form-check-label' switch disabled>

Disabled checked switch checkbox input <input type='checkbox' class='form-check-label' switch disabled checked>

Without `switch` attribute

Examples showing Bootstrap’s switch styles without the switch attribute.

Default switch checkbox input <input type='checkbox' class='form-check-label'>

Checked switch checkbox input <input type='checkbox' class='form-check-label' checked>

Disabled switch checkbox input <input type='checkbox' class='form-check-label' disabled>

Disabled checked switch checkbox input <input type='checkbox' class='form-check-label' disabled checked>

Codepen Demo

You can also view the demo on Codepen.

Notes and Observations

The accent-color property can be used to change the color of the switch in Safari. By default it appears green on macOS and blue on iOS. In my example I set it to the same color as what Bootstrap uses for the switch for consistency.
The role="switch" attribute is used to indicate that the input is a switch. This is not necessary but it is a good practice to use it. On Safari it is not necessary to use it if the input has the switch attribute.
On Safari macOS the native switch appears pixelated when zoomed in. On iOS and iPadOS it appears fine.
In the future you’ll be able to style the thumb and range (using the ::thumb and ::track selectors) of the switch which allows you to style the switch more than just changing the color. I didn’t go into that in this article but you can read more about it in the WebKit blog post.
Using Safari’s native switch has the advantage of being optimized for the ‘prefers contrast’ setting (which uses a darker color for the off state) in iOS and macOS and also for the ‘Differentiate without color’ setting (which adds on and off glyphs).
Using Safari’s native switch gives haptic feedback when toggling the switch on iOS. For that reason, even if you don’t want to use Safari’s native switch styling you can use the switch attribute and don’t use the custom CSS above so it uses Bootstrap styling but still gets the haptic feedback as a progressive enhamcement.

Bootstrap Forced Colors CSS for Windows High Contrast Themes

Fri, 05 Jul 2024 00:11:22 +0000

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 activated is enables the forced-colors media query in browsers (at the time of writing, Edge, Chrome and Firefox).

Unfortunately, forced colors mode can cause issues with websites that are not designed to work with high contrast colors. Using Bootstrap v5 has a number of issues with missing borders and elements (This GitHub issue covers some of them) so I’ve created a stylesheet by using the forced-colors: active media query which you can simply add to your site to ‘auto-fix’ everything and adds enhancements to make Bootstrap 5 much more accessible in Firefox, Chrome, Edge on Windows.

Quick start

Download the latest release
Clone the repository git clone https://github.com/coliff/bootstrap-forced-colors-css.git
Install with npm npm install bootstrap-forced-colors-css
Install with yarn yarn add bootstrap-forced-colors-css
Install with Composer composer require coliff/bootstrap-forced-colors-css

Usage

Add this in the <head> which will load the CSS using a media query as follow:

<link
 rel="stylesheet"
 href="/css/bootstrap-forced-colors.min.css"
 media="screen and (forced-colors: active)">

The CSS can be loaded via a CDN:

<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/bootstrap-forced-colors-css/css/bootstrap-forced-colors.min.css"
 media="screen and (forced-colors: active)">

Or you can import the CSS into your own CSS file:

@import bootstrap-forced-colors.min.css

FAQS

What does this fix/improve?

Accordion buttons have improved contrast in dark mode
Badges within buttons have a 1px border to improve contrast
Buttons have improved focus state contrast (2px visible outline rather than 1px)
Disabled buttons display the correct color using the GrayText name
Carousel indicators have background-color issue resolved
Close button has improved contrast by reducing the opacity
Dropdown toggle arrows appear correctly (as triangles and not rectangles)
List Group disabled items display the correct color using the GrayText name
Modal backdrop opacity changed from 0.5 to 0.8
Navbar Menu (hamburger) toggle icons display correctly
Navs Improves active and focus state contrast
Pagination: Active page link has outline to indicate active page
Pagination: Disabled page link display the correct color using the GrayText name
Placeholder: Fix for invisible placeholder boxes
Popovers: Fixes invisible arrow issue
Progress: Is no longer invisible
Progress: Improved stacked progress bar contrast
Spinners: Fixes animation
Tables: Have a 1px outline to improve contrast
Toasts: Fixes invisible close/dismiss button
Tooltips: Fix for arrows appearing as rectangles
Tooltips: Add 1px border to tooltips content
Vertical Rule: Fixes invisible vertical rule
Horizontal Rule: Improves contrast by changing opacity from 0.25 to 0.5

Demo

See this in action at: https://coliff.github.io/bootstrap-forced-colors-css/tests/

Testing

Currently, only Windows 10 & 11 with Edge, Firefox, and Chrome support forced colors mode. To test, you can enable forced colors mode in:

Windows 10: Go to Settings > Ease of Access > High contrast and select a theme.

Windows 11: Go to Settings > Accessibility > Contrast themes and select a theme

You can also use the Forced Colors Mode Emulation in Edge and Chrome on all platforms.

Note: Forced Colors Mode emulation supports emulating light and dark themes by toggling the prefers-color-scheme between light and dark in the Dev Tools. Switching Bootstrap’s light/dark mode theme toggle will have no noticeable effect. The color scheme is set by the user at the OS level.

Note that CanIUse lists Safari as supporting forced colors mode, however, macOS itself doesn’t have a Forced Colors / High Contrast mode which means it’s not possible to test this with Safari at all.

Interesting links about Windows High Contrast Mode

Smashing Magazine article
CanIUse Support (Only Windows supports forced colors mode)
WHCM and System Colors

Building a Bootstrap Dropdown with the details HTML disclosure element

Wed, 10 Apr 2024 00:00:00 +0000

Following on from building a Bootstrap accordion using the details HTML tag, I thought I’d try to build a Bootstrap dropdown using the same details HTML tag.

HTML

<details class="dropdown mb-5">
 <summary class="btn btn-primary dropdown-toggle">
 Open dropdown
 </summary>
 <div>
 <ul class="dropdown-menu" style="display: revert;">
 <li><a class="dropdown-item" href="#">Action</a></li>
 <li><a class="dropdown-item" href="#">Another action</a></li>
 <li><a class="dropdown-item" href="#">Something else here</a></li>
 </ul>
 </div>
</details>

Overall it was easy and quick to get together but it unfortunately brings with it a few minor usability issues.

Unlike a standard Bootstrap downdown component, clicking outside of the dropdown won’t collapse the dropdown and the Esc key won’t collapse it either. Having said that, a standard details/summary element won’t do either of those anyway and the collapse dropdown can still be controlled with a keyboard using the Enter or Space key.

JavaScript (Optional)

You could add a tiny script to close the menu when the Esc key is pressed:

<script>
 document.addEventListener('keydown', function(event) {
 if (event.key === 'Escape') {
 let detailsElements = document.querySelectorAll('details[open]');
 detailsElements.forEach((details) => {
 details.removeAttribute('open');
 });
 }
});
</script>

Accessibility

The dropdown is fully accessible and can be controlled with a keyboard. The dropdown can be opened and closed with the Enter or Space key and the dropdown items can be navigated with the tab key. It is announced as a dropdown by screen readers and the dropdown items are announced as a list.

Summary

I thought this was an intertesting experiment and I hope you find it useful. It’s neat how much you can achieve with just HTML and CSS!

Bootstrap 5 Migrate Tool

Mon, 25 Mar 2024 01:21:22 +0000

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 all pages in your project. It’s a comprehensive script which not only renames all the relevant classes, but also updates any deprecated elements and attributes to relevant classes and more.

Features

Replaces all Bootstrap 4 class names with the renamed Bootstrap 5 class names
Replaces deprecated components (such as .jumbotron and .media) with utility classes
Renames all the data attributes (such as data-toggle and data-target) to the new names
Updates all Bootstrap v4 CDN links (cloudflare.com, jsdelivr.net, stackpath.bootstrapcdn.com and unpkg.com) to latest version of Bootstrap v5
Options to overwrite the existing files in place or save the migrated files to a different folder
Can convert not only HTML files but also ASP, CSHTML, EJS, ERB, HBS, JSP, PHP, VUE, and other template files
Provides a summary of the changes made

How to use the tool

Clone the repo and then run the following command:

npm install

Copy your HTML templates to the src folder.

Then run the following command to start the migration:

npx gulp migrate

The migrated HTML templates will overwrite the files in place by default. If you want to keep the original files, you can use the --dest flag to specify a destination folder. See the Options section for more details.

Read the official Bootstrap 5 migration guide here: https://getbootstrap.com/docs/5.3/migration/

Options

Options that may be set via CLI flags. For example: npx gulp migrate --src "./src-dir" --overwrite --verbose

src: './src' - string that will be passed to the gulp {@link src} function
dest: ./- string that will be passed to the gulp {@link dest} function
overwrite: true - overwrite the existing files in place. Cannot be used with –dest flag
verbose: true- print the path of each generated / modified file to the console
defaultFileGlob: '**/*.{asp,aspx,cshtml,ejs,erb,hbs,html,htm,jsp,php,twig,vue}' - default glob for files to search in. Default: Search all folder and files recursively

Demo

Input (created using Bootstrap 4):

Bootstrap 4 HTML template

And here’s the same page after running the migration tool:

Bootstrap 5 HTML template

Contribute

This tool is open-source and available on GitHub: Bootstrap 5 Migrate Tool.

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or a pull request.

Markdown Render Hooks in Hugo

Thu, 21 Sep 2023 02:04:22 +0000

Hugos’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 be simpler by passing on functionality to the render hooks rather than relying on custom code in your Markdown files.

The hook kinds currently supported are:

heading
image
link
codeblock

Headings

If your site has many subheadings then it’s useful to be able to add an anchor link to each heading so that users can easily link to a specific heading, like I have done on this site. This can be setup with a custom template for the heading hook kind.

<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
 <a class="header-link" href="#{{ .Anchor | safeURL }}"
 aria-label="Link to this section: {{ with .Text}}{{ . }}{{ end }}"></a>
</h{{ .Level }}>

This will add an anchor link to each heading that links to the heading’s anchor. The Aria label is also set to the heading’s text.

Links

A Markdown link has three components: link text, a link destination, and optionally a link title.

Most sites have links and it’s a common practise to have external links open in a new tab. By using the Markdown render hook template below all links beginning with http will automatically have the target="_blank" attribute. You could add an external link icon within this block if you wanted.

<a href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{- . -}}"
 {{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" {{ end }}>
 {{- .Text | safeHTML -}}
</a>

One quick note: I sometimes see users add rel="noreferrer" to external links that they control, I don’t recommend that as it can make analytics data less accurate. Also, it used to be advised to add rel="noopener" to external links but the security issue for this was fixed in all major browsers years ago so this is no longer necessary.

Images

This is perhaps the most useful render hook of all. By default, rendering an image in Markdown via Hugo will not set the size or add any classes so large images can appear wider than the viewport.

With this render hook images have their height and width added (if the images are in the static directory) and lazy loading parameters added.

<img src="{{ .Destination | safeURL }}"
 alt="{{- .Text -}}"
 {{ with .Title }} title="{{- . -}}" {{ end }}
 {{ if strings.HasPrefix .Destination "http" }} {{else}}
 {{ with imageConfig ( printf "static/%s" .Destination ) }}
 width={{ .Width }} height="{{ .Height }}"
 {{ end }}
 {{ end }}
 decoding="async"
 loading="lazy"
 />

Code Blocks

Codeblocks are the latest addition to Hugo’s render hook capabilities and were introduced with Hugo v0.93.0. Codeblocks are a little different to the other hooks as they are available as single template (render-codeblock.html) but also as templates selected based on the language of the code block (e.g. render-codeblock-html.html or render-codeblock-python.html).

 ```html {class="html-code" id="my-codeblock" lineNos=inline tabWidth=4}
 <body>
 <button type="button" class="btn">Hello, world!</button>
 </body>
 ```

A fenced code block consists of:

A leading code fence
An optional info string
A code sample
A trailing code fence

So the code block above has an info string of html {class="html-code" id="my-codeblock" lineNos=inline tabWidth=4}. This info string is passed to the render hook template as a CodeFence object.

Some ideas for code block render hooks:

Add a copy button to each code block to allow your users to easily copy and paste the code.
Add an open in CodePen or open in StackBlitz button to allow users to quickly try out the code.
Add a small label of the language used in the example

HTMLHint VS Code Extension

Wed, 06 Sep 2023 01:01:22 +0000

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’ve since made several updates to the extension, including optimizations and fixes. The extension is now up to date with the latest HTMLHint version and it’s now possible to use with file-types other than HTML (for example Markdown, PHP etc.)

The extension on the Visual Studio Marketplace at the time of writing has now had more than 200,000 downloads and I recently published it to the OpenVSX registry too, so you can install it from there if you’re a VSCodium user.

There’s a few open issues which we need help with, so if you’re interested in contributing to the extension, please check out the GitHub repo.

Happy HTML hinting!

Popover CSS Inspector for Bootstrap 5

Fri, 25 Aug 2023 09:01:22 +0000

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’t find one that worked the way I wanted, so I decided to build one myself.

I wanted to make it so it’d be easy to use, look nice and be customizable with the ability to turn certain CSS properties on or off. I decided to base the inspector on Bootstrap 5’s popover component as it’s a nice looking component that’s easy to customize.

The compiled JavaScript is only 3KB minified and gzipped and every CSS property can be turned on or off by adding the data-css-inspector-hide or data-css-inspector-show attributes to the popover trigger element.

The inspector can be used on any element, not just Bootstrap components. The inspector is also responsive and will reposition itself if it goes off the screen and is also fully customizable with CSS variables.

Using it is as simple as adding the data-bs-custom-class="popover-css-inspector" attribute to the popover trigger element and loading the JavaScript:

<script src="/js/popover-css-inspector.min.js" defer></script>

Check it out, I hope you find it useful!

Building a Bootstrap Accordion with the details/summary HTML tags

Wed, 28 Jun 2023 09:01:22 +0000

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 Bootstrap JavaScript. Here’s the solution I came up with.

Accordion Title 1

Accordion Title 2

Why don't you let me stop by? We freak in my jeep, Snoop Doggy Dogg on the stereo. Got a motel and built a fort out of sheets. It’s in the palm of your hand now baby. I was tryna hit it and quit it. Trying to connect the dots, don't know what to tell my boss.

Accordion Title 3

HTML

<div class="accordion border-bottom-0">
 <details class="accordion-item border-bottom-0">
 <summary class="accordion-button rounded-top">
 <div class="accordion-header user-select-none">Accordion Title 1</div>
 </summary>
 <div class="accordion-body border-bottom">
 <p>....</p>
 </div>
 </details>
 <details class="accordion-item border-bottom-0">
 <summary class="accordion-button">
 <div class="accordion-header user-select-none">Accordion Title 2</div>
 </summary>
 <div class="accordion-body border-bottom">
 <p>....</p>
 </div>
 </details>
 <details class="accordion-item">
 <summary class="accordion-button">
 <div class="accordion-header user-select-none">Accordion Title 3</div>
 </summary>
 <div class="accordion-body">
 <p>....</p>
 </div>
 </details>
</div>

Custom CSS

To animate the chevron rotating we need to add a few CSS rules.

details.accordion-item:not([open]) .accordion-button {
 background-color: var(--bs-accordion-bg);
}

details.accordion-item:not([open]):last-of-type .accordion-button {
 border-bottom-right-radius: var(--bs-accordion-border-radius);
 border-bottom-left-radius: var(--bs-accordion-border-radius);
}

details.accordion-item:not([open]) .accordion-button::after {
 background-image: var(--bs-accordion-btn-active-icon);
 transform: unset;
}

details.accordion-item[open] .accordion-button::after {
 background-image: var(--bs-accordion-btn-icon);
 transform: var(--bs-accordion-btn-icon-transform);
}

/* Hide the default disclosure triangle on Safari */
summary.accordion-button::-webkit-details-marker {
 display: none;
}

Animating the Collapse with the Web Animation API

An optional extra step is to animate the collapse of the accordion using the Web Animation API. The script is less than 1 KB of JavaScript (minified & gzipped) . The animation is triggered by the click event on the <summary> element.

class Accordion {
 constructor(i) {
 (this.el = i),
 (this.summary = i.querySelector("summary")),
 (this.content = i.querySelector(".accordion-body")),
 (this.animation = null),
 (this.isClosing = !1),
 (this.isExpanding = !1),
 this.summary.addEventListener("click", (i) => this.onClick(i));
 }
 onClick(i) {
 i.preventDefault(),
 (this.el.style.overflow = "hidden"),
 this.isClosing || !this.el.open
 ? this.open()
 : (this.isExpanding || this.el.open) && this.shrink();
 }
 shrink() {
 this.isClosing = !0;
 let i = `${this.el.offsetHeight}px`,
 t = `${this.summary.offsetHeight}px`;
 this.animation && this.animation.cancel(),
 (this.animation = this.el.animate(
 { height: [i, t] },
 { duration: 200, easing: "ease-in-out" }
 )),
 (this.animation.onfinish = () => this.onAnimationFinish(!1)),
 (this.animation.oncancel = () => (this.isClosing = !1));
 }
 open() {
 (this.el.style.height = `${this.el.offsetHeight}px`),
 (this.el.open = !0),
 window.requestAnimationFrame(() => this.expand());
 }
 expand() {
 this.isExpanding = !0;
 let i = `${this.el.offsetHeight}px`,
 t = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
 this.animation && this.animation.cancel(),
 (this.animation = this.el.animate(
 { height: [i, t] },
 { duration: 400, easing: "ease-out" }
 )),
 (this.animation.onfinish = () => this.onAnimationFinish(!0)),
 (this.animation.oncancel = () => (this.isExpanding = !1));
 }
 onAnimationFinish(i) {
 (this.el.open = i),
 (this.animation = null),
 (this.isClosing = !1),
 (this.isExpanding = !1),
 (this.el.style.height = this.el.style.overflow = "");
 }
}
document.querySelectorAll("details").forEach((i) => {
 new Accordion(i);
});

Using PurgeCSS with Hugo

Tue, 05 Jul 2022 06:01:22 +0000

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 decrease the file-size of the compiled CSS and in turn, improve page load speeds.

There are a few different ways of integrating PurgeCSS into your Hugo build process.

You could use the CLI and add a script to run PurgeCSS after Hugo has finished building.

In this tutorial though we’ll use PurgesCSS with PostCSS to immediately process the changes. For this you’ll need Hugo Extended which supports SCSS.

Install PurgeCSS

First of all, install the required PurgeCSS PostCSS package:

npm install postcss postcss-cli @fullhuman/postcss-purgecss

Create config file

Next (if you don’t have one already) create a postcss.config.js at the project root with these contents as an example starting point.

module.exports = {
 plugins: {
 "@fullhuman/postcss-purgecss": {
 content: [
 "./assets/js/*.js",
 "./content/*.md",
 "./layouts/**/*.html",
 "./static/js/*.js",
 ],
 safelist: [
 "arrow",
 "tooltip",
 "tooltip-arrow",
 "tooltip-inner",
 "webmentions",
 ],
 blocklist: [
 "btn-group"
 ],
 },
 },
};

The content section is what PurgeCSS will scan to include all the CSS classes that are used on your site so make sure you include the path to your markdown files, your templates and any JavaScript which may inject CSS classes to your templates DOM.
The safelist section can be used to list any CSS classes that you never want removing. Ensure that any CSS is added here that maybe loaded via any externally hosted JavaScript.
The blocklist section can be used to list any CSS classes that you don’t want in your compiled CSS. This will remove any CSS classes even if they are in your HTML or markdown files so be sure to only ever include CSS classes that you definitely don’t want included.

You can read more about the configuration options in the official docs.

Test

This method of using PurgeCSS with your site is quite straightforward and if setup correctly shouldn’t cause any problems, but it’s always a good idea to test your ste and ensure everything is working as expected before deploying to production.

Once your site has been deployed you can test how the performance with Google’s Lighthouse Performance Audit. Lighthouse is built-in to Chrome’s Dev Tools, but I like to use the browser extension and have the icon pinned in my browser toolbar giving me immediate access to a quick audit without even needing to open dev tools. Look out for the Unused CSS rule in the audit. You should hopefully now see it in the ‘Passed Audits’.

Bonus Tip

Using PurgeCSS is a great way of reducing the compiled CSS size, but consider always minifying the other static assets at build time by adding the following to your Hugo config file.

minify:
 minifyOutput: true

This will minify your CSS, HTML, JS, JSON, SVGs and XML automatically. Read more about the Minify options in the Hugo Docs.

Note: This blog post covers what I’ll go over in the ‘Using PurgeCSS with Hugo’ talk for HugoConf. A quick demo repo is at: https://github.com/coliff/purgecss-test/

Safari for iOS 16 Wishlist

Thu, 26 May 2022 03:11:22 +0000

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 already. This feature is available in Safari via Advanced Settings > Experimental Features so hopefully we’ll see this enabled by default in iOS 16. I’d find it useful to lazy load YouTube iframe embeds so they don’t load automatically until a user scrolls near them.

I requested this feature via Feedback Assistant - you can too.

Low-data Mode JavaScript API

I requested this feature via Feedback Assistant - you can too.

View Source Mode / Safari Web Inspector

Web Inspector App for iPad

HTTP/3

The next version of the HTTP networking protocol, previously known as HTTP-over-QUIC is already enabled in Firefox, Chrome and Edge so it’d be great to see this enabled in Safari too.

Support for the `prefers-reduced-data` Media Query

The prefers-reduced-data CSS media feature is used to detect if the user has requested the web content uses less data.

This would be very useful to use smaller file-size or no background images, or default to fallback fonts instead of downloading heavy custom fonts.

SVG Favicons

Safari is the only modern browser which doesn’t support SVG favicons. It’d be nice to see support added because SVG favicons can support media queries.

In the Experimental WebKit Features menu only the title is displayed, and that is often truncated and unavailable to view in full making it impossible to know what some features are.

See the screenshot on right for some examples.

What is ‘Allow per media element speak…’?
What does the ‘Aspect ratio of <img> from wid…’ do?
What does ‘block top-level redirects by thir…’ mean?

I’d like there to be an info link to learn more about a particular feature to see the W3C spec / API details or a link to the relevant WebKit issue.

If a Safari Web Inspector feature was added then it could make sense to move these options to a tab there instead of hidden away many levels deep in System Settings.

GitHub Actions Workflows

Mon, 16 May 2022 03:11:28 +0000

GitHub Actions provide a great way to automate all parts of your development workflow. I often use the same workflows between open-source projects I work on. I’ve added the workflow configs below so feel free to copy and paste them to your projects.

CodeQL

CodeQL is GitHub’s code security checking engine and this action runs a repository’s source code to find security vulnerabilities. It then displays the results in the repository’s security tab.

Note: This is only available for public repositories (or private repositories that have GitHub Advanced Security licensed)

Code snippet

name: "CodeQL"

on:
 push:
 branches: [ main ]
 pull_request:
 branches: [ main ]

jobs:
 analyze:
 name: Analyze
 runs-on: ubuntu-latest
 permissions:
 actions: read
 contents: read
 security-events: write

 strategy:
 fail-fast: false
 matrix:
 language: [ 'javascript' ]

 steps:
 - name: Checkout repository
 uses: actions/checkout@v3
 with:
 persist-credentials: false

 - name: Initialize CodeQL
 uses: github/codeql-action/init@v2
 with:
 languages: ${{ matrix.language }}

 - name: Perform CodeQL Analysis
 uses: github/codeql-action/analyze@v2

More info

Dependency Review

This one scans your pull requests for dependency changes and will raise an error if any newly added dependencies have existing vulnerabilities.

Note: This is only available for public repositories (or private repositories that have GitHub Advanced Security licensed)

Code snippet

name: 'Dependency Review'
on: [pull_request]

permissions:
 contents: read

jobs:
 dependency-review:
 runs-on: ubuntu-latest
 steps:
 - name: 'Checkout Repository'
 uses: actions/checkout@v3
 with:
 persist-credentials: false
 - name: 'Dependency Review'
 uses: actions/dependency-review-action@v1

More info

cSpell (Spellcheck)

I’ve been happily using the VS Code extension of this for many years. The GitHub Action workflow is good for helping catch typos from contributors at the pull request stage. I recommend adding a cspell.json config to your projects root, adding any false-positives to the dictionary and checking it in to git.

Code snippet

name: 'Check spelling'
on: # rebuild any PRs and main branch changes
 pull_request:
 branches-ignore:
 - "dependabot/**"

permissions:
 contents: read

jobs:
 spellcheck: # run the action
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v3
 with:
 persist-credentials: false
 - uses: streetsidesoftware/cspell-action@v1
 with:
 inline: warning
 strict: false
 incremental_files_only: true

More info

Test

If you have a test script defined in your package.json then you can set this to run on every PR.

Code snippet

name: Lint

on:
 push:
 branches-ignore:
 - "dependabot/**"
 pull_request:

env:
 FORCE_COLOR: 2
 NODE: 16

permissions:
 contents: read

jobs:
 lint:
 runs-on: ubuntu-latest

 steps:
 - name: Clone repository
 uses: actions/checkout@v3
 with:
 persist-credentials: false

 - name: Set up Node.js
 uses: actions/setup-node@v3
 with:
 node-version: "${{ env.NODE }}"
 cache: npm

 - name: Install npm dependencies
 run: npm ci

 - name: Lint
 run: npm run lint

Super Linter

This project from the folks at GitHub bundles a huge number of linters. You can tweak the linting configs or disable linting for a particular type. I recommend including this even if you have a test GitHub Action as above as Super Linter can test for additional files such as GitHub Actions.

Code snippet

name: Lint Code Base

on:
 push:
 branches-ignore:
 - "dependabot/**"

permissions:
 contents: read

jobs:
 build:
 name: Lint Code Base
 runs-on: ubuntu-latest

 steps:
 - name: Checkout Code
 uses: actions/checkout@v3
 with:
 persist-credentials: false
 - name: Lint Code Base
 uses: github/super-linter/slim@v4
 env:
 VALIDATE_ALL_CODEBASE: false
 DEFAULT_BRANCH: main
 VALIDATE_MARKDOWN: false
 GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

More info

Wrap up

I recommend to always keep a dependabot.yml config file in your repo’s .github directory with something like the below to ensure you get PRs to update to any new versions of GitHub Actions as they become available.

version: 2
updates:
 - package-ecosystem: github-actions
 directory: "/"
 schedule:
 interval: monthly

I personally like to have them set on a monthly schedule to cut down on noise but you can change that to daily or weekly.

You can do so much more with GitHub Actions - check the Advanced workflow features docs on GitHub for more ideas.

Freshdesk Messaging Facade

Tue, 26 Oct 2021 03:11:22 +0000

The Freshdesk Messaging chat widget loads 1.1 MB (gzipped) of JavaScript and assets on page load increasing the time for the page to complete loading by 5 seconds. Typically only a small percentage of users will interact with the chat widget meaning that most users have needlessly downloaded a lot of data. It’d be better if the code for the widget loaded when hovered over instead.

"A facade is a static element which looks similar to the actual embedded third-party, but is not functional and therefore much less taxing on the page load."
Google web.dev

Inspired by the awesome Lite YouTube Embed by Paul Irish I created a lightweight embed which is 1/1000th of the size.

Comparison

	Freshdesk Messaging JS	Freshdesk Messaging Facade
Number of assets	28	2
Network Transfer size	1097 KB	1 KB
Page Complete Time	6.3 s	1.1 s

How it works

A div with an inline SVG of the Freshdesk Messaging icon is displayed in the bottom-right corner - appearing just like the real thing. When a user hovers within 300 pixels it starts to download the Freshdesk Messaging script. A simple animated icon is displayed as the script loads.

How to use

Load the CSS and JS in your head:

<link rel="stylesheet" href="css/freshdesk-messaging-facade.min.css">
<script src="js/freshdesk-messaging-facade.min.js" type="module" async></script>

Load the web component within your page:

<freshdesk-messaging-facade id="freshdesk-messaging-facade" data-token="" data-siteid="" hidden>
 <div id="freshdesk-messaging-icon" tabindex="0" role="button"></div>
</freshdesk-messaging-facade>

Add your 36-digit Freshdesk Messaging token to the data-token and your site’s id to data-siteid.

Demo

https://coliff.github.io/freshdesk-messaging-facade/

FAQs

Q. How can I customize the chat widget’s color?

A. You can modify the background-color value of #freshdesk-messaging-icon.
Q. Can I load this from a CDN?

A. Yes, it’s available on JSDelivr.
Q. Does it work in IE 11?

A. No, but you can easily load the standard Freshdesk Messaging widget and add the nomodule attribute to it as a fallback for legacy browsers. View Gist

Known Issues

Some content blockers on iOS may block the Freshdesk Messaging widget leading to the facade being non-functioning.
The Freshdesk Messaging widget and assets are large so it can take a couple of seconds for them to load.

Contributing

This project is open source and contributions are welcome!

Carbon Ads or Google AdSense - Which is best?

Fri, 24 Sep 2021 09:21:22 +0000

Just a quick post as a few people have asked me about this.

I switched from using Google AdSense Ads to Carbon Ads on this site last year. I noticed that although traffic to this site has remained quite constant, the monthly revenue generated from Carbon Ads were slightly lower than Google Ads.

Overall though, I’d still recommend Carbon Ads for web developer-focused sites. You have more control over where they are positioned, they are less intrusive, look nicer and are more likely to be of interest to your users interest. Carbon Ads also payout from $20 earnings whereas Google only payout after $60 earnings.

Finally, CarbonAds JavaScript is a lot lighter which makes for faster page load times.

Bootstrap 5 Print Stylesheet

Wed, 07 Jul 2021 02:21:22 +0000

Bootstrap 5 no longer includes custom CSS to enhance the layout when printing (to paper or as a PDF). I’ve bundled up the Print styles from Bootstrap 4 and published them to npm for easy use within projects.

Note: This should improve the experience when printing, but there are bugs and inconsistencies with the way that browsers handle printing so testing is recommended.

Quick Start

Download the latest release
Clone the repo git clone https://github.com/coliff/bootstrap-print-css.git
Install with npm npm install bootstrap-print-css
Install with yarn yarn add bootstrap-print-css

Usage

You can include the CSS by either:

Importing the bootstrap-print.css to your main CSS. This will mean one less HTTP request compared to loading it separately. (Recommended)

Loading it as a separate CSS file:

<link rel="stylesheet" href="/css/bootstrap-print.min.css" media="print">

It’s available on CDN too if you prefer:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-print-css/css/bootstrap-print.min.css" media="print">

You can prevent any elements you’d like to be not printed with Bootstraps’s .d-print-none utility class. You may want to consider adding that to ads, navbars, footers etc.

Contributing

For any Bootstrap 5 specific changes please open a PR or an issue at GitHub and for general improvements to the stylesheet please make open a PR or an issue upstream at main.css.

How can I test this?

Chrome/Edge Dev Tools offers Print style emulation.

Credits & Thanks

All credit for the CSS work goes to the HTML5 Boilerplate and Bootstrap teams. I’ve just copied the Bootstrap 4 print styles and packaged them up for Bootstrap 5.

Building a 'Share this page' feature with Hugo

Mon, 28 Jun 2021 04:21:22 +0000

It’s easy enough to just copy and paste the JavaScript ‘share this page’ widgets from Facebook, Twitter, LinkedIn etc, but these load their own JavaScript which comes with a performance and they also add their own tracking scripts to your site. They also have different styling and sizes which can give a messy, cluttered look to the page.

Instead, you can build-your-own ‘share this page’ widget with support for Twitter, LinkedIn, Facebook, Email - and the native Web Share API for a neat, privacy-focused and performant solution with a consistent look.

Add the following code block as a partial to your project as something like layouts/partials/share-this-page.html. This uses Bootstrap 5 classes but it can be easily modified to suit your site’s CSS. I’ve used Font Awesome SVG brand icons as partials so that they are inlined, but you could replace them with <img> tags instead.

<div class="share">
 <div>
 <a href="https://twitter.com/intent/tweet?via={{- .Site.Params.twitterID -}}&text={{ .Title }}&url={{ .Permalink }}"
 data-bs-toggle="tooltip" data-bs-placement="top" title="Share on T​witter"
 onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">
 {{- partial "icons/fa/brands/twitter-square.svg" (dict "width" "28" "height" "28") -}}
 <span class="visually-hidden">T​witter</span></a>
 </div>
 <div>
 <a href="https://www.linkedin.com/shareArticle?mini=true&url={{- .Permalink -}}&title={{- .Title -}}&summary={{- .Summary -}}"
 data-bs-toggle="tooltip" title="Share on Link​edIn"
 onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">
 {{- partial "icons/fa/brands/linkedin.svg" (dict "class" "width" "28" "height" "28") -}}
 <span class="visually-hidden">Link​edIn</span></a>
 </div>
 <div>
 <a href="https://www.facebook.com/sharer.php?u={{- .Permalink -}}" data-bs-toggle="tooltip"
 title="Share on Facebook"
 onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">
 {{- partial "icons/fa/brands/facebook-square.svg" (dict "width" "28" "height" "28") -}}
 <span class="visually-hidden">Facebook</span></a>
 </div>
 <div>
 <a href="mailto:?subject={{ .Title }}&body=Check%20out%20this%20site {{ .Permalink -}}"
 onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
 data-bs-toggle="tooltip" title="Share via Email">
 {{- partial "icons/fa/solid/envelope-square.svg" (dict "width" "28" "height" "28") -}}
 <span class="visually-hidden">Email</span></a>
 </div>
 <div>
 <button class="border-0 bg-transparent btn-share-web-api d-none p-0" data-bs-toggle="tooltip" title="Share">
 {{- partial "icons/fa/solid/share-alt-square.svg" (dict "width" "28" "height" "28") -}}
 <span class="visually-hidden">Share</span></button>
 </div>
</div>

I’d suggest loading the Web Share API JavaScript as type="module" so older browsers (which don’t support the Web Share API) will completely ignore it.

<script type="module">
 const shareButton = document.querySelector('.btn-share-web-api');
 // if Web Share API is supported then the button will show by removing Bootstrap's 'd-none' utility class
 if (navigator.share) {
 shareButton.classList.remove('d-none');
 };
 shareButton.addEventListener('click', event => {
 if (navigator.share) {
 navigator.share({
 title: '{{ .Title }} | {{ .Site.Title }}',
 text: '{{ .Description }}',
 url: '{{ .Permalink }}'
 }).then(() => {
 console.log('Thanks for sharing!');
 })
 .catch(console.error);
 }
 });
</script>

Christian Oliff

Bootstrap Icons as CSS variables

Web Developer Tools+ iOS App

Features

Roadmap

Bootstrap 5 CSS Breakpoint Indicator

Demo

Building a Bootstrap Modal with the dialog HTML element

Demo

Considerations

Image Size Info Browser Extension

Download

Building a Bootstrap Accordion with the details/summary HTML tags in 2025

HTML

Custom CSS

Using the Speculation Rules API to Improve Performance

Links

Safari Wishlist (2025)

1. Support for Open & Close Transitions with <details>

2. Support for Invoker Commands

3. Support for the prefers-reduced-transparency Media Query

4. Customizable Select Support

5. Textarea field-sizing CSS

6. CSS Anchor Positioning

7. Scroll-driven Animations

8. Low-data Mode JavaScript API

9. Support for the prefers-reduced-data Media Query

10. View Source Mode / Safari Web Inspector

Bootstrap JavaScript Snippets

Open Modal via URL Fragment

Open Accordion via URL Fragment

Prevent Modal from Playing Video When Closed

Dismiss Tooltips on Escape

Bootstrap switches with on-off labels

Demo

Codepen Demo

Notes and Observations

Using Safari's native switch input with Bootstrap

CSS

With switch attribute

Without switch attribute

Codepen Demo

Notes and Observations

Bootstrap Forced Colors CSS for Windows High Contrast Themes

Quick start

Usage

FAQS

What does this fix/improve?

Demo

Testing

Interesting links about Windows High Contrast Mode

Building a Bootstrap Dropdown with the details HTML disclosure element

HTML

JavaScript (Optional)

Accessibility

Summary

Bootstrap 5 Migrate Tool

Features

How to use the tool

Options

Demo

Contribute

Markdown Render Hooks in Hugo

Headings

Links

Images

Code Blocks

Further reading

HTMLHint VS Code Extension

Popover CSS Inspector for Bootstrap 5

Building a Bootstrap Accordion with the details/summary HTML tags

HTML

Custom CSS

Animating the Collapse with the Web Animation API

Using PurgeCSS with Hugo

Install PurgeCSS

Create config file

Test

Bonus Tip

Safari for iOS 16 Wishlist

3. Support for the `prefers-reduced-transparency` Media Query

9. Support for the `prefers-reduced-data` Media Query

With `switch` attribute

Without `switch` attribute

Support for the `prefers-reduced-data` Media Query