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 […]