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.
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
In July, I wrote about advanced CSS filters techniques, such as backdrop-filter and filter(). Today, I want to share a…iamvdo.me
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 ⌛️❗️
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.
This property began life as motion-path. This, and all other related motion-* properties, are being renamed offset-* in…css-tricks.com
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.
CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished…css-tricks.com
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 @counter-style at-rule allows you to set a custom style for counters. It can be used to set custom markers on…www.quackit.com
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.
There are always times when you are building a page with multiple columns and the content is a collection of headings…prateekjadhwani.github.io
The line-height-step CSS property sets the step unit for line box heights. When the property is set, line box heights…developer.mozilla.org
Publication as a First Public Working Draft does not imply endorsement by the W3C Membership. This is a draft document…www.w3.org
This property is so rare that I didn’t find browser compatibility on canIuse, but here it is on developer.moxilla.org
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:
Conventionally, web pages have been shown through a rectangular screen such as PC, tablet, and smart phone. The window…www.w3.org
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 😊
Last week, Rachel Andrew attended the CSS Working Group meeting at W3C TPAC, and rounds up some of the discussions in…www.smashingmagazine.com