DEV Community

10 Helpful CSS Tips

mrwolferinc on April 28, 2021

These are 10 small CSS tips that can actually help you in projects. If you would like to request more tips, let me know in the comments section. ...
Collapse
 
mccurcio profile image
Matt Curcio

I consider #7 evil. LOL
I hate it when I cannot steal text from the internet. ;)

Collapse
 
ashishk1331 profile image
Ashish Khare😎

Guys press F12 and copy it from the inspector. Work smart, not hard!

Collapse
 
phalkunz profile image
Saophalkun Ponlu

I hate that too when it's used in the wrong place. However, I think there's a time and place for it. For example, you might wanna use it on a display copy where allowing text selection might interfere with other interactive elements.

Collapse
 
bravedave profile image
Dave Bray

a useful example of the user-select is user-select: all; - use it to auto select a block which is a target for copy or drag
eg. here is [URL] click and select the whole URL and copy (if it wasn’t useful to follow it)

Collapse
 
mrwolferinc profile image
mrwolferinc • Edited

I don't steal text because its illegal btw I hate it too

Collapse
 
gregoriofrancisco99 profile image
Gregório Francisco

Lol! Me too!

Collapse
 
leob profile image
leob

Some amazing features here which I had no idea existed ... CSS is insanely vast as a topic. BTW am I the only one who finds so called "smooth scrolling" incredibly annoying on websites? That's one feature which in all likelihood I'll never ever use.

 
leob profile image
leob

Same! I don't like it either, what's more - I don't even see the point of it ... as a user I think, "my scroll wheel and mouse and its native/natural behavior are mine, don't mess with it!" It irks me greatly when a website is doing that :-)

Collapse
 
ludamillion profile image
Luke Inglis

Please consider adding caniuse references or similar. CSS is amazing but almost every ‘awesome tips’ or ‘little known’ features article I see includes stuff that is not fully supported by all browsers. Even modern, evergreens.

Collapse
 
mrwolferinc profile image
mrwolferinc

Excuse me but what are caniuse references?

Collapse
 
ludamillion profile image
Luke Inglis

Entries on caniuse.com/ or similar sites which detail the support for particular CSS rules, web APIs etc.

Collapse
 
robinbastiaan profile image
Robin Bastiaan

#8 is quite interesting. A lot is going on that one would no longer need to do with JS after seeing this trick. Even the text of the validation label changes when needed, as seen below. 😎🤩

input#value:in-range + label#value-status::after {
content: 'okay.';
}

Collapse
 
mrwolferinc profile image
mrwolferinc

Thank you! This has become my most successful post, and I would like to thank everyone for reacting and commenting!

Collapse
 
leob profile image
leob

Yeah man I also don't fully understand it! But there's a certain kind of "scrolling behavior" that I witnessed on some websites, and it's super annoying, although the site creators probably thought it was cool. Maybe that's smooth scrolling, or maybe it isn't :-)

But the example given here of smooth scrolling falls more or less in that same category, I don't like it either.

 
mccurcio profile image
Matt Curcio

Yea, I've done that too, but it's a pain.
That fits my definition of evil; making you do more work than is necessary. lol

Collapse
 
amirmohammadtaati profile image
Amir Mamad

Thanks!!

Collapse
 
markandersonnc profile image
MarkAndersonNC

Great tips!

Collapse
 
tonyboy78 profile image
Anton Marinov

Nice!

 
leob profile image
leob

Well the dev adding this feature probably thinks it's "professional" :-)

Collapse
 
64j0 profile image
Vinícius Gajo

Nice post, thanks for sharing!!

Collapse
 
mrwolferinc profile image
mrwolferinc

your welcome