10 CSS Properties You Might Have Missed

1. line-clamp

Truncates text at a specific number of lines. The text-overflow property allows us to use ellipsis as a value to truncate the text on a single line. But what happens if I want to truncate the text that spans more than one line? Well, in that case, we can use line-clamp. Let’s see the syntax:

-- CODE language-css --
.element {
line-clamp: [none | <integer>];</integer>

}

The `line-clamp` accepts 2 values:

• none: the text will not be truncated.‍
• <integer></integer>: sets the max number of lines before the text will be truncated; depending on its value, it will display an ellipsis at the end.

Let’s see how it works:

-- CODE language-css --
.line-clamp-4 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; //truncate the text at line 4

}

2. text-underline-position:under

Have you ever tried to underline text with text-decoration: underline and ended up with something like this:

The text-decoration property is placing the line within the text’s descenders, which are the part of letters that extend below the baseline. If we want to show the line completely under the text, and it's descenders, then we can use the text-underline-position: under property:

-- CODE language-css --
.text-underline {
text-underline-position: under;
text-decoration: underline;

}

3. :focus-within

Allows you apply styles to the parent when one of its children is in focus. Usually it’s used to add styles to a form.

-- CODE language-css --
.form:focus-within {
outline: 3px solid #333;

}

See how it works: https://codepen.io/camilaFarelo/full/PoPONKB

4. background-blend-mode

Defines how the background image and the background color will blend with each other.  Let’s look at the syntax:

-- CODE language-css --
.blend {
background-blend-mode: [<blend-mode>]</blend-mode>

}

But, how many blend modes can we use? The answer is 10:

• multiply
• screen
• normal
• overlay
• darken
• lighten
• color-dodge
• saturation
• color
• luminosity
  

Let’s see how they look:

Play with it: https://codepen.io/camilaFarelo/full/PoPOOEY

5. Scroll snap

Once the user finishes scrolling, we can lock the viewport to an element or location. We need to set 2 properties:

• Scroll-snap-type: specifies the scroll container, the axis, and snap strength.
• Scroll-snap-align: specifies the snap position.
  

Let’s look at a simple example:

-- CODE language-css --
.scroll-container {
align-content: center;
display: grid;
grid: auto / repeat(7, auto);
grid-gap: 1em;
overflow: auto;
scroll-snap-type: inline mandatory;

}

img {
width: 400px;
scroll-snap-align: center;

}

Live demo: https://codepen.io/camilaFarelo/full/ExVmbMj‍

We can select mandatory or proximity for scroll-snap-type:

• mandatory: no matter where the user stopped scrolling, the container will scroll to the position set in scroll-snap-align.
• proximity: it will scroll to the position set in scroll-snap-align only if it is near the position.

We can see the difference between mandatory and proximity with the next example: https://codepen.io/camilaFarelo/full/wvKeLMz

6. ch unit:

A font relative-length unit that is equal to the width of the zero in the current font size. This means that the width of your element will be set dynamically depending on the font family, size, and number of characters specified in the width attribute. Because of this, we don’t recommend using ch units for precise measurements. Here’s how we set a paragraph:

Now let’s say that I want to add a width of approximately 100 characters per line:

-- CODE language-css --
.text-ch-100 {
width: 100ch;

}

7. shape-outside

Lets you determine how content will wrap around a floating element.

-- CODE language-css --
.element {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
border-radius: 0 100px 100px 0;
background-color: pink

}

-- CODE language-html --
<h1>shape-outside</h1>

<div class='element'></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum...</p>

8. scroll-behavior

Do you want to create a smooth animation when clicking a link that targets an anchored position on a scrolling page? Good news: you can do it with scroll-behavior. Alas, it's not working in Safari yet, but let's hope it will be soon. Check the syntax:

-- CODE language-css --
.smooth-scroll {
scroll-behavior: [auto | smooth];

}

As we can see in the example, scroll-behavior accepts two values:

• auto: default, allows the abrupt jump.
• smooth: adds a smooth transition after clicking a link with a target.

Here’s an example: https://codepen.io/camilaFarelo/full/pojdvNV

9. all

Allows you to reset all the properties to their inherited or initial value, except for direction and unicode-bidi. Here’s the code:

-- CODE language-css --
.all {
all: [initial, inherited, unset]

}

The all property accepts 3 values:

• initial: changes all properties to their initial values.
• inherit: changes all properties to their parent values.
• unset: changes all properties to their parent value if they are inheritable; if not, it will use the initial value of the CSS spec for each.

10. backface-visibility

This property is used with 3D transformation and lets you decide if the “back side” of an element will be visible. Here’s the code:

-- CODE language-css --
.all {
all: [initial, inherited, unset]

}

The backface-visibility accepts 2 values:

• visible: the “back face” will be visible.
• hidden: the “back face” will be hidden.
  

You can see an example here: https://codepen.io/camilaFarelo/full/dyYZoxK‍

Well, that’s all the cool CSS tips and tricks for this post. Do you have some you’d like to share? Let me know on Twitter or LinkedIn.