Poetry Of Code

Posted on Apr 22

5 Hidden CSS Properties You Didn't Know Existed

#css #frontend

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;
}

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;
}

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;

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

inset: 5px, 3px, 1px, 4px;

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:

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;
}

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.

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

#fairy-tale__inner {
  scroll-margin-top: 100px;
}

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

Top comments (44)

Schemetastic (Rodrigo) • Apr 23

Really cool post!

Poetry Of Code • Apr 23

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

Schemetastic (Rodrigo) • Apr 23

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

Poetry Of Code • Apr 23

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

Schemetastic (Rodrigo) • Apr 23

See ya in a next post I hope 😉

Poetry Of Code • Apr 23

100%

Schemetastic (Rodrigo) • Apr 23 • 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.

Poetry Of Code • Apr 23

Sure

MexiKode ⚙ • Apr 24

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