Front-end22 april 2015

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’:

See the Pen Box sizing | Content-box by Daniel Sneijers (@danielsneijers) on CodePen.0

 

And here’s the same example with the ‘box-sizing: border-box;’ applied to the box:

See the Pen Box sizing | Border-box by Daniel Sneijers (@danielsneijers) on CodePen.0

 

Also, instead of applying this rule manually to every element you want to style, you could add ‘* { box-sizing: border-box }’ to the top of your stylesheet and stop worrying about it altogether.

Compatibility: 96.99%
More on this topic: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

 

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:

See the Pen Flexible grid | Inline-block by Daniel Sneijers (@danielsneijers) on CodePen.0

 

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!

Compatibility: 97.16%
More on this topic: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

 

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.

Here’s a copy of the previous example with flexbox:

See the Pen Flexible grid | Flex by Daniel Sneijers (@danielsneijers) on CodePen.0

 

Now flex box has a lot of options, far more than I’ll describe in this short blogpost. If you’re interested in the power of flex-box I’d recommend reading the guide below.

Compatibility: 92.97%
More on this topic: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

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.

See the Pen Flexible grid | Column by Daniel Sneijers (@danielsneijers) on CodePen.0

 

Compatibility93%
More on this topic: https://css-tricks.com/guide-responsive-friendly-css-columns/

 

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!

See the Pen CSS gradient by Daniel Sneijers (@danielsneijers) on CodePen.0

 

Just one line of code. Ok we’re cheating a bit here, because of you want the proclaimed 90% browser compatibility you need to prefix it for legacy systems, but we’ve got build tools for that, right?

Compatibility: 90.12%
More on this topic: http://www.colorzilla.com/gradient-editor/

 

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:

See the Pen CSS transitions by Daniel Sneijers (@danielsneijers) on CodePen.0

 

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.

See the Pen CSS Transition by Daniel Sneijers (@danielsneijers) on CodePen.0

 

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.

Compatibility: 90.05%
More on this topic: http://blog.alexmaccaw.com/css-transitions

 

5: CSS3 selectors

CSS3 selectors are your friend. They make a lot of tasks easy that were hard to do in the past. For example: make the intro of your blog post a bigger font size? Just use the :first-of-type selector.

See the Pen First-of-type by Daniel Sneijers (@danielsneijers) on CodePen.0

 

Quite easy. Another thing that was a hassle to do without javascript or serverside code was alternating row colors in a list. Not anymore: the :nth-child(even) selector will handle that.

See the Pen nth-child selectors by Daniel Sneijers (@danielsneijers) on CodePen.0

 

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.

Compatibility: 97.02%
More on this topic: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

 

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:

See the Pen Pseudo-elements by Daniel Sneijers (@danielsneijers) on CodePen.0

 

Simple enough. If you feel adventurous you could even combine pseudo-elements with css transitions to create some unique buttons styles, only using CSS:

See the Pen CSS ::after example by Daniel Sneijers (@danielsneijers) on CodePen.0

 

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.

Compatibility: 96.99%
More on this topic: http://tympanus.net/Development/CreativeButtons/

 

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:

See the Pen Text overflow by Daniel Sneijers (@danielsneijers) on CodePen.0

 

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.

Compatibility: 96.96%
More on this topic: http://frontendbabel.info/articles/css-tricks-by-wargaming/

 

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.