Grid related demos.

CSS Selectors from CSS4 till CSS1

The simplest way I’ve found (so far) to distill/explain srcset and sizes: https://t.co/I6YW0AqKfM

You also can't simply apply the background and padding to a <span> or an inline element. The left and right padding will only apply to the very first and very last line. On each of the middle lines, the background will butt up immediately next to the text.

Over the last few years, we’ve written a quite a few articles about responsive images. Now that responsive images have landed in browsers, it seemed like a good time to step back and cover the basics for those who are just starting to tackle responsive images.
Ergo, a new series of articles called Responsive Images 101 that will cover everything from why we need responsive images to how to pick the right responsive images solution.
Let’s dig in!

Flexbox will of course offer more than simple re-stacking of elements, but if that is all you need, you can look no further than CSS‘s display property.

Works for only vertically stacking elements.

CSS Grid Layout Terminology

Spikes are bad, and the general trend should be towards higher specificity later in the stylesheet.

Hacking Specificity https://t.co/o4Sjmr51nM

Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. via Pocket

A collection of usage examples for the CSS Grid Layout specification.

certainlyakey starred jonsuh/hamburgers

certainlyakey starred kaelig/hidpi

As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the different colors they may be over.

CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements. via Pocket

One of the most common use cases for SVG graphics is icon systems, and one of the most commonly-used SVG spriting techniques is one that uses the SVG element to “instantiate” the icons anywhere they are needed in a document. via Pocket

Actually, you might be in luck! If you want to style a tab according to the domain, the TAB element has an attribute called IMAGE which is the URL for the Favicon it displays. If the website has a favicon then you can do this:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
tab[image*="example.com"] {background:red !important;}

Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

At Alley, we frequently design sites that require any given component to appear in a variety of contexts. A visual style guide allows us to view the site not as a series of pages, but grouping of reusable components. Ultimately, this simplifies and standardizes the way our designs communicate. via Pocket

Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.