7 CSS tricks that take your stylesheets to the next level

Frameworks like Bootstrap or Foundation make your life as a front-end developer pretty comfortable. But sometimes it pays off to dig a little deeper and apply your own styles, get your hands dirty and carefully maintain your CSS files so you understand each and every rule you’ve written, care about it, and make it work for you. If you know what I’m talking about, this article is for you. So without further ado, these 7 CSS tricks will take your stylesheets to the next level.

1: Use the box-sizing property

We as web developers share at least 1 common hatred: legacy Internet Explorer versions. Luckily, those days are far gone (for the most of us). But one of the things the old trusty IE did right was it’s logical approach to the box model. Example: in modern browsers when you make a 20% wide box but want it to include a padding of 10px, it will add the padding to the existing width. It has it’s uses, but most of the time, that’s not what I’m trying to do. Enter the box-sizing css property.

Below is a Codepen example of the scenario I’ve described above, with the box-sizing property set to ‘content-box’:

2: Fluid grids are easy with inline-block, flex or column layout

Making custom grids caused me a lot of headaches back in the days. Should I give each column an absolute width? How about responsiveness? Should I use floats or absolute positions for my 2 column layouts? Stuff like this made me worry way to much in the past, but not anymore. Here are 3 modern ways to make a fluid custom grid. Add media queries when necessary.

The ‘inline-block’ way

This method builds on the way browsers handle justification of text and elements that are displayed ‘inline-block’. The wrapper in this example (and, well, in the others too) is fixed, the width of the columns are a percentage of the wrapper:

There’s one caveat: you need a ‘stretcher’ element to make the justification work. Not ideal in all situations, but if you don’t care about justification and want elements to display inline without floats, ‘inline-block’ in combination with the text-align property is your friend. Goodbye clear-fix!

Flexbox

A couple of years ago flex-box was presented as the holy grail in horizontal and vertical positioning with CSS. Although I’m not sure if flex is really the holy grail, it’s definitely very useful when positioning elements in a grid, or otherwise.

Column layout

Now the least know method is arguably the most useful method: column based layouts. By defining a fixed column width of a fixed amount of columns in your stylesheet, the browser will calculate the best width/amount of columns based on the size of the viewport. And you only need 2 rules of CSS on your parent element!

column-gap: 15px;
column-count: 4;

To make this work as a grid however, you need to add these rules to the child elementws:

column-break-inside: avoid;
display: inline-block;

Check the example below and play with the width of the wrapper to see the results.

3: Gradients

Gradients are still very useful. We are way past the skeuomorphism trend and hopping aboard the flat-ui train. And that’s where we use big, bold, flashy gradients. If we’re going all modern, we might as well define our gradients in CSS. And guess what: it’s super easy!

4: Transitions

Animations belong in a stylesheet, not in javascript files that handle behaviour. Aside from that claim, which you may or may not agree with, using css for transitions also has some performance benefits: it enables hardware acceleration on mobile devices. That’s enough reason to stop using the jQuery .fadeIn() if you ask me. So let’s take a look at a simple CSS transition:

What is happening here? There’s some CSS to style the button, a small trick to display a triangle without the need for external images, and of course the ‘hover’ and ‘active’ transitions. Those are triggered by this rule `transition: all 0.3s ease;`, where ‘all’ is a to a reference to a css property (think: width, height, color, padding, or all). Once you get the hang of it, you can do some pretty cool things with CSS transitions. And a little help from the transform property which enables transformations like rotate, skew, scaling, etc. Try clicking the rectangle in the example below.

Now try figure that one out, the only javascript that’s being used is the ‘toggleClass’ method of jQuery. I borrowed some code from this guy so feel free to read his full tutorial if you want to figure out what’s going on.

There are more selectors available and there are a ton of resources if you’re interested in using them. The concept is easy though: instead of mindlessly adding classes you could logically apply styles to children of elements.

6:Generated content for pseudo-elements

Now this sounds complicated. But it’s not! All it means is that you can add content to existing elements via CSS. Still no clue what I’m talking about? Consider this: you’ve got a blog post with some internal and external links and you want to mark outgoing links with an icon. You could achieve that by manually adding the icon image before each outgoing link, which is pretty tedious and not so great for your average blogging joe. Instead, you could make use of the ::before and ::after pseudo-elements. Let me illustrate this with an example:

Now if you really want to see some CSS magic combining a lot of experimental features of CSS I’d recommend visiting the CoDrops blog. There’s some really creative content on there, and it’s really helpful if you’re looking for a stylish solution for creating some standard functionality in your website.

7: Text overflow

This one caught me by surprise, I never knew this was possible until I started doing research for this blog post. Apparently CSS has a ‘text-overflow’ property implemented since the days of Internet Explorer 6. So what does it do? Check it out:

Up until now I’ve always tried to achieve this with some tedious PHP functions that cut the text after X characters, or try to align the line-height of a wrapping div so the overflowing text wil beneatly hidden and add the ellipsis hardcoded. It was horrible, and I feel really enlightened now that I know this trick.

Wrap-up

While some of you will already know a lot of the mentioned CSS properties, I was genuinely surprised by how far we’ve come with modern browsers. I also thought a lot of these techniques weren’t ready for use in production, but the compatibility rates show the opposite. Combining these with a fallback using Modernizr depending on your support level will guarantee great performance on all platforms.

I also know I skipped a lot of interesting (although more experimental) features of CSS, but I’ll save those for a followup post in the future. For example: did you know CSS has a :fullscreen pseudo-class? I didn’t. Anyway if you’d like to suggest additions to this list: drop ‘em in the comments, I’d love to hear about them.