Improve the documentation

y377 commented 1 year ago

Prerequisites

[X] I have searched for duplicate or closed feature requests
[X] I have read the contributing guidelines

Proposal

Thanks for the "patch"

Improve the documentation, such as loading only CSS, or self-compiling SCSS, which JS libraries do I need to load? Split the use method, let the user choose more flexible loading method, such as I need to download JS and CSS/SCSS to the local, how to load?

Motivation and context

For example, how do I download these JS documents individually and run them locally?

Semantic error, this: <link rel="stylesheet" href="/css/bootstrap-ie11.min.css">The following line of code is not usable

<script nomodule>
window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/combine/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script><script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>');
</script>

repair：

<script nomodule>
window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.2.3/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/combine/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script><script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>');
</script>

or better

    <!-- required JavaScript polyfills for IE11 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.2.3/css/bootstrap-ie11.min.css">
    <script nomodule crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes">
    </script>
    <script nomodule>
        window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/combine/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script>');
    </script>

coliff commented 1 year ago

Thanks for the good suggestions. I agree we can make it clearer and easier to follow. I'll work on this for the next update.

y377 commented 9 months ago

I would like to ask how to split it. This domain name has a high access delay for users in mainland China. Is there any way to get the JS code locally? Thank you.

https://polyfill.io/v3/polyfill.min.js

<script nomodule>
window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.2.3/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/combine/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script><script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>');
</script>

This will cause the navigation bar drop-down menu to fail. The following will not

 <script nomodule crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes">
    </script>
    <script nomodule>
        window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/combine/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script>');
    </script>

china user: try:

    <script nomodule crossorigin="anonymous" src="https://polyfill.alicdn.com/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes">
    </script>
    <script nomodule>
        window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.staticfile.org/bootstrap/5.0.0-beta2/js/bootstrap.bundle.min.js"><\/script><script src="/assets/js/ie11_need.js"><\/script>');
    </script>

coliff commented 9 months ago

@y377 I was looking at this issue: https://github.com/JakeChampion/polyfill-service/issues/2638 regarding polyfill.io being blocked in Malaysia. An alternative domain name was set up - https://polyfills.io/v3/polyfill.min.js (polyfills.io instead of poylfill.io) - can you please try that? If it works then I may suggest that as an alternative.

y377 commented 9 months ago

@coliff Thank you for your reply, but the ping delay is very high, which will affect users' access to the website. If I find a better solution later, I will update again

I think it is the best way if the required JS code can be packaged separately and made into offline files.

JMHeartley commented 3 months ago

Here's how I split the calls to the CDNs:

<script nomodule>
    window.MSInputMethodContext && document.documentMode &&
        document.write(
            '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.2.3/css/bootstrap-ie11.min.css">'
            + '<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"><\/script>'
            + '<script src="https://cdn.jsdelivr.net/npm/ie11-custom-properties@4"><\/script>'
            + '<script src="https://cdn.jsdelivr.net/npm/element-qsa-scope@1"><\/script>'
            + '<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>'
        );
</script>

As far as how to get a local copy of the dependencies:

Bootstrap CSS - download the .css and corresponding .map files
Bootstrap JS - download the .js and corresponding .map files
IE11 Custom Properties
Element QSA Scope
PolyFill - this seems to load dynamically based on what functionality the browser making the requests is missing, here's what I did as a workaround:
1. Open IE11 or Edge in IE11 mode (search "IE mode" in Edge settings to find and enable)
2. Copy/paste the URI in the src into the browser's URI bar and hit enter, the response will be whatever your app would receive
3. Copy/paste the text on the page and save it to a new file, now you have a local copy

After all this, the script looks like this:

<script nomodule>
    window.MSInputMethodContext && document.documentMode &&
        document.write(
                '<link rel="stylesheet" href="css/bootstrap-ie11.min.css">'
                + '<script src="js/ie11CustomProperties.js"><\/script>'
                + '<script src="js/elementQsaScope.js"><\/script>'
                + '<script src="js/polyfill.js"><\/script>'
        );
</script>

<!-- removed this from document.write() so it always loads -->
<script src="js/bootstrap.bundle.min.js"></script>

BONUS: add this to your page to force IE11 out of compatibility mode

<meta http-equiv="X-UA-Compatible" content="IE=edge">

y377 commented 3 months ago

@JMHeartley Thank you for your hard work. I will try it out and report the results here.

coliff / bootstrap-ie11