Skip to content.
Adrian Roselli
Integrated Funded Library VRML

All Posts Tagged: css

A Brief Note on Highlighted Text

TL;DR: If you plan to style text highlighted by the browser, you must give it sufficient contrast — 3:1 for the highlight block against its background and (probably) 4.5:1 for the text within that highlighted block against that background. CSS Context CSS provides methods to style the highlights that browsers…

Posted:

Tags: accessibility, css, usability

Techniques to Break Words

Photo by studio tdes. Used under CC BY 2.0 Deed. Image cropped and contrast enhanced. A few days ago Benjy Stanton asked about breaking long words in tables. I offered a suggestion, which may or may not have worked. I never asked. My failure to follow up aside, it reminded…

Posted:

Tags: css, design, html

AD Support in HTML Video

This post supplements Browser Video Players Review. There I wade into the de facto accessibility of the <video> element based on the default video players provided by browsers. The results of my testing here update the tables in that post. One of the primary challenges of using the browsers’ default…

Posted:

Tags: accessibility, browser, css, html, mobile, standards, usability, W3C, whatwg

Media Queries in HTML Video

Before you get too far into this post, maybe read Browser Video Players Review. There I wade into the accessibility of the <video> element based on the video players browsers provide. Then maybe read Scott Jehl’s How to Use Responsive HTML Video (…and Audio!). I am leaning on support in…

Posted:

Tags: accessibility, browser, css, html, mobile, standards, usability, W3C, whatwg

Web Development Advent Calendars for 2023

Generated by Midjourney using the prompt “a Pagan advent calendar for Christmas, made of natural wood.” It seemed more appropriate for the season than the neon synthwave version (which I want to hire someone to make). Web developers around the world have for years given a nod to Saturnalia solstice…

Posted:

Tags: accessibility, css, design, html, internet, standards, UX

Øredev 2023: Under-Engineered Patterns

Download a 2.6MB tagged PDF of my slides or try the embedded view if your browser displays PDF inline. I was invited Malmö, Sweden to present two talks at Øredev. Well, they asked me to do one but then suggested that hey, since I’m already there and stuff, how about…

Posted:

Tags: accessibility, browser, css, html, slides, speaking, usability

Styling Links and Buttons

I made a tutorial for styling links and buttons, something which many developers have struggled with (resulting in links used as buttons and buttons used as links). I have embedded it on this page, but if you are coming in with your RSS reader you can visit the tutorial directly…

Posted:

Tags: css, html, usability

An alt Decision Tree Using Only :has()

I use the CSS :has() pseudo-class to provide an interactive alt text decision tree (from the W3C WAI Tutorial) that uses no script. It is progressively enhanced, so browsers without support for :has() still get all the content. See my post Under-Engineered Dependency Questions if you want my argument why…

Posted:

Tags: accessibility, css, html, WAI

Progressively Enhanced HTML Accordion

Does what it says on the tin. Uses <details> and <summary> with a bit of ARIA to create an accordion that works without JavaScript while working better with JavaScript. Mostly. See the Pen Progressively Enhanced HTML Accordion by Adrian Roselli (@aardrian) on CodePen. Visit the standalone version for testing or…

Posted:

Tags: accessibility, ARIA, css, html, JavaScript, pattern, print, usability, UX

Under-Engineered Comboboxen?

When I wrote Under-Engineered Text Boxen in 2019 I mentioned <datalist> (WHATWG, MDN) but did not dwell on it. Partly because support was poor at the time. Once Can I Use’s <datalist> entry listed Firefox on Android supporting it in version 110, I got excited and started testing to write…

Posted:

Tags: accessibility, css, html, pattern, usability, UX