Grow your CSS skills. Land your dream job.

Article Archives

17 comments

How to Redirect a Web Page

The following is a guest post by Robin Rendle. I've always wanted a post here that rounds up the different ways to redirect a site. So I commissioned Robin to do it and he did a fine job!

Capability Reporting with Service Worker

We've heard 1,000 times: User Agent sniffing is bad news. We largely do it on the server because we want to know stuff about the client before we even send anything to the client. A worthy goal!

We've talked about …

More Elegant Fix for Jumping Scrollbar Issue

If you move from one page of a site without a scrollbar to another with a scrollbar, you'll see a slight layout shift as things squeeze inward a bit to make room for the scrollbar.

A classic fix was html

8 comments

SMACSS-Press

The following is a guest post by Scott Fennell. Scott saw a recent post here on CSS-Tricks about class names in WordPress and had some his own ideas about exerting control, rather than leaving things as they are. His

Sponsor: Treehouse

Treehouse has been a long time sponsor here on CSS-Tricks. You know them. They do online training for web and mobile design and development. Here's a couple of things that I think are especially cool about Treehouse:

  • There are conference
16 comments

OS Specific Fonts in CSS

I'm not sure what the exact use case was, but Sam Stephenson recently asked me:

@chriscoyier What's the best way to reference the OS X system font in CSS (to get Lucida Grande or Helvetica, as appropriate)?

— Sam Stephenson …

WOFF2

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 …

20 comments

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 …

4 comments

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 …

28 comments

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

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: statico.io – front end optimization made easy

statico.io 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 …

69 comments

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

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:

  • Level up your JavaScript in

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.…

Perf.Rocks

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:
6 comments

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.…

26 comments

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.
16 comments

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

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 …

15 comments

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, …

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

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 …

15 comments

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 …

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. …

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 …

*May or may not contain any actual "CSS" or "Tricks".