CSS Tricks

In the last few years, CSS has undergone a significant evolution. With each new browser update, we’re introduced to exciting new CSS features that enhance web development. Today, we’ll explore some of these features and learn more about them.

Disclaimer: As most of these features presented here have only recently been implemented, beware that some browsers and/or older versions may not support them. For instance, Internet Explorer is incompatible with most if not all of these features.

For more information about CSS code compatibility, we recommend checking caniuse.com or developer.mozilla.org

Line Clamp

CSS line clamp will help truncate a text at a desired line, instead of the good old regulartext-overflow: ellipsis, which will always truncate the text in the first line. As per usual, don’t expect this code to work in Internet Explorer, but every other browser will work fine even though it still requires to use theprefix-webkit:

This “trick” however isn’t flawless. If the parent container has a fixed height, and/or if you are using a responsive font, you may start to see some parts of the text lines below the truncated text. Also, beware of paddings and custom line-height as that will also bring up some undesired extra text.

If you are more of a JS warrior, you may want to try this one instead, or my personal fav.

CSS:has

The CSS :has selector is one of the most recent and highly anticipated CSS features that has been unveiled just last year and as of this time it’s still unsupported by Firefox.

The :has() selector in CSS is a functional pseudo-class that selects an element if it contains a specific element or elements that match the given selector. It allows you to target an element based on its descendants or child elements, something that was only possible before with the use of JavaScript.

With the selector div:has(a) the style background color “yellow” will be applied to the background of the div

CSS variables

CSS variables, or CSS custom properties, were first introduced in CSS3 years ago but it’s a feature still unknown to many web developers. As such, they are supported by most web browsers today.

They work just like any variable in any programming language: define a name for the variable and assign it to a value. This allows us not only to store that information and avoid code repetition and thus increasing style consistency while avoiding errors or typos, but also changing the defined value for different scenarios like decreasing the body font size for smaller screens using a media query.

To declare a CSS variable, use the — prefix followed by a name and assign it a value. To use it in an element use var(–prefix):

Color variable defined at root level and applied inside the element

CSS vars can be assigned and reassigned at any level of the stylesheet, from the root to the element itself, and normal CSS precedence will take place.

JavaScript can also be used to update the value of a CSS variable dynamically, by using setProperty() like in the example:

JavaScript code to change the variable primary color to “red”

Backdrop-filter

This property has been around for a couple of years, and if you are familiar with CSS filters, this property is very similar, the difference is instead of applying the filter to all the elements inside of the container, they will only be applied to the backdrop or the content that is behind the element), creating some very cool effects. One of the most notably used is probably the blur filter, that can create a very neat frosted glass effect:

Since backdrop-filter only applies to the back of the element the background color needs to have some transparency in order to make the effect visible, otherwise it stays hidden from the view.

Other properties include brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia and url (for applying SVG filters – we will dive into that at another time).

Difference between filter (left side) and backdrop-filter (right side)

It is also possible to combine multiple filters into a backdrop-filter like so:

Element with 2 filters applied in the same backdrop filter property

And as a fallback, you can use the following media query:

CSS query to check browser support for backdrop-filter

Blend mode

For those who have worked with image software such as Photoshop or Paint.Net, this concept should be very familiar. CSS mix-blend-mode allows you to blend the colors of two or more overlapping elements.

Here’s some blend modes you can use:

normal: The default blend mode where elements are rendered as usual.
multiply: Multiplies the colors of the element and the background.
screen: Inversely multiplies the colors, resulting in a lighter effect.
overlay: Combines multiply and screen modes for a high-contrast effect.
darken: Selects the darkest pixel value between the element and the background.
lighten: Selects the lightest pixel value between the element and the background.
color-dodge: Brightens the background color based on the element color.
color-burn: Darkens the background color based on the element color.

Much like dropback-filter,mix-blend-modeis one of those features in CSS which are really cool to play around and try different effects.

4 examples of mix-blend-mode text applied to an image

In conclusion, CSS has brought us a lot of great new features in recent years in its quest to help web developers like us with more tools to work with the challenges of the ever-evolving user experience and interfaces. At hiinteractive, we aim to be in the vanguard of web development, and in the next weeks we will be updating the blog with more useful and innovative code tips and tricks for all web developers out there, so keep tuning in.