Some small css tips #013

To continue on my previous post here are some more tweets with little Css tips that might help you in your projects.

Css @import.

Small #css tip: You can move a lot of link tags from your html into your main css file by using the at-import rule. And you can tell it for which media you need it too. pic.twitter.com/p1LbLQIQLO
— Stephan Nijman (@Vanaf1979) March 3, 2021

@import docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Select every 3th, 4th, 5th etc item.

Small #css tip: If we want to select every 3th, 4th, 5th etc item in a list we can use the :nth-child function and pass it an An+B parameter.

👇Check out the CodePen below pic.twitter.com/ym37FUFthU
— Stephan Nijman (@Vanaf1979) March 8, 2021

CodePen: https://codepen.io/Since1979/pen/qBqMQYQ

:nth-child doc: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Css prefers-color-scheme

Small #css tip: Instead of creating your own dark/light mode toggle you can just rely on the users OS setting by using the css prefers-color-scheme at-rule. #100DaysOfCode #DEVCommunity

👇Check out the CodePen below pic.twitter.com/d0QooBZZH7
— Stephan Nijman (@Vanaf1979) March 9, 2021

CodePen: https://codepen.io/Since1979/pen/rNWZoYR

Prefers color scheme docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Css prefers-reduced-motion

Small #css tip: Some users of your site might prefer an experience without any animations. We can use css prefers-reduced-motion to listen for that OS setting and change our styles accordingly. #100DaysOfCode #DEVCommunity

👇Check out the CodePen below pic.twitter.com/yuZzCNJNW5
— Stephan Nijman (@Vanaf1979) March 10, 2021

CodePen: https://codepen.io/Since1979/pen/xxRammG

Prefers reduced motion docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion