Some small css tips #014

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

Prevent users from selecting text.

Small #css tip: You can prevent users from selecting text on your site by setting the css user-select property to none; #100DaysOfCode #DEVCommunity

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

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

User-select docs: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

Css :is()

Small #css tip: Instead of writing out a lot of chained selectors we can use the :is() function to shorten these. #100DaysOfCode #DEVCommunity

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

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

:is() docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:is

Css viewport units.

Small #css tip: Instead of using pixels or rems you can also use css viewport units (vw, vh, vmin, vmax) to make your websites more responsive. #100DaysOfCode #DEVCommunity

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

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

Css logical properties.

Small #css tip: If you need to support multiple writing directions (rtl, ltr etc…) you could use Css Logical Properties to automatically change your margins, paddings and borders to match the used direction. #100DaysOfCode #DEVCommunity

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

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

Css logical properties docs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties