4 CSS Tricks Everyone Should Know

“CSS is magic,” someone joked to me recently, as I demonstrated the pros and cons of a CSS3 pseudo-selector (specifically :nth-child). This got me thinking about Arthur C. Clarke’s third law of science and technology: “Any sufficiently advanced technology is indistinguishable from magic.” While CSS is still leagues away from being indistinguishable from magic (although that depends on the observer, I guess), there are truly some excellent magic tricks that everyday developers might not have figured out yet and that code newbies might not immediately pick up on. The CSS tricks and techniques below, listed roughly in order of difficulty with the easiest being at the top, are very useful approaches to every day problems that I wish I knew when I first started out. More importantly, they are accessible to developers at every level.

:nth-child vs :nth-of-type

Chances are – if you’re reading this – you’re already familiar with the :nth-child pseudo-selector introduced with CSS3. If you’re not, it’s a pretty awesome way to set specific or alternating styles. You’ll see it most frequently applied to tables, but there are plenty of examples out there on a whole range of markups. I imagine you’ve seen tables with one row of light gray, another with no background color, ad infinitum? Yep. That’s likely :nth-child(odd) or :nth-child(even). What you may not be aware of is its more awesome cousin, :nth-of-type.

Recently, I was styling a set of div elements that had to alternate background colors. Under normal circumstances, I would have used the nth-child pseudo-selector and called it a day, but the editor I was using was applying a <br> in between my divs! This meant every time I set :nth-child(even) or :nth-child(odd), it would either target either every div element in that area, or none of them (selecting, instead, the <br> element). As frustrating as this was, I knew there would be an answer. :nth-of-type(even) only targeted the div elements, ignoring the <br> tags completely. See the codepen below for a better visual demonstration of the problem and the solution.

See the Pen nth-of-type vs nth-child by Casey (@xace90) on CodePen.

As you can see on the nth-child side, trying to target div:nth-child(odd) selects all the div elements, because the <p> element is the even-numbered child of the parent element. But it works beautifully on the nth-of-type side, targeting only the odd and even divs respectively, disregarding any other element in between. And the best news is that both these things are supported by all browsers from IE9 onwards. Surely, while nth-child works wonders on tables, where it’s unlikely to be interrupted by other elements, nth-of-type has a wider reaching range of possibilities.

Fully Responsive iFrames

It’s so easy to drop a youTube embed code into an HTML page. Look, below, I just did it!

But, if you can, try resizing your window. Go ahead; I’ll wait (if you’re already on mobile, you should already see the problem). In the example above, you should see it either run off the page or screen. In the one below, you’ll see it keep 100% width, but at the cost of losing its aspect ratio (a la the black bars at the top and bottom). So what are we to do? By the way, if you just want the quick fix below and don’t care about maintaining aspect ratio, just add max-width: 100% to the iframe style. For those of us more interesting in perfection, follow me to the next section!

The answer lies in the codepen sample below. No matter how much you resize the window, the ratio of the iframe stays the same, and it will never fall off the screen again!

See the Pen iFrame Responsive Ratios by Casey (@xace90) on CodePen.

The secret is two fold:

1. Encase the iframe in a wrapper and give that wrapper a width that works for your project. This will be the width of the iframe.
2. Set the padding on the container’s bottom equal to the height of the video divided by the width. This is the aspect ratio in percentage form. If that sounds confusing, don’t worry! Just keep plugging in numbers until it looks right.

Obviously there are other rules, in the codepen that you need to include, but it’s pretty easy to figure out what they do. If you have any questions, you’re welcome to ask them in the comments.

CSS Transitions on Hover

When I learned how to write CSS, transitions weren’t a thing (or, if they were, they never came up in my resources). Whenever I thought to do any form of animation, I went right to jQuery. Now I know better. Now I realize I can add pretty, user-friendly features with one extra line of code. Now we can remove jarring, janky hover effects and replace it with something smooth as silk. Check out the pen below for a demonstration. Note: Transition effect exaggerated for demonstration purposes.

See the Pen CSS Transition + Hover Effect by Casey (@xace90) on CodePen.

My goal here is not to argue that we should always be using transitions. Like everything in regards to user experience, every detail needs to be considered and tested. You may want to use a transition on a tab to make it slide out on hover and no where else, and that’s fine. But if you decide to use a transition, CSS is significantly lighter than any jQuery or JavaScript solution. And it even has a lower bar to entry than jQuery or JavaScript. Code newbies with a couple weeks of CSS can make pretty effects with a CSS transition without having to learn a whole new language. All it took to implement all those hover effects in the codepen above was transition: .8s.

This technique is the least supported right now (starting around IE10), but it’s important to note that your site won’t break on older browsers. The hover effects will default back to being instant rather than gradual.

If you have questions I’ll happily respond to them in the comments below.

The Case for CSS Tables

I heard a joke once: “A web developer walks into a bar. She leaves when she sees the table layout.” Any developer worth their salt in the modern design world knows that table layouts are for tabular data, not for page layout. I wouldn’t dream arguing otherwise. For one, it’s inherintly unresponsive. For two, it ties your markup to the layout, instead of keeping them separate. That said, the CSS rule display: table; is a remarkably powerful and underutilized tool that’s been in the CSS specification since 2.1. Particularly, there are two common problems web developers run into that can be solved using this simple approach.

1. Vertically centering an item next to another, larger item
2. Dynamicly setting the height of adjacent columns equal to one another

Traditionally, I’ve seen the first one accomplished using varying degrees of margin-top, but can be extremely difficult to maintain and requires several different rules based on the screen size. The second one I’ve seen usually accomplished via JavaScript. We even have our own in-house script that we deploy when needed, but not only is JavaScript heavier than CSS, our script also comes with it’s own, other drawbacks. Lo and behold, my CSS solution to both of these problems!

See the Pen The Pros of CSS Tables by Casey (@xace90) on CodePen.

So you see two things in the pen above. One, the content in the middle column is centered vertically compared to the larger items to the left and right. This is done with the css table-property vertical-align: middle; which only works on table elements. If you replaced one of those columns with an image, you could center the text to the left or right based on the height of the image. And it would work dynamically, unlike if it was set via margin-top.

Two, all of the columns are equal height and will stay equal in height as you add or remove content. There’s no JavaScript or CSS overlay forcing height onto them.

Furthermore, unlike true table layout, the solution above can easily be turned responsive by adding a breakpoint to remove the display: table;.

I encourage you to play around with this, as well as all the examples above. They’re neat, helpful ways to improve everyone’s quality of life. Fewer sleepless nights for developers trying to hack something together, designers no longer frustrated that their designs weren’t met, and project managers confident that the client and/or users are getting the best possible experience.

Please do leave comments or questions below!