Go to the Preferences / or Settings area of VSC and choose css.json. Paste each snippet after the previous snippet, but before the file’s closing curly brace.
Responsive Images
This code prevents images from being bigger than their parent element.This style should be in every stylesheet you write, because responsive design is pretty much impossible without it.
"Responsive Images": {
"prefix": "rimg",
"body": [
"img {",
"max-width: 100%;",
"height: auto;",
"display: block;",
"}",
],
"description": "Responsive Images CSS"
},Visually Hidden
This code will hide content visually, while still keeping it accessible. You will often see this code referred to as “screenreader-text” (as in WordPress, for example).
"Visually Hidden": {
"prefix": "vh",
"body": [
".visually-hidden {",
"clip: rect(0 0 0 0);",
"clip-path: inset(50%);",
"height: 1px;",
"overflow: hidden;",
"position: absolute;",
"white-space: nowrap;",
"width: 1px;",
"}",
],
"description": "Visually Hidden"
},Media Query
Note the use of ${1:size}, ${2:element}, and $0 to add tab insertion points.
"Media Query": {
"prefix": "mq",
"body": [
"@media screen and (min-width: ${1:size}) {",
"${2:element} {",
"$0",
"}",
"}",
],
"description": "Media Query"
},Nested Media Query
A nested media query is a new feature in CSS: it allows you to put media queries inside individual style rules
"Media Query Nested": {
"prefix": "mqn",
"body": [
"@media screen and (min-width: ${1:size}) {",
"$0",
"}"
],
"description": "Nested Media Query"
},