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.13:00 PM - 03 Mar 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 below12:05 PM - 08 Mar 2021
: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 below13:19 PM - 09 Mar 2021
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 below11:50 AM - 10 Mar 2021
Prefers reduced motion docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
Subscribe and Follow
Subscribe to my Youtube channel.
Thanks for reading/watching and stay safe
CSS import is generally not the most performant way of adding multiple CSS files:
stackoverflow.com/questions/100369...