Subscribe via RSS

What’s next for CSS?

cssdb is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.

Super helpful site I only recently discovered.

Nutrition Cards for Accessible Components

A11Y Nutrition Cards is an attempt to digest and simplify the accessibility expectations when it comes to component authoring. Based on the WAI ARIA Authoring Practices Guide.

I want to get better at making the websites I built as accessible as possible. This simple site by Dave Rupert is helping me a lot currently. It’s full of helpful tips for common components like Accordions, Buttons, Menus, etc.

I deleted my Facebook account

A screenshot of the facebook login form saying 'the email you've entered doesn't match any account. Sign up for an account.

Bye Bye Amazon

After linking to the piece by Jason Fried I cancelled my Amazon Prime membership (you need to confirm your decision THREE TIMES!). In addition I will do something I’ve thought about for a while now: I’ll stop shopping on Amazon. Thanks to Jens for the last nudge. I feel like it’s the right decision to make, even though I will probably miss the fast delivery and easy shopping experience.

Putting on some wait

Jason Fried:

For example, when shopping online, I’m picking the slowest shipping option (I used to always pick the fastest one). […] When confronted with two lines at the grocery store, I’m choosing the longer one. […] Whenever there’s an opportunity to pick the wait, I’m picking it. And I’m not filling my time with other things I have to do while waiting – I’m genuinely waiting.

I had similar thoughts and almost cancelled my Amazon Prime a while back — but then I was too anxious thinking about the next time I NEED SOMETHING THE NEXT DAY.
Moving out of the city last year has slowed down my life a bit in broader terms but I’m still very focused on speed and efficiency in smaller things — and I don’t like it because it’s not pressure from outside, it’s just an unnecessary hurry I created myself internally and I’m trying to change that. So this article by Jason Fried really resonated with me.

The Ecological Impact of Browser Diversity

Rachel Nabors:

So these are the three browser engines we have: WebKit/Blink, Gecko, and EdgeHTML. We are unlikely to get any brand new bloodlines in the foreseeable future. This is it. If we lose one of those browser engines, we lose its lineage, every permutation of that engine that would follow, and the unique takes on the Web it could allow for.

The article came out long before Microsoft announced that they will drop EdgeHTML and adopt Chromium, but it is more relevant than ever.

Goodbye, EdgeHTML

If you haven’t heard it by now, Microsoft is ditching EdgeHTML in favor of Chromium. I’m not the biggest user of the Edge browser, but we are running full speed into a Chromium monoculture — and I think that’s really bad. Here are some more important words on that topic from Mozillas Chris Beard.

Blue Beanie Day 2018

A portrait of Martin Wolf wearing a blue beanie

Since 2006 web developers around the world celebrate the Blue Beanie Day in support of web standards and web accessibility on November 30th.
If you want to show your support, put a blue beanie on (or use this png) and post your photo to your blog or social media profiles.

Autumn Views

I took these two photos with the iPhone because the battery of my Leica Q was empty. I edited them on the iPad with Lightroom. Can’t complain.

A street, left and right trees, the sun is sitting very low, looking through the trees.
A landscape with a green field in the foreground and some fog and forest in the background

The button centering dilemma

The <button> is a very special element. From a CSS perspective it comes with many default styles compared to a lot of other elements. In addition to that it comes with at least one really strange behaviour. I’m talking about the vertical alignment of content inside the button.

If you have a <button> with fixed dimensions and have any content inside it, it will be vertically and horizontally centered. For a second that sounds awesome, because (vertical) centering can be a pain in CSS sometimes - though it got a lot better over the past years and often that’s what you want in a button anyways, right?

The horizontal center is because of the default text-align: center and can be reset easily. But as far as I know this default behaviour can not be traced back to a CSS property which in turn means, you can not reset it if you need exact control over how the content inside the <button> is positioned.

The other day I was creating a <button> as one does if the user interaction should not go to a url and I needed to precisely position something inside when I was reminded of this issue. So the goal for me was to get the same baseline in all browsers, which means position the content inside in the top left corner and then go from there.

The solution is relatively simple but it’s annoying that we need to use it.

Step 1

Set text-align: left.

button {
	width: 50px;
	height: 50px;
	text-align: left;
}

Step 2

Remove the default border either with border: none or a new one like border: 1px solid black. The default <button> border not only creates a border, it also creates some sort of padding inside even though you set padding: 0;, which we will also do.

button {
	width: 50px;
	height: 50px;
	text-align: left;
	border: none;
	padding: 0;
}

Step 3

Add a helper element as the first item of the <button>. Use a <span> and have it fill the whole button with display: block, width: 100%; and height: 100%;.

<button>
	<span>
		👋
	</span>
</button>
button {
	width: 50px;
	height: 50px;
	text-align: left;
	border: none;
	padding: 0;
}

button > span {
	width: 100%;
	height: 100%;
}

This way the content inside the <span> will be in the upper left corner and we can go from here we whatever we want to do.

I made a CodePenso you can see it in action.

About Safari & Flexbox

In the past the same trick was necessary when you wanted to use Flexbox directly on a <button> element. Safari ignored it, but if you added the helper <span> and made it cover the whole button, you could use display: flex; on the <span> instead and you were good to go.

It seems like Safari 12 fixed this issue. It’s still good to know if you want to be somewhat downwards compatible.