The CSS language is full of small gaps which are frustrating to navigate. Between CSS properties to hide a container and its contents, there is still room for improvement. visibility: hidden keeps height and width integrity while display: none on a container hides everything. You can use .container > * to hide all contents of a container, but what if there was a better way? There is a better way to hide the contents of an element while respecting the container’s border and dimensions. That better way is using the content-visibility property: .my-container.contents-loading { content-visibility: hidden; } A demo of such…
Author: drweb
One of the many new input types that HTML5 introduced is the date input type which, in theory, should allow a developer to provide the user with a simple, usable, recognisable method of entering a date on a web page. But sadly, this input type has yet to reach its full potential. Briefly, the date input type is a form element that allows the capture of a date from a user, usually via a datepicker. The implementation of this datepicker is up to the browser vendor, as the HTML5 specification does not tell vendors how to implement the input’s UI.…
Hey, I’m Fabio Carretti, a Creative and Frontend Developer based in Modena, Italy. With years of experience under my belt, I guess you could call me an old-school guy, but I’m always keen to stay ahead of the curve and embrace what’s next. I kicked off my journey in the late 2000s, coding MySpace profiles for bands (sounds prehistoric, right?). From there, I transitioned to WordPress and JavaScript, building countless creative websites. Over the years, I’ve worked with almost every tech stack imaginable. Lately, I’ve been diving deeper into AI, merging my creative development skills with advanced AI interfaces. Let’s…
I know, super niche, but it could be any loop, really. The challenge is having multiple tooltips on the same page that make use of the Popover API for toggling goodness and CSS Anchor Positioning for attaching a tooltip to its respective anchor element. There’s plenty of moving pieces when working with popovers: A popover needs an ID (and an accessible role while we’re at it). A popovertarget needs to reference that ID. IDs have to be unique for semantics, yes, but also to hook a popover into a popovertarget. That’s just the part dealing with the Popover API. Turning…
As the demands of the web change and developers experiment with different user experiences, the need for more native language improvements expands. Our presentation layer, CSS, has done incredibly well in improving capabilities, even if sometimes too slow. The need for native support for automatically expanding textarea elements has been long known…and it’s finally here! To allow textarea elements to grow vertically and horizontally, add the field-sizing property with a value of content: textarea { field-sizing: content; // default is `fixed` } The default value for field-sizing is fixed, signaling current behavior. The new behavior, content, will expand as much…
What a brilliant idea! For the longest time HTML5 specified, and advised developers, that it no longer mattered what the number (1 to 6) was in a heading element (when used in conjunction with sectioning elements). What mattered was the nesting level of the H1-h6 in sectioning elements, just like the XTML promised land, but better as it recycled current heading elements. This concept was embraced by many a web standards afficianado and has been spread far and wide by web standards evangelists, in speeches, articles and books. How the outline should work: using nested section and h1 elements …
It’s awfully nice that HTML provides a native color picker. Activating the input opens up a color picker (either the OS-provided one or something the browser provides), allows you to pick a color, and changes the input’s value to that color1. Here’s what that’s like in macOS Chrome: The UI varies, but in all cases it doesn’t actually show you the color value you’ve picked when the picker is closed. I think that’s… weird? What if the input is part of a form in which you actually have a valid color you want to put in yourself? Or copy the…
One of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in Request Metrics’ Fixing Cumulative Layout Shift Problems on DavidWalshBlog article, providing image dimensions within the image tag will help to improve your website’s score. But in a world where responsive design is king, we need CSS and HTML to work together. Most responsive design style adjustments are done via max-width values, but when you provide a height value to your image, you can get a distorted image. The goal should always be a display images in relative dimensions. So how…
February 19, 2025 Pretty interesting trickery here, encoding a secret message in an emoji that you automatically get when you copy/paste it from Paul Butler. Most unicode characters do not have variations associated with them. Since unicode is an evolving standard and aims to be future-compatible, variation selectors are supposed to be preserved during transformations, even if their meaning is not known by the code handling them. So the codepoint U+0067 (“g”) followed by U+FE01 (VS-2) renders as a lowercase “g”, exactly the same as U+0067 alone. But if you copy and paste it, the variation selector will tag along with it. So you slap on…
I’ll be honest and say that the View Transition API intimidates me more than a smidge. There are plenty of tutorials with the most impressive demos showing how we can animate the transition between two pages, and they usually start with the simplest of all examples. @view-transition { navigation: auto; } That’s usually where the simplicity ends and the tutorials venture deep into JavaScript territory. There’s nothing wrong with that, of course, except that it’s a mental leap for someone like me who learns by building up rather than leaping through. So, I was darned inspired when I saw Uncle…