mirror of
https://codeberg.org/nobody/LocalCDN.git
synced 2025-02-16 20:00:57 +01:00
Browser compatibility added to help page
This commit is contained in:
nobody
parent
72726b4de4
commit
226d24a217
@ -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;
|
||||
|
||||
@ -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/>
|
||||
<code><span class="code-blue"><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">></script></span></code><br/>
|
||||
into this one (only blue)<br/>
|
||||
<code><span class="code-blue"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script></span></code><br/>
|
||||
The HTML filter removes the red characters from this example:<br/>
|
||||
<code><span class="code-blue"><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">></script></span></code><br/><br/>
|
||||
The result then looks like this:<br/>
|
||||
<code><span class="code-blue"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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">
|
||||
<h2>Non-Firefox Browser</h2>
|
||||
<p>The following things are supported only by Firefox:</p>
|
||||
<ul>
|
||||
<li>Fonts of "Font Awesome" and "Google Material Icons"</li>
|
||||
<li><a href="#html-filter">HTML-Filter</a></li>
|
||||
</ul>
|
||||
<div id="browser-compatibility" class="notice">
|
||||
<h2>Browser compatibility</h2>
|
||||
<table class="table-browser-compatibility">
|
||||
<thead>
|
||||
<tr class="browser-compatibility">
|
||||
<th></th>
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user