680 | | == Media queries [''since 6970''] == |
681 | | |
| 680 | == @supports rule for conditional processing [''since 8087''] == |
| 681 | |
| 682 | @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: |
| 683 | {{{ |
| 684 | #!mapcss |
| 685 | @supports (min-josm-version: 9789) { |
| 686 | way[highway] { |
| 687 | width: 4; |
| 688 | color: orange; |
| 689 | } |
| 690 | /* fancy new stuff */ |
| 691 | /* ... */ |
| 692 | } |
| 693 | |
| 694 | @supports (max-josm-version: 9788) { |
| 695 | way[highway] { |
| 696 | width: 4; |
| 697 | color: blue; |
| 698 | } |
| 699 | /* fall back mode, using more simple features */ |
| 700 | /* ... */ |
| 701 | } |
| 702 | |
| 703 | @supports (icon-offset-x) { |
| 704 | /* only if icon-offset-x property is supported */ |
| 705 | node[amenity] { |
| 706 | icon-offset-x: 5; |
| 707 | } |
| 708 | } |
| 709 | }}} |
| 710 | |
| 711 | The syntax closely matches the official [http://dev.w3.org/csswg/css-conditional/ css syntax]. The following conditions are supported: |
| 712 | |
| 713 | {{{#!th |
| 714 | '''Condition''' |
| 715 | }}} |
| 716 | {{{#!th |
| 717 | '''Description''' |
| 718 | }}} |
| 719 | |- |
| 720 | {{{#!td |
| 721 | (''<mapcsskey>'') |
| 722 | }}} |
| 723 | {{{#!td |
| 724 | Check if a certain mapcss key is supported, e.g. `repeat-image` or `icon-offset-x`. |
| 725 | }}} |
| 726 | |- |
| 727 | {{{#!td |
| 728 | (min-josm-version: ''<number>'') |
| 729 | }}} |
| 730 | {{{#!td |
| 731 | Only include {{{@supports}}} section when the current version of JOSM is greater than or equal to the specified number. |
| 732 | }}} |
| 733 | |- |
| 734 | {{{#!td |
| 735 | (max-josm-version: ''<number>'') |
| 736 | }}} |
| 737 | {{{#!td |
| 738 | Only include {{{@supports}}} section when the current version of JOSM is lower than or equal to the specified number. |
| 739 | }}} |
| 740 | |- |
| 741 | {{{#!td |
| 742 | (user-agent: ''<string>'') |
| 743 | }}} |
| 744 | {{{#!td |
| 745 | Only include {{{@supports}}} section when the name of the editor / renderer matches the given string. In JOSM, the only accepted value is {{{josm}}}. |
| 746 | }}} |
| 747 | |
| 748 | Conditions can be combined with {{{and}}}: |
| 749 | |
| 750 | {{{ |
| 751 | #!mapcss |
| 752 | @supports (min-josm-version: 8087) and (max-josm-version: 8200) { |
| 753 | /* only for JOSM versions 8087 to 8200 */ |
| 754 | } |
| 755 | }}} |
| 756 | |
| 757 | Other logical operators like {{{or}}} and {{{not}}} can also be used. Parentheses are needed if you want to combine different logical operators: |
| 758 | |
| 759 | {{{ |
| 760 | #!mapcss |
| 761 | @supports ((min-josm-version: 8087) and (max-josm-version: 8200)) or (user-agent: myEditor) { |
| 762 | /* for JOSM version 8087 to 8200 and for the editor called "myEditor" */ |
| 763 | } |
| 764 | }}} |
| 765 | |
| 766 | Since @supports rules are only supported in JOSM 8087 and later, you should also specify this as minimum JOSM version in the meta selector: |
| 767 | |
| 768 | {{{ |
| 769 | #!mapcss |
| 770 | meta { |
| 771 | min-josm-version: "8087"; /* This style uses @supports rules */ |
| 772 | /* ... */ |
| 773 | } |
| 774 | }}} |
| 775 | |
| 776 | == Media queries [''since 6970''] (deprecated) == |
| 777 | |
| 778 | {{{#!td style="background-color: #faa" |
| 779 | Note: media queries are deprecated. You should use @supports rules instead (see above). |
| 780 | }}} |