Changes between Version 116 and Version 117 of Help/Styles/MapCSSImplementation

Timestamp:

2016-08-20T06:36:19+02:00 (9 years ago)

Author:

openstreetmap.org-user-d1g

Comment:

move deprecated Media queries below

Help/Styles/MapCSSImplementation

@@ -803 +803 @@
     /* ... */
 }
-}}}
-
-== 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:
-{{{
-#!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" */
-}
-}}}
-
-Since media queries are only supported in JOSM 6970 and later, you should also specify this as minimum JOSM version in the meta selector:
-
-{{{
-#!mapcss
-meta {
-    min-josm-version: "6970"; /* This style uses media queries */
-    /* ... */
-}
-}}}
-
-
-{{{#!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.
 }}}
 
@@ -1286 +1195 @@
  * seems to have {{{[tunnel=1]}}} instead of {{{[tunnel=yes]}}} (Halcyon) or {{{[tunnel?]}}} (JOSM)
 
+== 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:
+{{{
+#!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" */
+}
+}}}
+
+Since media queries are only supported in JOSM 6970 and later, you should also specify this as minimum JOSM version in the meta selector:
+
+{{{
+#!mapcss
+meta {
+    min-josm-version: "6970"; /* This style uses media queries */
+    /* ... */
+}
+}}}
+
+
+{{{#!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.
+}}}
+
 == See also ==
  * [wiki:Help/Validator/MapCSSTagChecker MapCSSTagChecker]