Using CSS counters - CSS | MDN

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are d...

At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass, this can be achieved in a relatively non-hackish way without CSS hacks.

Step 1

Move your curr...

All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today.

No images whatsoever.

Clever hack to allow user interaction without Javascript (by using radio buttons and selecting on :checked).

There is a kinda secret, yet well supported CSS feature called currentColor. It's like a special CSS variable that has been supported in almost all browsers for almost all time (see linked Caniuse).

Usage

The currentColor value can be us...

David Walsh from Mozilla shows how to fire 'DOM changed' events from CSS. No need for JS to observe DOM mutation events or check the DOM manually – simply put: no deprecated API, no retarding loops.

With the CSS in place you add a listener for yo...

If you want to distribute a <table>'s width equally over its columns, you can use the following CSS property:

table-layout: fixed

It is supported by every browser ever.

CSS transitions are a simple animation framework that is built right into browsers. No need for Javascript here. They're supported by all browsers.

Basic usage

Transitions are used to animate the pat...

tl;dr

In Chrome DevTools in the Layouts tab you have handy options to debug CSS Flexbox and Grid. Including:

• Display size and lines along with labels
• Changing their attributes
• Change how overlay is colored and fastl...