Article Archives


Responsive Images in CSS

The term "responsive images" has come to mean "responsive images in HTML", in other words, the srcset and sizes attribute for <img /> and the <picture></picture> element. But how do the capabilities that these things provide map to CSS?…

Why Do Websites Publish AMP Pages?

I cannot tell if you AMP will shake out to have been a good or bad idea for the web.

I can attempt to answer this question though: those sites don't care where you read them. They just want people to read them. Read them. Like them. Trust them. So when they have something to sell (in any sense of the word), they sell it. Losing that attention is more scary than losing direct traffic to one place it publishes. …

You Can’t Detect A Touchscreen

Stu Cox explains that there are a ton of ways you might think you can get a yes-or-no answer on whether a browser supports touch or not:

  • Width media queries
  • Touch-related DOM events
  • Touch-related APIs
  • Pointer media queries

The normal refrain around this is "there are devices that are both, so you'd be wrong on those," which is true, but it's actually more problematic than that. These testing methods are often just straight up wrong.


For layouts, …


On Style Maintenance

I was talking to a brilliant engineer friend the other day who mentioned they never get to build anything from the ground up. Their entire career has consisted of maintaining other people's (often quite poor) code.

In a perfect world, we'd all get to write code from scratch, it would work perfectly, and we would put it into a bin in the sky, never to be looked at by anyone again.

We all know that's not how it works. Code …

one comment

The Challenge of Constructive Criticism and How to Get It

Something that has been on my mind lately is how we talk about the deliverables we work on as designers and developers. There are plenty of times when we want feedback on our projects and turn to our friends, co-workers, colleagues, Twitter, and all kinds of other people for their honest opinions about the quality of our work.

But this can be problematic. The feedback we get is often not what we hoped for. In some cases, it can feel …

WordPress Without Shame

Even-handed take on WordPress by Gina Trapani. I've been unapologetically on WordPress for a long time.

I also can't wait to see what the future of it will be:

Automattic’s React-based Calypso rewrite of the WordPress admin is a clear sign that at least the leaders of the community are trying to reimagine what a WordPress born in 2016 would look like. Eventually? Soon?…

one comment

Websites We Like: October 2016

Another month, another collection of fascinating websites! Here’s a few that have caught our attention lately.…


A Priority+ Navigation With Scrolling and Dropdowns

The following is a guest post by Micah Miller-Eshleman. Micah designed a variation of the "Priority+ Navigation" concept and uses it in production at the college he works for. I always dig a show & tell behind the thinking and creation of a design pattern, especially when it's working out there in the real world.

one comment

SVG Charting Libraries

I rounded up the ones I know about, mentioned a bunch of considerations you might want to think about when choosing, and linked up some demos.

And don't forget you can create them by yourself, too!…


Building a Website Performance Monitor

A couple of months ago I wrote about using WebPageTest, and more specifically its RESTful API, to monitor the performance of a website. Unarguably, the data it provides can translate to precious information for engineers to tweak various parts of a system to make it perform better.

But how exactly does this tool sit within your development workflow? When should you run tests and what exactly do you do with the results? How do you visualise them?…


Wenting Zhang created 512 (!) icons with just HTML and CSS. Usually just one element, the occasional extra element thrown in, and drawn with things like borders, backgrounds, and box-shadows.

Looks like the same bug bit Wenting that bit Nicolas Gallagher. Taking the shapes that CSS can make and combining them to draw.

Predictably, I'm going to point out that SVG would be a more-ideal tool for this. Less fragile, easier to maintain and style, scaleable, etc. I mention …

SVG & Media Queries

Jake Archibald digs into how bizarrely media queries can behave when embedded into a <style> block inside the SVG itself and then used in a variety of different ways across different browsers. The results are spotty at best.

It would be nice to see this reined in, but I wouldn't worry too much about it in general. Inline SVG doesn't seem to have any trouble and I wouldn't trust an <img> do anything fancy like have internal media queries anyway.…


An Interview with Miriam Suzanne

Hey y'all! Welcome Miriam Suzanne. Miriam will be doing more writing around here soon, so we figured an interview would be a good way for you to get to know her first. She's been working with the web for longer than I have, has created some pretty huge open source projects, and has a unique perspective on about everything. Let's get to the chat!…

Beware Smushed Off-Screen Accessible Text

J. Renée Beach:

Over a few sessions, Matt mentioned that the string of text “Show more reactions” was being smushed together and read as “Showmorereactions”.

Turns out a popular technique for hiding content visually (but not hiding it for assistive technology) involved setting width: 1px; which was forcing words to wrap one-word-per-line with "line feed" breaks, which the AT didn't treat the same as spaces.

Facebook had to update their accessible hiding class to include white-space: nowrap; to fix that. …

Progressive Enhancement “Debate”

Nolan Lawson:

I had a slide in my talk that read:

In 2016, it’s okay to build a website that doesn’t work without JavaScript.

The condemnation was as swift as it was vocal.

Response by Jeremy Keith:

That framing makes it sound like it’s a binary choice: either the website works or it doesn’t. That’s not what I’m suggesting. I’m advocating that the core functionality of a website (which can be as simple as reading some text) should be available …

one comment

Declarative Data Fetching with GraphQL

The following is a guest post by Nilan Marktanner from I don't know about y'all but I've spent plenty of time in my career dealing with REST API's. It's a matter of always trying to figure out what URL to hit, what data to expect back, and how you can control that data. A quick glance at GraphQL makes it seem like it simplifies things both for the creators and consumers of the API. Let's let Nilan explain.

Is jQuery Still Relevant?

It took a minute, but I believe we have arrived at Baby Bear on the jQuery conversation. Some choice quotes from the ensemble cast blog post:

Nathanael Anderson: The biggest negative for jQuery in this day and age is that browsers are a lot more standard in coverage and directly messing with the DOM is slow unless you can do everything at one time; and jQuery was not designed for large change groups.

Todd Motto: Final thing from me: let’s …


SVG → Letterpress

I took a class at Bay View Printing Company, the local community letterpress shop I belong to, all about printing with polymer plates. The shop is absolutely full with wood and metal type, and all the accoutrements around that, but polymer plates are not that. You get them made! They can be anything! Sometimes it's fun to stick with the old school setting of type. I like doing that quite a bit. But I was interested in learning how …


From the didn't see that coming news desk:

We're pleased to announce the open source release of Yarn, a collaboration with Exponent, Google, and Tilde. With Yarn, engineers still have access to the npm registry, but can install packages more quickly and manage dependencies consistently across machines or in secure offline environments.

Yarn is a new package manager that replaces some of what npm does... that you can install with npm.

So, it's faster. Dion Almaer:

Thanks to …


Lots of ways to add an ID to the `body` element

The following is a guest post by Trishah Woolley. Over the years, Trishah has collected a ton of code snippets that do the job of adding IDs and classes based on some variable information, like the URL or data from WordPress. Each of these snippets were either collected from documentation or a similar online resource, or written by Trishah based on standard features of the language and API's involved.


Styling Underlines on the Web

Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what’s the best approach depending on the situation. Thankfully however, John Jameson gets us up to speed in this guest post.


The Annoying Mobile Double-Tap Link Issue

We had a question come up the other day on ShopTalk about regular ol' anchor links on iOS, and some weird situation where you couldn't just tap them once to go to the link, it required tapping the link twice. I've experienced this myself and have been pretty confounded.…

How It Feels Reactions

Jose Aguinaga pinched a community nerve:

The JavaScript community is insane if it thinks anyone can keep up with this.

I heard a lot of Hilarious! So true! reactions. I heard a lot of Nope. This isn't what it's like. reactions, sprinkled with You don't have to use/start with every tool. and Both of these people (in this fake conversation) are kinda jerks.

Some Baby Bear reactions include Tim Kadlec and Addy Osmani. Sacha Greif wrote to me to …

Cicada Principle and CSS

Charlotte Jackson uses this classic clever technique to pseudo randomize border-radius, making irregular circles for a photo grid.

A cicada is a rather grim looking little bug. You may have heard of them. There is a kind called the Periodical Cicada, which simultaneously emerge in masses every 7, 11, 13 or 17 years; they find a mate and then they die. It's not much of a life.

However, the interesting thing is that these numbers are all prime numbers.

Alex …

Normalize (CSS) No More.

Shaun Rashid:

... as I work with building responsive websites where the widening array of devices has changed the way that we design websites, I have fallen back to the age-old statement that answers the question of whether a website needs to look exactly the same in every browser. With the answer to that question, I have found that the reset/normalize stylesheet has become unnecessary.

I wonder how popular not using any sort of reset is already? As you look …

The Easiest Way to Find a New Job

