Hot CSS Tips

CSS is a very powerful and has many features that not so easy to explore.

CSS tips

Web Design

Mattia Astorino made a great collection of some nice Web Design Style tips in form of snippets that you may find useful in your next project. There are such nice tricks as the scroll-snapping of elements and the image background of vector icons.


Here are some of tips:

Image rendering

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

Run style on Safari 11+

The env() function and the environment variables is implemented by Safary 11+ to support Apple iPhone X screens. You can read more info here

Check empty nodes

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

Shape your text

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

Plain SVG as background

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

Disable all user interactions

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

Clean and self-contained component

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

Control scroll snapping for elements with overflow.

System Font Stack

Use the system font to provide a consistent typography experience.

Check if input have a value

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

Repeat Gradients

You can repeat gradients instead of mess with mixins.

Vector icons as mask

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

Float based on document direction

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

Target default form element

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

Import your css when you need it

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

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

Prevent over-scroll

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


To see the code of that CSS tips go to the link.


The post Hot CSS Tips appeared first on hotsnow*.

No Comments

Post a Comment

%d bloggers like this: