Andy Clarke digs deep into snow to find ways flat design can be brought back to life in CSS with the use of techniques to create a sense of depth. Like spring after an everlasting winter, perhaps it’s time to let a different style of design flourish. What a relief.
It’s awesome to build sites that are inclusive and accessible to everyone. There are at least six key areas of disability we can optimize for: visual, hearing, mobility, cognition, speech and neural. Many tools and resources can help here, even if you’re totally new to web accessibility.
tl;dr - summary is a button and buttons eat semantics.
I think the biggest frustration here is expectations are broken. details/summary is the most accordion-like thing I’ve ever seen and yet it can’t be used as an accordion. My expectation as an Author does not match the Platform’s capabilities. Is this something that can be patched? Is this HTML’s fault? Is this ARIA’s fault? I don’t know. I only know that this creates more work for me.
When people zoom a page, it is typically because they want the text to be bigger. When we anchor the text to the viewport size, even with a (fractional) multiplier, we can take away their ability to do that. It can be as much a barrier as disabling zoom. If a user cannot get the text to 200% of the original size, you may also be looking at a WCAG AA problem.
We often want to set a CSS property “back to the default” — as if our stylesheets had never applied a style. initial and unset seem like they could help us do this…. but they don’t quite do what we want. The new revert value gives us a way to say “hey, go back to the browser’s default styles for this property.” Miriam Suzanne explains this new value and how it’s different from what we had before.
Horizontal text overflow has always been difficult to manage on the web. The default visible overflow is designed to make sure content remains accessible no matter the size of a containing box, but it’s not our only option. We can now use overflow-wrap to control how words break – and combine that with hyphens to make wrapped text more readable. The solutions aren’t perfect yet, but Miriam Suzanne will walk you through the options we have, and how to use them.
The display property has been in CSS from the beginning, handling everything from block and inline boxes to list-items and full layout systems like flexbox or grid. Now the display syntax is getting an upgrade to match it’s multiple uses. The new display spec adds flow and flow-root values, and allows for setting inner layout (grid, flex, etc) as well as outer box type (inline, block), and more.