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(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(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.
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!
The secret is two fold:
- 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.
- 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.
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.
- Vertically centering an item next to another, larger item
- Dynamicly setting the height of adjacent columns equal to one another
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.
Furthermore, unlike true table layout, the solution above can easily be turned responsive by adding a breakpoint to remove the
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!
There are currenty no responses.