Menu

CSS

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…

The Many Ways to Link Up Shapes and Images with HTML and CSS

October 1st, 2019

Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as a straight rectangle. Or you have a large uniquely shaped logo where you only want…

Enhancing The Clickable Area Size

October 1st, 2019

Here’s a great post by Ahmad Shadeed on making sure that clickable areas in our interfaces are, well, clickable. He writes about making sure that links, buttons and other elements meet accessibility standards for both touch and mouse, too. I particularly like the section where Ahmad writes about making a fake circle around an element…