Fixed remaining issues and added docs for browser support

docs/browser-support.md

@@ -0,0 +1,70 @@
+---
+template: overrides/main.html
+---
+
+# Browser support
+
+Material for MkDocs goes at great lengths to support the largest possible range
+of browsers while retaining the simplemost possibilities for customization via
+modern CSS features like [custom properties] and [mask images].
+
+  [custom properties]: https://caniuse.com/css-variables
+  [mask images]: https://caniuse.com/mdn-css_properties_mask-image
+
+## Supported browsers
+
+The following table lists all browsers for which Material for MkDocs offers full
+support, so it can be assumed that all features work without degradation. If you
+find a feature not to be working in a browser in the supported version range,
+please [open an issue]:
+
+<figure markdown>
+
+| Browser                              | Version | Release date |         |        |      Usage |
+| ------------------------------------ | ------: | -----------: | ------: | -----: | ---------: |
+|                                      |         |              | desktop | mobile |    overall |
+| :fontawesome-brands-chrome: Chrome   |     49+ |      03/2016 | 25.65%  | 38.33% |     63.98% |
+| :fontawesome-brands-safari: Safari   |     10+ |      09/2016 |  4.63%  | 14.96% |     19.59% |
+| :fontawesome-brands-edge: Edge       |     79+ |      01/2020 |  3.95%  |    n/a |      3.95% |
+| :fontawesome-brands-firefox: Firefox |     53+ |      04/2017 |  3.40%  |   .30% |      3.70% |
+| :fontawesome-brands-opera: Opera     |     36+ |      03/2016 |  1.44%  |   .01% |      1.45% |
+|                                      |         |              |         |        | __92.67%__ |
+
+  <figcaption markdown>
+
+Browser support matrix sourced from [caniuse.com].[^1]
+
+  </figcaption>
+</figure>
+
+  [^1]:
+    The data was collected from [caniuse.com] in January 2022 and is primarily
+    based on browser support for [custom properties], [mask images] and the
+    [:is pseudo selector] which are not completely polyfillable.
+
+Note that the usage data is based on global browser market share, so it could
+in fact be entirely different for your target demographic. It's a good idea to
+check the distribution of browser types and versions among your users.
+
+  [open an issue]: https://github.com/squidfunk/mkdocs-material/issues/new/choose
+  [caniuse.com]: https://caniuse.com/
+  [:is pseudo selector]: https://caniuse.com/css-matches-pseudo
+
+## Other browsers
+
+Albeit your site might not look as perfect as when viewed with a modern browser,
+the following older browser versions might work with some additional effort:
+
+- :fontawesome-brands-firefox: __Firefox 31-52__ – icons will render as little
+  boxes due to missing support for [mask images]. While this cannot be
+  polyfilled, it might be mitigated by hiding icons with [additional CSS].
+- :fontawesome-brands-edge: __Edge 16-18__ – the spacing of some elements might be
+  a little of due to missing support for the [:is pseudo selector], which can be
+  mitigated with some [additional CSS].
+- :fontawesome-brands-internet-explorer: __Internet Explorer__ - no support,
+  mainly due to missing support for [custom properties]. The last version of
+  Material for MkDocs to support Internet Explorer is
+  [:octicons-tag-24: 4.6.3][IE support].
+
+  [additional CSS]: customization.md#additional-css
+  [IE support]: https://github.com/squidfunk/mkdocs-material/releases/tag/4.6.3

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.8002f318.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.eab66a73.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.e6a45f82.min.css' | url }}">

material/overrides/assets/stylesheets/main.c1d34250.min.css.map

