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

element :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

element { 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.

Cleaned and self-contained component

element { 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

element { scroll-snap-type : mandatory; scroll-snap-align : center; }

Control scroll snapping for elements with overflow.

System Font Stack

element { 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 has 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 { background : repeating-linear-gradient ( 45deg , lime, lime 10px , pink 10px , pink 20px ); } .RepeatRadial { background : repeating-conic-gradient ( circle at 0 0 , tomato, limegreen 50px ); }

You can repeat gradients instead of going mess with mixins.

Vector icons as mask

button { background : linear-gradient (to right, #d2ff52 0% , # 30 a85a 100% ); height : 40px ; width : 100px ; mask : url ( 'https://cdn.onlinewebfonts.com/svg/img_529012.svg' ); 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; }

Float an element based on the text direction ( rtl or ltr ). More about logical properties

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.

Target devices by pointer precision

@media ( any-pointer: fine) { } @media ( any-pointer: coarse) { }

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

Environment variables for edge screens

my-component { padding-bottom : env (safe-area-inset-bottom, 24px ); }

You need to enable env variables with:

< meta name = 'viewport' content = 'initial-scale=1, viewport-fit=cover' >

Prevent outline overlapping

button :focus { transform : rotate ( 0 ); }

By creating a new stacking context with the transform property you can fix the outline overlapping. Live demo.

Anchor scroll padding and margins

body { scroll-padding : 100px ; scroll-margin-top : 10em ; }