Skip to content
Homepage

New CSS features to make you fall in love with CSS again

In the world of JavaScript, interactive websites and apps, many developers have forgotten how beautiful and useful the CSS language can be. Why? The common perception is that CSS has no ability to manipulate data and is only used to beautify HTML by applying a ‘theme’ to elements like fonts, colour and spacing.

In this short article, I am going to share a few new features of CSS3 that will make you fall in love with CSS all over again. These features allow developers to do calculations via CSS, apply awesome filters onto images by using just a few properties, create responsive grid layouts without any framework and much more.

Browser support is still a bit spotty, however it’s certainly worth starting learning about these new features to stay ahead of the curve. Who doesn’t love being on the cutting edge?

1. CSS Filters

Applying filters to Instagram and Prisma images is fun, but imagine being able to do the same using CSS…
Wouldn’t that be fun? Hell yeah! That is what the developer community has asked for and and W3C listened.
Presenting you with more than eight CSS filters with effects like ‘invert’, ‘hue’ and ‘blur’ you can experiment with in your CSS. Browser support is quite wide for this feature and you can use fallbacks for filters too.

Here is some sample code. For more examples check out my CSS3 filter demos.

.blur {
    -webkit-filter: blur(2px);
    /* Safari 6.0 - 9.0 */
    filter: blur(2px);
}

.saturate {
    -webkit-filter: saturate(10%);
    /* Safari 6.0 - 9.0 */
    filter: saturate(10%);
}

2. CSS Variables

One of the biggest missing features in CSS has been variables. I used to hate having to copy-paste the same value and update it in many different places. Not having variables was tedious in many other cases as well.

For example, when multiple developers were working on a single CSS file and the same red was not consistent in my stylesheet.

But now, thanks to CSS variables* — write once, reuse always!!

:root {
    --margin-10px: red;
    --heading-fontSize: 42px;
    --heading-fontfamily: Impact;
    --string-name: 'Naina';
    --blue-color: --organe-color;
    --organe-color: orange;
    --foo: 100px;
    --bar: calc(var(--foo) + 10px);
    --f: calc(var(--bar) + 10px);
}

h2 {
    color: var(--blue-color), red;
    font: bold var( --heading-fontSize) var(--heading-fontfamily);
    --padding-global: 20px;
}

For more examples, check out my CSS variable demo.

Note: At the time of writing CSS variables are not supported across all browsers and devices but we can use tools like PostCSS Next in production to address this limitation by creating fallbacks.

3. CSS Mixins

If you hate to repeat same block of code again and again and love SASS/LESS mixins features, you will love native mixins. With CSS3 native mixins there is no need to move to pre-processors.

Just use the CSS @apply rule.

button {
    display: block;
    margin: 10px;
    @apply --button-style;
}

:root {
    --button-style: {
        width: 300px;
        padding: 30px 20px;
        border-radius: 5px;
        background: blue;
        color: #fff;
        font-size: 54px;
        text-transform: uppercase;
    }

Here’s a demo on CSS mixins.

4. CSS Grid

Ditch the floats, ditch the flex-box and say bye-bye to RWD (Responsive Web Design) frameworks. The future of web page structure is here — CSS Grids.

CSS Grids let you create 2D structures using CSS alone. In addition, CSS Grids enable you to divide your page into ROWS and COLUMNS. Not only does this allow you control over grid content, positioning and max-min-height/width but amazingly, the feature also comes with the new fr unit which brings the magic of responsiveness to your page. No more playing around with complex HTML structure, % width/height.

Just use CSS grids and you are good to go.

.grid {
    display: grid;
    grid-template-columns: 200px 2fr 1fr;
    border: 1px solid red;
    grid-gap: 20px;
    grid-auto-rows: 200px;
}

.section {
    width: 60%;
    margin: 0 auto;
    background: #eee;
}

header {
    grid-column: 1/4;
    background: red;
}

For more examples check out my CSS grids demo.

Note: This feature is not ready for production yet. For now, you can use CSS Grids in Chrome Canary through the "experimental Web Platform features" flag in chrome://flags

5. CSS Calc()

Hate to do the calculation of Divs without padding or borders? Hate to get into % calculation of columns? Well, now you can leave all the maths calculations to your CSS as it comes with a new property — calc().

All you need to do is just throw in the values and variables you want to calculate and it will do all the numbers by itself. Isn’t it impressive? So if you are not good at maths, no worries: CSS will raise your game!!

main {
    --padding-global: 10px;
    background: #eee;
    width: calc( 780px - var(--padding-global) * 2);
    margin: 0 auto;
    padding: 10px;
}

Conclusion

As you can see above, the future of CSS3 looks promising. Although browser support for some features is limited right now, soon enough we will be able to work with them in production too. So let’s dig in and experiment now to get ready!

Do you have more to add in this list? Let us know on Twitter.

Note: All the code demos are available here.
Videos of all the mentioned features are available here.