🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

bootstrap-ie11

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bootstrap-ie11 - npm Package Compare versions

Comparing version

to
5.3.4

scss/mixins/_grid.scss

18

package.json
{
"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">

[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/coliff/bootstrap-ie11/main/LICENSE)
[![LICENSE: MIT](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/coliff/bootstrap-ie11/main/LICENSE)
[![GitHub Super-Linter](https://github.com/coliff/bootstrap-ie11/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)
[![GitHub stars image](https://img.shields.io/github/stars/coliff/bootstrap-ie11.svg?label=github%20stars)](https://github.com/coliff/bootstrap-ie11)
[![NPM Version](https://img.shields.io/npm/v/bootstrap-ie11)](https://www.npmjs.com/package/bootstrap-ie11)
[![GitHub stars image](https://img.shields.io/github/stars/coliff/bootstrap-ie11.svg?label=GitHub%20Stars)](https://github.com/coliff/bootstrap-ie11)
[![npm Version](https://img.shields.io/npm/v/bootstrap-ie11)](https://www.npmjs.com/package/bootstrap-ie11)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/bootstrap-ie11/badge)](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