Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Bootstrap 4 Site Blueprints

You're reading from   Bootstrap 4 Site Blueprints Design mobile-first responsive websites with Bootstrap 4

Arrow left icon
Product type Paperback
Published in Oct 2016
Publisher Packt
ISBN-13 9781785889653
Length 404 pages
Edition 2nd Edition
Languages
Arrow right icon
Authors (3):
Arrow left icon
David Cochran David Cochran
Author Profile Icon David Cochran
David Cochran
Ian Whitney Ian Whitney
Author Profile Icon Ian Whitney
Ian Whitney
Bass Jobsen Bass Jobsen
Author Profile Icon Bass Jobsen
Bass Jobsen
Arrow right icon
View More author details
Toc

Table of Contents (10) Chapters Close

Preface 1. Getting Started with Bootstrap FREE CHAPTER 2. Creating Your Own Build Process with Gulp 3. Customizing Your Blog with Bootstrap and Sass 4. Bootstrappin' a WordPress Theme 5. Bootstrappin' Your Portfolio 6. Bootstrappin' Business 7. Bootstrappin' E-Commerce 8. Bootstrappin' a One-Page Marketing Website 9. Building an Angular 2 App with Bootstrap

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.

You have been reading a chapter from
Bootstrap 4 Site Blueprints - Second Edition
Published in: Oct 2016
Publisher: Packt
ISBN-13: 9781785889653
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime