Show Search Button when Search Field is Non-Empty
November 5th, 2019
I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input (<input placeholder=”…”>) when that placeholder is present. Meaning, the input does not yet have any value. You might think input[value] could do that, or help match on the actual value, but it can’t. This makes :placeholder-shown one…
Float Element in the Middle of a Paragraph
November 4th, 2019
Say you want to have an image (or any other element) visually float left into a paragraph of text. But like… in the middle of the paragraph, not right at the top. It’s doable, but it’s certainly in the realm of CSS trickery! One thing you can do is slap the image right in the…
Are There Random Numbers in CSS?
October 29th, 2019
CSS allows you to create dynamic layouts and interfaces on the web, but as a language, it is static: once a value is set, it cannot be changed. The idea of randomness is off the table. Generating random numbers at runtime is the territory of JavaScript, not so much CSS. Or is it? If we…
The Current State of Styling Selects in 2019
October 28th, 2019
Best I could tell from the last time I compiled the most wished-for features of CSS, styling form controls was a major ask. Top 5, I’d say. And of the native form elements that people want to style, Greg Whitworth has some data that the <select> element is more requested than any other element —…
Bidirectional Horizontal Rules in CSS
October 25th, 2019
Say you have a <blockquote> and the design calls for a thick border along the left side. Well, you might not necessarily mean left side, but actually mean on the side of the start of the text. That’s exactly what CSS logical properties are meant to address, and Hussein Al Hammad has a nice article…
Designing accessible color systems
October 21st, 2019
The team at Stripe explores how they’re refining their color palette to make it more accessible and legible for users across all their products and interfaces. Not only that but the team built a wonderful and yet entirely bonkers app for figuring out the ideal range of colors that they needed. We built a web…
Weekly Platform News: CSS column-span Property, ADA applies to Websites, Auto-generated Image Descriptions
October 17th, 2019
In this week’s roundup: multi-column layouts gain wide support, the ADA means more A11y for retailers, and Google is doing something about all the empty image alt attributes in the wild. The CSS column-span property will soon be widely supported The CSS column-span property, which has been supported in Chrome and Safari since 2010 (and…
Weaving One Element Over and Under Another Element
October 14th, 2019
In this post, we’re going to use CSS superpowers to create a visual effect where two elements overlap and weave together. The epiphany for this design came during a short burst of spiritual inquisitiveness where I ended up at The Bible Project’s website. They make really cool animations, and I mean, really cool animations. My…
Patterns for Practical CSS Custom Properties Use
October 9th, 2019
I’ve been playing around with CSS Custom Properties to discover their power since browser support is finally at a place where we can use them in our production code. I’ve been using them in a number different ways and I’d love for you to get as excited about them as I am. They are so…
Let’s Not Forget About Container Queries
October 9th, 2019
Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn’t write as many global media queries based on page size. That’s because we’re actually trying to control a more scoped container, and the only reason we use media…