Css DevTools Tips

"What font is that?" or "Why is this font used?" are probably questions you've a... Read more

To make sure your webpage loads and appears fast for your users, load only the CSS and JS code that... Read more

In CSS, you can use the prefers-color-scheme media feature (docs) to detect if the user prefers usin... Read more

Sometimes scrollbars appear on a web page in places we don't want them to. And when this happens, it... Read more

When selecting elements from the page using the inspect tool, the hovered elements get highlighted,... Read more

Sometimes we write CSS code that's entirely valid but has absolutely no effect at all, and this can... Read more

Modern browser DevTools provide a handy tool to inspect and modify CSS animations, CSS transitions,... Read more

Sometimes we need to uniquely identify an element that lacks an identifier, so that it can be refere... Read more

You can extract all the styles of an element in one go by using the Copy styles feature. No need to... Read more

CSS cascade layers is a CSS feature that allows web developers to define their CSS styles in multipl... Read more

Sometimes I need a blank canvas to prototype an idea with HTML and CSS. Something outside of the web... Read more

A really useful way to position elements on a CSS grid is using the grid-template-areas property. Wi... Read more

Operating systems offer an accessibility feature where the colors shown on the screen are converted... Read more

You know how you can paste a CSS property name or value in the Styles (or Rules) panel? Well, you ca... Read more

When selecting elements from the page they normally get highlighted on hover and selected on click.... Read more

How do certain CSS properties apply to the page isn't always an easy question to answer. While some... Read more

Do you use a CSS-in-JS framework? If so, you know how frustrating it can be to copy CSS from DevTool... Read more

If you use :hover, :active, and other such pseudo-classes in CSS, you can actually simulate these st... Read more

See your page in 3 dimensions to quickly find out how deeply nested it is, fix z-index stacking issu... Read more

When playing with styling or layout code in DevTools, it's useful to be able to change widths, margi... Read more

If you spent time changing CSS in DevTools, either in the Rules panel (in Firefox), or in the Source... Read more

If you don't remember the CSS syntax for the box-shadow property (and who does!), then Chrome and Ed... Read more

CSS custom properties (also called variables) are very useful to avoid repeating values in CSS, like... Read more

Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexa... Read more

Font CSS properties such as font-size, line-height or letter-spacing can be expressed in multiple di... Read more

The console.log output can be styled in DevTools using CSS. console.log('%c Hello World', 'color: or... Read more

Simple, yet powerful, * { outline: 1px solid red; } is a useful debugging trick that helps understan... Read more

In CSS, several different properties use angle unit values, such as the rotate() function of a trans... Read more

Chrome and Edge both have a visual editor useful for tweaking flexbox and grid alignment properties.... Read more

When you want to know which elements a given CSS rule will apply to, in addition to the currently se... Read more