Explain Implicit Type Coercion in JavaScript with example
Posted By Rezaul Karim | JavaScript No Comments
Implicit type coercion in JavaScript is automatic conversion of value from one data type to another. It takes place ...
CSS Shorthand properties are properties that let you set the values of multiple other CSS properties simultaneously. Using shorthand property, you can write more short and often more readable style sheets, saving time and energy.
This Shorthand properties makes your code optimized and ‘SEO’ friendly. Let’s discover some useful CSS Shorthand properties :-
Recommended: Download free HTML CSS Templates with source code for practice
The following declarations …
.class { background-color: #ddd; background-image: url(image.png); background-repeat: no-repeat; background-position: top left; background-attachment: fixed; }
… can be shortened to just one declaration:
.class { background: #ddd url(img.png) no-repeat top left fixed; }
Recommended: Learn About CSS Background Properties
The following declarations …
.class { font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.6; font-family: Arial, Helvetica, sans-serif; }
… can be shortened to just one declaration:
.class { font: bold italic small-caps 1em/1.6 Arial, sans-serif; }
The following declarations …
.class { text-decoration-color: blue; text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: 2px; }
… can be shortened to just one declaration:
.class { text-decoration: blue underline solid 2px; }
Recommended: Learn about Text Styling in CSS
The following declarations …
.class { margin-top: 1em; margin-right: 1.5em; margin-bottom: 2em; margin-left: 2.5em; }
… can be shortened to just one declaration:
.class { margin: 1em 1.5em 2em 2.5em; } /* or */ .class { margin: 5em 3em; } /* up/down - 5em & left/right - 3em */
The following declarations …
.class { padding-top: 1em; padding-right: 1.5em; padding-bottom: 2em; padding-left: 2.5em; }
… can be shortened to just one declaration:
.class { padding: 1em 1.5em 2em 2.5em; } /* or */ .class { padding: 5em 3em; } /* up/down - 5em & left/right - 3em */
Recommended: Top 10 Animation Libraries – (CSS + JavaScript )
The following declarations …
.class { border-width: 1px; border-style: solid; border-color: black; }
… can be shortened to just one declaration:
.class { border: 1px solid black; }
The following declarations …
.class { animation-name: motion; animation-duration: 2s; animation-timing-function: ease-in; animation-delay: 1s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; }
… can be shortened to just one declaration:
.class { animation: motion 2s ease-in 1s alternate infinite none running; }
The following declarations …
.class { outline-width: thick; outline-style: dotted; outline-color: red; }
… can be shortened to just one declaration:
.class { outline: thick dotted red; }
The following declarations …
.class { transition-property: extend; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; }
… can be shortened to just one declaration:
.class { transition: extend 2s linear 1s; }
The following declarations …
.class { flex-grow: 1; flex-shrink: 1; flex-basis: auto; }
… can be shortened to just one declaration:
.class { flex: 1 1 auto; }
The following declarations …
.class { list-style-type: square; list-style-position: inside; list-style-image: url("image.png"); }
… can be shortened to just one declaration:
.class { list: square inside url("image.png"); }
The following declarations …
.class { column-width: 40px; column-count: 4; }
… can be shortened to just one declaration:
.class { columns: 40px 4; }
The following declarations …
.class { grid-template-rows: 100px auto 300px; grid-template-columns: repeat(2, 1fr) 100px; }
… can be shortened to just one declaration:
.class { grid: 100px auto 300px / repeat(2, 1fr) 100px; }
The following declarations …
.class { grid-row-start: 2; grid-column-start: 1; grid-row-end: 4; grid-column-end: 4; }
… can be shortened to just one declaration:
.class { grid-area: 2 / 1 / span 2 / span 3; }
The following declarations …
.class { grid-row-start: 1; grid-row-end: 3; /* or */ grid-row-end: span 2; }
… can be shortened to just one declaration:
.class { grid-row: 1 / 3 ; /* or */ grid-row: 1 / span 2; }
The following declarations …
.class { grid-column-start: 1; grid-column-end: 3; /* or */ grid-column-end: span 2; }
… shortened to just following one declaration:
.class { grid-column: 1 / 3 ; /* or */ grid-column: 1 / span 2; }
For more CSS Shorthand properties visit here
If you like our today’s article, then you must share the article on social media and Read my others article about coding and programming, Tips, Productivity , Resources etc…
Also, if you have any questions or suggestions related to the article, please let us know in the comments below.
Recommended: Test your programming knowledge – Programming quiz!
Discuss a project or just want to say hi? My Inbox is open for all.