emmetio/emmet — pull request #350 by bruceontheloose (2014-11-13 01:29:46+00:00)
Title: #349 - Added abbreviations for srcset, sizes, picture, and related

## About
This pull request addresses issue #349 to make it easier for developers to use `srcset`, `sizes`, `picture` and more for implementing responsive images.

In case you'd like some references handy while considering this update:
- [Responsive images use cases in HTML5.1 Spec](http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#attr-img-srcset)
- [Responsive Images: Use Cases and Documented Code Snippets to Get You Started](https://dev.opera.com/articles/responsive-images/)

## Building Blocks
The following have been added to snippets.json (with the exception of `img`, as noted):

| Abbrev/Alias | Result |
| ------------ |---------------|
| `img` *[1]* | `` |
| `img:srcset` *or* `img:s` | `` |
| `img:sizes` *or* `img:z` | `` |
| `picture` *or* `pic` | `` |
| `source` *or* `src` *[2]* | `` |
| `source:srcset` *or* `src:s` | `` |
| `source:media` *or* `src:m` | `` |
| `source:type` *or* `src:t` | `` |
| `source:sizes` *or* `src:z` | `` |
| `source:media:type` *or* `src:mt` | `` |
| `source:media:sizes` *or* `src:mz` | `` |
| `source:sizes:type` *or* `src:zt` | `` |
| `source:src` *or* `src:sc` *[3]* | `` |

**Legend**
1 - Unchanged from your current implementation. Here for reference.
2 - Consistent with pull request I submitted for issue #346, but this implementation is slightly different, so this supersedes that pull request.
3 - Used with `audio` and `video`, not for responsive images.

## Other Conveniences
These have been added to snippets.json as well:

(1) `pic+` (an alias for `picture>source:srcset+img`) results in:
```html

```
This also could be achieved with `pic>src:s+img`.

(2) It occurred to me that some coders might prefer to think in terms of the responsive images use cases they want to implement (hence the `ri` prefix shown below). The following shortcuts represent the four basic use cases. (Many others exist, as shown in the Opera article I referenced. They can be fashioned with the building blocks. Having said that, it could be helpful to create `ri` aliases for one or two more of the common ones. I wanted to see if you like the idea of these `ri` aliases at all before doing so.)

1. **Use Case: Device-pixel-ratio-based selection**
`ri:dpr` *or* `ri:d` (aliases for `img:s`)

Result:
```html

```

2. **Use Case: Viewport-based selection (to change image size)**
`ri:viewport` *or* `ri:v` (aliases for `img:z`)

Result:
```html

```

3. **Use Case: Art direction-based selection**
`ri:art` *or* `ri:a` (aliases for `pic>src:m+img`)

Result:
```html

```

4. **Use Case: Image type (format)-based selection**
`ri:type` *or* `ri:t` (aliases for `pic>src:t+img`)

Result:
```html

```

## Notes
- **Order of attributes:** There isn't consensus in the community about a preferred order for the attributes. For example, should it be `` or ``? In fact, in the spec and across various tutorials, you'll see `src` and `alt` come first in the device-pixel-ratio-based case, and last in the viewport-based case (I do understand the logic behind that). I suspect the preference will vary from one developer to the next, so some will be happy with how Emmet does it if you decide to merge this PR, while others might want to make local overrides. I'd be happy to change the current order of attributes if you'd like them to be different; for example, to always make `src="" alt=""` come before other attributes on `img`.

- **Putting some attributes on own line:** As you've probably seen, it's popular to make verbose `img` and `picture` tags easier to read by putting some of the attributes and/or their values on their own lines. For example:

```html

```
I toyed with doing that, which (as far as I can tell) would have required creating snippets, but I didn't want to go that route without knowing your preference, given there isn't another HTML case where Emmet does that outside of conditional comments. I suppose a flag could be used for toggling between the two modes. I didn't investigate what that would entail, but I believe it would require adjusting the internals some.

* **Providing hints:** I considered including the `w`, `x`, and `vw` unit descriptors in the proper attributes (ex: `sizes="vw"`) under certain conditions as a helpful hint and starter for coders, but omitted them.

* I also thought about putting `"src:sc|source:src": "",` after the `video` and `audio` definitions because it's related to them, but thought you might want all `src` definitions together, so I put it with the ones related to `picture`.

--

Thank you for considering the update; I know this is a lot to pore through. I also wouldn't be surprised if some of it could be improved via some cleverness in Emmet that I'm unaware of.

I'd be happy to discuss any of this if you'd like. Thanks again.