CSS is the language we use to style an HTML document. Over the past few years, more and more functionality has been added to it giving it super powers. Here are some of the less well-known CSS properties that can be useful in certain situations:
1. all: The all property is a shorthand property that sets the values of all CSS shorthand properties. It can be used to reset the styles of an element to the default values. For example, the following code will reset all styles of the p element to the default values:
p {
all: initial;
}
2. place-items: The place-items property is a shorthand property that sets the values of the align-items and justify-items properties in a single declaration. It determines the alignment of items within a container. For example:
.container {
display: grid;
place-items: center;
}
3. will-change: The will-change property is used to indicate to the browser that an element is likely to change in the near future, so that the browser can optimize its rendering accordingly. For example:
.animated {
will-change: transform;
}
4. wrap-flow: The wrap-flow property is used to specify how an element's content should flow around a float. It can be used to control the wrapping of text around an image, for example. For example:
img {
float: left;
wrap-flow: both;
}
.png)