Rising Stars and Falling Comets in the CSS Universe

CSS is our friend; the relationship between it and web designers has been a bit turbulent over time, but near the end of the first decade of the new millennium, it settled down with mutual love and respect (in the meantime Internet Explorer has met its fate but nobody mourns the loss, right?). But in the Word Wide Web nothing remains unchanged forever, and lots of things are happening in the CSS world. So let's say farewell to what has served us well in the past but cannot take on the challenges of the future. Let's get a peek on new features that are about to shine tomorrow.

Bye, bye Float and thanks for all the headaches

Float is dead? Not yet, but it's not going to be the next align="center" either, it just won't be used to build complex layouts anymore. When table-based layouts were deprecated in favor of more semantic div-based ones, web designers had troubles implementing some designs without using tables, and the solution was to float elements next to each other. Honestly, float never seemed a robust solution; it was not so easy to master and required the cumbersome use of the clearfix hack, but it comfortably made its way until now. So, why do we need to say farewell to a tool that is one of the foundations of modern layout building? Because we have a better solution: flexbox. Flexbox has been around for several years now, and it's widely used, but it always had to be handled with care because of its complex syntax (required to support older browsers) and some glitches with some old, but still used, browsers. After many years of test-driving, flexbox is now ready to take over the throne of its predecessor.

Flexbox will be the main tool for layout building… now

Flexbox is actually a set of properties that fall under the name of CSS Flexible Box Layout Module; they were conceived to offer greater control over aligning and resizing elements in the layout building process. It was released quite early and has undergone several revisions, therefore producing a confusing syntax that still scares a good number of developers, but eventually it pushed through, probably because it’s the most powerful feature created since the release of CSS3. Bootstrap, the popular CSS framework, in its new version 4, has left float in favor of Flexbox, and this move has convinced the most skeptical web developers to embrace it. It offers many advantages, compared to float, and many of the CSS headaches that plagued us in the past can be cured easily with Flexbox.

Preprocessors will eventually die, but you must still be good with them

Preprocessors like SASS, LESS or Stylus have greatly improved our CSS workflow, but they will become useless pretty soon. There is quite a bit going on in the CSS specifications, and many interesting features are now out, even as we speak, but with limited browser support; as soon as this will be reliable (nowadays every major browser updates itself automatically, so this process is much quicker than in the past), many new engaging scenarios will be revealed. New revolutionary properties have been released in the past, but this time the newly released features will replace all the nifty and handy functions that once made us fall in love with CSS preprocessors. We will have variables, feature queries, nested selectors, color functions and even mixins (with the @apply rule); if you are a SASS user, this should ring more than one bell. Of course, today’s preprocessors are needed more than ever, since we won't be able to use these new properties safely for quite a while but when the transition finally does happen, it will be a smooth one.

CSS Grid is all you need

The CSS Grid Layout Module defines a system for creating grid-based layouts; it shares some similarities with flexbox (they actually work quite well together), but it has many more features and was conceived for handling the whole layout, while flexbox was designed to organise just parts of the the layout. As Chris Coyer said, Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites. A grid is made up of the Grid Container (created with display: grid) and Grid Items, and we can easily set the placement and order of the grid items, independently of their placement in the markup. Aligning items inside the grid is almost as trivial as it was in flexbox. Browser support for CSS Grid is pretty good even today; you may be surprised to know that it’s supported even by Internet Explorer 10 (with an outdated syntax, of course), since some members from the IE 10 team were involved in the project from the very start. But, please, don't start to be too enthusiastic; there's still a critical point. In fact, Safari support is not so good, since it starts only with the most recent version for desktop (ok, not that widespread) and mobile (damn, numbers are huge): devices with iOS version less than 10.3 are cut off from this wonderful tech, but do not despair: you can still use media queries to fix the layout.

Some people are debating if learning CSS is still useful; the rising popularity of React.js and other similar frameworks has lead some developers to think that CSS is dead but this is a huge misconception. Changing the way CSS is injected in the page does not mean you don't need to know about it. React does not build the layout; it just adds some new and exciting possibilities. The upcoming new CSS properties will just make the internet a more funny and exciting place for designers and developers; thanks to CSS, once again.

Ready to start? Create your free account now

More great blog posts from Alessandro Loverde