Article Archives

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?


Influencing Web Layouts with Print Layouts

Jen Simmons has a compelling talk (video) where she calls out web design as being far too dominated by the HEADER CONTENT SIDEBAR FOOTER pattern we're all too familiar with. Print design, despite so often being dubbed "dead" or in massive decline by those of us in web design, still excels in quality and variety of layout.

Certainly we can learn from print design on the web, yeah?


The Sass Ampersand

The following is a guest post by Rich Finelli. Rich told me he used to have some trouble with the special ampersand character in Sass, but then had a bit of an epiphany and wanted to share that understanding (it's powers and limitations) with others. My favorite!

The & is an extremely useful feature in Sass (and Less). It's used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a time-waster when you're struggling and could have written the same code in regular CSS.

Let's see if we can really understand it.


Moving Along a Curved Path in CSS

motion-path is specced and already has some support. But there is another way to replicate curved motion paths, as Tobias Ahlin points out:

... if we add a container around the object we want to animate, we can apply one timing function for the X-axis, and another one for the Y-axis. Below, we're using ease-in for the X-axis, and ease-out for the Y-axis.

Optimizing SVGs for Web Use

An in-depth series of posts by Andreas Larsen that walks us through the process of how to (hand) optimize SVGs. He suggests optimizations that it's unlikely software could do for you. Things like changing the viewBox size to accommodate simple, rounded integers.

Adding this one to our compendium of SVG info.

Safari 9.1

There are lots of exciting new features rolling out in Safari 9.1 such as support for the picture element, enhancements to the web inspector, CSS variables and gesture events for iOS. Although, what I’m most excited for is the OpenType support with properties such as font-feature-settings and its variants like font-variant-ligatures and font-variant-caps, all of which give us more fine-tuned control over typesetting.

You can play around with these new features in the OSX 10.11.4 and iOS 9.3 betas today.

What is Bikeshedding?

The #1 place I hear people use this unusual term is standards people talking about standards stuff. It's not an intuitive term, but what it means is quite a useful and short way to describe a certain situation.


Sponsor: ​LightCMS

LightCMS is the only true white-label Content Management System on the market. If you've ever considered branding your web design business as your own while using someone else's system, you need to check out their Developer Program. You'll have all of their enhanced reseller tools at your fingertips, as well full access to the HTML and CSS of your sites. They even give you a free website for your business.

If you're thinking about switching CMS providers, or even augmenting your current business model, take the first step by starting a free 14-day trial. No credit card required.

Swiss in CSS

Swiss in CSS is a delightful project by Jon Yablonski that recreates posters made in the International Typographic Style, a visual design movement that began in the 1940s.

Open the examples in CodePen to take a look at how each of them work under the hood.

DuoTone themes

Some classy understated themes for Atom by simurai. This might be the little thing that gets me to try switching to Atom. I gotta imagine people will port them over to other apps, though.

A Few Picks from 24 Ways 2015

Strong year for 24 Ways! The whole archives is worth browsing through and bookmarking the articles that most interest you. Here's some of our favorites:

  • In Putting My Patterns through Their Paces, Ethan Marcotte writes about his experiences with flexbox properties and how he helped redesign The Toast with progressive enhancement techniques in order to preserve the integrity of the content. He asks "What if someone doesn’t browse the web like I do?"
  • In Being Customer Supportive, Elizabeth Galle tells us "You write the apologies, but you also have the chance to make each person’s experience with your company or product a little bit better for next time."
  • In What I Learned about Product Design This Year, Meagan Fisher says "if you want to do it well, and account for every user, product design is so much more snarly and tangled than you’d expect going in."
  • In Cooking Up Effective Technical Writing, one of Sally Jenkinson's tips is to write in "small, reusable components" so when you are writing and think "Do I really have to explain how to install Sass and Node.js again, Sally?" you don't have to, you can link it it without bloating the article.
  • In How Tabs Should Work, Remy Sharp tackles a UI pattern (tabs) by creating a checklist of requirements to do the job well and building from there (rather than doing the bare minimum and thus a rather bad job).

Should I use a video as a background?

A reader writes in:

I've seen done beautifully, but I'm having a hard time finding any articles on best practices. I try to steer clients away from wanting video background even though it's hard to argue against it because it does look stunning when done right.

"Look at my competitor's website, they have a video!! You can do it!!", they say.

The problem I run into is when a client actually sends me a video they want to use, it's either crappy/low quality or the file size is way too big and would never load in time before the user leaves the site and never looks back.

It's time for a THOUGHT DUMP!


`flex-grow` is weird. Or is it?

The following is a guest post by Manuel Matuzovic. It illustrates how flex-grow works, weird quirks and all. Then he goes into several examples on how common layout patterns may be implemented using flex-grow and flex-basis.

When I found out about flex-grow, I made a simple demo to find out what it did and how it worked.
I thought I got everything figured out, but when I tried it on a website a colleague has recently made, nothing worked as expected. No matter what we did, the layout didn't look and work like it did in my demo. That got me thinking and I started to doubt that I knew what flex-grow was all about.


A Guide for SVG Support in Email

We’ve talked about SVG quite a bit here on CSS-Tricks, but one area we haven’t quite touched on is email. Now that browser support for SVG is all in the green, it would be easy to assume that we can start using SVG everywhere. However, if you’ve worked with email before, you may know that it often follows way behind the web as far as feature support. You know, kinda the way California looks at North Dakota with trends: just a few years behind. :)

