Article Archives

The New Newsletter

We've long had a way to subscribe to CSS-Tricks via email. You probably couldn't really call it a "newsletter" though, as it just consumed the RSS feed and sent out newly published articles each week. Nothing wrong with that, but it isn't nearly as fun a custom-written one.

So, the new newsletter is here! It still links to everything we've published, so you won't missing anything there, it's just more elegantly summarized.


The Current State of Telephone Links

Telephone links are a thing. Like an anchor link you tap to (probably) go to another page, these are links you tap to call a number on a phone-capable device. They’ve been around for quite some time. Yet, they cause me a lot of confusion. For example, many devices will automagically recognize phone numbers and do the linking for us, but not always.



Facebook (looks like mostly Isaac Salier-Hellendag) released what looks like a pretty sweet rich text editor written in React.

In the same vein:

  • TinyMCE is the one that's been around forever.
  • ProseMirror is the fairly new one from Marijn Haverbeke
  • ZenPen is a super minimal one from Tim Holman
  • There's been a bunch of attempts to replicate the Medium editor, like this.

If you don't care about visual as-you-type formatting very much (i.e. you just want a simple Markdown editor) there are plenty of other simpler options you can search around for. And if you don't need little helper buttons either, there is always <textarea>.

Peak Style Guide

Brad Frost, responding to last week's Newsletter where I mentioned that a style guide doesn't need to be a big fancy display for the world to see.

But I don’t think these style guide logos and mascots Chris refers to are simply gratuitous visual wankery. It reflects an organization’s commitment to making and maintaining a thoughtful, deliberate design system.

My worry isn't that big fancy style guides in and of themselves are a problem, but other orgs see them and think "we don't have the time or resources for that."

Managing Typography on Large Apps

Harry Roberts suggest very minimal styles for h1-h6, then using heading-specific class names to actually style them, regardless of what element they turn out to be.

I could get behind that. In the past I've done .h1, .h2, etc rather than use the tag selectors, but heck, you might as well just give them names.

The New Web Typography

An essay by our own Robin Rendle. A story of typographers gone by, the ideas they left behind, and what it all means in today's vastly different contexts.

I don’t have as much empathy for screens as much as I do the networks that make those screens worth having.

​Sponsored: What salary could you be earning?

If you want to know what you're worth, Hired has the answer: with data from thousands of real interview requests and job offers, we've put together a salary calculator that can tell you what you could be making in your job based on the skills you have.

If you want to find out how much more you could actually earn, join Hired. Just set up your profile, and companies will give you job offers with salary and equity upfront before you interview. Get multiple job offers from top companies with just 1 application. Try Hired today!

Making a Simple Image Resizing/Optimizing Service in Automator

As I was using Photoshop to resize my eleven billionth image, it occurred to me I should probably simplify this process. AppleScript, perhaps? Photoshop scripts? Some already existing little app? A little pontification on Twitter resulted in a number of suggestions to try OS X's Automator. Turns out it's a pretty easy thing to do, at least in a limited way.


Using calc() to fake a media query

A bonafide CSS trick by Rémi Parmentier. It's used in the context of emails here, but it's a clever trick in it's own right.

This is the trick:

/* When parent is 500px wide... */
.block {
  min-width: 50%;   /* 250px WINNER */
  max-width: 100%;  /* 500px */
  width: calc(480px - 100%) * 480); /* -9600px */

/* When parent is 400px wide... */
.block {
  min-width: 50%;  /* 200px */
  max-width: 100%; /* 400px WINNER */
  width: calc(480px - 100%) * 480); /* 38400px */

Reduced demo.

I Heart CSS

I like to think of CSS as a love language. If written well, it can be as lovely as poetry. There are rules, semantics and, like love itself, it can be communicated in many ways. Consider the variety of options we have to write black in CSS:

  • #000000
  • #000
  • rgb(0, 0, 0)
  • hsla(360, 100%, 0%, 1)
  • black

In the spirit of Valentine's Day, I thought it would be fun to push this concept a little further with the many ways we can make hearts in HTML & CSS.


Introducing Vector Networks

The team working on the upcoming design tool Figma demonstrate how vector path making will work. Think of the Pen Tool in Adobe software, rethought. This new approach certainly looks more intuitive, especially with how easily curves can be manipulated.

Why npm Scripts?

