Three weeks ago, I was given the opportunity to attend the 5th annual CSS Dev Conference in charming San Antonio, Texas.  As a junior developer at my first DevConf, the experience was both an enrichment class and an exercise in self-assessment.

Before going any further, here’s a list of my personal highlights:

There were a lot of topics that, although very enticing and fascinating, still require a little more digging before I can demonstrate them properly. PostCSS came up several times throughout the conference and stands out as something I can start applying immediately. Brian Graves' presentation was especially informative and is the main reference for the following.

PostCSS

It's been around for awhile, but several speakers did a good job selling it and ultimately won me over. PostCSS is similar to Babel for JavaScript in that it enables you to write vanilla CSS while making use of the upcoming specs (let’s refer to them as “CSS4”), and compiles everything to stable CSS like a preprocessor. Another reason you might consider integrating PostCSS in your stack is the ecosystem of custom plugins and tools. For instance, if I want to enforce consistent typing conventions for me and my team, I’ll add stylelint plugin.

With PostCSS, I can start using these new features:

Media Query Range Context

Media Queries Level 4 specs enables a cool shorthand for range contexts.  Thus:

@media (max-width: 30em) and (min-width: 50em)

can become

@media (30em <= width <= 50em)

See the Pen WoexLg by Stphane (@20hertz) on CodePen.

...and a few ideas stolen from SASS, like:

Custom Properties (variables)

A variable contains a value that you can subsequently use multiple times, avoiding repetition. They're extensively used in programming languages. But now, with Custom Properties, CSS gets to be one of the cool kids.

See the Pen CSS Custom Properties - Intro by Stphane (@20hertz) on CodePen.


Start by defining in which scope your custom property will be made available by nesting it in a keyword preceded by a colon. In our example, the :root keyword means it will be available globally. You then define the property with a double dash and assign it a value.  Then to use the custom property, it has to be referenced inside the var() function as an argument.  This function can actually take a second argument   a fallback value – which is used when the custom property has no assignment (no value) or is invalid.

Color Functions

CSS Color Module Level 4 introduces the color() function. It takes a color as a first argument, and any subsequent arguments are “adjusters”.  You have adjusters for:

  • RGBA
  • HSL/HWB
  • Color Blending
  • Contrast
  • Tints & Shades

See the Pen MjMNEj by Stphane (@20hertz) on CodePen.


It is worth mentioning that, even if you’re not using PostCSS, this feature is currently supported on all browsers except Edge.

Nesting

Just like SASS, nesting comes in handy to avoid repetition.

See the Pen dpBxQQ by Stphane (@20hertz) on CodePen.

Bonus

As a side note, Jen Simmons' talk helped me to become a better person with these tips:

CSS Shapes Module Level 2

The CSS Shape Module enhances its specs with new properties like shape-padding and shape-margin… but who am I kidding? I didn’t even know about CSS shapes on any level before attending CSS Dev Conf.  So let’s just talk about shapes, period.

I’ve always crafted non-rectangular shapes by applying the transform property on one or many elements.  This worked out, but adapted poorly to the content inside and around it, especially when resized.  But since 2014, we have this:

See the Pen Wrapping Text Around A Circular Image With CSS Shapes by Stphane (@20hertz) on CodePen.


This makes it possible for designers to loosen the way they lay down text and take inspiration from print design. CSS-tricks made a handy list of them you can use on the fly.

Object-fit

Ever looked for a way to have more control on how an image would resize depending on its viewport (regardless of media queries)?  Nesting an image in a div and setting the latter’s overflow to "hidden " works, but is not optimal. The object-fit property gives you more fine-grained control on the aspect ratio depending on the size of its container.

See the Pen mrNadx by Stphane (@20hertz) on CodePen.

Resize window to view effect.

My first CSS Dev Conf was a great learning experience, and I'm certainly looking forward to digging deeper into many of the topics that were introduced. For more on the conference, check out this roundup of attendee write-ups, speaker decks, and other resources.

Design & Code Events