Lesser-known CSS properties in GIFs

Pavel Laptev
Dec 17, 2018 · 6 min read

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:


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.



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 😊


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store