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
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 font-weight
100
200
192
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 “
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
- 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;
}

p
of the original div
span from #2 to #4 gridlinesMedia-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, :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 vh
vw
Resources for reviewing other unit options:
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
Leave a Reply