The following is a guest post by Damon Bauer. There has been a growing sentiment (for instance) that using node packages directly, with the command line interfaces they provide, is a good route to take. As opposed to abstracting the functionality away behind a task runner. Partly: you use npm anyway, npm provides scripting functionality, why not just use that? But there is more to it than that. Damon will walk us through the thinking, but also exactly how to accomplish many of the most important tasks in a front end development build process.


Building a Jekyll Site – Part 1 of 3: Converting a Static Website To Jekyll

The following is a guest post by Mike Neumegen from CloudCannon. Mike and I talked about doing a little series on building Jekyll sites, which of course I was into because Jekyll is great and more education around static site generators is a good thing. Full disclosure, Mike's company CloudCannon is a CMS on top of Jekyll. As part of this series he's going to show you how to use that, so I requested it be a sponsored post.


I Learned How to be Productive in React in a Week and You Can, Too

This article is not intended for seasoned React pros, but rather, those of us who make websites for a living and are curious how React can help us reason about updating user interfaces. I’ve been intrigued by React for some time, and now that it has gained some standing in the community as well as good reviews, the time to learn it seemed justified. There are so many new technologies constantly emerging in front end development that it’s sometimes hard to know if effort into learning something new will pay off. I’ll spend this article going over what I think some of the most valuable practical takeaways are so that you can get started.


The `background-clip` Property and its Use Cases

background-clip is one of those properties I've known about for years, but rarely used. Maybe just a couple of times as part of a solution to a Stack Overflow question. Until last year, when I started creating my huge collection of sliders. Some of the designs I chose to reproduce were a bit more complex and I only had one element available per slider, which happened to be an input element, meaning that I couldn't even use pseudo-elements on it. Even though that does work in certain browsers, the fact that it works is actually a bug and I didn't want to rely on that. All this meant I ended up using backgrounds, borders, and shadows a lot. I also learned a lot from doing that and this article shares some of those lessons.

Before anything else, let's see what background-clip is and what it does.


​Sponsor: O’Reilly Fluent Conference

This year, the O'Reilly Fluent Conference (March 7-10 in San Francisco) brings you new 2-day, in-depth training courses in topics like React, CSS Layouts, Website Planning and Design. You'll also find case studies, introductions to new tools and technologies, best practices, inspiring keynotes, the ever-lively expo hall, and nonstop networking opportunities. Take a look at the schedule and see how it measures up against the problems you need to solve or the things you promised yourself you'd learn. Fluent could just be the best thing you do for your career in 2016.

Take 30% off your registration when you use the code CSS30.

Building & Maintaining OUI (Optimizely’s UI Library): Part 1/2

The following is a guest post by Tom Genoni. Tom is going to introduce us to the thinking and process behind Optimizely's new UI library / Sass framework. Part 2, by Daniel O'Connor, looks at some of the technical and integration bits.

When I first started working on web projects, stylesheets were seen as a necessary evil. It was neither a real language to be taken seriously by a computer-science minded engineer nor simple enough for a designer to fully own and understand. With few best practices, organization of the CSS was always ad hoc—“type styles in this section, colors in that section”—and every company did it differently. But as web applications, and the teams building them, grew larger and more complex it became harder to manage ballooning codebases while maintaining consistency across teams and projects.


Choosing the Right Markdown Parser

The following is a guest post by Ray Villalobos. Ray is going to explore many of the different varietals of Markdown. All of them offer features beyond what the original Markdown can do, but they offer different features amongst themselves. If you're choosing a version to use (or a version you're offering to users on your web product), it pays to know what you are getting into, as it's difficult to switch once you've chosen and there is content out there that depends on those features. Ray, who has a course on Markdown, is going to share which versions have which features to help you make an informed choice.


Critical Web Fonts

Zach Leatherman outlines a new method for loading webfonts whereby the process can be broken up into two stages:

...instead of a full Roman webfont in the first stage, it loads a small subset of the Roman webfont, in this case with only the uppercase and lowercase alphabetic characters.

Then, in the second stage, we can load all the extra parts of that font, such as numbers or special characters. Ultimately, this greatly decreases the time in which readers will see the switch between the fallback font and the fancy web font: the first stage is only 9kb in size, which then gets replaced with a complete 25kb version.

The difficulty here being that a lot of type foundries don’t provide developers with the option to subset a font file.

Hookbin – Capture and Inspect HTTP Requests

