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%

Thread Thread
 
schemetastic profile image
Schemetastic (Rodrigo) • Edited

Hey, then, the next time you make an interesting post write me at my Instagram @schemetastic or email me hello@schemetastic.com. So I don't miss it.

Thread Thread
 
poetryofcode profile image
Poetry Of Code

Sure

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
 
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
 
kmsaifullah profile image
Khaled Md Saifullah

Great post....👏👏👏👏

Collapse
 
poetryofcode profile image
Poetry Of Code

Glad to hear that you loved it.

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
 
devsk001 profile image
Dev Sk

Cool 😎

Collapse
 
poetryofcode profile image
Poetry Of Code
  • Glad you think so!
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
 
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
 
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
 
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
 
podcastlaunch profile image
Podcast Launch Strategy

Good post!

Collapse
 
poetryofcode profile image
Poetry Of Code

Glad you loved it.

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
 
jace profile image
Jace Chou

Nice~

Collapse
 
poetryofcode profile image
Poetry Of Code

Thanks for the vibe!

Collapse
 
vishnusharma7 profile image
Vishnu Sharma

nice

Collapse
 
poetryofcode profile image
Poetry Of Code

I'm glad you liked 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
 
vuthy profile image
Vuthy YIB

Useful post

Collapse
 
poetryofcode profile image
Poetry Of Code

Thanks

Collapse
 
spsk69 profile image
Mr.P1630n

Amazing Article, learned a lot!

Collapse
 
poetryofcode profile image
Poetry Of Code

Glad to hear it.