Close

Finally !!! CSS Variable has arrived.

CSS variables, more accurately known as CSS custom properties, are landing in Chrome 49. CSS is going to be like a CSS pre-processor itself such as SASS, LESS in the future.  CSS variables are now officially part of the CSS specification – details here.

CSSWG was experimenting about CSS variables since 2012 – details here . There is another news that Google has now joined Mozilla by supporting this great feature.

CSS Variables

 

Playing with CSS Variables.

  1. How it works.
  2. Override CSS variables.
  3. Override CSS variables in media query.
  4. CSS variable experiment with javascript.
  5. Browser support.

 

1- How it works.

I already mentioned that CSS variables are known as CSS custom properties.

Create a root class in CSS file.

Create a Variable ( You can declare anything in variable such as color, width .. )

Call your variables anywhere you want in that css file (you can replace ‘element’ with ‘body’ in this below code)

See the Pen CSS Variables by ShibinRagh (@shibinragh) on CodePen.

 

 

2) Override CSS Variables.

We can override all css variables – see the demo.

See the Pen CSS Variables override by ShibinRagh (@shibinragh) on CodePen.

 

 

3- Override CSS variables in media query.

We can include the variables with a different value in media query break points.

you can replace ‘element’ with ‘body’ in this below code

 

 

4- CSS Variables experimenting with Javascript.

Sharing CSS Variables with JavaScript.

See the Pen Pure CSS Variables Experiments with JavaScript by UXDots (@uxdots) on CodePen.

 

 

5- Browser support.

Firefox: Version 31+ (Enabled by default)
Chrome: Version 49+ (Enabled by default).
Safari/IOS Safari: Version 9.1/9.3 (Enabled by default).
IE Edge: In development.
CSS Variables

We can check browsers supporting details- can i use

Mozilla has posted an article about this – link

 

Conclusion.

CSS had already introduced calculation features calc it is an amazing feature, another one is flex-box, now they have introduced a variable feature.
Without doubt, we can say CSS Variables will be a supreme feature in future, at the moment it works only in the latest version of browsers. Web developers are really excited with that CSS as it is going to be awesome.!!!

 

 

Latest stories

  • Things to Consider Before Hiring the Right Developer

    As the tech talent war continues to rage, it is no wonder that hiring the right developer takes forever. Managers face numerous difficulties not just hiring but retaining the right talent.If we are to go by statistics, the average time-to-hire for tech positions in the USA is 35 days. A realistic expectation is crucial while […]

  • 4 Ways To Reduce your App Development Costs by 50%

    Being multi-channel has become synonyms with the modern digital environment.Brand presence in these channels is critical to reach potential customers making it a vital business challenge of  the digital era.  Mobile apps have become an integral part of modern business. They are an extension of your brand. Considered as the most powerful business tool, apps […]

  • Tips to build a productive startup culture in your development company

    The word Startup paints a picture of tech-savvy professionals driving casual dress codes and sipping coffee from biodegradable cups in a space with enviable interior design, ping pong tables and bean bags. Ouch, the stereotype hurts! There is more to startups than bean bags and beer taps, it is the startup culture that fuels innovation […]

Leave a Reply

Your email address will not be published. Required fields are marked *