CSS Basics

This week I launched a spin-off twitter account called "CSS Basics" that shares links aimed at beginners. Please subscribe or share with someone you think might enjoy it!

Swapping Images with the Sizes Attribute

One thing that is interesting about sizes is that the browser trusts its description over the actual image's size in the page layout, which may not actually correspond at all. In other words, sizes allows you to lie about an image's layout size, and that turns out to be pretty powerful for dynamic image components like a magnifier tool.

Say Hello to Houdini and the CSS Paint API

But there’s one Houdini API that you can start playing with today: the CSS Paint API. This API lets you draw images for use with CSS properties that expect them — for example, background-image and list-style-image.

Thinking in CSS Grid

Two dimensional and outside-in. What does it mean? The idea is to divide the enter page in to number of rows and columns (depending on the design) and then arrange content inside this.

Inclusive Components: Notifications

In screen reader and keyboard accessibility terms, it's important that focus is not moved to such messages. If there is nothing to be done with the tool, you don't put the tool in the person's hand. Despite this, moving focus has endured as a 'best practice'. Why? Because focusing an element has, traditionally, been the most reliable way to get that element and its contents announced in screen readers. Fortunately, we have live regions to help us break this habit.

Text Splitting Causes Screen Reader Problems

I am a screen reader user, and I am annoyed! I repeatedly encounter the same problem on websites. It’s about text splitting up. Let me share my agony with you!