Menu

CSS

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…

Clipping, Clipping, and More Clipping!

October 8th, 2019

There are so many things you can do with clipping paths. I’ve been exploring them for quite some time and have come up with different techniques and use cases for them — and I want to share my findings with you! I hope this will spark new ideas for fun things you can do with…

Some Hands-On with the HTML Dialog Element

October 7th, 2019

This is me looking at the HTML <dialog> element for the first time. I’ve been aware of it for a while, but haven’t taken it for a spin yet. It has some pretty cool and compelling features. I can’t decide for you if you should use it in production on your sites, but I’d think…

Introducing Sass Modules

October 7th, 2019

Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used Sass-features. While the current @import rule allows you to pull in third-party packages, and split your Sass into manageable “partials,” it has a few limitations: @import is…

Breakout Buttons

October 4th, 2019

Andy covers a technique where a semantic <button> is used within a card component, but really, the whole card is clickable. The trick is to put a pseudo-element that goes beyond the button, covering the entire card. The tradeoff is that the pseudo-element sits on top of the text, so text selection is hampered a…

Adaptive Photo Layout with Flexbox

October 3rd, 2019

Let’s take a look at a super lightweight way to create a horizontal masonry effect for a set of arbitrarily-sized photos. Throw any set of photos at it, and they will line up edge-to-edge with no gaps anywhere. The solution is not only lightweight but also quite simple. We’ll be using an unordered list of…

Zero hands up.

October 2nd, 2019

Asked an entire room full of webdevs yesterday if any of them knew that FF/Chrome/Opera/Brave/etc. for iOS weren’t allowed to compete on engine quality. Zero hands up. — Alex Russell (@slightlylate) September 25, 2019 It’s worth making this clear then. On iOS, the only browser engine is WebKit. There are other browsers, but they can’t…