This article takes a deep dive into four different ways SVG can be used, and compares support for those methods across several of the most popular email applications. Let’s see where we get the most support.


Click SVG Element to Focus (and Style)

A reader writes in:

Is there anything on your site that shows me how to make an SVG clickable using CSS? As in, I have an SVG and I click on part of it and it should reveal an outline on that part of the element? I have a telephone interview Tuesday for a job as a remote SVG Illustrator and I don't want to look like a turkey.


Sponsor: Christmas Came Early (Take 20% Off Top Design Resources at Creative Market)

Before you get caught up in holiday sweets and ugly sweater parties, be sure to look at Creative Market's new 20% off deal — covering everything from stellar brush fonts to detailed textures to stunning graphic kits. Start the new year with fresh new additions to your design toolbox and watch your work improve in 2016. This is a unique opportunity to grab assets created by talented shop owners to optimize your design workflow — and they're all 20% off!

To redeem your offer, head over to their discount page. Go quickly though, this offer expires on December 25.

New Poll: “front” “end” ughck.

I don't think it causes confusion, but there doesn't seem to be any consensus on how we write out the word front end. I had to make a choice right there. My preferred style, for now, is just that: front end. But I figured it would be a fun and potentially interesting poll to see what everyone thinks. Voting in the widget in the sidebar (large screen) or somewhere-down-there (small screen).

TypeKit Starts Using Native Font Loading API

Typekit has updated the WebFont Loader project with support for the new CSS font loading API:

Before the introduction of the native API, we detected font loading by inserting test elements in the page. These elements were regularly polled for width to see if the font had loaded. This process is very expensive because it triggers a page wide style reflow each time the elements are checked. Using the native API, we can bypass this process completely, which results in a big performance improvement.

Always nice when browsers step up and help make things better and faster, especially when there was demonstrably high need, and then see major vendors make use of it right away.

Webfont stuff is a fairly regular topic around here, feel free to browse around.

Building a Better Web Browser

James Mickens, an associate professor of computer science at Harvard, gave a talk about the various flaws of web browsers and how we might go about making them more secure and robust:

To fix the browser, we need to radically restructure the browser architecture…so in particular I propose that we dramatically narrow the responsibilities of the browser itself and give more responsibilities to web pages. So in this new model the web developer defines her own rendering engine and her own script engine and her own markup parser.

The idea that web developers in the future might have this much control over the underlying technology of the web is completely mind boggling. James gives some good examples as to why we need this much control and how web pages that don’t send their own markup parser or rendering engine down the wire would then progressively fallback to whatever the browser provides.

What’s most interesting to me however are the questions that James asks, rather than his suggestions. Namely, what should be the relationship between a web page and a browser? How much control should developers have? What technologies do we need to make a functioning website?

ShopTalk 2015 Holiday Gift Guide

There are some things Dave and I talk about regularly on ShopTalk. Certain hardware we use. Software we like. Books we recommend. Services that make life easier. We rounded them up into a little list for the holidays. Enjoy!

Smaller, Faster Websites

Mat Marquis’ talk from TXJS 2015 is a rallying cry for performance, responsive images and trying to build websites in the most conscientious way possible:

We, as an industry, have nearly decided that we’re doing a great job as long as we don’t count the cases where we’re doing a terrible job. We want the user to think about The Website—to sympathize with us—over their reason for being there. We’re making them sit through a lecture about furniture design every time they try to sit down in a chair.

SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features

SMIL, SVG’s native animation specification, has been highly regarded because it offers so many bells and whistles for performant SVG animation rendering. Unfortunately, support for SMIL is waning in WebKit, and has never (nor will likely ever) exist for Microsoft’s IE or Edge browsers. Have no fear! We’ve got you covered. This article explores some of those SMIL-specific features and delves into the alternatives to achieve the same effects with a longer tail of support.


Sponsor: An Event Apart

Set yourself apart. Get better at what you do today and find out how you’ll be doing your job in a year or two. An Event Apart—three days of design, code, and content for people who make websites—is where ideas like responsive design and mobile first were launched, and where this year’s attendees are already learning how grid layout, CSS shapes, and other advanced techniques will fundamentally change…well, everything. Don’t miss it!​​​

