Hi there. My name is Matei Stanca and I make websites and stuff.
Featured project
Neurocracy
Project media
Neurocracy is a project started by my good friend Joannes and myself, which has grown over time to include illustrations by Alice Duke along with contributions by Axel Hassen Taiari, Edward Smith, Io Black, Leigh Alexander, Malka Older, and Yudhanjaya Wijeratne. It aims to be equal parts interactive fiction and cautionary tale about the intersection of surveillance capitalism, big data, and authoritarianism. This is conveyed through the medium of a futuristic equivalent of Wikipedia known as Omnipedia, in which the reader is presented with articles and information in a familiar format so that they may piece together the history and events of the year 2049.
Latest snippets
js;dr
js;dr is JavaScript required; Didn’t Read.
Pages that are empty without JS: dead to history (archive-org), unreliable for search results (despite any search engine claims of JS support, check it yourself), and thus ignorable. No need to waste time reading or responding.
Also known as, if it’s not curlable, it’s not on the web.
The anatomy of visually-hidden
Visually-hidden styles are used to hide content from most users, while keeping it accessible to assistive technology users.
It works because the content is technically visible and displayed — it appears in the accessibility tree and the render tree, both of which are used by assistive technologies — it’s just that the rendered size is zero.
Our industry has largely settled on a standard CSS pattern for this, refined over years of testing and iteration, by many people. This pattern:
Code language: CSS
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
[…]
This article is not about when or why you would use visually-hidden content. There’s a number of excellent articles that discuss these questions in detail, notably Scott O’Hara’s Inclusively Hidden. But most of them don’t go into much detail about the specific CSS involved — why do we use this particular pattern, with these specific properties? So today I’m going to dissect it, looking at each of the properties in turn, why it’s there, and why it isn’t something else.