As a highly talented developer or designer, shouldn’t companies apply to you? On Hired the traditional process of finding a job is completely reversed. Hired expedites the job search process through an efficient system of:

  1. Companies competing for top talent with visibility into a candidate’s traction on Hired, driving rapid turnaround times from interview to final offer.
  2. Free personalized support to ensure your next job is your dream job. On Hired our Talent Advocates have your back, whether it’s negotiating

Responsive Image Breakpoints Generator

I'm guilty of using responsive images by taking a high res image and downsizing it a few times kinda randomly and using those as the srcset images. Basically the same "desktop", "tablet", "mobile" thinking I can also be guilty of with breakpoints.

Soooo what is the perfect way to do responsive images? Ideally we'd be sending the exact image that any device needs. If a device/browser/design combination requires an image to be 457px wide, in a perfect world, we'd send …


Will we be flattening our HTML for CSS Grids?

I was watching Rachel Andrew talk about CSS Grid Layout yesterday at An Event Apart. Grid is amazing and the day will soon come where it's a dominant web layout tool of choice. That day isn't here yet though, as no stable browser is shipping the latest version of the spec (it's behind a flag at best).

The good news is that, as of just a few days ago, the spec is really stable and has entered "Candidate Recommendation" …

A Redesign with CSS Shapes

CSS Shapes is like the perfect example for progressive enhancement these days. Kinda like border-radius was. Older browsers have square corners! Who cares! CSS Shapes allow you to wrap text irregularly - like along the path of a circle().

Eric Meyer uses it on a production page and shows how it works. Here's some code I snagged from the CSS on the site itself showing it only being applied on large screens with support:

@media only screen and (min-width:

The SVG `path` Syntax: An Illustrated Guide

The <path></path> element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute. The value it has is a mini syntax all to itself. It can look pretty indecipherable. It's a ton of numbers and letters smashed together into a long string. Like anything computers, there is a reason …


A clever idea for text-based spinners in CSS. You set the "keyframes" in the content, and cycle through them by moving the line of text to the left in the actual keyframes.

<button>Loading <span class="loading"></span></button> .loading.bar2::after { content: "▁\A▂\A▃\A▄\A▅\A▆\A▇\A█"; animation: spin8 2s steps(8) infinite alternate; } @keyframes spin8 { to { transform: translateY(-12.0em); } }

This is a whole repo of them by Max Beier. I've isolated one of them here:

See the Pen text-spinners by Chris Coyier …


A new animation library by Christine Cha:

A simple library to take care of complex CSS animations.

You define the animations through its JavaScript API and execute them via DOM events, then the animation is done through applying inline CSS.

Seems to me it's not so much for helping build complex CSS animations, but for doing animations through CSS that you can't otherwise do, because you can't get things like mouse or scroll position in CSS.…


Template Literals

The Template Literal, introduced in ES6, is a new way to create a string. With it comes new features that allow us more control over dynamic strings in our programs. Gone will be the days of long string concatenation!

To create a template literal, instead of single quotes (') or double quotes (") quotes we use the backtick (`) character. This will produce a new string, and we can use it in any way …

Loading Polyfills Only When Needed

We had this question on ShopTalk just the other day. We're so (rightfully) worried about web performance, it feels like we shouldn't be loading polyfills all the time, only when we detect they are needed. Philip Walton:

... too many people building websites today take a “lowest-common-denominator” approach. By that I mean they ship the same bundle of JavaScript to all users (regardless of browser capabilities), and the bundle they ship contains all code required to make the site work …


Things to Watch Out for When Working with CSS 3D

I've always loved 3D geometry. I began playing with CSS 3D transforms as soon as I noticed support in CSS was getting decent. But while it felt natural to use transforms to create 2D shapes and move/rotate them in 3D to create polyhedra, there were some things that tripped me up at first. I thought I might write about the things that surprised me and the challenges I encountered so that you might avoid the same.…


Dock Show & Tell

Someone wrote in asking about some icons in my Dock. I figured that might be a fun thing to share, and y'all can follow suit and share yours as well. I know "Docks" are a little Mac-centric, but feel free to share your most used apps on other platforms as well. I bet this changes quite a bit over the years, so it will be interesting to re-do this in years to come and see how it changes.…


Methods for Controlling Spacing in Web Typography

If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups.

Then you may have tried explaining to me the pains of cross-browser compatibility and how different browsers render fonts differently from one another. In response, I likely would have sent you an image file that contains the content instead to make …


System Fonts in SVG

There was a time when the smart move in picking fonts for a website was to a font-family that was supported across as many platforms as possible. font-family: Tahoma; and whatnot. Or even better, a font stack that would fall back to as-similar-as possible stuff, like font-family: Tahoma, Verdana, Segoe, sans-serif;.

These days, an astonishing number of sites are using custom fonts. 60%!

No surprise, there is also a decent amount of pushback on custom fonts. They need to …


Accessible SVGs in High Contrast Mode

The following is a guest post by Eric Bailey. You know how people change settings sometimes to make it easier to use for them? For example, they bump up the default font size in their browser so it's easier for them to read. As web designers, we like to accommodate that. We consider it good accessibility. The same goes here. Some people on Windows enable "High Contrast Mode" to make their computer screen easier for them to work with.


Inky and Slinky

Inky is kinda like a preprocessor for HTML created by Zurb, specifically designed for responsive emails.

I'm sure a lot of us have hand-coded HTML emails (I do it regularly) and know that it's typically <table></table> soup. It's not even just the tables that are annoying, but the fact that there are so many of them nested to do even fairly simple things it's hard to keep straight.

Inky's appeal is pretty clear from the first demo in their docs:…


Move a WordPress Site by Moving the Database and Files

The following is a guest post by Erez Elias. Erez recently attended a WordCamp and wrote to me inspired to write something about WordPress. We agreed this was an interesting topic, and one I've been meaning to document myself as it's something I've done about 100 times in my life and there is always one little detail I gotta look up.


Reframe.js Notes

FitVids.js is still a perfectly workable mini plugin for making videos (or anything) responsive. You need it, or something like it, for sites that have things like YouTube or Vimeo videos, Instagram embeds, or really anything that's not responsive in the aspect-ratio sense. <img />/<video></video> resize their width/height in an aspect ratio friendly way, <iframe></iframe>/<canvas></canvas>/<object></object> do not.

Reframe.js is kind of a modernized version of FitVids.…

Web Animation Workshops

I’m thrilled to announce a brand new workshop series I’m starting with Val Head about web animation! We’ll be taking two-day workshop around to different cities starting this November, starting with Austin and New York. Whether you’re a beginner or you’ve been diving into animation already, this course won’t just get you started- you’ll leave with all the tools necessary to make subtle and beautiful web animations, and how to pick the right tools for the job.

Val and I …

From WordPress to Apple News, Instant Articles, and AMP

I managed to get CSS-Tricks publishing to Apple News (example link), Instant Articles (example link), and AMP (example link). The linked up article is a writeup of how that all works, starting with this self-hosted WordPress site.

Feel free to yell at me for promoting walled gardens and ruining the web.

— Chris Coyier (@chriscoyier) September 18, 2016

I like the idea of writing on MY site and publishing wherever people will read it.…

“OpenType Variations Fonts”

Over on the Typekit Blog, Tim Brown has written about an exciting development in the world of web fonts: an improvement to the OpenType font file specification.

This might not sound all that exciting at first, but “variable fonts” allows designers and developers to embed a single font file into a webpage and then interpolate the various widths and weights we need from a single file. That means smaller files, fewer requests, and more flexibility for designers. However, this …

Sponsor: Divi 3.0

Divi 3.0 and the future of WYSIWYG has arrived. Test out Divi's new visual page builder for WordPress today and find out why it's the best and easiest way to build a beautiful website. Now you can build your website on your actual website.

Simply drag, drop edit and combine over 40 content elements to create just about any type of page you can imagine. Adjust fonts, colors, sizing and spacing and observe your changes instantly. The new front-end …

Explaining CSS Levels

Rachel Andrews:

... it doesn’t make sense to draw a line at which all work is stopped on all parts of CSS in order to declare that CSS version finished. Therefore, after CSS2.1 all the things that had been part of the 2.1 specification were broken down into modules.

It's easy to joke "Maybe we'll get that in CSS17!", but that plays into the idea that CSS will be versioned (ala "ES6"), and those days area already over.

CSS3 …


Using Dynamic Hashes in File Names with WordPress’ Enqueue Function

The following is a guest post by Pascal Klau, a self-described trainee web developer from Germany working with WordPress, Gulp, and more recently VueJS and Webpack.

During my journey of learning web technology, I stumbled upon the importance of file caching. It's a pretty important thing for web page performance. I also sometimes notice that when a file was changed, and you refreshed the page, the browser can still be using the old version (because of the cache). There …

We have a pretty good* newsletter.