Tag: html5
-
WordArt is still supported... in Microsoft Outlook!
25 years ago, WordArt was everywhere. Nowadays, it's been quietly expunged from Microsoft Office. Except... Outlook, via a series of complicated hacks, can still render WordArt to this day! And I'm pretty curious exactly how it does so...
-
Recreating a 1990 Book Cover (in HTML + CSS)
This weekend, I became briefly obsessed with the graphic design of the cover of a manual of a piece of software released in 1990. So I re-created it in HTML + CSS, as you do.
-
Introduction to the new HTML element 'geolocation'
Manuel Matuzoviฤ has done a nice write-up on HTML's new 'geolocation' element. It's not exactly what I'd have implemented, but its still an improvement upon the established geolocation API.
-
For anyone who :has :not yet seen the magic of modern CSS
CSS is all grown-up, and the combination of nested selectors, variables, :not, and :has unlocks a wealth of potential for interactivity and customisation without resorting to (the slower and brittler approach of) JavaScript. Let me show you two examples from my recent editor history.
-
CSS Lightbox with Alt Text Viewer
Off the back of my details/summary-based semantic HTML+CSS lightbox, I've come up with a way to add Mastodon-like 'show alt text' widgets in the same way, and I'll be applying both to images on my blog's new theme, in the New Year.
-
DOCTYPE
I received my copy of DOCTYPE magazine, a genuine 'type this program in and run it'-style programming magazine but for a modern world, and enjoyed writing, debugging, playing, and then considering refining Stuart Langridge's puzzle The Nine Pyramids.
-
Details/summary lightboxes in pure HTML + CSS
For years, I've been using a HTML+CSS-only technique for popover 'lightbox' images on my blog. Now I've come up with a more-semantic way to do the same, and its HTML code is tidier too!
-
Variable-aspect adaptive-bitrate video... in vanilla HTML?
Thanks to recent browser enhancements, it's possible to show videos of different aspect ratios based on CSS media queries with no JavaScript dependencies. You can even combine it with adaptive bitrate streaming, even on static hosting. Let me show you how.
-
Today I learned that you can use
reportValidity()on a HTML5 input of e.g.type="email"to force the browser to run it's own validation, without waiting for the containing form to be submitted (which in some cases might not happen, e.g. if you're handling input using JS).That's cool.
-
Tidying WordPress's HTML
My blog theme runs Tidy on the HTML output to help standardise it and make it more human-readable. I thought I might be the only person to care about such things, but it turns out that Terence Eden does too, so I've open-sourced my approach.
-
The Page With No Code
View Source shows nothing, but the page has content. The Page With No Code is the kind of puzzle that makes web developers unhappy.
-
Why the GOV.UK Design System team changed the input type for numbers
GOV.UK is changing the way they use "numeric" fields on websites, and the research that backs their decision is, as usual, excellent.
-
Using the Web for Exhibition Interactives
As he writes up notes for his successor, Dan explains how the Bodleian's interactive digital signage uses the power of the Web.
-
Blogging with semantic insertions and deletions
Adapting your CSS can make semantically-enhanced /
modifications to a blog post clearer to readers. -
Moving Things Around With CSS Transitions
The "pop-up head" in the top-left hand corner of the page is powered entirely by CSS: no Javascript is used at all. Dan explains how.