Article Archives

Relating to “Designing for Performance” by Lara Hogan

I picked me up a copy of Lara Hogan's new book Designing for Performance (Amazon), as it's a subject I've very interested in these days. As I write this, I'm just off the heels of doing quite a bit of performance related work here on CSS-Tricks as well as on CodePen.

I thought I'd give the book a read, learn some more, and be inspired to do some more. Here's some choice quotes and how they relate to stuff I've been doing, wanting to do, and thinking about.

(more…)

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 this before. Perhaps you serve a little different JavaScript for a different approach to navigation. Or you set a cookie with client side data and use that to serve different image formats depending on support. Maybe you even refresh the page to ensure you have that data. There are even libraries for all this.

Service Workers, a brand new thing on the web, are uniquely qualified to help with this problem as they sit between the client and server and can manipulate requests to pass additional data.

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 { overflow-y: scroll; } to force the scrollbar all the time. Ayke van Laëthem has found a more elegant solution in html { margin-left: calc(100vw - 100%); } which works because vw accounts for the scrollbar and % doesn't, and... just read it as there are a few more things you'll need to be aware of anyway.

Pretty sweet for a first blog post Ayke!

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 of his own ideas about exerting control, rather than leaving things as they are. His idea is to enforce a more SMACSS style philosophy where possible.

(more…)

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 videos in there you won't find anywhere else. I was just poking around and found three videos of me at conferences I was recently at!
  • There are of course tons of courses, but they are very well organized into tracks which help you focus on a path you're most interested in.
  • They walk the walk with a beautiful website themselves.
  • While I would never discourage anyone from going to a university, it's likely you'll learn more up-to-date practical tech on Treehouse for less than 1% of the cost.

I was talking with Micah, one of their guys over there, and he brought up a good point: while you can dig into Treehouse and binge learn for hours at a time, you can also learn a lot just by stopping in for 15 minutes a day.

(Advertising on CSS-Tricks)

Exposing Additional Form Fields via Checked Radio Buttons

There is a :checked pseudo class in CSS. I often think of it in connection with the "checkbox hack", in which you use it on a hidden checkbox with the ~ general sibling combinator to simulate toggling behavior without any JavaScript. It's a hack because now you have these stray form elements on the page that really aren't for a form. Not a huge deal, as I'm sure you can work around it accessibility wise, but there is a way to use this same concept in a totally non-hacky way, on an actual form!

I used this technique on the CodePen job posting form to only reveal additional form fields as needed.

(more…)

The CodePen Job Board

We just launched it! It's a niche job board (of course) targeted at front end developers and designers.

Not only is it the CodePen Job Board, but it's also the official job board here on CSS-Tricks and on ShopTalk as well.

We hope it's both useful to those of you looking for jobs in this field and companies looking to hire.

What is bookkeeping for a freelance front end developer?

The following is a guest post by my friend Allan Branch. Allan runs Less Accounting, web software for accounting. True story for me: it's only been this last year where I've gotten my stuff together and taken accounting seriously. (With a lot of help, of course, thanks Dee!) The advantages are significant. Not worrying about tax time and owing huge unknown amounts of money. Not scrambling to do everything at the last minute. But my favorite thing is having an understanding of the ins and outs of the business. It's a lot easier to see what needs to change when everything is organized. Allan will explain that getting started on this isn't that difficult. There are just some pretty straightforward questions you need to answer.

(more…)

Back to Basics With WordPress CSS: Understanding the Native Classes

The following is a guest post by Karol K. Karol is writing on behalf of ThemeIsle.com, a WordPress theme seller. He pitched me this post and I was into the idea. I'm the kind of front end developer that likes to do things my way and force whatever tool I'm using into it. There is something to be said for that, but only to a point. Burning hours on a philosophical difference on naming typically isn't worth it. In WordPress, you can force it to do just about anything, but the default are typically pretty good, and just going along with the system will make things easier. That's what Karol is suggesting here with CSS and WordPress.

(more…)

Sponsor: See how your visitors are really using your website

Hotjar is a new and easy way to truly understand your web and mobile site visitors. Now you can improve your site user experience and conversion rates by using Heatmaps, Session Playback, Proactive Chat, Polls, Funnel Analysis, Polls and Surveys — all in one central interface. Get free early access now!

Hotjar is changing the way small and medium businesses can improve their sites' user experience.

– CreativeBloq

(Advertising on CSS-Tricks)

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

(more…)

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 vibe around Blue Beanie Day, as I experience it, changes over time. That's because people change, technology changes, and so what feels immediately important changes. And also because caring about web standards is a pretty abstract concept. It's easy to raise our YAY WEB pom-poms, but sometimes it's hard to put a finger on why web standards matters so much.

(more…)

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 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 want, and the output is a website optimized for speed. It helps with the classics, like concatenation and minification, but also does trickier things like critical path optimization, sprite generation, and data URI inlining.

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 to share some of best stuff as it relates to front enders like us.

(more…)

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:

You can attend these workshops in person in Burnsville, Minnesota, or live and online (no travel!) with full HD streaming and chat.

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.

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")

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

Izak Filmalter wrote to me:

On the site I am working on there is a navigation bar with a few elements in it: a search input, the user's full name, and some icons. The icons are of fixed with, the user's name varies, and the search bar should take up the rest of the usable space.

No matter what I try, I can not get the search bar to use all the available space and no more when the user name length is dynamic.

I already sent Izak a response, but I'll share that solution here. Flexbox! I'm sure it comes as no surprise that flexbox is a wonderful layout tool. I have a guide to flexbox here that makes for a pretty good reference.

The good news here is that this is a pretty easy thing to do with flexbox layout. We'll get more detailed, but these few lines of code basically get it done:

