CSS trends to add to your stack

At WordCamp Johannesburg 2019, I gave a workshop about CSS trends. This post is a recap of some of the features we talked about. Below my slides, I’ll give a short introduction to each of these features with some examples and resources to explore.

Features explained:

• Animations
• Variable fonts
• Variables
• Grid & Subgrid
• Media-queries 4
• Attribute selectors
• Units and calculations

Animations

Using @keyframes allows you to set different steps in the animation process.

Example:

@keyframes traffic-light {
    0% { color: black; }
    25% { color: red; }
    50% { color: orange; }
    75% { color: green; }
    100% { color: black; }
}

h1.entry-title {
    animation: 3s traffic-light infinite;
}

Cool example: hover over the logo at data.blog (3 animations with the same duration: lever, toaster, and toast)

Variable fonts

Rather than having to import each font-variant, variable fonts allow for a wide array of variations with just one import. They also add a huge level of fluidity. While you would currently increase your font-weight from 100 to 200, variable fonts would allow values like 192 for very detailed tweaking, all from a single font-file.

More detailed description here. (Includes option to play around with them.)

@font-face {
    font-family:'Font Name'; 
    src:url('url');
}

h1 {
    font-family: 'Font Name';
    font-weight: 192;
}


h2 {
    font-family: 'Font Name';
    font-weight: 356;
}

You can even change a font’s “serifiness“: 🤯

Variables

While you used to have to use Sass or another preprocessor for variables you can do this now directly in CSS.

Advantages:

• Cascades: Variable can be set differently for more specific selectors — for example, have a different colour for the .entry-content than the body while still using the same variable name.
• No need for preprocessing.
• More detailed description on advantages can be found here or here

Format:

:root {
    --color_name: pink;
}

body {
    color: var(--color_name);
}

Grid (and subgrid)

Grid is a much easier way to position elements based on a grid you define. (My first contribution to WordPress core used grid, a tweak that @ryelle suggested.)

• Comprehensive guide (and specific focus on subgrid here, subgrip is the Inception version of grid)
• Grid garden (because gamification is fun)

Format:

div {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

}

div p:nth-child(2) {

    grid-column: 2 / 4;

}

Media-queries 4

The latest iteration includes some very nice extras that include a lot more options to address the rich diversity of devices that might review your site.

For example, the :hover pseudoclass only make sense on devices that have the option to hover over something. With most mobile phones for example, this is not the case. Putting that CSS in a media query will make that there are no odd issues like the drop down menu not opening because it only works on hover:

@media (hover: hover) {
    .menu > li:hover {
        display: block;
    }
}

A detailed introduction to media queries 4 can be found here.

Attribute selectors

Rather than adding a class or ID for each element that should have a different look, you can make that selection based on attributes of that selector. For example, with this approach, you can make URLs that point to other parts of your website look different than those that point to external links.

For example:

Format:

a {
    color: yellow;
}
a[href^="https://jhb.mystagingwebsite.com/"] {
    color: red;
}

Units and calculations

Relative dimensions are great, but they also can be a big nuisance. There are a few newer tweaks in units that make your life a lot easier. For example, units like vh are relative to your viewport rather than the units on the site. E.g. 50vh is 50% of the visible height of your browser window. So if 400px of the site are visible – adding 50vh to an element will give a height of 200px.

Even nicer is the ability to use this with calculations. Rather than figuring out what 3/7 of a 500px wide element is, you can just let CSS calculate it.

Format:

header {
    min-height: 100vh;
}

.side-bar {
    width: calc( 100% / 3 );
}

Especially the vh and vw additions are game-changers. They stand for “visible height” and “visible width” and allow you to define the size of elements based on how big the browser window of the customer is. Any value between 1 and 100 will result in between 1% and 100% of the visible area.

Resources for reviewing other unit options:

• Overview of units
• Introduction to calculations

Other nice feature lists

Other cool things to try out can be found in the following lists

• https://www.creativebloq.com/features/10-amazing-new-css-techniques
• https://medium.com/beginners-guide-to-mobile-web-development/whats-new-in-css-3-dcd7fa6122e1
• https://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use (it’s from 2013 but still has some things that aren’t super widely used — flexbox does have wide browser support now though)
• https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp