bootstrap-ie11
Advanced tools
Comparing version
{ | ||
"name": "bootstrap-ie11", | ||
"version": "5.3.3", | ||
"version": "5.3.4", | ||
"description": "Bootstrap 5 for Internet Explorer 11", | ||
@@ -41,3 +41,6 @@ "keywords": [ | ||
"html-lint": "npx htmlhint \"tests/*.html\"", | ||
"prettier": "npx prettier --write \"**/*.{json,scss,yml}\"", | ||
"pa11y": "npx pa11y https://coliff.github.io/bootstrap-ie11/tests/", | ||
"prettier": "npx prettier --write \"**/*.{json,md,scss,yml}\"", | ||
"serve": "npx http-server -o /tests/index.html -p 8080 -c-1", | ||
"spellcheck": "npx cspell \"**/*.*\" --no-progress", | ||
"test": "npm run css-lint" | ||
@@ -51,7 +54,10 @@ }, | ||
"npm-run-all": "4.1.5", | ||
"sass": "1.72.0", | ||
"stylelint": "16.3.1", | ||
"stylelint-config-twbs-bootstrap": "14.1.0" | ||
"sass": "1.79.4", | ||
"stylelint": "16.17.0", | ||
"stylelint-config-twbs-bootstrap": "15.1.0" | ||
}, | ||
"sass": "scss/bootstrap-ie11.scss" | ||
"sass": "scss/bootstrap-ie11.scss", | ||
"volta": { | ||
"node": "20.19.0" | ||
} | ||
} |
@@ -7,6 +7,6 @@ <p align="center"> | ||
[](https://raw.githubusercontent.com/coliff/bootstrap-ie11/main/LICENSE) | ||
[](https://raw.githubusercontent.com/coliff/bootstrap-ie11/main/LICENSE) | ||
[](https://github.com/marketplace/actions/super-linter) | ||
[](https://github.com/coliff/bootstrap-ie11) | ||
[](https://www.npmjs.com/package/bootstrap-ie11) | ||
[](https://github.com/coliff/bootstrap-ie11) | ||
[](https://www.npmjs.com/package/bootstrap-ie11) | ||
[](https://www.jsdelivr.com/package/npm/bootstrap-ie11) | ||
@@ -21,3 +21,3 @@ | ||
- Install with [npm](https://www.npmjs.com/package/bootstrap-ie11) `npm install bootstrap-ie11` | ||
- Install with [yarn](https://classic.yarnpkg.com/en/package/bootstrap-ie11) `yarn add bootstrap-ie11` | ||
- Install with [Yarn](https://classic.yarnpkg.com/en/package/bootstrap-ie11) `yarn add bootstrap-ie11` | ||
- Install with [Composer](https://packagist.org/packages/coliff/bootstrap-ie11) `composer require coliff/bootstrap-ie11` | ||
@@ -42,5 +42,58 @@ | ||
```html | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.3.3/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)"> | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.3.4/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)"> | ||
``` | ||
### Splitting the `document.write` Method | ||
To enhance the maintainability and readability of your HTML, you can split the `document.write` method when adding Bootstrap 5 and necessary polyfills for Internet Explorer 11. Below is an example of how you can split the `document.write` method: | ||
```html | ||
<script nomodule> | ||
window.MSInputMethodContext && document.documentMode && | ||
document.write( | ||
'<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.3.4/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.1.0"><\/script>' | ||
+ '<script src="https://cdn.jsdelivr.net/npm/element-qsa-scope@1.1.0"><\/script>' | ||
+ '<script crossorigin="anonymous" src="https://polyfill-fastly.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>' | ||
); | ||
</script> | ||
``` | ||
### Getting local copies of dependencies | ||
For environments where you need local copies of the dependencies, follow these steps to download and reference them locally: | ||
- [Bootstrap CSS](https://github.com/twbs/bootstrap/tree/v5.0.0-beta2/dist/css) - download the .css and corresponding .map files | ||
- [Bootstrap JS](https://github.com/twbs/bootstrap/tree/v5.0.0-beta2/dist/js) - download the .js and corresponding .map files | ||
- [IE11 Custom Properties](https://github.com/nuxodin/ie11CustomProperties/blob/master/ie11CustomProperties.js) | ||
- [Element QSA Scope](https://github.com/jonathantneal/element-qsa-scope/blob/master/index.js) | ||
- 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` attribute of the `<script>` tag 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 downloading the dependencies, update your script to reference these local files: | ||
```html | ||
<script nomodule> | ||
window.MSInputMethodContext && document.documentMode && | ||
document.write( | ||
'<link rel="stylesheet" href="css/bootstrap-ie11.min.css">' | ||
+ '<script src="js/bootstrap.bundle.min.js"><\/script>' | ||
+ '<script src="js/ie11CustomProperties.js"><\/script>' | ||
+ '<script src="js/elementQsaScope.js"><\/script>' | ||
+ '<script src="js/polyfill.js"><\/script>' | ||
); | ||
</script> | ||
``` | ||
## Forcing IE11 Out of Compatibility Mode | ||
If Internet Explorer is running in Compatibility Mode, it'll behave like an earlier version which could prevent bootstrap-ie11 from working properly. To ensure Internet Explorer 11 does not run your site in compatibility mode, add the following meta tag to your page: | ||
```html | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
``` | ||
## FAQS | ||
@@ -50,2 +103,3 @@ | ||
- Grid flexbug workaround | ||
- Workaround for the SVG overflow bug | ||
@@ -52,0 +106,0 @@ - Remove the default vertical scrollbar from `textarea` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
111920
7.71%29
3.57%757
6.17%145
59.34%1
Infinity%