10 CSS Tricks You Need to Know About (Part 2)

Continuing our series on CSS tricks where you should probably read about the first one, I have collected more tricks that have the potential to blow your mind and ask why you never knew about them before.

CSS Tricks Part I

1 — Check for user color theme preference

If you ever need to detect whether the user prefers dark or light mode to style your site accordingly, CSS gives you this ability through the media query API.

@media (prefers-color-scheme: dark) {
   // your code for dark mode here
}

watch video

2 — Text tooltips

CSS tooltips are easy and if planned and use right, can do a whole lot for you. The limitation is that they can only show text but I went over so many details in a video dedicated to this where I demonstrate how to add positioning, theme, and more. But this relies on pseudo-elements and the ability of their content being something you set in an attribute of their parent. Then all you do is the absolutely position it and style it.

<button type="button" class="tooltip" data-tip="This css tooltip">
   I have a Tooltip
</button>

// only add tooltip when there is a message
.tooltip[data-tip]:not([data-tip=""])::before {
  content…