As we already discussed, If you are a frontend developer, you know the pain of writing bulky CSS codes as they consume a lot of your space and time. So using CSS shorthand properties can save your time and space and make your code look cleaner and nicer.
Shorthand properties are a group of CSS properties that allow us to write multiple properties in a single line. Also spaces separate these properties values. However, not all CSS properties can be written in shorthand, excluding some. So in this blog, we will cover some more CSS shorthand properties.
This property allows you to mark list items in the following two types:
i. Ordered List(<ol>)
In the ordered list, items are marked with letters or numbers.
ii. Unordered List(<ul>)
In the unordered list, items are marked with bullets.
List style property is the shorthand property that set the following list properties in one declaration:
i. list-style-type: This property allows you to change the shape of the bullet points in the unordered list and the style of numbering in an ordered list.
ii. list-style-position: This property specifies the position of the marker, i.e., whether the marker should appear inside or outside.
iii. list-style-image: This property allows you to specify the image so you can use your own style markers.
list-style-type: star; list-style-position: inside; list-style-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/20px-Star_full.svg.png);
list-style: star inside url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/20px-Star_full.svg.png);
CSS Transitions allow you to change other CSS properties values smoothly over a given duration. It also provides a way to control the speed of the animation while changing the CSS properties.
The list of transition properties:
i. transition-property: Specifies the name of the CSS property for which the transition is.
ii. transition-duration: This property tells the duration in which the transition needs to complete.
iii. transition-timing function: This property allows you to decide the speed at which the transition needs to happen.
iv. transition-delay: This property allows you to set the delay, i.e., the wait time before the start of the transition.
transition-property: width; transition-duration: 2s; transition-timing-function: ease-in-out; transition-delay: 0s;
transition: width 2s ease-in-out 0s;
CSS animation properties animate the transition from one style configuration to another.
The list of animation properties:
i. animation-name: This property declares the name of the animation, i.e. @keyframes.
ii. animation-duration: Tells the duration in which the animation needs to complete.
iii. animation-timing-function: This property allows you to decide the speed at which the animation needs to complete.
iv. animation-delay: This allows you to set the delay, i.e. the wait time before the start of the animation.
v. animation-direction: This allows us to set the direction of the animation after the cycle.
vi. animation-iteration-count: Specifies the number of times the animation needs to happen.
vii. animation-fill-mode: Sets which value to be applied before or after the animation.
viii. animation-play-state: Plays or pauses the animation.
animation-name: circle-square; animation-duration:2s; animation-timing-function: ease-out; animation-delay:0s; animation-direction:alternate; animation-iteration-count:infinite; animation-fill-mode: none; animation-play-state: running;
animation: circle-square 2s ease-out 0s alternate infinite none running;
The flex property tells whether the item will grow or shrink to fit in the container.
This property is the shorthand property for:
i. flex-shrink: It defines the ability of the item to shrink relative to other items when there is no enough space in the container.
ii. flex-grow: It defines the ability of the item to grow.
iii. flex-basis: It defines the initial size of the item before any distribution in the available space.
flex-grow: 1; flex-shrink: inherit; /*defaults to 1*/ flex-basis: 100px;
flex: 1 100px;
I hope the above write-up was enough to learn everything about CSS shorthand properties. Shorthand properties not only save your time and energy but also makes the code look cleaner and readable. However, it requires a lot of time to memorize them.
So now it’s your turn, list out all the CSS shorthand properties you use in the comment section below.