urn:uuid:0bb5f840-72ba-5581-bdf1-08f92a138f21
Topic: HTML – Ctrl blog
Daniel Aleksandersen
https://www.daniel.priv.no/
Copyright © 2022 Daniel Aleksandersen.
https://www.ctrl.blog/assets/logo/logo-square.svg
2022-03-11T08:26:00Z
weekly
10
urn:uuid:213d130c-548b-4a3b-b4ef-a3d7523ed937
2022-03-11T08:26:00Z
2022-03-11T08:26:00Z
The HTML <meter> element and its (undefined) segment boundaries
The HTML <code translate=no><meter></code> element and its (undefined) segment boundaries
The HTML Standard is vague on whether the attributes are inclusive. Firefox, Safari, and Chrome have behave differently. Here’s my workaround.
<p>I recently found a use for the <code><meter></code> element: an element to represent a scalar measurement within a known range. (That’s the unappealing language the HTML Standard uses to describe a horizontal gauge bar.) However, I was dismayed to discover that different web browsers have vastly different interpretations of a vaguely defined aspect of the <code><meter></code> element. Here’s what I found and the workaround to get the same behavior in all browsers.</p> <p><a href="https://www.ctrl.blog/entry/html-meter-segment-boundaries.html">Read more …</a></p>
urn:uuid:e8e40f3f-9903-40e9-9770-4b168cbf32f9
2021-10-28T11:18:00Z
2021-10-28T11:18:00Z
The HTML <video> element needs to go back on the drawing board
The HTML <code translate=no><video></code> 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.
<p>We’ve had the HTML <code><video></code> element for over a decade. Yet, everyone still defaults to embedding YouTube frames instead of hosting their own videos. The underlying problem is that the <code><video></code> element isn’t suitable for embedding short video files on webpages.</p> <p><a href="https://www.ctrl.blog/entry/html-responsive-video.html">Read more …</a></p>
urn:uuid:43b52f2e-9771-46fa-9d65-42587d288097
2021-06-11T12:06:00Z
2021-06-11T12:06:00Z
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.
<p>In this article, you’ll learn about the different methods for embedding Scalable Vector Graphic (SVG) images onto webpages. I’ll discuss which methods support the various security and processing modes in SVG, which methods support dark mode using <code>@media</code> queries, and which are the most caching friendly. I’ll also touch on why the most backward-compatible embedding method is the worst for perceived performance and has the most accessibility bugs.</p> <p><a href="https://www.ctrl.blog/entry/svg-embed-dark-mode.html">Read more …</a></p>
urn:uuid:e05b5664-4197-4bf8-bc85-27aa8426ef92
2021-02-15T10:22:00Z
2021-02-15T10:22:00Z
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.
<p>JavaScript source code minification is a beneficial tool for reducing download file sizes. However, the resulting obfuscation makes the code difficult to read, and reduces trust and transparency. Public source maps will help restore code readability and transparency. As a bonus, it enables others to learn from your code.</p> <p><a href="https://www.ctrl.blog/entry/deploy-javascript-source-maps.html">Read more …</a></p>
urn:uuid:1c44958b-a118-4d0e-9fcb-0a96a9f15ff9
2020-08-16T07:54:00Z
2020-08-16T07:54:00Z
The difference between RDFa’s property and rel attributes
The difference between RDFa’s <code translate="no">property</code> and <code translate="no">rel</code> 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.
<p>I’ve talked about HTML link metadata in the past. In that earlier article, I glanced over one detail that gave me a serious headache this week. That issue was the difference between the <code>property</code> and <code>rel</code> attributes, and how the two interoperate when used on the same <code><a></code> or <code><link></code> element.</p> <p><a href="https://www.ctrl.blog/entry/rdfa-link-attributes.html">Read more …</a></p>