5 things you never knew about CSS

[Rss Bot 1]

For a long time, CSS didn’t contain a huge number of surprises. Developing at a leisurely pace, the language was content to style your fonts and float your divs, while languages like JavaScript did a lot of the heavy lifting.

However, in recent years, the language has enjoyed a midlife renaissance, with its W3C working group carving out much more real estate for it in the modern development landscape. Whether you’re putting together responsive website layouts, meticulously crafted animations or constructing pixel-perfect components, CSS now has an enormous amount of horsepower under its hood. But while this offers you a whole new toolkit when styling your sites, it does mean that its easy to miss new tricks that you can incorporate into your development workflow.

At Generate New York in April this year, our audience had the chance to learn some tips straight from some of the best and brightest CSS experts in the industry, such as designer and developer advocate at Mozilla and a member of the CSS Working Group Jen Simmons. 

But rather than hoarding these hacks, we wanted to share them with you and show you some the neat things Simmons taught us to help you up your CSS game. You can watch the full talk below or read on for the key takeaways.

01. Creating CSS grid layouts is a breeze

Okay, it’s probably safe to assume that at a lot of people have gotten this message by now. But, as Simmons’ talk makes abundantly clear, grid is a super smart way of laying out your sites. First of all, setting up your initial grid is a cakewalk. Want to just create a simple 12-column grid to start laying out your core divs and components? All you have to do is tell grid to repeat 12 columns, with each being an equal fraction of the grid:

And rather than faffing about with floats, placing elements is a breeze. Say you want a div spanning the centre of your site, leaving two columns of white space either side, again the code could not be simpler:

Basic stuff so far. But what Simmons' talk makes abundantly clear is how smart grid is. Before you’ve defined the position you’d like your content to take, CSS grid will automatically lay content out in subsequent rows or columns, making it easier to see the elements you’re going to structure. Alternatively, say you've gotten stuck into laying things out and you haven’t yet defined your grid; rather than leaving you staring at a borked layout, CSS will infer the number of rows and columns your grid should have from the maximum grid-row and grid-column values you’ve used.

02. Grid is nothing like HTML tables

When anything new comes along, there will always be people ready to criticise the change. CSS grid is no exception; it was certainly greeted with its fair share of naysayers, who claimed that it’s just a reheating of the stale, old practice of laying sites out with HTML tables.

Fortunately, Simmons' talk put this to bed. In the dark old days of web design, table-based grids were flat, inflexible things. The second a developer needed two elements in adjacent cels to overlap, they were forced to break down and save content as static images – which feels less old-fashioned and more palaeolithic.

Conversely, grid not only allows you to stack and overlap elements but it allows you to do so flexibly and responsively: rather than fixing layouts in stone, you can use it to dictate exactly how elements respond to and slide over each other.

03. Subgrid adds a whole new layer to layouts

If HTML tables are the dim and distant past and grid is the present, subgrid is the future. As you can see in Simmons' talk, grid only goes so far – a grid on a parent affects its children but any grandchildren don’t inherit the grid. And while you can place a new grid within the original grid, it won’t adhere to the parent’s rows and columns, leading to the kind of messy layout work you thought you’d left behind long ago.

Fortunately, subgrid solves this problem, meaning, if you like, your layouts can be grids all the way down. And thanks to the fact they adhere to the properties set by their parent grids, you can create some fantastic layouts with a very granular level of control in their grids.

04. Variable fonts are absurdly versatile

As you can probably tell from Simmons' delight tinkering with them in her browser’s dev tools, variable fonts are a big deal. Ship just a single variable font with your site and you can reference an almost infinite variation of weights, tracking and styles, effectively allowing you to do the heavy lifting that’s normally the preserve of entire font families. All in all, a cracking tool when building creative new layouts.

05. CSS smashes type layouts

Another great CSS secret is just how flexibly it handles type – an excellent example comes from Simmons' video. If you want to utilise languages that are conveyed from right to left, you can simply use the property ‘direction: rtl;’ to get them appearing as they should. Alternatively, say you want the lines of your paragraph to be rotated 90 degrees clockwise, you can just use ‘writing-mode: vertical-rl;’ – or ‘writing-mode: vertical-lr’ should you want your first line to appear on the left with each subsequent line further to the right.

While support is still mixed for both ’vertical-rl’ and ’vertical-lr’, these nifty snippets of CSS are worth bearing in mind when adding progressive style enhancements to your sites.

Learn more about CSS at Generate CSS

CSS is evolving all the time and, as you can see, there are always plenty of new tips and hacks to learn from. That’s why if you’re looking to spruce up your designs and elevate your layouts, you should come along to Generate CSS, our focused web design conference catering to all things CSS, which is taking place at Rich Mix, Shoreditch, London on 26 September.

And it's worth snapping up your tickets now. If you grab yours before by 5pm UTC on 15 August, you can save £50, paying just £199 + VAT. Buy your ticket now!

Related articles:

• First speakers announced for Generate CSS
• 19 cool CSS animation examples to recreate
• How to code smart text effects with CSS

View the full article