Browser compatibility added to help page

pages/help/help.css

@@ -1,9 +1,18 @@
-table {
+code {
+    line-height: 2;
+}
+
+.table-ublock {
     border-collapse: separate;
     border-spacing: 3em 1em;
 }
 
+.code-red, .code-blue {
+    word-break: break-all;
+}
+
 .code-red {
+    border: 1px solid black;
     color: red;
 }
 
@@ -11,6 +20,57 @@ table {
     color: blue;
 }
 
+.table-browser-compatibility {
+    border-collapse: collapse;
+    max-width: 500px;
+}
+
+.table-browser-compatibility > tbody > tr > td {
+    border: 1px solid #777;
+}
+
+.table-browser-compatibility > tbody > tr > td:nth-child(1) {
+    font-family: consolas,"Liberation Mono",courier,monospace;
+    padding: 10px;
+    width: 100%;
+}
+
+.browser-compatibility {
+    border-top: 0;
+    height: 200px;
+    padding: 6px 0;
+    vertical-align: bottom;
+}
+
+.browser-compatibility > th > span {
+    display: inline-block;
+    font-weight: bold;
+    height: 20px;
+    margin: 12px;
+    padding: 0;
+    text-align: left;
+    transform: rotate(-90deg);
+    white-space: nowrap;
+    width: 20px;
+}
+
+.browser-compatibility-support-yes, .browser-compatibility-support-no {
+    font-weight: bold;
+    text-align: center;
+}
+
+.browser-compatibility-support-no {
+	background-color: #ffbdbd;
+	background-image: linear-gradient(to bottom right,rgba(94,3,6,.1) 0,rgba(94,3,6,.1) 1px,transparent 0,transparent 67px,rgba(94,3,6,.1) 0,rgba(94,3,6,.1) 73px,transparent 0,transparent 138px,rgba(94,3,6,.1) 0,rgba(94,3,6,.1) 144px,transparent 0),linear-gradient(to bottom left,rgba(94,3,6,.1) 0,rgba(94,3,6,.1) 1px,transparent 0,transparent 67px,rgba(94,3,6,.1) 0,rgba(94,3,6,.1) 73px,transparent 0,transparent 138px,rgba(94,3,6,.1) 0,rgba(94,3,6,.1) 144px,transparent 0);
+	background-position: 50% 50%,50% 50%;
+	background-repeat: no-repeat;
+	background-size: 100px 100px,100px 100px;
+}
+
+.browser-compatibility-support-yes {
+    background-color: #ebf8e1;
+}
+
 @media (prefers-color-scheme: dark) {
     .code-blue {
         color: #8484ff;

pages/help/help.html

@@ -25,7 +25,7 @@
                     <li><a class="no-icon" href="#google-fonts">Why is there a "Block Google Fonts" option?</a></li>
                     <li><a class="no-icon" href="#statistics">What about the statistics? Is anything transferred to any servers?</a></li>
                     <li><a class="no-icon" href="#sync">What will be synchronized when I select "sync" as storage type?</a></li>
-                    <li><a class="no-icon" href="#non-firefox">Non-Firefox Browser</a></li>
+                    <li><a class="no-icon" href="#browser-compatibility">Browser compatibility</a></li>
                 </ul>
             </div>
         </div>
@@ -37,10 +37,10 @@
             <h2>What is "<span data-i18n-content="labelManipulateDOM">HTML filter</span>"? (Firefox only)</h2>
             <p>In most cases LocalCDN can easily replace embedded frameworks and improves privacy. In some cases the website may try to prevent this by setting certain options in the HTML source code. LocalCDN reads the HTML source code before it is displayed in the browser and removes these part (red).</p>
             <p>
-                The HTML filter turns this line (blue and red)<br/>
+                The HTML filter removes the red characters from this example:<br/>
-                <code><span class="code-blue">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"</span> <span class="code-red">integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"</span><span class="code-blue">>&lt;/script></span></code><br/>
+                <code><span class="code-blue">&lt;script&nbsp;src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"</span>&nbsp;<span class="code-red">integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="&nbsp;crossorigin="anonymous"</span><span class="code-blue">>&lt;/script></span></code><br/><br/>
-                into this one (only blue)<br/>
+                The result then looks like this:<br/>
-                <code><span class="code-blue">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">&lt;/script></span></code><br/>
+                <code><span class="code-blue">&lt;script&nbsp;src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">&lt;/script></span></code><br/><br/><br/>
             </p>
             <p><em>Why is it necessary to remove crossorigin and integrity attributes?</em></p>
             <p>The crossorigin attribute prevents the replacement because the source is no longer <code><strong>cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js</strong></code> but <code><strong>moz-extension://UUID/resources/jquery/1.12.4</strong></code>. crossorigin forces the browser to ignore other sources.</p>
@@ -55,7 +55,7 @@
                 <u><strong>Only uBlock Origin:</strong></u> <br>
                 These rules are only relevant in "medium" or "hard" mode, because it blocks all 3rd-party resources. They are not necessary in "default", "easy" or "very-easy" mode. For more information, please visit the uBlock Origin Wiki.
             </p>
-            <table>
+            <table class="table-ublock">
                 <caption>Contact Information</caption>
                 <thead>
                     <tr>
@@ -143,13 +143,72 @@
                 <li><a href="https://support.mozilla.org/en-US/products/firefox/sync">support.mozilla.org</a></li>
             </ul>
         </div>
-        <div id="non-firefox" class="notice">
+        <div id="browser-compatibility" class="notice">
-            <h2>Non-Firefox Browser</h2>
+            <h2>Browser compatibility</h2>
-            <p>The following things are supported only by Firefox:</p>
+            <table class="table-browser-compatibility">
-            <ul>
+                <thead>
-                <li>Fonts of "Font Awesome" and "Google Material Icons"</li>
+                    <tr class="browser-compatibility">
-                <li><a href="#html-filter">HTML-Filter</a></li>
+                       <th></th>
-            </ul>
+                       <th class="browser-compatibility-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome*</span></th>
+                       <th class="browser-compatibility-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th>
+                       <th class="browser-compatibility-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome* Android</span></th>
+                       <th class="browser-compatibility-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><a href="#html-filter">HTML filter</a></td>
+                        <td class="browser-compatibility-support-no">No</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                        <td class="browser-compatibility-support-no">No</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                    </tr>
+                    <tr>
+                        <td>Replace "Font Awesome"</td>
+                        <td class="browser-compatibility-support-no">No</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                        <td class="browser-compatibility-support-no">No</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                    </tr>
+                    <tr>
+                        <td>Replace "Google Material Icons"</td>
+                        <td class="browser-compatibility-support-no">No</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                        <td class="browser-compatibility-support-no">No</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                    </tr>
+                    <tr>
+                        <td>Replace Fonts of "Bootstrap"</td>
+                        <td class="browser-compatibility-support-no">No</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                        <td class="browser-compatibility-support-no">No</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                    </tr>
+                    <tr>
+                        <td>Replace other resources</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                    </tr>
+                    <tr>
+                        <td>Upgrade all resources</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                        <td class="browser-compatibility-support-yes">Yes</td>
+                    </tr>
+                    <tr>
+                        <td>Replace "Google Fonts"</td>
+                        <td class="browser-compatibility-support-no">No</td>
+                        <td class="browser-compatibility-support-no">No</td>
+                        <td class="browser-compatibility-support-no">No</td>
+                        <td class="browser-compatibility-support-no">No</td>
+                    </tr>
+                </tbody>
+            </table>
+            <p>*) Chrome = All Chromium based Browser (Edge, Opera, ...)</p>
+            <p>This is not a limitation of LocalCDN, but missing API support of Chromium based browsers.</p>
         </div>
     </body>
 </html>