What is going to an An Event Apart like? Let me try and set the stage a little bit:

Using Multi-Step Animations and Transitions

CSS animations are rad and the concept is fairly simple. Name the animation, define the movement in @keyframes and then call that animation on an element. If you haven't worked with them, you can level up on the syntax right here in the Almanac.

While the concept is simple, there are little tricks to make the animations seem complex and one of those is multi-step transitions. That's what we're going to look at in this post.


Caring about OpenType features

Type aficionado Tim Brown has written a great piece about how to make typographic enhancements with the OpenType features of a web font. These additions can be subtle, such as ligatures and small caps, but other tools such as kerning or contextual alternates can often have a big impact on the overall reading experience:

More than fancy swashes and superfluous ligatures, OpenType features are font superpowers. The best, most capable typefaces are full of sophisticated reasoning and delightful surprises — things that are often integral to the design of the type itself, or that help it work better for specific typesetting tasks.

Intrinsic Placeholders with the Picture Element

By using intrinsic ratios and the picture element, Dave Rupert describes his attempts to stop the clunky page reflow when images load on a page. He also shows us how it’s possible to style this element with a background-color to give users a more elegant loading experience.

Getting Started with the WordPress Customizer

The following is a guest post by Scott Fennell, a WordPress theme & plugin developer in Anchorage, AK and a regular contributor around here.

Let's say you have a client whose business is large enough to have several departments. Now let's say that this client wants each of their departments to have their own website on a dedicated domain. Each site is to have the same layout, but a different color scheme. This is a phenomenal use-case for the WordPress Customizer (aka the Theme Customization API), and I'd like to share a basic example of how to build it into a theme.


Why I’m Excited About Native CSS Variables

Philip Walton:

Native CSS variables weren’t just an attempt to copy what CSS preprocessors could already do. In fact, if you read some of the initial design discussions, you’ll see that most of the motivation for native CSS variables was to make it possible to do things you can’t do with preprocessors!

CSS preprocessors are fantastic tools, but their variables are static and lexically scoped. Native CSS variables, on the other hand, are an entirely different kind of variable: they’re dynamic, and they’re scoped to the DOM. In fact, I think it’s confusing to call them variables at all. They’re actually CSS properties, which gives them an entirely different set of capabilities and allows them to solve an entirely different set of problems.

(Extended emphasis mine.)

I Turned Off JavaScript for a Whole Week and it Was Glorious

As you can imagine, I ran into some problems. Netflix wouldn’t work. Neither would YouTube, at least not without turning on Adobe Flash, which would kind of defeat the point of turning off JavaScript. And of course you can forget using Google Docs without JavaScript.

But the most surprising thing is that most things just worked. And in many cases, worked better. Pages loaded nearly instantly, my laptop battery lasted longer, and I could browse the web with fewer distractions.

A JS-free world is out of the question, but it does spark an interesting conversation about our tools-first approach to developing sites and dovetails nicely with our recent post on building offline sites with ServiceWorker.

Martin Wolf's take was pretty funny:

His experience without Javascript was so glorious that he turned it back on after one week.

The “Blur Up” Technique for Loading Background Images

The following is a guest post by Emil Björklund. Filter effects in CSS have been around for a while, and together with things like blend modes, they bring new possibilities for recreating and manipulating stuff in the browser that we previously had to do in Photoshop. Here, Emil explores a performance technique using one of the more forgotten filter effects – the filter function – as well as recreating it with SVG.


Some Great Flexbox Links Lately…

  • Flexbox Froggy: A game from Thomas Park where by you learn about differnet flexbox properties and values by positioning a frog.
  • Flexbox Grid Finesse: Heydon Pickering shows off that useful feature of flexbox where a grid with leftover boxes can be distributed along the final line. But you can caress things a bit ensuring you don't get a 4-4-4-1 situation and instead get a 4-4-3-2 situation with some min-width and :nth-child stuff.
  • Flexbox’s Best-Kept Secret: Sam Provenza shows off a method of pushing flex items away from each other without having to grow the element itself (or affect other items) with auto margin.

Sponsor: The Iron Yard

The Iron Yard is one of the world’s largest and fastest-growing in-person code schools. The Iron Yard exists to create real, lasting change for people, their companies, and communities through technology education. It offers full-time programs in back and front-end engineering, mobile, data science and design. There are 14 campuses dotted all across the U.S. and one in the U.K., with many more opening soon. The immersive format of the 12-week courses helps people learn to code and be prepared with the skills needed to start a career as a junior software developers.

If you’re thinking about making the switch to programming as a career and want to change your life, take the first step by contacting The Iron Yard.