The following is a guest post by Przemek Matylla, who created a tool I suspect will be mighty useful for some of you out there. There is a lot of mystery out there in webdev. What value is this variable at this moment in execution? Why is this property being overridden? What's causing this scrollbar? There is also mystery with HTTP requests. What data came along for the ride? What metadata? Is everything there (and not there) as I expect? Hopefully Przemek's tool can help.


Extending Sass with PostCSS

I think Ashley Nolan has the right idea here:

Many posts on PostCSS compare it’s features to Sass equivalents, but PostCSS doesn’t have to be used as an alternative to Sass. It can instead be used to add additional features to your workflow that Sass doesn’t provide. ... These extra tasks can run either before or after your Sass compilation, as PostCSS can parse both SCSS and CSS.

PostCSS has proven to be much easier for developers to write add-ons for. There are tons of add-ons that are highly compelling. But I think it would be a mistake to pick out, say, a dozen add-ons trying to replicate what what Sass already does, in addition to the others you find useful. Your CSS code base risks becoming this weird highly customized syntax - you'll be coding on an island so to speak. Not to mention at the mercy of untold third-party maintainers.

I think the trick is to use Sass (which has so many strong battle-tested syntax choices over the year) and sprinkle in PostCSS processing with good add-ons. Good, meaning actively maintained and that don't mess with the language. I prefer add-ons that have a familiar looking syntax, but it's invented, so it will never awkwardly conflict with current CSS, future CSS, or other preprocessing.

Sponsor: FullStory Searchies – Answers Before You Ask​

FullStory is a customer experience platform that gives product, marketing, and support teams unprecedented insight into the interactions of visitors and customers. By adding a simple script to any website, FullStory captures every event and interaction during a visit, making it easy to replay, search, and analyze each user’s experience.

FullStory Searchies intelligently determine which questions you’ll want to ask of a search or segment and present the answers in the most visually intuitive way: with a funnel, line graph, bar chart, and more. With Searchies, FullStory make it easy to fluidly move between aggregate data and the individual customers that comprise it. Get the full story free for 14 days.

Using Templating Engines to Streamline WordPress Theme Development

The following is a guest post by Charlie Walter. Charlie has written for us before, when he's not making me extremely envious. Now he's back to share something completely different. We're going to learn about methods he's learned for streamlining WordPress theming using templating engines.

Templating engines are fantastic! They make complex programming languages much easier to write and include features that streamline the development process.

WordPress is a natural environment for us to see how templating engines work, not only because it's template-driven, but because of its reliance on PHP. WordPress itself is lauded for its low barrier to entry for content publishers, but the knowledge of PHP that it requires for heavy customizing makes it a somewhat higher bar for developers wanting to get into the game beyond basic theming.


Performance Budget Builder

Brad Frost has made a very interesting visualization tool that helps teams think about performance budgets. It shows all the assets (HTML, CSS, JS, images, fonts, etc) as part of one proportional bar chart. It's a great way to look at it, because it reinforces the idea of "increase one, others need to shrink".

The Responsive Image Breakpoints Generator

Nadav Soferman has written a great post about the common mistakes that can be made when developers attempt to make images responsive:

Whichever responsive design solution or framework you choose, you still need to generate and deliver multiple versions of each image. The challenge of finding the best fitting resolutions, which are the responsive breakpoints for each specific image, is common for all approaches and frameworks.

What’s especially surprising to me is we need to serve a different number of scaled images depending on the image itself in order to get the best performance gains possible. One image might require five versions whilst another might require nine.

Nadav also walks us through a new tool called Responsive Breakpoints which has been designed to solve a lot of these common mistakes. If we upload an image the app will let us download the scaled-down images, show us which are the optimal breakpoints for that particular image, and will then give us a clear example with markup so that we can add it straight into our designs.

This tool handles the image creation and srcset attribute creation, but I've also dreamed of an automated tool for sizes attribute creation. For example, the page you intend to use the image on loads up in an iframe. The iframe resizes around a bunch, watching what happens to the width of the image and recording the dramatic shifts (which are likely breakpoints). Then it intelligently creates the sizes attribute based on that information. #HotAppIdea. Which also reminds me of how nice it would be to set a <meta> tag with sizes information, since designs change.

Mood Driven Development

I suspect this is what many of us do (based on my own behavior and what I observe of others), but I'm not sure we outright say it or embrace it. Mood Driven Development: Work on what you feel like working on.


