Some handy CSS tricks

Let’s discover some nice but less-known CSS feature!

This article is also available on Medium.

Any web developer knows the irreplaceable trio of programming languages: HTML, CSS and JavaScript. Those are the base skills you’ll need as soon as you start making websites or web apps…

… but do you really know these tools? For example, how much do you know about CSS?

Today, I’m going to share a few handy tips and features that might help you boost your styles and designs, or create dynamic content only with CSS! 🙂

Setting multiple classes on an element

You might be familiar with the CSS pattern where you assign the same style to multiple elements, using a comma ,:

#my-id, .my-class, .my-other-class {
    color: red;
    font-weight: bold;
}

But it’s just as easy to do the reverse and assign multiple styles to a given element – for example, you can easily give several classes to a tag by separating them with spaces:

If you want some style to apply only when there are at least a set of specific classes, you need to put all the required selectors next to each other in your CSS:

Showing the page title

Most HTML pages are divided in two main parts: the <head> and the <body>. By default, we only see the contents of the <body> in a web page… but you can totally show some additional info from the <head> block, too!

Just use the right tag selector in your CSS:

Positioning an element at the center of the screen

Nowadays, UIs have become more complex. In particular, with the ever growing number of mobile apps, designers have had to prepare layouts that work on way smaller screens. To do this, a common technique is to think in terms of depths and layers; that’s typically something that the famous Material Design does, with its concept of elevation:

And, of course, it’s also the idea behind the popups that you show whenever you want the user to confirm an action, or choose between some options:

But do you know how you can easily position such a popup in the middle of the screen? The trick is to use absolute positioning, and the transform CSS property to “re-anchor” your element in its center rather than its top-left corner:

Note that if you want to compute a position in the center of another element, you can use another technique and instead use a grid display:

Border or outline?

If you’ve worked with some form inputs, you might have seen some overridden properties like the outline property for the focus state.

But do you know the difference between the border and the outline of an element? 🙂

In short, the border is inside the element – so, if you increase the size of the border, then you’ll also increase the size of the element. On the other hand, the outline is outside the element – so, if you increase the size of the outline, the element will keep its size and the ribbon around it will grow on its own.

Both the properties are written in the same form, though:

.bordered {
    border: 3px solid black;
}
.outlined {
    outline: 3px solid black;
}

Auto-numbering your sections

Another cool trick is to create a CSS counter and use it in a tag type content – ’cause yes, we can actually auto-increment a variable and prefix some elements with it, all in CSS!

This can be done with the counter-increment and content properties:

The :is and :where selectors

To wrap this up, let’s see a way of shortening our multi-selectors and avoiding redundancy. Although they’re quite new and not available on all browsers yet, the :is and :where selectors allow us to transform something like this:

#my-id a:hover,
.my-class a:hover,
.my-other-class a:hover { ... }

To something like this:

:is(#my-id, .my-class, .my-other-class) a:hover { ... }

Or this:

:where(#my-id, .my-class, .my-other-class) a:hover { ... }

So – what’s the difference between the two? It’s about specificity: the :is selector uses the specificity of its most specific selector, whereas the :where selector has a specificity level of 0 (so it’s easier to override later on, if need be…).

Conclusion

And that’s it for today! In this quick article, I listed a few “hidden” features of CSS, some handy but not-so-well-known techniques and patterns that can make your UIs even more attractive and dynamic!

I hope you like it – and as usual, feel free to leave a comment with your ideas for other tutorials I could write about web dev! Thanks a lot for reading 🙂

Leave a Reply

Your email address will not be published.