DEV Community

Cover image for 5 Hidden CSS Properties You Didn't Know Existed

5 Hidden CSS Properties You Didn't Know Existed

Poetry Of Code on April 22, 2024

Cascading Style Sheets (CSS) are the backbone of web design, allowing developers to style and format web pages with ease. While most developers are...
Collapse
 
schemetastic profile image
Schemetastic (Rodrigo) •

Really cool post!

Collapse
 
poetryofcode profile image
Poetry Of Code •

Glad you loved Rodrigo!
Which one you like the most?

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo) •

scroll-margin-top I think... because I use smooth scroll and that property seems very useful for that... and object-fit with object-position seems very useful for certain type of backgrounds where you need more control than background-size: cover

Thread Thread
 
poetryofcode profile image
Poetry Of Code •

Good point, scroll-margin-top works together with scroll-behavior: smooth;

Thread Thread
 
schemetastic profile image
Schemetastic (Rodrigo) •

See ya in a next post I hope 😉

Thread Thread
 
poetryofcode profile image
Poetry Of Code •

100%

Collapse
 
mexikode profile image
MexiKode ⚙ •

I would add the "all" property that lets you reset styles and remove browser styling.
Other interesting props:
Aspect ratio
Font Variant
Isolation
Contain

Collapse
 
poetryofcode profile image
Poetry Of Code •

_Those are fantastic additions! _
Thanks

Collapse
 
masudalimrancasual profile image
Masud Al Imran • • Edited

Thanks to text-underline-offset I wont have to write this anymore.

border-bottom: **
padding-bottom:**
Enter fullscreen mode Exit fullscreen mode
Collapse
 
poetryofcode profile image
Poetry Of Code •

These small improvements, make our lives easier.

Collapse
 
kmsaifullah profile image
Khaled Md Saifullah •

Great post....👏👏👏👏

Collapse
 
poetryofcode profile image
Poetry Of Code •

Glad to hear that you loved it.

Collapse
 
vladyn profile image
Vladimir Varbanov •

Super nifty tips. Tank you!

Collapse
 
poetryofcode profile image
Poetry Of Code •

You're very welcome! I'm glad you found the tips helpful. Happy coding!

Collapse
 
borzoomv profile image
Borzoo Moazami •

Usefull properties, thank you 🙏🏻

Collapse
 
poetryofcode profile image
Poetry Of Code •

I'm glad you found the properties helpful

Collapse
 
devsk001 profile image
Dev Sk •

Cool 😎

Collapse
 
poetryofcode profile image
Poetry Of Code •
  • Glad you think so!
Collapse
 
shorifulislam00 profile image
Md. Shoriful Islam •

thats really awesome

Collapse
 
poetryofcode profile image
Poetry Of Code •

It's great to hear you're enjoying it.

Collapse
 
faridsa profile image
farid •

Thanks, scroll-margin-top is totally new to me

Collapse
 
poetryofcode profile image
Poetry Of Code •

It's always exciting to discover new CSS tricks

Collapse
 
miialainen profile image
Miia •

I really needed the scroll-margin-top ! I solved it in another way but this is very useful to know!

Collapse
 
poetryofcode profile image
Poetry Of Code •

It's fantastic to hear that scroll-margin-top came in handy for you!

Collapse
 
raduolivas profile image
Rodolfo Silva •

this was awesome! thanks !

Collapse
 
poetryofcode profile image
Poetry Of Code •
Glad you found it awesome
Enter fullscreen mode Exit fullscreen mode
Collapse
 
efpage profile image
Eckehard •

5 ? There are at least 500 I do not know exist... The question is, how to find them when needed.

Collapse
 
poetryofcode profile image
Poetry Of Code •

You're absolutely right! Keep exploring, and you'll be amazed at what you find!

Collapse
 
mohtashimali85 profile image
MohtashimAli85 •

only object position property was new for me others I already know.
Still thanks for sharing

Collapse
 
poetryofcode profile image
Poetry Of Code •

It's great to hear that you found the information valuable, even if you were already familiar with some of the properties.

Collapse
 
spsk69 profile image
Mr.P1630n •

Amazing Article, learned a lot!

Collapse
 
poetryofcode profile image
Poetry Of Code •

Glad to hear it.

Collapse
 
podcastlaunch profile image
Podcast Launch Strategy •

Good post!

Collapse
 
poetryofcode profile image
Poetry Of Code •

Glad you loved it.

Collapse
 
pet profile image
Peter •

Wow!! It is pretty cool. I love text-underline-offset

Collapse
 
poetryofcode profile image
Poetry Of Code •

Sure thing!

Collapse
 
vishnusharma7 profile image
Vishnu Sharma •

nice

Collapse
 
poetryofcode profile image
Poetry Of Code •

I'm glad you liked it.

Collapse
 
vuthy profile image
Vuthy YIB •

Useful post

Collapse
 
poetryofcode profile image
Poetry Of Code •

Thanks

Collapse
 
jace profile image
Jace Chou •

Nice~

Collapse
 
poetryofcode profile image
Poetry Of Code •

Thanks for the vibe!