As mentioned previously, in this article we will analyze some of the most useful properties recently introduced in CSS. Many of these new properties allow us to simplify some processes and layouts that in the past required more complex development or JavaScript support.
So let's analyze the individual properties.
Balance. Goodbye to poorly justified titles
The first property we will analyze is the following:
h1{
text-wrap: balance;
}Through this property, text is organized optimally across each line, improving layout and readability. However, this functionality is only available for text blocks that span a limited number of lines, due to the computational complexity involved.
In practice
The use of this new property is very useful in the titles of our web pages; in fact, it very often happens that titles (both desktop and mobile) wrap with a single word, visually showing an unpleasant layout. The balance attribute automatically balances words between lines, avoiding (for example) leaving a single word on a new line.
Line-clamp. No more JavaScript to add "..." in descriptions
Another very useful property, widely used in card descriptions or articles:
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}The -webkit-line-clamp property in CSS offers a way to limit the number of lines of a text block. However, it is important to note that this functionality is only active when the display property is set to -webkit-box or -webkit-inline-box, and when the -webkit-box-orient property is set to vertical.
Usually it is also recommended to set the overflow property to hidden, otherwise the text will not be truncated but ellipsis will still be displayed after the specified number of lines.
In practice
How many times have we needed to limit the number of lines in a description? Now we can do it directly with CSS! The most common use is in the cards of the latest blog articles for example, where you need to maintain a maximum number of lines in the preview description (and add the classic 3 ellipsis dots at the end). It can also be useful in other layouts, where you need to maintain a limited number of text lines.
:has(), the real novelty of recent years
That's right! This property is the real novelty of recent years! A great CSS limitation that now becomes a potential:
div:has(p) {
background-color:orange;
}This pseudo-class allows you to apply styles if "the specified condition is true". Let's take the example above as a reference, in this case the orange background color will be applied to all divs that contain a p tag inside.
In practice
This pseudo-class can have a very wide use on many fronts, and can greatly simplify development, avoiding having to intervene with JavaScript, to verify certain conditions. It can be used to generate dynamic layouts, in web apps or even simply to highlight parent elements in a form (for example when an input goes into error).
The use of this property is infinite and to study it specifically would require a dedicated article. In this case we only limit ourselves to discovering the properties, without going into specifics!
CSS approaching SCSS? Nested structure
From now on it is possible to write CSS by nesting tags, just like SCSS:
article {
h1 {
color: orange;
}
p {
color: blue;
}
}This allows us to simplify our stylesheet making it simpler, and simplifying its reading.
Can we abandon SCSS?
Absolutely not! SCSS is not limited to writing properties this way, but allows much more; therefore, for the moment, it remains valid and widely used!
::marker, customize our bullet list
Finally it is possible to customize the icon of our lists:
li::marker {
content: '♥️';
font-size: 20px;
}If before we were very limited in customizing the single list element (through the use of the list-style-type attribute), now we can insert any element at will inside the content:'' of the ::marker.
It is also possible to customize only the color or size of the ::marker, thus maintaining the native symbol:
li::marker {
color: orange;
font-size: 20px;
}Conclusion
These are just some of the countless properties recently introduced in the CSS world.
For further insights, stay updated on our upcoming articles!