.bar {
  display: flex;
}
.search {
  flex: 1;
} 

Step by Step

Let's assume markup like this. No surprises here really. I just wrapped the search input in a <div> mostly because I'm weirded out by an input becoming a flex item, but you'd probably want a wrapping element (like a <form>) anyway, because you'd probably have a <label> and whatnot.

<div class="bar">
  <div class="icon icon-1"></div>
  <div class="icon icon-2"></div>
  <div class="icon icon-3"></div>
  <div class="username">
    Emily Blunt
  </div>
  <div class="search">
    <input type="search" placeholder="search..." />
  </div>
</div>

Without any CSS

To get them aligned horizontally and centered:

.bar {
  display: flex;
  align-items: center;
}

Let's make sure the bar is as wide as the browser window. We can set 100% width easily enough. But whenever I do that, I'm reminded we should be rocking box-sizing: border-box; - otherwise any padding or border on that container and it would be wider than 100% and that's the worst.

*, *:before, *:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
.bar {
  display: flex;
  align-items: center;
  width: 100%;
  background: #eee;
  padding: 20px;
}

For the final trick:

.search {
  /* take up the rest of the remaining space */
  flex: 1;
}
.search input {
  width: 100%;
}

It'll work like this:

Now that we're in flexbox-land, we can even flop the order of things around all we want and get the same good spacing action. The order property is 0 by default, so any positive value will put that flex item at the end or negative value at the beginning. And then in order, just like z-index.

.bar-2 .username {
  order: 2;
}
.bar-2 .icon-3 {
  order: 3;
}

.bar-3 .search {
  order: -1;
}
.bar-3 .username {
  order: 1;
}

Bonus RWD!

Flexbox is super friendly toward responsive design, because we can swap around ordering and sizing, and even wrapping, really easily. Let's make our demo wrap, and make the search and username full-width:

@media (max-width: 650px) {
  .bar {
    flex-wrap: wrap;
  }
  .icon {
    order: 0 !important;
  }
  .username {
    order: 1 !important;
    width: 100%;
    margin: 15px;
  }
  .search {
    order: 2 !important;
    width: 100%;
  }
}

Demo

Here we go:

See the Pen Flexbox reordering by Chris Coyier (@chriscoyier) on CodePen.

Browser Support

You can't mention flexbox these days without some rabble-rabble browser support. As always, you can consult Can I Use. IE 9 is the big limiter left. If you need to support that, you'll have to find another way. Otherwise, between old / new / tweener syntaxes, you'll be fine. We aren't using anything weird here.

The trick is just to use Autoprefixer which handles flexbox wonderfully. When using that, the flexbox properties/values in this demo become:

.bar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.search {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.bar-2 .username {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

But I need a better fallback!

One possibility is to use Modernizr to detect flexbox support. It'll put a class name on the html element, like:

<html class="no-flexbox">

You can use that to use a different layout technique:

.no-flexbox .bar {
  display: table;
  border-spacing: 15px;
  padding: 0;
}
.no-flexbox .bar > * {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
}
.no-flexbox .username {
  width: 1px;
}

Works pretty good:

It's not the only possible way. You could mess with inline-block or float and measuring things with JavaScript. Or you could use an actual table. The web, yo, there is always a way.

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.

(more…)

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 a dashboard from the neat built-in widgets is very easy. I built one for CSS-Tricks in like 2 minutes. Number two, the interface of Dash is amazing. If you're a UI / interaction designer, you should check it out. The way that the screens stack on top of each other as you go deeper is hot. Number three, you can feed JSON (or just numbers) to custom widgets to build sweet charts and other nice data viz (check out the speedometer). I'm totally going to build a private one for CodePen to visualize some data for us.

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.

(more…)

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 can solve those issues.

(more…)

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 care about developer tools, we're committed to them, and this is where we're going to do it.
  • Firefox Hello is baked in, which is a WebRTC video/audio chat client. I'm excited about WebRTC as a technology. It will mean anyone can leverage it to become an interesting middleman. Wanna build a sweet communication app? Now the challenge is features, design, and community, not so much the tech. I'm not sure about Mozilla as a middleman - their last WebRTC thing, TogetherJS, was kinda abruptly abandoned.

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 the gradient syntax it is filled with. Or how far from the top of the document it is. Extract does all that and more.

With Extract, it gives you all that and more. As you're putting in a background-image, it will export the current layer as an image and put it wherever that file path is. In HTML, text can autocomplete with the the text from a text layer. Or extract a layer as the src of an <img>.

This is the kind of innovation that pushes the code editing experience forward.

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 <use></use> means inline SVG. It doesn't help you when you want to use a part of a larger SVG in SVG-as-<img /> or SVG-as-background-image. That's where fragment identifiers come in.

(more…)

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 form to do.

As many of you also know, I was a somewhat early employee of Wufoo back in the day. I'm still quite proud of the work we did at Wufoo and I'm happy with Wufoo today. I use the crap out of Wufoo. Every single day, it powers nearly every single form on all the sites I work on, and a bunch more that I built a long time ago and are just quietly still working great. It's reliable, feature-rich software that just does what it does very well.

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 shape of the elements aren't possible to change or animate in CSS. You can animate them through SMIL though. Sara Soueidan covers this in her guide to SMIL here on CSS-Tricks, but I thought I would shine a light on this particular ability.

(more…)

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 engineer in 12 immersive weeks.

Two anecdotes from me:

  1. I just watched the documentary Ivory Tower and it's a pretty interesting look at the state of universities. One thing is for sure: education is changing.
  2. I now have two personal friends who have transformed their career through coding schools.
icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag