Changes between Version 46 and Version 47 of Help/Styles/MapCSSImplementation

Timestamp:

2014-04-12T18:09:32+02:00 (10 years ago)

Author:

bastiK

Comment:

doc for the media query

Help/Styles/MapCSSImplementation

@@ -666 +666 @@
 }}}
 
-
+== Media queries [''since 6970''] ==
+
+Media queries are used to skip a section of the style under certain conditions. Typically you want to use a feature which is introduced in a newer version of JOSM, but like to have a fall back style for users of older JOSM clients. Example:
+{{{
+#!mapcss
+@media (min-josm-version: 9789) {
+    way[highway] {
+        width: 4;
+        color: orange;
+    }
+    /* fancy new stuff */
+    /* ... */
+}
+
+@media (max-josm-version: 9788) {
+    way[highway] {
+        width: 4;
+        color: blue;
+    }
+    /* fall back mode, using more simple features */
+    /* ... */
+}
+}}}
+
+The syntax closely matches the official [http://www.w3.org/TR/css3-mediaqueries/#syntax css syntax]. The following conditions are supported:
+
+{{{#!th
+'''Media condition'''
+}}}
+{{{#!th
+'''Description'''
+}}}
+|-
+{{{#!td
+(min-josm-version: ''<number>'')
+}}}
+{{{#!td
+Only include {{{@media}}} section when the current version of JOSM is greater than or equal to the specified number.
+}}}
+|-
+{{{#!td
+(max-josm-version: ''<number>'')
+}}}
+{{{#!td
+Only include {{{@media}}} section when the current version of JOSM is lower than or equal to the specified number.
+}}}
+|-
+{{{#!td
+(user-agent: ''<string>'')
+}}}
+{{{#!td
+Only include {{{@media}}} section when the name of the editor / renderer matches the given string. In JOSM, the only accepted value is {{{josm}}}. 
+}}}
+
+Conditions can be combined with {{{and}}}:
+
+{{{
+#!mapcss
+@media (min-josm-version: 6970) and (max-josm-version: 7014) {
+ /* only for JOSM versions 6970 to 7014 */
+}
+}}}
+
+Multiple combined conditions can be chained with a comma (logical ''or''):
+
+{{{
+#!mapcss
+@media (min-josm-version: 6970) and (max-josm-version: 7014), (user-agent: myEditor) {
+  /* for JOSM version 6970 to 7014 and for the editor called "myEditor" */
+}
+}}}
+
+{{{#!comment
+There is also the {{{not}}} keyword (see the linked css doc for details).
+This is implemented, but probably not very useful. Feel free to add documentation.
+}}}
 
 == Properties ==