‘HTML’ articles from Ctrl blog

The HTML `<video>` element needs to go back on the drawing board

The HTML standard doesn’t provide web authors the tools required to embed small video files in a screen and bandwidth responsive way. This needs to change.

The best method for embedding dark-mode friendly SVG in HTML

A comparison of the many different methods for embedding SVG into HTML webpages. Which work best with light/dark-mode, client caching, interactive mode, and more.

Don’t be shady, deploy your JavaScript source maps

Source code minification is beneficial, but the resulting obfuscation reduces trust and transparency. Source maps can help restore these and let people learn.

The difference between RDFa’s `property` and `rel` attributes

You can easily get unexpected HTML+RDFa Lite parsing results by unknowingly using it with RDFa Core attributes that just happens to also be HTML attributes.

Make native lazy-loading images load more eagerly

A tutorial on how to load native lazy-loading images earlier in Safari and Firefox. Speed up page loading while keeping visitors from seeing loading images.

Everything you need to know about Night mode in Samsung Internet

Night mode in Samsung browser explained. How it breaks page contrast and accessibility, pastelify SVG colors, and why web developers can’t do anything about it.

Take precautions when linking to outdated or incorrect information

Take some simple precautions when referencing outdated, incorrect, or misinformation via a link. Label it for human and machine readers.

Inconsistent user-experiences with native lazy-loading images

Web browsers has different priorities and user experience trade-offs in their lazy-loading image implementations. Firefox and Safari vastly different to Chrome.

Smarter reusable IPFS chunks from HTML documents

IPFS splits files into chunks. Smarter splitting points in HTML files can create more reusable/deduplicatd chunks with higher availability.

How to use AddToAny as a fallback for the Web Share API

AddToAny offers privacy-by-default content-sharing and is well-suited as a light-weight falback to the native Web Share API.

What to `<link rel=dns-prefetch>` and when to use `preconnect`

Learn the difference between dns-prefecth vs preconnect, how to work around browser bugs, and when to use which? iOS and Safari requires special attention.

Optimize your `<head>` metadata for better compression

Reduce the file size of compressed webpages by optimizing the order of <meta> and <link> elements in the document <head> section.

Mitigate “tabnabbing” without breaking `window.open()` features

Windows opened from your website can redirect the opening tab to a new destination. Mitigations break window.open() functionality like sizing and positioning.