CSS Custom Properties – New CSS Features to Learn in 2017

September 29, 2017 • Best Graphic and Web Design Blog, Best Web Development Blog, Blog • Views: 2,593


CSS Grid is one of the best layout feature and is a part of CSS toolset. Using this amazing Cfeaturesset, you can get rid of workarounds and hacks.

In the year of 2017, CSS custom properties added new advance features. These features are helpful in the improvement of the quality of the web designing and development field.

Three most essential features which you need to learn in 2017 are

1. Feature Queries
Feature queries are now supported in every major browser.

Feature queries allow us to wrap CSS in a conditional block. But, it will be applied if the current user agent supports a particular CSS property-value pair.

A simple example of this is to only apply Flex box styles to browser which support display: flex-

@supports ( display: flex ) {
.foo { display: flex; }

Additionally, using operators like not as well as and, we can create more complicated feature queries.

For example, we can detect if a browser only supports the old Flexbox syntax-

@supports ( display: flexbox )
( not ( display: flex ) ) {
.foo { display: flexbox; }

2. Grid Layout
The CSS Grid layout module defines a system for the creation of grid-based layouts.
It also has similarities with a Flexbox; a box layout module but is more specifically designed for page layouts.

Explicit Item Placement
It is important to note that a grid is made of the grid container and Grid items.
In CSS, we can explicitly and easily organize the order and placement of the grid items.

Flexible lengths
The CSS grid module introduced a new length unit, the fr unit, which generally represents a fraction of the free space left in the grid container. This allows us to apportion width and height of grid items depending on the available space in the grid container.

We can specifically define gutters for our grid layout using grid-column-gap, grid-row-gap, as well as grid-gap properties.

These properties accept a <length-percentage> data type as value, with the percentage corresponding to the dimensions of the content area

3. Native Variables
Native variable method is used for creating author-defined variables, which can be further assigned as values to CSS properties. For example, if we have a theme colour which we are using in different places in the stylesheet, we can abstract this out into a variable, instead of writing actual value multiple times.

: root {
–theme-colour: cornflower blue;

h1 { color: var(–theme-colour); }
a { color: var(–theme-colour); }
strong { color: var(–theme-colour); }
const rootEl = document.documentElement;
rootEl.style.setProperty(‘–theme-colour’, ‘plum’);

All these above mentioned features are some of the most advance features which you need to learn. Using these advance features, you can improve the quality of your developing site.

Share this Article

Tags: css custom properties,css grid layout,website design and development,