Friday Front-End - Issue #250: How NOT to launch a new Twitter feature. Plus, custom properties, progressive enhancement, accessibility, and more!

What would your life be like without the internet? Not if it didn’t exist at all, but if you were locked out of it? Would your days be different? Unrecognizable, even? Keeping your answers to that in mind, do you think access to the internet is a human right? Do we need to be able to access it to fully participate in modern society? To answer “yes” to these questions would have been unthinkable 20 years ago.

Ever since I learned about CSS Variables a few years back, my absolute favorite feature has been the ability to scope variables to components. But to be honest, I haven’t been putting this feature to much use over the years, until I created my own pattern library last year to speed up prototyping and client work. That’s where scoped CSS variables really shined for me. So I want to share my favorite two ways to use CSS Variables to organize and maintain styles in my projects today.

It sounds very much like a case for position: sticky, doesn’t it? However, an element with position: sticky behaves like it’s relatively positioned when it’s in view and like it’s using position: fixed when its scrolled out of view but its container is still in view. What I wanted here was different. I basically wanted position: absolute while the header was in view and position: fixed after. Yes, there are ways I could have contorted position: sticky to do what I wanted, but was there another solution?

What happens is that the browser first figures out the cascade and then looks at the custom properties. If a property is invalid “at computed-value time”, there is no fallback value because the browser has already thrown away the other values. So in the example above, the browser will not display the red background-color, but instead unset it.

Of course I had to create the paper folding effect for the web. There’s many different ways to achieve this, but this approach is nice because: It’s CSS only, relying on no JavaScript; Uses a single image instead of requiring the image to be sliced up in Photoshop; Can be configured with just HTML by setting CSS variables in a style attribute;

Yesterday I was curious and wanted to know if and how a website I recently made renders on the Nokia 3310. To my surprise, I only had to reduce some paddings and font sizes to make it look nice. I didn’t have to change much because I follow the Progressive Enhancement principle when I build websites. Progressive Enhancement focuses on content and enhances experiences layer by layer.

Twitter announces a new feature is rolling out for iOS, the ability to record audio tweets. It demonstrates this with an uncaptioned video of its Twitter avatar making bird noises. Twitter’s support account acknowledges it is inaccessible and seemingly alludes to a lack of plan to address it. While an open secret for a while, this is the first time most users became aware that Twitter does not have a dedicated accessibility team (nor process).

Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways. Example, the new CSS min() feature collides with the preexisting Sass min() feature. The trick here is to remember that Sass is case-sensitive, but CSS isn’t.

Now, CSS Custom Properties allow us to manage and control both cascade and inheritance in new ways. I want to show you how I’ve used Custom Property “stacks” to solve some of the common issues people face in the cascade: from scoped component styles, to more explicit layering of intents.

According to WebAims annual accessibility analysis, 98.1% of home pages of the top 1,000,000 websites have detectable WCAG 2.0 failures. 98.1% sounds bad, but for most of us it’s just a number, isn’t it? For me, as someone whose job it is to help others build accessible websites, it’s easier to imagine what the real-life effects of these failures can be. To help you get a better understanding of what this high percentage means for users and their daily experiences on the web, I created a little experiment.