Tag Archives: html

Reducing motion with the <picture> element

Great trick by Brad Frost, in which he combines prefers-reduced-motion? with the <picture> element <picture> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> <img src="animated.gif alt="brick wall" /> </picture> Yes, that actually works! Reducing motion with the <picture> element → 💫 When taking prefers-reduced-motion into account in your CSS code, it becomes really powerful when combined with CSS Variables

Including content from other files in your HTML (“HTML Includes”)

Nice find by Scott Jehl from Filament Group: Instead of fetching files over XHR and then injecting their contents, you can also use an iframe + leverage its onload event to include the contents of any other file directly into the current web page. <iframe src="signal.svg" onload="this.before((this.contentDocument.body || this.contentDocument).children[0]);this.remove()" ></iframe> The example above loads up […]

Using the <details> element to create modals and menus

The folks over at GitHub have been leveraging the <details> element to create modals and menus: <details class=“dropdown”> <summary class=“btn” aria-haspopup=“menu”>…</summary> <ul class=“dropdown-content”> <li><a href="/muan">profile</a></li> … </ul> </details> Very clever, as <details> trumps the <modal> element in many ways: Semantic Accessible No JavaScript Next to that, they’ve also released a few custom elements that make […]

Styling the select element

Scott Jehl, from Filament Group: The select element has long been difficult to style consistently across browsers. To avoid its shortcomings in the past, we have used workarounds like styling a parent element, adding pseudo-elements, and even using JavaScript to construct a select-like control out of different elements that are easier to style. But workarounds […]

Pure CSS Francine – An 18th-Century Oil Painting Recreated with HTML and CSS

Handcrafted recreation of an 18th-century oil painting using just HTML and CSS. Here’s an analysis of it using the Chrome DevTools, as recorded by Paul Irish: Chrome only though: Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything […]

HTML 5.2: The <dialog> Element

HTML 5.2 has introduced a new <dialog> element to show modal dialog boxes. Here’s a small demo by @bdc (forked version by me, including polyfill): Already available in Chrome; a polyfill is available for other/older browsers. Meet the New Dialog Element →Polyfill for the HTML <dialog> element → Siderant: I cannot help it, but my […]

Do we need a new heading element? We don’t know.

Great insightful post by Jake Archibald on the generic <h> element, which could act as a replacement for the current set of <h1>, <h2>, <h3>, … I always thought this to be a good case, as it’d would allow you to move components around in the DOM, and the “importance” of the heading would be […]

Fixing HTML Video on Mobile

Samir Zahran on how and why they built Whitewater, an open source video encoder and player for their site: Common HTML5 Video features such as preloading and autoplay are completely missing in some browsers. The scripting APIs are limited compared to what’s available on desktop. Worst of all, Safari on the iPhone (the most popular […]