Hot CSS Tips
CSS is a very powerful and has many features that not so easy to explore.
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:
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.
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.
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 when the scroll reach the end of the element
To see the code of that CSS tips go to the link.