CSS has some lesser known but useful features. We will examine a few of them.

1. Css scroll-snap-type Property and scroll-snap-stop Proprety

scroll-snap-stop

When this property is set for each child element under the parent element, when you fast scroll the screen, the next element is prevented from passing while fast scrolling with a trackpad or touch screen.

Gif :

Example :

Value :

• Normal : It is the default value. Scroll is the default behavior

• Always : After fast swipe with touchpad or touch screen, scrolling stops and the next element snaps into focus.

scroll-snap-type property

Drag the slider horizontally, release it and you will see the effect.
The effect occurs when you click on a box, then navigate using the left and right arrow keys

Gif :

Example :

Value :

• None : This is default value

• X : The effect is set on the x-axis

• Y : The effect is set on the y-axis

• Both : The effect is set on the x-axis and y-axis

• Mandatory : After the scroll is finished, the scroll automatically moves to the capture point

2. Css place-items Property

The value set for the place-items property will be applied to both the align-items and justify-items properties.

Example :

Value :

• Start : Align items at the start of the grid cell

• End : Align items at the end of the grid cell

• Center : Align items to the center of the grid cell

3. Css all Property

Changes all properties applied to the element or its parent to their initial values

Example :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Value :

• Unset :Changes all the properties applied to the element or the element's parent to their parent value if they are inheritable or to their initial value if not

4. Css user-select Property

Prevents users from selecting texts

Example:

The text of this div element cannot be selected.

5. Css caret-color Property

Changes the color of the cursor (caret) in text entry fields.

6. Css text-decoration-skip-ink Property

The text-decoration-skip-ink CSS property specifies how overline and underline are drawn when passing over glyph over lines and underlines.

Value :

• None:

Example :

text-decoration-skip-ink: none;

• Auto:

Example :

text-decoration-skip-ink: auto;

7. CSS pointer-events Property

The pointer-events property defines whether or not an element reacts to pointer events.

Example :

Google


 Google

Value:

• None : Default

• Auto: The element does not react to pointer events

Conclusion

We examined the little-known features of CSS. We learned the features that will be useful in your applications.