CSS is a growing world of wonder where we discover new features and new ways of doing something we thought impossible every day. So, if you believe you’ve mastered CSS, this article will present lesser-known techniques that can significantly enhance your web design capabilities.
Embarque on this journey where we will talk about what seems to be impossible in CSS like changing a parent element, animating what appears to be animating, or learning about a long long-time CSS capability that is now right at our fingertips.
Below you will find some very recent techniques (by the time I am writing the article) and others that were introduced a while ago but went under the radar for some reason. Remember that these techniques are only supported by modern browsers and if you are developing with browser legacy requirements, they probably will not work.
Transitioning display between ”block” and “none”
Let’s start with a long-time need from all front-end developers which is being able to transition from a “display: none” state to a “display: block” state without going crazy with javascript or even more complex CSS techniques.
Discover advanced CSS techniques that push the boundaries of web design. Learn how to transition display properties, animate auto height, manipulate parent elements, and utilize CSS nesting—without relying on JavaScript or preprocessors. Enhance your CSS skills with these cutting-edge methods.
Let’s look at this sample CSS code representing a very basic modal that we want to control its visibility using display property and understand where the problem is.
Knowing there are more ways of animation elements, let’s focus on the simplest one which is using transitions to apply an animation to our model. For that, we could start by simply creating a keyframe and applying the animation property to the “modal–is-open” class like this:
This would work great if we want to change from a “none” state to a “display” state. The problem arises if we apply the same principle to hide the element simply because we are going from something visible on the screen to something that simply doesn’t exist, it displays none, it’s instantly triggered and so, it’s not possible to add animations.
So, if you try to do something like:
It would simply not work.
But now, with a very simple couple of lines, we can overcome this “issue” and apply animation from a block state to a non-state:
All we need is to add the “display: block” or whatever other value you may have in your display property (like fled, grid..) in the “from” and add the “display:none” in the “to” property.
What we are saying to the browser is: “Hey, wait for the keyframe animation to end, and only then, apply the display: none”.
Animate height: auto: without JS
Another challenge that almost 100% of front-end developers already face is when they need to create more complex transitions with auto height.
The problem is that CSS doesn’t allow animate an element to an auto value (at least not without JavaScript).
Let’s take a look at the following CSS sample code exemplifying this:
This CSS code states that by default (or when it is closed) the content will not be displayed (due to height: 0; property) and when it’s open, the content will be displayed due to the “height: auto;” property.
Until now, this simply would work and it still doesn’t work unless we use a new property for the height attribute that is called “calc-size”.
As it’s in the picture, all we need to use is the “calc-size” attribute, which is a function, with the “auto” value as its parameter. And that’s it.
Just be aware that this property is very recent on the web and it’s supported in the newer browser versions.
Changing a parent element with CSS
CSS is a cascading style sheet a style sheet language that can only read from top to bottom. This means that if I’m styling a specific element I can only apply styles to its siblings or its children elements.
If I want to change the style of the “main” class based on the “content” class, this code would not work at all. Or is it?
There is a pseudo-element in CSS that allows us to “go up a level” in the CSS and change an element based on its child element. That pseudo-element is “:has”.
What the “:has” is saying is “ok, change the color of the “main” if it is immediately followed by an element with a class “content”. Technically we are accessing the immediate element that is before the “.content” element.
Be aware that is not possible to nest multiple “:has” pseudo-element.
CSS Nesting (without pre-processors)
The last thing that I would like to go through is something that has existed for about a year but is something that until then was only possible if we use some CSS preprocessors like SASS.
I am talking about the very useful feature that is CSS nesting.
By looking at the upper code, this is the same “classic” CSS:
If you are familiar with SASS, you can easily understand the rules here but if you’re not, let me explain what is happening.
When you start nesting and you need to join to elements (like joining two classes) you will use the “&” character. As you can see in the upper example for the “:hover” state of the link that results in having “a:hover{}”.
If what you need is to generate a child class, simply type the class without using the “&” operator to get something like “a .icon {}”.
What I believe it’s cool with the introduction of nesting as a native CSS module (interpreted by all modern browsers) is that maybe we are walking on a path that may lead to an introduction of other features that exist in most of the CSS preprocessors like functions or mixings which would be amazing to see happening.
Conclusions
At least for me, only knowing that these techniques are possible was a “door opening”. And I regret not knowing them early when I needed them in the past.
Because I don’t want that to happen to you, the goal here was not to delve deeply into those techniques, but rather to introduce them to you at a higher level, providing basic examples of how to use them and encouraging you to explore them even more.
