There is a ::selection pseudo class selector in CSS that allows you to style what content (mostly: text) looks like when it’s selected. Say your website has pretty strong orange-colored branding, you could use this to extend the feel of that branding. Like: html { –brandColor: orange; } ::selection { background-color: var(–brandColor); }Code language: CSS (css) There is really only a couple of things you can set on ::selection (see the allowable properties bit on MDN), which makes sense. You wouldn’t want to be changing font-size on selection or anything like that as it would get messy quickly. I was…
Author: drweb
We all love beautifully styled form controls but, due to the differences between operating system displays, styling them can be painful. Due to that pain, we’ve created scores of libraries to mock these controls. Unfortunately that sometimes comes at the cost of accessibility, performance, etc. One control that has traditionally been tough to style is the input[type=file] element. Said input variation visually contains a button and text, all being clickable. Bit of a Frankenstein’s monster if you ask me. Can we style the button part though? We can! To style the button button portion of input[type=file], you can use ::file-selector-button:…
Updated: 3rd August 2020 The question of whether HTML elements need the addition of ARIA role attributes to expose their semantics, is one that surfaces on a regular basis. The answer is maybe for a subset of elements, but increasingly no. Patrick Lauke modelling last seasons must have; HTML5 casual Polo neck with lumbar support [button] belt and [role] braces combo. ARIA roles add nothing to default semantics of most elements In some cases the semantics of a HTML element can be expressed by an ARIA role, state or property. This is fiendishly known as the element’s ‘Default Implicit ARIA…
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…
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…