Spurred on to ride tomorrow’s CSS
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:
- Pattern Libraries by Adam McCombs
- Automatic UI Testing by Kevin Lamping
- Using tomorrow’s CSS today by Brian Graves
- Applicable ES6 with Tips & Treats by Wes Bos
- Data Visualisation with d3.js by Julia Konivestska
- Attending a Dia de los muertos event with all the attendees.
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.
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)
@media (30em <= width <= 50em)
…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.
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.
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:
- Color Blending
- Tints & Shades
It is worth mentioning that, even if you’re not using PostCSS, this feature is currently supported on all browsers except Edge.
Just like SASS, nesting comes in handy to avoid repetition.
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.
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.
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.
Want more? Join our newsletter.
We love sharing our latest web design tips, insights, and projects.