Doing Science on the Web

Alex Russell on the current problem with testing experimental web features:

Prefixes “look” ugly and the thought was that ugliness  —  combined with an aversion to proprietary gunk by web developers —  would cause sites to cease using them once standards are in place and browsers implement. But that’s not what happens.

Tools like Autoprefixer compound the problem that we developers use prefixed-anything as soon as we can get our hands on it.

He talks about some strategies for solving the problem, but admittedly they still don't sound perfect to me. As a tiny bit of anecdotal evidence: I'm less inclined to play with new features until they feel like they have some permanence. Ughgk, I guess that's the problem.

In the web platform, the missing ingredient has been the ability to limit the experimental population. Experiments can run for fixed duration without fear of breaking the web if we can be sure that they never imperiled the whole web in the first place. Short duration and small, committed test populations allow for more iteration which should, in the end, lead to better features. The web developer feedback needs to be the most important voice in the standards process, and we’ll never get there until there’s more ability for web developers to participate in feature evolution.

OS X Window Manager Apps

There is no shortage of apps to help you arrange windows. I find them tremendously useful. Most Windows (the operating system) users I know quite like the built-in abilities it has to position windows, but there isn't as much of that built into OS X. OS X El Capitan (10.11) brought some split screen stuff, but it has quite a few limitations and certainly isn't fulfilling all the needs of the discerning nerd.

So let's look at the options! Fair warning: this page has a bunch of super-huge GIF files on it, as I thought that would be a useful way to show off these apps features.


Revisiting the Float Label Pattern with CSS

The “floating label” is a common design pattern where the label of a form is displayed on top of an input until someone taps it. It’ll then transition out of the way to reveal the placeholder text beneath, but the label will still be visible above or below.

Emil Björklund walks us through an interesting demo that replicates this pattern but without the need for any JavaScript and with the :placeholder-shown pseudo selector.

Note there are other CSS-only methods for this (check out a ton of different methods in this big ol' Collection), but :placeholder-shown is the perfect selector for this, other than it's current level of support.

Some Pretty Splendid SVG Links

I'm always running across wonderful SVG stuff. Demos, tutorials, tools, art... some of the best timeless resources end up in our SVG compendium. Some I think are best suited to posts like this!

Some of these are pretty new. Some of them are not, but I found them useful recently or are new-to-me.


Sponsor: Media Temple

I'm pretty excited to welcome Media Temple as a the brand-spankin' new primary site sponsor around here. I pitched the idea to them, actually. While sponsors are vital for the site, I'm selective about the companies we work with. I personally approve and endorse every one. I'm particularly selective about the primary sponsor. I want it to be a company that I not only use and endorse, but that I select as a good fit. Media Temple was at the top of that list.

Media Temple will be sponsoring the site all of 2016. You'll see them right in the header of the site, reminding you they are the web host we use and recommend.

Thoughout the year, I'll be doing some posts like this to let you know about some of the interesting things they do and services they offer. You'll hear about them from time to time on ShopTalk and CodePen Radio. I'll even be writing a bit over on their blog.

The Current State of Web Security (An Interview with Anselm Hannemann)

Anselm Hannemann recently made a post about some of the misconceptions that front-end developers might have about web security. Since I had lots of questions about these things, I thought I'd interview Anselm to get his take on the surprising complexity of getting set up with HTTPS. We talk about things like generating certificates and how we might best make sense of the conflicting opinions many developers, including myself, have about third-party services such as Cloudflare.


The HTTPS-Only Standard

A project by the U.S. General Services Administration that outlines how Federal agencies should implement basic web security, going into great detail as to why government websites should always use HTTPS over HTTP:

HTTP has become central to today’s way of life. HTTP is currently the primary protocol for applications used on computers, tablets, smartphones, and many other devices. As our dependency on the internet has grown, the risk to users' privacy and safety has grown along with it. Every unencrypted HTTP request reveals information about a user’s behavior, and the interception and tracking of unencrypted browsing has become commonplace. Today, there is no such thing as non-sensitive web traffic, and public services should not depend on the benevolence of network operators. When properly configured, HTTPS can provide a fast, secure connection that offers the level of privacy and reliability that users should expect from government web services.

A _______ of JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. Yadda yadda yadda.

But what do you call a small amount of it?