My 2014 suggestions to the W3C to improve CSS

Introduction

CSS is one of the greatest achievements of the web. It has made web development more open and easier to get into. It's made web development cleaner. It's made mobile development possible and responsive.

But there is still room for improvement.

This article is just a short description of the things I'd like to see come to CSS. I'd just like it to be taken a suggestion.

The suggestions

Reflection

Reflection is something I'd love to see come to CSS. What I mean is something like image reflection that is processed on the client side. This could be easily processed after the page loads and done as a background task.

On top of images being reflected, text could also be reflected.

This would be good because this means images which are processed on the client side such as uploading an image to a site, can be processed there.

Variables

SASS or Syntactically Awesome Style Sheets feature variables. The problem with SASS is that it is not supported by browser and needs compiled before use.

CSS may not be a programming language, and variables may not need to change at runtime, but in the following sample this has been demonstrated as to how they would work well.

$color1 = rgba(51, 51, 51, 0.7);
$color2 = rgba(255, 100, 0, 1.0);
$font1 = 'Times New Roman';
#container{
	background:#fff;
	color:#000;
	font-weight:100;
}
#main_content{		
	background:$color1;
	color:#fff;
}
.box{
	background:$color2;
	color:#000;
	font-family:$font1;
}
		

Async and deferred CSS

Async CSS refers to CSS that can be loaded without render-blocking. Deferring CSS means loading it after the rest of the page has loaded. Both of these would be ideal. JavaScript already has this, so why does CSS not have it?

It may seem a bit pointless but just as with when it is defered, CSS is not always the most important thing. An example of this is for additional CSS such as items that are only used to decorate smaller features of the site, and while it is bad practise to have mulitple CSS files due to the fact that it will increase the HTTP requests on the site, this could mean that some CSS could be prioritised over other CSS and reduce the amount of internal styling needed (as inlined or internal CSS currently loads first but is not as easy to maintain).

It would be even better if CSS could be told to wait or to try at the same time as the page load to do it's stuff.

Parent selector

This was not my own idea, but it was something I was looking for. I agree with the article found here at CSS-Tricks.

Columns are something that need implemented in a special way to retain the best support for older browsers. I implement them by having an outer divison (div) that holds the two columns. This outer division is given the clearfix class as depicted below:

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix {
	display: inline-block;
}
.column {
	display: block;
	float:left;
	width: 48%;
	vertical-align: top;
}
		

The columns are given floats and so on. What I'd like to see is being able give some CSS selector such that .column + .column:parent references the parent of the element selection, thus it would reduce the amount of time spent adding this clearfix class to the parent division.