Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove IE9 browser hacks. #21393

Merged
merged 1 commit into from Dec 22, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion Gruntfile.js
Expand Up @@ -163,7 +163,6 @@ module.exports = function (grunt) {

cssmin: {
options: {
compatibility: 'ie10,-properties.zeroUnits',
sourceMap: true,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ie10 is not a valid clean-css option, and -properties.zeroUnits is no-longer needed now we're removing the relevant browser hack.

// sourceMapInlineSources: true,
advanced: false
Expand Down
4 changes: 0 additions & 4 deletions docs/components/buttons.md
Expand Up @@ -105,10 +105,6 @@ Buttons will appear pressed (with a darker background, darker border, and inset

Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.

{% callout info %}
**Heads up!** IE9 and below render disabled buttons with gray, shadowed text that we can't override.
{% endcallout %}

{% example html %}
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
Expand Down
2 changes: 0 additions & 2 deletions docs/components/forms.md
Expand Up @@ -933,8 +933,6 @@ Custom `<select>` menus need only a custom class, `.custom-select` to trigger th
</select>
{% endexample %}

Custom selects degrade nicely in IE9, receiving only a handful of overrides to remove the custom `background-image`. **Multiple selects (e.g., `<select multiple>`) are not currently supported.**

### File browser

The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
Expand Down
2 changes: 1 addition & 1 deletion docs/content/reboot.md
Expand Up @@ -311,7 +311,7 @@ The `<abbr>` element receives basic styling to make it stand out amongst paragra

## HTML5 `[hidden]` attribute

HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE9-10, the explicit declaration in our CSS gets around that problem.
HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem.

{% highlight html %}
<input type="text" hidden>
Expand Down
4 changes: 0 additions & 4 deletions scss/_custom-forms.scss
Expand Up @@ -131,20 +131,16 @@
// Replaces the browser default select with a custom one, mostly pulled from
// http://primercss.io.
//
// Includes hacks for IE9 (noted by ` \9`), which may apply to other versions of
// IE, but not with any adverse affects.

.custom-select {
display: inline-block;
max-width: 100%;
$select-border-width: ($border-width * 2);
height: calc(#{$input-height} - #{$select-border-width});
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
padding-right: $custom-select-padding-x \9;
color: $custom-select-color;
vertical-align: middle;
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
background-image: none \9;
background-size: $custom-select-bg-size;
border: $custom-select-border-width solid $custom-select-border-color;
@include border-radius($custom-select-border-radius);
Expand Down
1 change: 0 additions & 1 deletion scss/_dropdown.scss
Expand Up @@ -105,7 +105,6 @@
cursor: $cursor-disabled;
background-color: transparent;
background-image: none; // Remove CSS gradient
@include reset-filter();
}
}
}
Expand Down
1 change: 0 additions & 1 deletion scss/_mixins.scss
Expand Up @@ -23,7 +23,6 @@
@import "mixins/hover";
@import "mixins/image";
@import "mixins/badge";
@import "mixins/reset-filter";
@import "mixins/resize";
@import "mixins/screen-reader";
@import "mixins/size";
Expand Down
28 changes: 0 additions & 28 deletions scss/_progress.scss
Expand Up @@ -54,21 +54,6 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
@include box-shadow($progress-box-shadow);
}

// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
@media screen and (min-width:0\0) {
.progress {
background-color: $progress-bg;
@include border-radius($progress-border-radius);
@include box-shadow($progress-box-shadow);
}
.progress-bar {
display: inline-block;
height: $spacer-y;
text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
background-color: $progress-bar-color;
}
}


//
// Striped
Expand All @@ -86,13 +71,6 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
@include gradient-striped();
background-size: $spacer-y $spacer-y;
}
// IE9
@media screen and (min-width:0\0) {
.progress-bar-striped {
@include gradient-striped();
background-size: $spacer-y $spacer-y;
}
}


//
Expand All @@ -105,12 +83,6 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
.progress-animated[value]::-moz-progress-bar {
animation: progress-bar-stripes 2s linear infinite;
}
// IE9
@media screen and (min-width:0\0) {
.progress-animated .progress-bar-striped {
animation: progress-bar-stripes 2s linear infinite;
}
}


//
Expand Down
1 change: 0 additions & 1 deletion scss/_tables.scss
Expand Up @@ -143,7 +143,6 @@
.table-responsive {
display: block;
width: 100%;
min-height: 0%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057

Expand Down
7 changes: 1 addition & 6 deletions scss/mixins/_gradients.scss
Expand Up @@ -3,11 +3,9 @@
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9.
@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9
}

// Vertical gradient, from top to bottom
Expand All @@ -17,7 +15,6 @@
@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9
}

@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
Expand All @@ -27,17 +24,15 @@
@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 gets no color-stop at all for proper fallback
}
@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 gets no color-stop at all for proper fallback
}
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
background-repeat: no-repeat;
}
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
}
7 changes: 0 additions & 7 deletions scss/mixins/_progress.scss
Expand Up @@ -13,11 +13,4 @@
&[value]::-ms-fill {
background-color: $color;
}

// IE9
@media screen and (min-width:0\0) {
.progress-bar {
background-color: $color;
}
}
}
8 changes: 0 additions & 8 deletions scss/mixins/_reset-filter.scss

This file was deleted.