DEV Community

Cover image for 5 Hidden CSS Properties You Didn't Know Existed
                           From 0 to 1
From 0 to 1

Posted on

5 Hidden CSS Properties You Didn't Know Existed

Cascading Style Sheets (CSS) are the backbone of web design, allowing developers to style and format web pages with ease. While most developers are familiar with the common CSS properties like color, font-size, and margin, there are numerous lesser-known properties that can add functionality to your designs. In this article, uncover five CSS properties that you may not have known existed, but which can significantly enhance your web development projects.

1. Text-decoration

.menu__list-link:hover {
  text-decoration: underline 2px solid green;
}
Enter fullscreen mode Exit fullscreen mode

text-decoration
Turn out for the classic text-decoration: underline you can add 3 more parameters. First is the width of the line (2px), second is the type of line (solid, dotted) and the third is the color for this line (green).

2. Text-underline-offset

.menu__list-link:hover {
  text-decoration: underline 2px solid green;
  text-underline-offset: 6px;
}
Enter fullscreen mode Exit fullscreen mode

Text-underline-offset

Text-underline-offset
It is very handy. Solve problem that occur pretty often, when some letters go below the line height and during hover effect underline interrupts by those letters. Pretty good solution to create offset from text to underline (6px).

3. Inset

For positioning relative, absolute, and others we often write top, right, bottom, left:

  top: 5px;
  right: 3px;
  bottom: 1px;
  left: 4px;
Enter fullscreen mode Exit fullscreen mode

to speed up the process of writing we can write above in a shorter version with the property inset:

inset: 5px, 3px, 1px, 4px;
Enter fullscreen mode Exit fullscreen mode

4. Object-position

We often apply to the image object-fit: cover - it will crop the image to a specified height & width in order to look sharp:

object-fit: cover

But we can't control which part of the image it will crop. So it is where object position comes into play.

.test {
  height: 350px;
  width: 500px;
  object-fit: cover;
  object-position: bottom;
}
Enter fullscreen mode Exit fullscreen mode

object-position: bottom

object-position: top;
Enter fullscreen mode Exit fullscreen mode

object-position: top

As well as we can add: left or right. Or even can be more precise when we specify 2 parameters like object-position: center bottom;

5. Scroll margin top

By default, when we link to section on the page <a href="#fairy-tale__inner">Itinery</a> it will bring exactly to the top of that section.

Scroll margin top

But if we want to make space we need to use scrool-margin-top

#fairy-tale__inner {
  scroll-margin-top: 100px;
}
Enter fullscreen mode Exit fullscreen mode

Scroll margin top

So go ahead, dive into the world of hidden CSS properties, and elevate your designs to the next level!

Top comments (44)

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Really cool post!

Collapse
 
vitalipri profile image
From 0 to 1

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
 
vitalipri profile image
From 0 to 1

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
 
vitalipri profile image
From 0 to 1

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
 
vitalipri profile image
From 0 to 1

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
 
vitalipri profile image
From 0 to 1

_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
 
vitalipri profile image
From 0 to 1

These small improvements, make our lives easier.

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
 
vitalipri profile image
From 0 to 1

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

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
 
vitalipri profile image
From 0 to 1

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

Collapse
 
faridsa profile image
farid

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

Collapse
 
vitalipri profile image
From 0 to 1

It's always exciting to discover new CSS tricks

Collapse
 
raduolivas profile image
Rodolfo Silva

this was awesome! thanks !

Collapse
 
vitalipri profile image
From 0 to 1
Glad you found it awesome
Enter fullscreen mode Exit fullscreen mode
Collapse
 
shorifulislam00 profile image
Md. Shoriful Islam

thats really awesome

Collapse
 
vitalipri profile image
From 0 to 1

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

Collapse
 
devsk001 profile image
Dev Sk

Cool 😎

Collapse
 
vitalipri profile image
From 0 to 1
  • Glad you think so!
Collapse
 
kmsaifullah profile image
Khaled Md Saifullah

Great post....πŸ‘πŸ‘πŸ‘πŸ‘

Collapse
 
vitalipri profile image
From 0 to 1

Glad to hear that you loved it.

Collapse
 
borzoomv profile image
Borzoo Moazami

Usefull properties, thank you πŸ™πŸ»

Collapse
 
vitalipri profile image
From 0 to 1

I'm glad you found the properties helpful

Collapse
 
vladyn profile image
Vladimir Varbanov

Super nifty tips. Tank you!

Collapse
 
vitalipri profile image
From 0 to 1

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

Collapse
 
jace profile image
Jace Chou

Nice~

Collapse
 
vitalipri profile image
From 0 to 1

Thanks for the vibe!

Collapse
 
podcastlaunch profile image
Podcast Launch Strategy

Good post!

Collapse
 
vitalipri profile image
From 0 to 1

Glad you loved it.

Collapse
 
vuthy profile image
Vuthy YIB

Useful post

Collapse
 
vitalipri profile image
From 0 to 1

Thanks