✻ Sarah Drasner published a nerd’s guide to color on the web. She breaks down what the various color values are, like HSL and RGB, but also dives deep into filters and blend modes.

✻ Sarah also wrote about one of her favourite ES6 tricks: using Destructured Objects as Parameters. This technique is super helpful for making our JavaScript functions more legible and self-documenting.

✻ Chris made a super quick slider to play with some values. Make the text bigger! Change the color of an element! So much is possible with adding an event listener to a range slider.

✻ Ahmad Shadeed used those range slides all over the place in his article Building Resizeable Components with Relative CSS Units. The article is about how relative units, like vh and vw or em, can be used to dynamically resize a UI. If we want to make all the elements inside a blockquote change size depending on the font-size of the parent element then that’s totally possible:

The font-size of a component might change for any number of reasons. The client gives you feedback that they want it changed, and you want to make it easier on yourself by not recalculating all the child elements. You might offer a UI control to let users do it themselves. You might change sizes with media or element queries. You might use viewport sizing. So many reasons to size things relatively.

✻ “Transpiling” is the act of converting one programming language into another, and in Transpiling ES6, Ryan Christiani looks at how to convert our brand new ES6 JavaScript code into ES5. This way we’ll ensure that our code will work in as many browsers as possible.

Ryan looks at two methods for transpiling our JS: the first with npm scripts and the second with Gulp.

✻ Chris rounds up some of the latest updates he’s been working on with ShopTalk, CSS-Tricks and CodePen in Chronicle XXVIII.


What we’ve been reading, listening and watching

Rachel Andrews describes why there’s no CSS4 and why there never will be:

The problem with monolithic specifications is that in order to finish the spec, every component part also has to be finished. As CSS has grown in complexity, and new features are added, it doesn’t make sense to draw a line at which all work is stopped on all parts of CSS in order to declare that CSS version finished. Therefore, after CSS2.1 all the things that had been part of the 2.1 specification were broken down into modules.

✻ ✻ ✻

In More Weight Doesn’t Mean More Wait, Scott Jehl has written about the relationship between the size of a webpage and the perceived loading time that the user experiences:

Formerly, much of the focus in web performance was concerned with optimizing assets like images and fonts, which does make for a shorter overall page load time. But today there are techniques we can use in addition to file optimization that have an arguably larger impact on how soon our users can see and use the content we’re delivering.

Scott looks for two metrics to measure perceived loading time: “time to first byte”, and “start render”. Look for those when testing your site on WebPageTest.

✻ ✻ ✻

In a great video tutorial, Glenn Maddern explores currentColor and making parts of an interface inherit the color values from a parent element.


What have you learnt this week?

Robin Rendle:  So a couple of years ago if we needed to style a simple element with CSS we might’ve written code like this:

.box { 
  color: red;
  background-color: black;
}

We would’ve created a new class and added our styles within it. Lately however, it appears that a consensus is forming around “functional” CSS. The idea is to make separate classes for color, background-color, and pretty much any other CSS property. Then we can work more quickly by adding those tiny classes straight into the markup (Tachyons and Basscss are toolkits that take this approach to heart.)

Here’s an example of what we might write instead:

We wouldn’t even have to touch a CSS file because we’d already have those classes ready to go!

In fact, the very idea of this “functional” approach is to stop designers from having to write CSS in the first place, but it also lets us read HTML a whole lot faster. What happens if you remove the c-red class, you might ask? Well, the text will simply no longer be red.

There are all sorts of arguments to be made for these two approaches (and the many other methods of writing CSS), however for me, using functional CSS has changed the way I think about designing on the web. It’s encouraged me to write smaller, more readable chunks of CSS, to think in maintainable systems, and to start making tiny lego bricks of code that I can use to collaborate with other tiny bricks.

Until next time!
Team CSS-Tricks
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list