Changes between Version 79 and Version 80 of Help/Styles/MapCSSImplementation

Timestamp:

2015-02-19T15:43:13+01:00 (9 years ago)

Author:

bastiK

Comment:

doc for @supports rule, deprecate @media query

Help/Styles/MapCSSImplementation

@@ -678 +678 @@
 You can also negate classes. E.g. {{{way!.path}}} for all ways, which are not part of the class ''.path''.
 
-== Media queries [''since 6970''] ==
-
+== @supports rule for conditional processing [''since 8087''] ==
+
+@supports rules 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
+@supports (min-josm-version: 9789) {
+    way[highway] {
+        width: 4;
+        color: orange;
+    }
+    /* fancy new stuff */
+    /* ... */
+}
+
+@supports (max-josm-version: 9788) {
+    way[highway] {
+        width: 4;
+        color: blue;
+    }
+    /* fall back mode, using more simple features */
+    /* ... */
+}
+
+@supports (icon-offset-x) {
+    /* only if icon-offset-x property is supported */
+    node[amenity] {
+        icon-offset-x: 5;
+    }
+}
+}}}
+
+The syntax closely matches the official [http://dev.w3.org/csswg/css-conditional/ css syntax]. The following conditions are supported:
+
+{{{#!th
+'''Condition'''
+}}}
+{{{#!th
+'''Description'''
+}}}
+|-
+{{{#!td
+(''<mapcsskey>'')
+}}}
+{{{#!td
+Check if a certain mapcss key is supported, e.g. `repeat-image` or `icon-offset-x`.
+}}}
+|-
+{{{#!td
+(min-josm-version: ''<number>'')
+}}}
+{{{#!td
+Only include {{{@supports}}} section when the current version of JOSM is greater than or equal to the specified number.
+}}}
+|-
+{{{#!td
+(max-josm-version: ''<number>'')
+}}}
+{{{#!td
+Only include {{{@supports}}} section when the current version of JOSM is lower than or equal to the specified number.
+}}}
+|-
+{{{#!td
+(user-agent: ''<string>'')
+}}}
+{{{#!td
+Only include {{{@supports}}} 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
+@supports (min-josm-version: 8087) and (max-josm-version: 8200) {
+ /* only for JOSM versions 8087 to 8200 */
+}
+}}}
+
+Other logical operators like {{{or}}} and {{{not}}} can also be used. Parentheses are needed if you want to combine different logical operators:
+
+{{{
+#!mapcss
+@supports ((min-josm-version: 8087) and (max-josm-version: 8200)) or (user-agent: myEditor) {
+  /* for JOSM version 8087 to 8200 and for the editor called "myEditor" */
+}
+}}}
+
+Since @supports rules are only supported in JOSM 8087 and later, you should also specify this as minimum JOSM version in the meta selector:
+
+{{{
+#!mapcss
+meta {
+    min-josm-version: "8087"; /* This style uses @supports rules */
+    /* ... */
+}
+}}}
+
+== Media queries [''since 6970'']  (deprecated) ==
+
+{{{#!td style="background-color: #faa"
+Note: media queries are deprecated. You should use @supports rules instead (see above).
+}}}
 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:
 {{{