Browser support

As mentioned before, Bootstrap 4 does not support Internet Explorer version 8 and earlier. For projects that should support this browser I recommend you to use Bootstrap 3 instead. Bootstrap 4 also comes with optional Flexbox support. Only Internet explorer versions 11 and higher support the CSS3 Flexible Box Layout Module. You can read more about the pros and cons of the Flexbox module later on, in the Flexible Boxes section of this chapter. Besides Internet Explorer 8 and earlier, Bootstrap supports all major browsers, including many mobile browsers.

Vendor prefixes

CSS3 introduced vendor-specific rules, which offer you the possibility of writing some additional CSS, applicable for only one browser. At first sight, this seems the exact opposite of what we want. What we want is a set of standards and practicalities that work the same with every browser and a standard set of HTML and CSS which has the same effect and interpretation for every browser. These vendor-specific rules are intended to help us reach this utopia. Vendor-specific rules also provide us with early implementations of standard properties and alternative syntax. Last but not least, these rules allow browsers to implement proprietary CSS properties that would otherwise have no working standard (and may never actually become the standard).

For these reasons, vendor-specific rules play an important role in many new features of CSS3. For example, animation properties, border-radius, and box-shadow: all did depend on vendor-specific rules in past years. You can easily see that some properties may evolve from vendor prefixes to standard, because currently, most browsers support the border-radius, and box-shadow properties without any prefix.

Vendors use the following prefixes:

• WebKit: -webkit
• Firefox: -moz
• Opera: -o
• Internet Explorer: -ms

Consider the following CSS code:

transition: all .2s ease-in-out; 

For full browser support, or to support at least the browser supported by Bootstrap, we'll have to write:

  -webkit-transition: all .2s ease-in-out; 
  -o-transition: all .2s ease-in-out; 
  transition: all .2s ease-in-out; 

More information about the transition property and browser support can also be found at the following URL: http://caniuse.com/#feat=css-transitions.

Because of different browsers and their different versions, browsers may use different vendor prefixes to support the same property in writing cross-browser CSS code which can become very complex.

Bootstrap's Sass code, which compiles into CSS code does not contain any prefixes. Instead of using prefixes, the PostCSS autoprefixer has been integrated into Bootstrap's build process. When you create your own build process you should also use the PostCSS autoprefixer. In Chapter 2, Creating Your Own Build Process with Gulp, you can read how to set up a build chain with Gulp.

Flexible boxes

Bootstrap 4 also comes with optional Flexbox support. The Flexbox Layout (also called flexible boxes) is a new feature of CSS3. It is extremely useful in creating responsive and flexible layouts. Flexbox provides the ability to dynamically change the layout for different screen resolutions. It does not use floats and contains margins that do not collapse with their content. The latest versions of all major browsers now support Flexbox layouts.

Note

Information about browser support can also be found at http://caniuse.com/#feat=flexbox. Unfortunately, many older browsers do not have support for Flexbox layouts.

To enable Flexbox support, you will have to set the $enable-flex Sass variable to true and recompile Bootstrap. You do not have to change your HTML code after enabling Flexbox support.