Hot tips CSS

Here a curated collection of css snippets that you can use for determinate situations or just for fun. Let’s start.

Image rendering

img.QRcode {
image-rendering: pixelated;

This property is useful to render QR codes and image thumbnails to increase their quality.

Check empty nodes

my-component:empty {
display: none;

Hide your element when have no content inside. Returns and white spaces are considered as content.

Shape your text

p {
shape-outside: polygon(0 0, 0 200px, 300px 600px);

Change the way how content will wrap around your floated elements.

Plain SVG as background

my-component {
background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');

Use <svg> as css background without convert it to base64.

Disable all user interactions

[data-untouchable] {
pointer-events: none;

Disable all user interactions, even js events, with just one property.

Clean and self-contained component

my-component {
all: initial;
contain: content;

Create a style-cleaned and self-contained component with two properties. With contain: content will be created a new stacking-context and position fixed coordinates will reference to this property.

Overflow snapping

my-component {
scroll-snap-type: mandatory;
scroll-snap-align: center;

Control scroll snapping for elements with overflow.

System Font Stack

my-component {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, Ubuntu, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Use the system font to provide a consistent typography experience.

Check if input have a value

.Note {
opacity: 0;
transition: opacity 200ms ease-out;

input:not(:placeholder-shown) + .Note {
opacity: 1;

This pseudo class allows you to check if the input have a value. Live demo.

Repeat Gradients

.RepeatLinear {
lime 10px,
pink 10px,
pink 20px

.RepeatRadial {
circle at 0 0,
limegreen 50px

You can repeat gradients instead of mess with mixins.

Vector icons as mask

button {
background: linear-gradient(to right, #d2ff52 0%,#30A85A 100%);
height: 40px;
width: 100px;
mask: url(;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px;

Use svg icons as mask and keep color manipilation. Live demo.

Float based on document direction

img {
float: inline-start; /* ...or inline-end */

Float an element based on the text direction (rtl or ltr).

Target default form element

input:default {
opacity: 0.2;

Target the default selected input in a gruop. Live demo.

Import your css when you need it

@import url('portrait.css') screen and (orientation: portrait);

You can conditionally import your css like you can do inline with the <link>. Please consider that vanilla css imports are a bad thing in terms of performance because they start an potentially infinite calls chain..

Improve touchable elements based on pointer precision

@media (any-pointer: fine) { /* I'm default */ }
@media (any-pointer: coarse) { /* I'm a bit larger. I have a less precise pointer method */ }

Improve your touchable elements if the main pointer input is precise (mouse) or less precise (touch).

Prevent over-scroll

.ScollingContent {
overscroll-behavior: contain;

Prevent over-scroll when the scroll reach the end of the element