Emmet 2.0 has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets.

Support for Emmet snippets and expansion is built right into Visual Studio Code, no extension required.

Configure IntelliSense for cross-compiling.

Let’s take a look at a fairly simple layout with three breakpoints. The width that images render at is layout-dependent rather than just viewport dependent!

The sizes attribute describes the width that the image will display within the layout of your specific site, meaning it is closely tied to your CSS. Demo Creating accurate sizesĬreating sizes attributes can get tricky. Without this information, browsers can’t make smart choices. Using srcset with width ( w) descriptors like this means that it will need to be paired with the sizes attribute so that the browser will know how large of a space the image will be displaying in. So if baby-s.jpg is 300×450, we label it as 300w. But instead of labeling them with a pixel density ( x) we’re labelling them with their resource width, using w descriptors. We’re still providing multiple copies of the same image and letting the browser pick the most appropriate one.

Perhaps the easiest-possible responsive images syntax is adding a srcset attribute with x descriptors on the images to label them for use on displays with different pixel-densities. You could try to serve entirely different images using this syntax, but browsers assume that everything in a srcset is visually-identical and will choose whichever size they think is best, in impossible-for-you-to-predict ways. The syntax is for serving differently-sized versions of the same image. What about responsive images in CSS with background images?.Where do you get the differently-sized images?.

There is a lot to talk about here, so let’s go through both syntaxes, all of the related attributes and values, and talk about a few related subjects along the way, like tooling and browsers.

Pug template define attributes