@@ -1 +1 @@
-{"version":3,"sources":["src/overrides/assets/stylesheets/main/_typeset.scss","../../../../src/overrides/assets/stylesheets/main.scss","src/assets/stylesheets/utilities/_break.scss","src/overrides/assets/stylesheets/main/layout/_banner.scss","src/overrides/assets/stylesheets/main/layout/_hero.scss","src/overrides/assets/stylesheets/main/layout/_iconsearch.scss","src/overrides/assets/stylesheets/main/layout/_sponsorship.scss"],"names":[],"mappings":"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","file":"main.css"}
+{"version":3,"sources":["src/overrides/assets/stylesheets/main/_typeset.scss","../../../../src/overrides/assets/stylesheets/main.scss","src/assets/stylesheets/utilities/_break.scss","src/overrides/assets/stylesheets/main/layout/_banner.scss","src/overrides/assets/stylesheets/main/layout/_hero.scss","src/overrides/assets/stylesheets/main/layout/_iconsearch.scss","src/overrides/assets/stylesheets/main/layout/_sponsorship.scss"],"names":[],"mappings":"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","file":"main.css"}

material/overrides/main.html

@@ -3,7 +3,7 @@
 -#}
 {% extends "base.html" %}
 {% block extrahead %}
-  <link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.de86b20e.min.css' | url }}">
+  <link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.c1d34250.min.css' | url }}">
 {% endblock %}
 {% block announce %}
   <a href="https://twitter.com/squidfunk">

mkdocs.yml

@@ -165,6 +165,7 @@ nav:
     - Installation: getting-started.md
     - Creating your site: creating-your-site.md
     - Publishing your site: publishing-your-site.md
+    - Browser support: browser-support.md
     - Customization: customization.md
     - License: license.md
     - Changelog:

src/assets/stylesheets/main/_typeset.scss

@@ -84,8 +84,13 @@ kbd {
   }
 
   // Default spacing
-  :is(ul, ol, dl, figure, blockquote, pre) {
-    margin: 1em 0;
+  ul,
+  ol,
+  dl,
+  figure,
+  blockquote,
+  pre {
+    margin-block: 1em;
   }
 
   // Headline on level 1
@@ -129,7 +134,8 @@ kbd {
   }
 
   // Headline on level 5-6
-  :is(h5, h6) {
+  h5,
+  h6 {
     margin: px2em(16px, 12.8px) 0;
     color: var(--md-default-fg-color--light);
     font-weight: 700;
@@ -161,7 +167,8 @@ kbd {
     }
 
     // Text link on focus/hover
-    &:is(:focus, :hover) {
+    &:focus,
+    &:hover {
       color: var(--md-accent-fg-color);
     }
 
@@ -173,7 +180,9 @@ kbd {
   }
 
   // Code block
-  :is(code, pre, kbd) {
+  code,
+  pre,
+  kbd {
     color: var(--md-code-fg-color);
     direction: ltr;
 
@@ -199,14 +208,6 @@ kbd {
     }
   }
 
-  // Code block in headline
-  :is(h1, h2, h3, h4, h5, h6) code {
-    margin: initial;
-    padding: initial;
-    background-color: transparent;
-    box-shadow: none;
-  }
-
   // Ensure link color in code blocks
   a code {
     color: currentColor;
@@ -315,7 +316,8 @@ kbd {
   }
 
   // Superscript and subscript
-  :is(sup, sub) {
+  sup,
+  sub {
     margin-inline-start: px2em(1px, 12.8px);
   }
 
@@ -332,7 +334,8 @@ kbd {
   }
 
   // Unordered and ordered list
-  :is(ul, ol) {
+  ul,
+  ol {
     margin-inline-start: px2em(10px);
     padding: 0;
 
@@ -381,7 +384,8 @@ kbd {
   }
 
   // Image or icon
-  :is(img, svg) {
+  img,
+  svg {
     max-width: 100%;
     height: auto;
 

src/overrides/assets/stylesheets/main/layout/_iconsearch.scss

@@ -91,6 +91,9 @@
     // Icon search result list
     &__list {
       margin: 0;
+      // Hack: necessary because of increased specificity due to the PostCSS
+      // plugin which prefixes this with `[dir=...]` selectors.
+      margin-inline-start: 0;
       padding: 0;
       list-style: none;
     }
@@ -98,6 +101,9 @@
     // Icon search result item
     &__item {
       margin: 0;
+      // Hack: necessary because of increased specificity due to the PostCSS
+      // plugin which prefixes this with `[dir=...]` selectors.
+      margin-inline-start: 0;
       padding: px2rem(4px) px2rem(12px);
       border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);