Repository: vscode
Issue: [html] suggestions for media
Labels: help wanted,feature-request,html

<!-- ⚠️⚠️ Do Not Delete This! bug_report_template ⚠️⚠️ -->
<!-- Please read our Rules of Conduct: https://opensource.microsoft.com/codeofconduct/ -->
<!-- 🕮 Read our guide about submitting issues: https://github.com/microsoft/vscode/wiki/Submitting-Bugs-and-Suggestions -->
<!-- 🔎 Search existing issues to avoid creating duplicates. -->
<!-- 🧪 Test using the latest Insiders build to see if your issue has already been fixed: https://code.visualstudio.com/insiders/ -->
<!-- 💡 Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. -->
- VS Code Version: 1.54.3
- OS Version: Windows 10 20H2 Build 19042.572

Steps to Reproduce:

![image](https://user-images.githubusercontent.com/17777237/112745825-821c3b80-8fab-11eb-8d8b-83836b758c26.png)
![image](https://user-images.githubusercontent.com/17777237/112746076-f9060400-8fac-11eb-848c-568fd0fafff5.png)
![image](https://user-images.githubusercontent.com/17777237/112746269-ffe14680-8fad-11eb-8b42-a0be163cba0e.png)


### Possible Operators

Value | Description
-- | --
and | Specifies an AND operator
not | Specifies a NOT operator
, | Specifies an OR operator

### Devices


Value | Description
-- | --
all | Default. Used for all media type devices
print | Used for Print preview mode/printed pages
screen | Used for computer screens, tablets, smart-phones etc.
speech | Used for screenreaders that "reads" the page out loud
aural | **_Deprecated_**. Speech synthesizers
braille | **_Deprecated_**. Braille feedback devices
handheld | **_Deprecated_**. Handheld devices (small screen, limited bandwidth)
projection | **_Deprecated_**. Projectors
tty | **_Deprecated_**. Teletypes and similar media using a fixed-pitch character grid
tv | **_Deprecated_**. Television type devices (low resolution, limited scroll ability)



### Values

Value | Description
-- | --
aspect-ratio | Specifies the width/height ratio of the targeted display area."min-" and "max-" prefixes can be used.Example: media="screen and (max-aspect-ratio:16/9)"
color | Specifies the bits per color of target display."min-" and "max-" prefixes can be used.Example: media="screen and (min-color:3)"
color-index | Specifies the number of colors the target display can handle."min-" and "max-" prefixes can be used.Example: media="screen and (min-color-index:256)"
device-aspect-ratio | **_Deprecated_**. Specifies the device-width/device-height ratio of the target display/paper.
device-width | **_Deprecated_**. Specifies the width of the target display/paper.
device-height | **_Deprecated_**. Specifies the height of the target display/paper.
grid | Specifies if the output device is grid or bitmap.Possible values are "1" for grid, and "0" otherwise.Example: media="handheld and (grid:1)"
height | Specifies the height of the  targeted display area."min-" and "max-" prefixes can be used.Example: media="screen and (max-height:700px)"
monochrome | Specifies the bits per pixel in a monochrome frame buffer."min-" and "max-" prefixes can be used.Example: media="screen and (min-monochrome:2)"
orientation | Specifies the orientation of the target display/paper.Possible values: "portrait" or "landscape"Example: media="all and (orientation: landscape)"
resolution | Specifies the pixel density (dpi or dpcm) of the target display/paper."min-" and "max-" prefixes can be used.Example: media="print and (min-resolution:300dpi)"
scan | Specifies scanning method of a tv display.Possible values are "progressive" and "interlace".Example: media="tv and (scan:interlace)"
width | Specifies the width of the targeted display area."min-" and "max-" prefixes can be used.Example: media="screen and (min-width:500px)"


<!-- 🔧 Launch with `code --disable-extensions` to check. -->
Does this issue occur when all extensions are disabled?: Yes

<!-- 🪓 If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. -->
<!-- 📣 Issues caused by an extension need to be reported direct to the extension publisher. The 'Help > Report Issue' dialog can assist with this. -->