FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Upgrade

10 CSS Properties You Might Have Missed

A list of cool CSS properties that you should know.

Written by 
Camila Farelo
,
Front-End Developer
10 CSS Properties You Might Have Missed
blog post background
E2E Testing with Nightwatch.js
Anatomy of a Phoenix App
What is Deno?
Fusion.js: The Power of Plugins
10 CSS Properties You Might Have Missed
Coding, Best Practices

Many developers are not aware of the latest CSS properties and features because Internet Explorer is usually lagging behind the CSS spec. However, we can’t stop learning new technologies just because IE doesn’t support them. With this in mind, I wanted to make a short list of cool CSS properties I think every developer should know.

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

}

The `line-clamp` accepts 2 values:

  • none: the text will not be truncated.
  • <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

}

line clamp example

2. text-underline-position:under

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

text-underline-position:under

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;

}

text-underline-position:under

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>]

}

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:

background-blend-mode

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:

ch unit

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>

shape-outside

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 LinkedIn.

Camila Farelo
Written by
Camila Farelo
Camila Farelo

As a Front-End Developer at FullStack Labs I assist with front-end development of custom business software solutions using mostly React, CSS, HTML, and Javascript.

FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project. Contact us below for a free consultation with our CEO.
Projects start at $50,000.

company name
name
email
phone
Type of project
Reason for contact
How did you hear about us?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.