16 DevTools tips and tricks every CSS developer need to know

When it comes to debugging the front-end, if you’re like many developers, you basically live in your browser’s developer tools. But even after having worked in Chrome’s developer tools for quite a few years, I still come across tips, tricks, and features that I haven’t seen before…. Source: https://www.heartinternet.uk/blog/16-devtools-tips-and-tricks-every-css-developer-need-to-know/

Dark modes with CSS

With the introduction of dark mode in macOS, Safari Technology Preview 68 has released a new feature called prefers-color-scheme which lets us detect whether the user has dark mode enabled with a media query. That’s right…. Source: https://css-tricks.com/dark-modes-with-css/

Houdini’s Animation Worklet

TL;DR: Animation Worklet allows you to write imperative animations that run at the device’s native frame rate for that extra buttery jank-free smoothness™, make your animations more resilient against main thread jank and are linkable to scroll instead of time…. Source: https://developers.google.com/web/updates/2018/10/animation-worklet

Negative Grid Lines

Did you know you can use negative line numbers to position grid items with CSS Grid? I didn’t until recently – or rather, I hadn’t given it any thought, as I never felt like I needed to before…. Source: https://css-irl.info/negative-grid-lines/

Introduction to Bulma with React

I’ll come out and say it, I’m still a fan of Bootstrap. With that, I’m not oblivious to the many alternatives that are floating around out there. One of the more inspired CSS frameworks I have come across recently is Bulma…. Source: https://alligator.io/react/intro-react-bulma-components/

Solved With CSS! Colorizing SVG Backgrounds

This post is the first in a series about the power of CSS. CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging…. Source: https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

The Complete CSS Demo for OpenType Features

This project is a comprehensive CSS font-feature-settings demo for OpenType features, a refined version of Syntax for OpenType features in CSS by Adobe, licensed under CC BY-NC-SA 3.0. Featured fonts listed below are hand-picked with high quality…. Source: https://sparanoid.com/lab/opentype-features/