The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Article Archives


I just learned that this is a thing. Sergej Müller has a really succinct page explaining what it is (it's an extra-compressed version of WOFF, the font file format) and how to use it.

And speaking of web type, check out Bram Stein's The State of Web Type (beta) for support of the loads of related browser features.…


Clipping and Masking in CSS

Both of these things are used to hide some parts of elements and show other parts. But there are, of course, differences between the two. Differences in what they can do, differences in syntaxes, different technologies involved, the new and the deprecated, and browser support differences.

And sadly there is quite a bit of outdated information out there. Let's see if we can sort it out.…


Automating CSS Regression Testing

The following is a guest post by Garris Shipon. We've touched on the four types of CSS testing here before. Regression testing is the hardest. It's the type where you're trying to test if a change you made to CSS resulted in any unexpected visual problems. This is made more difficult with responsive designs. Garris built a tool for doing this as he embarked upon a new responsive design for a large scale site. Here, he'll walk you through


Watch Dogs

It's Blue Beanie Day! A day celebrating and showing support for web standards. I'm a little biased perhaps, since it's my field, but I believe the web is among the most important things human beings have ever done. For starters, it enables international commerce, it enables connection and collaboration between people who may never have had that opportunity, it can make news more instant and honest, and it's a knowledge base bigger than we can even comprehend. #deepthoughts.

The …


What’s So Great About Bower?

The following is a guest post by Dan Sundy from Helios Design Labs. Dan is both going to explain how to use Bower and make a case for doing so, from the perspective of someone who resisted the idea at first.

Creating Animations and Interactions with Physical Models

Ralph Thomas:

Physical models let us easily create rich animations and interactions that feel more natural by conforming to our innate expectations of how things should move and respond.

I think the days of .fadeOut() and .slideDown() are over.…

Sponsor: – front end optimization made easy offers front end optimization as a service for web designers and developers. The service optimizes HTML, CSS, JavaScript, fonts, and images, with simple annotations like <link href="home.less?sio-css-embed=enabled&sio-css-uncss=enabled" rel="stylesheet">. It can also integrate with a CDN to deliver the optimized static assets.

It's free for sites up to 10,000 monthly unique visits. Get started today - no signup required.

What I like about statico is that it's a local stand-alone build tool. You configure it to do what you …


Sublime Text for Front End Developers

The following is a guest post by Wes Bos. Wes has been writing about Sublime Text and all the great stuff it brings to code editing for a while now. He has a new book and video package out now: Sublime Text Power User. I met him at a conference recently and saw his talk on Sublime Text. The conference was buzzing about it. Newbie's jaws were dropped and old pro's learned new tricks. Here, Wes is going

Sponsor: Frontend Masters – Expert Web Development Training

Frontend Masters produces quality video training by industry leaders like Kyle Simpson, Douglas Crockford and Estelle Weyl. These are super in-depth courses designed for intermediate and advanced developers.

They have two fantastic workshops coming up:

The State Of Animation 2014

Rachel Nabors:

I met and interviewed dozens of people who use and champion both CSS and JavaScript. After interviewing so many developers, designers and browser representatives, I discovered a technical and human story to be told.…


Find resources that help you build lightning fast websites

by Daniel Guillan…

Performance Budget Metrics

Tim Kadlec groups all the things you could measure in a performance budget into four groups:

  1. Milestone timings (Example: time to visually complete)
  2. SpeedIndex (WebPageTest's well-loved but isolated score)
  3. Quantity based metrics (Example: number of requests)
  4. Rule based metrics (Example: getting a "B" in "Use cookie-free domains")

CSS-Tricks Chronicle XX

I thought for this edition of Chronicle I'd focus on some web stuff that I've been enjoying lately. …

CSS Specificity Graph Generator

Spikes are bad, and the general trend should be towards higher specificity later in the stylesheet.

Jonas Ohlsson created a tool around Harry Roberts concept.…

Fun Times with CSS Counters

Some bonafide CSS trickery from Will Boyd, like counted selected items and continuing a count across multiple sections.…


Flexbox Nav Bar with Fixed, Variable, and Take-Up-The-Rest Elements

a CSS-Tricks reader wrote to me with a layout question. A variety of elements need to be arranged in a horizontal bar. Some of fixed size, some vary, and one needs to take up the rest of the space. Flexbox is beautifully suited for this, so I explain with that.

New T-Shirts! One Time Printing, Limited Time Only

It's weird. It's whimsical. It's light-hearted. It's soft'er'n'heck. Your mom will squint her eyes at you. It has a laptop with legs holding a floppy disk. It's designed by Jon Burgerman. I love it.

Taking orders for less than two weeks, then we'll print them and ship them out. Plus we'll send you an additional CSS-Tricks t-shirt for free. …


Sketchy Avatars with CSS clip-path

The following is a guest post by Ryan Scherf. Ryan found a neat way to give avatars kind of rough, uneven, varied edges. Kinda like they were cut out with scissors by someone who wasn't very good at using scissors. What's nice is it's naturally a progressive enhancement technique and it can be done through just CSS.

Sponsor: Dash – Monitor your Website, Business, & Life

Dash is a website that lets people quickly create real-time dashboards. There are dozens of pre-built widgets for services like Google Analytics, GitHub, Twitter, and Fitbit. Dash also has an API that allows you to share data from Dropbox or the web with custom widgets like Line Charts, Speedometers, or Do It Yourself (iframe). If you sign up for Dash today, your first dashboard is free forever.

Little note from me here: OMGYOUGUYS Dash is super cool. Number one, building …


5 Gotchas You’re Gonna Face Getting Inline SVG Into Production

The following is a guest post by Rob Levin. Rob is a Senior UI/UX Developer at Mavenlink, and coauthor of the Unicorn UI CSS Button Library. Their 2.0 release is using an SVG icon system, and here he shares some issues he's ran into along the way, and how you can watch out for them and fix them. Plus, Rob provides a full system you can use, including a working build process and demo.


Collision Detection

I posted about jQuery UI's position feature years ago, but I was just thinking of how useful the collision detection part of that feature is. In a nutshell: you can position an element where you want them to go, but if it calculates that where you're putting it would be offscreen or otherwise hidden, it will adjust the positioning to fix it. …


SVG Animation and CSS Transforms: A Complicated Love Story

The following is a guest post by Jack Doyle, author of the GreenSock Animation Platform (GSAP). Jack has been deep in the woods of web animation for a long time, trying to make it easier and better. He's written here before, talking about how JavaScript animation can be the most performant choice (Google even recommends it). This time, he focuses on SVG animation, some pretty scary issues you may come across while manipulating them with CSS, and how you

Firefox Developer Edition

  • For a normal front end dev like me, Valence is the most interesting feature. It's like how you can inspect iOS simulator through Safari, only it looks like you can do more with it, like inspect Chrome (weird), a Firefox OS app, or any other remote runtime.
  • There isn't too much else brand new and exciting that we haven't seen before from the Firefox Dev Tools. This seems just like a nice first step. A big public statement like: We

Sponsor: Extract for Brackets

Autocomplete is a pretty excellent feature of code editors, right? It helps us type faster and more accurately, and suggests things that might not immediately come to mind. (Was that white-space: prewrap; or whitespace: pre-wrap; again?)

Extract, a new Creative Cloud feature of the code editor Brackets, makes autocomplete way more powerful. Imagine if you had a specific layer selected in Photoshop, you're writing some CSS, and the color autocomplete suggested the fill color of that layer. Or …


Styling Cross-Browser Compatible Range Inputs with CSS

The following is a guest post by Daniel Stern. Daniel shared with me a tool he created called range.css, which is for styling <input type="range"/>. This is one of those tricky things, because it requires a weird mix of normal standardized selectors and properties and non-standard and prefixed selectors and properties. I invited Daniel to explain all that.


How SVG Fragment Identifiers Work

I've talked a good bit about SVG's <use></use> around here and using it to build an icon system. The beauty of <use></use> is that you can reference just a part of some SVG defined elsewhere and draw just that part somewhere else. That ability allows you to build a whole system out of it, solving the "many images in one request, because that's super efficient" problem that we've solved in the past with CSS sprites and icon fonts.

But …


Taking Control of the CSS/JS that WordPress Plugins Load

The other day on ShopTalk a question we got led us down a short tangent on WordPress plugins, the resources they load, and what that would look like in a perfect world. I ended up writing up some thoughts on it and getting some feedback. I think it came to a somewhat satisfying conclusion so I figured I write it up.…

The Specificity Graph

Harry Roberts, on charting CSS selector specificity across entire codebases:

A spiky graph is a bad graph.

I would think if you went 100% on a methodology that encouraged class names for everything, your chart would be damn near flat. I wonder if that's a worthy goal. Something to draw a line in the sand on, for the good of a project. …

Sponsor: Wufoo

I'm posting this just as a big ol' high five to Wufoo for being a long time sponsor of CSS-Tricks.

Wufoo is a web app for building web forms. Things like contact forms, conference registration forms, t-shirt selling forms, wedding RSVP's, you name it. You put the forms on your own site (if you like). They work on small screens. They don't get spammed. They save their data forever. They can be multi-page and use logic. Everything you need a …


Datalists for Different Input Types

I saw an HTML5 date input the other day, which had the dropdown arrow on the right, which I've grown accustom to clicking to reveal a calendar datepicker in which to choose a date.

Typically, that looks like this:…


How SVG Shape Morphing Works

UPDATE: This post is all about SVG shape morphing with SMIL. SMIL has an uncertain (likely not good) future. If you're super interested in shape morphing (which you should be, it's awesome!) I recommend checking out GreenSock's MorphSVG plugin, which doesn't require SMIL and is far more powerful anyway.

While animating SVG with CSS is easy and comfortable, CSS can't animate all the SVG properties that are possible to animate. For instance, all the properties that define the actual

Sponsor: Hack Reactor’s Immersive Remote Beta Course

Hack Reactor's Coding School is accepting applications for its next online immersive course, Remote Beta. Their team of exceptional instructors and staff work towards a two-fold mission of empowering people and transforming education through rapid-iteration teaching. Students build the skills and confidence they need to graduate as mid-to-senior level engineers and work for top tech companies in both backend and front end tasks.

Apply today for an upcoming onsite or online cohort and be on your way to becoming an …

Lobotomized Owls

I had a post in my drafts for CSS-Tricks recently I called "Removing the Space from the Bottom of Modules". It's all about that tricky situation where you want even padding all the way around some elements to visually separate them. But elements inside will also need bottom margins, and that might lead to extra space along the bottom where that margin hits the padding.

Apparently I'm getting old and losing my mind, because I've already written about it. …


Probably Don’t Base64 SVG

Perhaps you've heard of data URIs. It's a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use in a data URI can vary. Essentially you just tell it what content type it is (e.g. image/png), semicolon, then the data of that file.…


SVG Artboard Sizing

There are a couple of different (rational) approaches to SVG artboard sizing.

The term "Artboard" here is referring to that concept in Illustrator, basically the white drawing area you have for the document. Ultimately it refers to the viewBox in the actual SVG output. It matters very much for front end developers, because if there is no consistency, the positioning of the SVGs will always be a little one-off battle and really hurt the idea of SVG being a useful …


How To Get Started in Web Design

Here's an answer to how to get started building websites that I fully endorse and isn't vague. This is going to cost a little money, just like learning to play the guitar requires buying a guitar and some accessories. This is also going to require a little time and mostly isn't directly about the coding itself. It's about getting you to a place where you're doing web design for real and you can't help but learn!

I'm going to …

Sponsor: Creative Market – October Big Bundle

It's always great to have a personal collection of design resources you know that you can use for whatever you like at your fingertips. Vectors flourishes and illustrations, photos, textures, patterns, fonts, layouts, all that good stuff.

No better place to stock up than Creative Market. This week, they have put together a Big Bundle of their best products. From graphics and fonts to photos and Photoshop actions. For only $39, you can fill up your designer's toolkit with 105


A Guide to SVG Animations (SMIL)

The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epic guide.…

Sponsored: Stack – Task Management for Dev Teams

Stack is a powerful new task management system for Devs and Designers. A simple and fully customizable tool that fits your workflow. Manage projects and communicate with your team hassle free and in real time.

I really like how Stack approaches this. It's exactly how I would have done it. There are projects - big buckets that tasks go into. Then each project has these columns that you can organize however you want. Each task is actually in a column. …


Intermediary Pages in a Site Hierarchy

I had a reader write in with an interesting question:

When one has multi-level navigation, do you think it crucial to have an actual page for the top-level item? For instance, About Company, Founder, History.

There isn't really anything worth putting on the About page that wouldn't be on the three sub-pages. In the nav, should About just redirect to Company? Should there not be a Company page and its content be moved to About?

Any best practices you've found …


When users leave the search box empty…

The following is a guest post by Brin Wilson of WinningWP. Brin wrote to me wanting to do a little advertising for his site. I of course would happily accept that, but even better, since Brin is a tech writer anyway, why not write a guest post. That's always a win-win, and since he had a good idea anyway... take it away Brin!

If you're reading this, my guess is you're someone who cares about user experience. …


The Most Common Questions Asked on ShopTalk

As I type this, Dave Rupert and I have recorded 137 episodes of ShopTalk. ShopTalk is primarily a question-and-answer style show. Dave's early idea was to have it be loosely modeled after the most popular NPR show of all time, Car Talk, which is mostly Q&A. We have guests, and we talk a bit about the guest so people have a sense of who they are, but it's not exactly an interview show.

We solicit people's questions on …


Responsive Images: If you’re just changing resolutions, use srcset.

If you're implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage), all you need is the srcset attribute on the <img />. Gaze upon this easy syntax:…

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed