Update doc pages to get rid of IE (Internet explorer).

Author: ve3

docs/_includes/components/badges.html

@@ -21,11 +21,6 @@ <h1 id="badges" class="page-header">Badges</h1>
   <h4>Self collapsing</h4>
   <p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
 
-  <div class="bs-callout bs-callout-danger" id="callout-badges-ie8-empty">
-    <h4>Cross-browser compatibility</h4>
-    <p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
-  </div>
-
   <h4>Adapts to active nav states</h4>
   <p>Built-in styles are included for placing badges in active states in pill navigations.</p>
   <div class="bs-example" data-example-id="badges-in-pills">

docs/_includes/components/button-groups.html

@@ -194,11 +194,6 @@ <h2 id="btn-groups-justified">Justified button groups</h2>
     <h4>Handling borders</h4>
     <p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
   </div>
-  <div class="bs-callout bs-callout-warning" id="callout-btn-group-ie8-border">
-    <h4>IE8 and borders</h4>
-    <p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
-    <p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
-  </div>
 
   <h4>With <code>&lt;a&gt;</code> elements</h4>
   <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>

docs/_includes/components/progress-bars.html

@@ -3,11 +3,6 @@ <h1 id="progress" class="page-header">Progress bars</h1>
 
   <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
 
-  <div class="bs-callout bs-callout-danger" id="callout-progress-animation-css3">
-    <h4>Cross-browser compatibility</h4>
-    <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
-  </div>
-
   <div class="bs-callout bs-callout-info">
     <h4 id="callout-progress-csp">Content Security Policy (CSP) compatibility</h4>
     <p>If your website has a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Content Security Policy (CSP)</a> which doesn't allow <code>style-src 'unsafe-inline'</code>, then you won't be able to use inline <code>style</code> attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets <code>element.style.width</code>) or using custom CSS classes.</p>
@@ -121,7 +116,7 @@ <h2 id="progress-alternatives">Contextual alternatives</h2>
 {% endhighlight %}
 
   <h2 id="progress-striped">Striped</h2>
-  <p>Uses a gradient to create a striped effect. Not available in IE9 and below.</p>
+  <p>Uses a gradient to create a striped effect.</p>
   <div class="bs-example" data-example-id="striped-progress-bar">
     <div class="progress">
       <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
@@ -168,7 +163,7 @@ <h2 id="progress-striped">Striped</h2>
 {% endhighlight %}
 
   <h2 id="progress-animated">Animated</h2>
-  <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
+  <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left.</p>
   <div class="bs-example" data-example-id="animated-progress-bar">
     <div class="progress">
       <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>

docs/_includes/css/buttons.html

@@ -163,11 +163,6 @@ <h3>Button element</h3>
 <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
 {% endhighlight %}
 
-  <div class="bs-callout bs-callout-danger" id="callout-buttons-ie-disabled">
-    <h4>Cross-browser compatibility</h4>
-    <p>If you add the <code>disabled</code> attribute to a <code>&lt;button&gt;</code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
-  </div>
-
   <h3>Anchor element</h3>
   <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
   <p class="bs-example" data-example-id="disabled-anchor-btns">
@@ -183,7 +178,7 @@ <h3>Anchor element</h3>
   </p>
   <div class="bs-callout bs-callout-warning" id="callout-buttons-disabled-anchor">
     <h4>Link functionality caveat</h4>
-    <p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a&gt;</code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
+    <p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a&gt;</code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
   </div>
 
 </div>

docs/_includes/css/forms.html

@@ -543,12 +543,7 @@ <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
 
   <div class="bs-callout bs-callout-warning" id="callout-fieldset-disabled-pointer-events">
     <h4>Caveat about link functionality of <code>&lt;a&gt;</code></h4>
-    <p>By default, browsers will treat all native form controls (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code> and <code>&lt;button&gt;</code> elements) inside a <code>&lt;fieldset disabled&gt;</code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code>&lt;a ... class="btn btn-*"&gt;</code> elements, these will only be given a style of <code>pointer-events: none</code>. As noted in the section about <a href="#buttons-disabled">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
-  </div>
-
-  <div class="bs-callout bs-callout-danger" id="callout-fieldset-disabled-ie">
-    <h4>Cross-browser compatibility</h4>
-    <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
+    <p>By default, browsers will treat all native form controls (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code> and <code>&lt;button&gt;</code> elements) inside a <code>&lt;fieldset disabled&gt;</code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code>&lt;a ... class="btn btn-*"&gt;</code> elements, these will only be given a style of <code>pointer-events: none</code>. As noted in the section about <a href="#buttons-disabled">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
   </div>
 
   <div class="bs-example" data-example-id="disabled-fieldset">

docs/_includes/css/images.html

@@ -4,20 +4,12 @@ <h1 id="images" class="page-header">Images</h1>
   <h2 id="images-responsive">Responsive images</h2>
   <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code>, <code>height: auto;</code> and <code>display: block;</code> to the image so that it scales nicely to the parent element.</p>
   <p>To center images which use the <code>.img-responsive</code> class, use <code>.center-block</code> instead of <code>.text-center</code>. <a href="{{ site.baseurl }}/css/#helper-classes-center">See the helper classes section</a> for more details about <code>.center-block</code> usage.</p>
-  <div class="bs-callout bs-callout-warning" id="callout-images-ie-svg">
-    <h4>SVG images and IE 8-10</h4>
-    <p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
-  </div>
 {% highlight html %}
 <img src="..." class="img-responsive" alt="Responsive image">
 {% endhighlight %}
 
   <h2 id="images-shapes">Image shapes</h2>
   <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
-  <div class="bs-callout bs-callout-danger" id="callout-images-ie-rounded-corners">
-    <h4>Cross-browser compatibility</h4>
-    <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
-  </div>
   <div class="bs-example bs-example-images" data-example-id="image-shapes">
     <img data-src="holder.js/140x140" class="img-rounded" alt="A generic square placeholder image with rounded corners">
     <img data-src="holder.js/140x140" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">

docs/_includes/css/less.html

@@ -241,22 +241,18 @@ <h3 id="less-mixins-transformations">Transformations</h3>
 {% highlight scss %}
 .rotate(@degrees) {
   -webkit-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees); // IE9 only
           transform: rotate(@degrees);
 }
 .scale(@ratio; @ratio-y...) {
   -webkit-transform: scale(@ratio, @ratio-y);
-      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
           transform: scale(@ratio, @ratio-y);
 }
 .translate(@x; @y) {
   -webkit-transform: translate(@x, @y);
-      -ms-transform: translate(@x, @y); // IE9 only
           transform: translate(@x, @y);
 }
 .skew(@x; @y) {
   -webkit-transform: skew(@x, @y);
-      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
           transform: skew(@x, @y);
 }
 .translate3d(@x; @y; @z) {
@@ -266,12 +262,10 @@ <h3 id="less-mixins-transformations">Transformations</h3>
 
 .rotateX(@degrees) {
   -webkit-transform: rotateX(@degrees);
-      -ms-transform: rotateX(@degrees); // IE9 only
           transform: rotateX(@degrees);
 }
 .rotateY(@degrees) {
   -webkit-transform: rotateY(@degrees);
-      -ms-transform: rotateY(@degrees); // IE9 only
           transform: rotateY(@degrees);
 }
 .perspective(@perspective) {
@@ -287,7 +281,6 @@ <h3 id="less-mixins-transformations">Transformations</h3>
 .transform-origin(@origin) {
   -webkit-transform-origin: @origin;
      -moz-transform-origin: @origin;
-      -ms-transform-origin: @origin; // IE9 only
           transform-origin: @origin;
 }
 {% endhighlight %}
@@ -327,13 +320,10 @@ <h3 id="less-mixins-animations">Animations</h3>
 {% endhighlight %}
 
   <h3 id="less-mixins-opacity">Opacity</h3>
-  <p>Set the opacity for all browsers and provide a <code>filter</code> fallback for IE8.</p>
+  <p>Set the opacity for all browsers.</p>
 {% highlight scss %}
 .opacity(@opacity) {
   opacity: @opacity;
-  // IE8 filter
-  @opacity-ie: (@opacity * 100);
-  filter: ~"alpha(opacity=@{opacity-ie})";
 }
 {% endhighlight %}
 
@@ -342,7 +332,6 @@ <h3 id="less-mixins-placeholder">Placeholder text</h3>
 {% highlight scss %}
 .placeholder(@color: @input-color-placeholder) {
   &::-moz-placeholder           { color: @color; } // Firefox
-  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
   &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
 }
 {% endhighlight %}

docs/_includes/css/tables.html

@@ -45,10 +45,6 @@ <h2 id="tables-example">Basic example</h2>
 
   <h2 id="tables-striped">Striped rows</h2>
   <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
-  <div class="bs-callout bs-callout-danger" id="callout-tables-striped-ie8">
-    <h4>Cross-browser compatibility</h4>
-    <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
-  </div>
   <div class="bs-example" data-example-id="striped-table">
     <table class="table table-striped">
       <thead>

docs/_includes/getting-started/accessibility.html

@@ -5,7 +5,7 @@ <h1 id="accessibility" class="page-header">Accessibility</h1>
   <h2>Skip navigation</h2>
   <p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link before the navigation (for a simple explanation, see this <a href="https://a11yproject.com/posts/skip-nav-links/">A11Y Project article on skip navigation links</a>). Using the <code>.sr-only</code> class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).</p>
   <div class="bs-callout bs-callout-danger" id="callout-skiplinks">
-    <p>Due to long-standing shortcomings/bugs in Chrome (see <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=262171" title="Chromium bug tracker - Issue 262171: Focus should cycle from named anchor">issue 262171 in the Chromium bug tracker</a>) and Internet Explorer (see this article on <a href="http://accessibleculture.org/articles/2010/05/in-page-links/">in-page links and focus order</a>), you will need to make sure that the target of your skip link is at least programmatically focusable by adding <code>tabindex="-1"</code>.</p>
+    <p>Due to long-standing shortcomings/bugs in Chrome (see <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=262171" title="Chromium bug tracker - Issue 262171: Focus should cycle from named anchor">issue 262171 in the Chromium bug tracker</a>) (see this article on <a href="http://accessibleculture.org/articles/2010/05/in-page-links/">in-page links and focus order</a>), you will need to make sure that the target of your skip link is at least programmatically focusable by adding <code>tabindex="-1"</code>.</p>
     <p>In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with <code>tabindex="-1"</code> when they are clicked with the mouse) with <code>#content:focus { outline: none; }</code>.</p>
     <p>Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.</p>
   </div>