Lesser-known CSS properties in GIFs
A lot of developers afraid to implement some effects because they will demand JS which could be heavy and complicated, but CSS is different is simple and light. I collected here CSS props that I found awesome because they can make websites much diverse in terms of effects and make new trends in the future, at least they definitely will make developers life much easier.
Many of these properties are far from “new” or “fresh”, still not supported by many browsers and exist as drafts but still. Let’s look at them 👻
I know that *.Gif is an outdated format. And we need to forget about this format as soon as possible but I don’t know why big publishers like Medium eg. still doesn’t understand that and don’t allow us to use alternative formats like WebM and mp4.
element()
With this function, you can clone a DOM node with all children elements into another element through “background” property. All actions will be reflected in both elements — original and clone. With this feature, you can create amazing effects.
A detailed article about element() by Vincent De Oliveira
It sounds like something new, at least to me but actually, no, this article is three years old and the feature is seven years old ⌛️❗️
Conic gradients
We already have it in Chrome without flags and Safari (but only Technology Preview).
With this property, we can create many cool things like:
- simple conical gradients
- infographic diagrams
- simple gradient rays
- complex gradient rays
- Even pseudo-3d figures like this or this
- and illusions
Motion Path
To me, it’s a very important feature because before that we used different JS libraries. But now JS could be at the minimum level just to control an animation like play, pause etc. everything else we can make with CSS animation.
Scroll Snap
Another cool feature that we already can use in most browsers. Not so long time ago we had to use JS libraries to snap scroll which was not so safe in terms of support and stable work.
Counter style
This feature allows us to change counter (bullet) style — change a symbol, suffix and the counter behavior algorithm. Only Firefox supports this rule at the moment.
If you want to make your own bullet symbols you can use :after/:before hack and if you want to make alternating bullets or bullets based on a count use :nth-child()
CSS rhythmic styles
Another feature that book designers have already used for a long time but web-designer have to get rid of it because frontend didn’t have tools to manage vertical rhythm. This CSS rule could be the first swallow. Vertical rhythm can make your text looks better. We already use grids and columns and rhythmic styles are a good addition to them.
Unfortunately, this rule has a raw draft and experimental status.
This property is so rare that I didn’t find browser compatibility on canIuse, but here it is on developer.moxilla.org
Round display
A new @media feature that allows us to detect round displays, as you already guessed this feature will be in demand for wearable devices like watches for instance.
In general, this feature is not about only round displays is about displays shapes.
This media feature can be mixed with other CSS props that could help you to adjust website layout for round displays:
Unfortunately, there is no browser compatibility this feature is only a draft so far.
Please, let me know if I missed your some cool feature and I’ll make another part 😊
