| Summary: | Web Inspector: device-pixel-ratio and orientation media queries are red in CodeMirror | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Timothy Hatcher <timothy> | ||||
| Component: | Web Inspector | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | RESOLVED FIXED | ||||||
| Severity: | Normal | CC: | graouts, joepeck, jonowells, mattbaker, nvasilyev, timothy, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | 528+ (Nightly build) | ||||||
| Hardware: | All | ||||||
| OS: | All | ||||||
| Attachments: |
|
||||||
Created attachment 257480 [details]
Screenshot
This seems like a CodeMirror insufficiency. CodeMirror's css.js includes a list of supported @media features:
var mediaFeatures_ = [
"width", "min-width", "max-width", "height", "min-height", "max-height",
"device-width", "min-device-width", "max-device-width", "device-height",
...
], mediaFeatures = keySet(mediaFeatures_);
Even trunk doesn't have these. I think, for standard features like this we should propose CodeMirror update. I'll file a CodeMirror issue and see what other standard features we may want to propose.
Filed a CodeMirror issue: https://github.com/codemirror/CodeMirror/issues/3417 Depending on what the CodeMirror developers want to put into main stream, we may need to add WebKit specific media query features like: "-webkit-video-playable-inline" CodeMirror added common / legacy media-query features in: https://github.com/codemirror/CodeMirror/commit/3ef42f71dc1a7c50ab73c39516a0563430eb11e3 We recently updated CodeMirror and that seems to have fixed this. We haven't customized to include support for new / vendor specific media query features that WebKit supports. We can file a new bug to track that. Note the CodeMirror issue page has some decent analysis about new media query features. |
The following CSS has red syntax highlights for device-pixel-ratio and orientation. /* iPhone, iPhone 3G/3GS portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) and (device-aspect-ratio: 2/3) and (orientation: portrait) { } /* iPhone, iPhone 3G/3GS landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) and (device-aspect-ratio: 2/3) and (orientation: landscape) { }