Media queries with spaces between the keywords in parentheses mess up the highlighting. If I remember correctly – though I might be wrong – 4.12 did this correctly, and the problems started occuring with the 4.13.x series. Reproducible: Always Steps to Reproduce: 1. Make a CSS file 2. Add a media query with parentheses @media (max-width: 1120px) { Actual Results: Everything after the space between "max-width:" and "1120px" is highlighted incorrectly. Expected Results: I expect the code to be highlighted correctly, like it does when there's no whitespace. http://www.w3.org/TR/css3-mediaqueries/ The W3C page on media queries specifies the possibility of whitespace (S*) in that location: expression : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
Created attachment 86987 [details] Screenshot that shows the CSS media query highlighting problem This is a screenshot that shows what happens when there's whitespace within the media query's parentheses.
Created attachment 86991 [details] the test case as text
Created attachment 86992 [details] proposal for a fix Just add DetectSpaces to MQEV context. This should accept the requested white space, but still refuse anything else, because all non-error rules in that context immediately switch to #pop.
Created attachment 86993 [details] behaviour with the syntax highlighting file of the KDE/4.12 branch As a side note: this is a screenshot of what shows up when using the syntax highlighting file from the 4.12 branch. As you can see, media queries are not implemented. However, the error treatment is different and only marks the part between the parenthesis as bad.
I just added the patch to the review board: https://git.reviewboard.kde.org/r/119443/
Git commit ee46a9d09134a06c4c567feb1e458a00e3698c1d by Christoph Cullmann. Committed on 26/07/2014 at 14:29. Pushed by cullmann into branch 'master'. fix bug #335744: Kate/KWrite CSS highlighting problems with media queries Easy fix: add <DetectSpaces/> to MQEV context of css.xml highlighting file REVIEW: 119443 M +1 -0 src/syntax/data/css.xml http://commits.kde.org/ktexteditor/ee46a9d09134a06c4c567feb1e458a00e3698c1d
Git commit 910071eb44d7f185e2d4ee556d9d4a2dc4bb6d06 by Christoph Cullmann. Committed on 26/07/2014 at 14:32. Pushed by cullmann into branch 'KDE/4.14'. fix bug #335744: Kate/KWrite CSS highlighting problems with media queries Easy fix: add <DetectSpaces/> to MQEV context of css.xml highlighting file REVIEW: 119443 M +1 -0 part/syntax/data/css.xml http://commits.kde.org/kate/910071eb44d7f185e2d4ee556d9d4a2dc4bb6d06
Sorry if this is the wrong place to ask this, but I'm not sure where to ask... How can I get this fix? I tried doing "apt-get update" and "apt-get upgrade kate" but that didn't solve this. Could I go into /usr/bin/kate and remove the files and then "git clone" the most recent branch that this fix was committed to? If so where is that repository?
(In reply to alec hill from comment #8) > Sorry if this is the wrong place to ask this, but I'm not sure where to > ask... How can I get this fix? It is part of KDE Applications version 4.14.0 and higher. So, if you are using an older version (e. g. Kubuntu 14.04 and 14.10 ship with 4.13.x), you can update this on a per user basis by updating the highlighting files from withing Kate. Just run Kate and then navigate through the menu: > Settings > Configure Kate... > Editor Component > Open/Save > Modes & Filetypes > Download Highlighting Files... Make sure the update for CSS is selected and install it. Afterwards restart Kate to actually use the new highlighting files. > Could I go into /usr/bin/kate and remove the files and then > "git clone" the most recent branch that this fix was committed to? If so > where is that repository? This would break things. Cloning a git repository directly from the KDE project ("upstream") usually does not give you binaries, but the source code. To use it, you would have to compile it, which is a time consuming task and I recommend not to do this if you do not intend to become a developer. If you insist on updating KDE you can check if your distribution offers some sort of backports (Kubuntu usually has them, but I cannot help you with that. However, you can refer to the documentation like e.g. https://help.ubuntu.com/community/Repositories/Kubuntu and you can ask the community for advice if you run into trouble).
Wow, THANK YOU!!!! I went into Settings... and downloaded the new Highlight Files (CSS 2.10) ...and now the css within my media queries is highlighted properly :D
*** Bug 344734 has been marked as a duplicate of this bug. ***
It's still no good. I refreshed the css highlight file, but this expression causes a fault: @media screen and (-webkit-min-device-pixel-ratio: 2) { header .brand > li.logo { background-image: url('../imgs/logo.png'); } } I'll try to attach a screenshot :)
Created attachment 94694 [details] This media query still causes an highlight error
This is the problem: -webkit-min-device-pixel-ratio This is an unknown selector (or what?) for the KWrite css parser. But this is valid, read this: https://css-tricks.com/snippets/css/retina-display-media-query/