Grow your CSS skills. Land your dream job.

Guide to Responsive-Friendly CSS Columns

The following is a guest post by Katy Decorah (edited by Jason Morris). Katy was researching CSS columns and how they can work responsively, as there wasn't much information she could find out there on the subject. So, like a hero, she wrote it all up. Here's Katy:

With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content …

Read Article →

Sponsored: Tower 2.0 is Here – To Make Git Easy!

The following is a guest post by Tobias Günther. Together with his team, Tobias creates Tower, a Git client for Mac. I personally use it every day. Just this week, they released version 2 of Tower, which I was a beta tester for. I'll let him explain all about Tower, why they created it, and what's new in this version.

Read Article →

Responsive Images: Use Cases and Documented Code Snippets to Get You Started 

Andreas Bovens put together this epic recipe list for <picture> / <img srcset>. There are four scenarios:

  • Do my image sizes change depending on my responsive design rules?
  • Do I want to optimize for high-dpi screens?
  • Do I want to serve images with different mime types to browsers that support them?
  • Do I want to serve different art depending on certain contextual factors?

Then Andreas shares what the code would look like for all of those plus any combination of them.

Hacks for dealing with specificity 

The overall point here by Harry Roberts is to keep the specificity on your selectors as low as you can. The end result of that effort is:

  1. More reusable styles.
  2. When you need to override that style, you have opportunities to nudge that specificity a bit higher while still being reusable and not fighting yourself.

Authoring Critical Above-the-Fold CSS

The following is a guest post by Ben Edwards. I saw Ben tweet about a simple Sass @mixin that allowed you designate bits of CSS as being "critical" - the idea being to load that critical CSS first and defer the loading of the rest of the CSS until later. A clever idea, and one that is getting very popular in the web performance crowd. I thought I'd get Ben to introduce these ideas in more detail for us.

Read Article →

CSS Colorguard 

Clever work by Alex Sexton to analyze CSS and find colors that are so close to each other they should probably be combined. You know, for efficiency and consistency.

#133: Figuring Out Responsive Images

I'm probably a bit rare in that I rather enjoyed trying to keep up on the responsive images thing. It's an interesting problem that bred lots of interesting solutions. The whole thing is starting to wrap up now though, now that the official solutions are:

  1. <picture> and friends
  2. <img> with srcset and sizes

The problem is: I don't really get it. I thought the original picturefill was pretty simple. List a bunch of sources with media queries. First one to …

Watch Video →

More Blog Posts →

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