"box-sizing" CSS property. Fairness somewhere near.

By -
Bootstrap 4 has selected the initial Internet Explorer CSS box model.

Oh my goodness, there is even "International box-sizing Awareness Day" out of there. "DOWN with big content-box, BORDER-BOX 4LIVE".
It's such a boon for developers that here at CSS-Tricks we observe International Box-Sizing Awareness Day in February.

Look, Bootstrap really uses it _reboot.scss

// Reset the box-sizing
//
// Change from `box-sizing: content-box` to `border-box` so that when you add
// `padding` or `border`s to an element, the overall declared `width` does not
// change. For example, `width: 100px;` will always be `100px` despite the
// `border: 10px solid red;` and `padding: 20px;`.
//
// Heads up! This reset may cause conflicts with some third-party widgets. For
// recommendations on resolving such conflicts, see
// https://getbootstrap.com/getting-started/#third-box-sizing.
//
// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

And I cannot fail to mention a handy demo (it wasn’t created for Bootstrap 4, it just shows how box-sizing generally works).

Unbelievable. Were Internet Explorer developers near to front-end people those 15 years ago?



Detailed view on Box Sizing - https://css-tricks.com/box-sizing/
W3C vs IE. Time has showed))

Comments

Post a Comment

Popular posts from this blog

Convention over Git = CoG

By -
Convention over Git  or  CoG  influences on automated conflict solving during automated synchronization of remote Git repositories. Naming convention The Convention over Git uses naming to define owners of Git-branches. More often I use prefixed names for this. I.e. each remote Git repository owns its prefix. (It allows for all non-fast-forward Git-conflicts to be solved in favor of a prefix owner.) Examples Let's say one team uses prefix "company1/". (Git allows you have slashes in branch names) And another team uses "company2-". For this we may have flogging synchronized Git-branches. company1/develop vs company2-develop company1/JIRA-123 vs company2-JIRA-321 or simply company1/my-cool-feature company2-my-bug-fixing So, a naming convention in Git can be any conventional separation of names. It depends on you implementation. I use prefixes in my implementations. Results Conventions over Git gives many advantages and drastically
Read more

jQuery Deferred Object method chain or a Syntactic Sugar

By -
The live samples: Chain animation Group async animation Piece of code: function doAnimation () { var duration = 2000; var host = jQuery(".host"); var img = host.children(); jQuery . when ( img .fadeOut(duration)) . then (function () { return host .delay(duration) .slideUp(duration) .delay(duration); }) . then (function () { return host .delay(duration) .slideDown(duration); }) . then (function () { return img .delay(duration) .fadeIn(duration) .delay(duration); }) . then (function () { // it3xl.ru: !The Recursion. doAnimation (); }) ; } I have the next thoughts. Prerequisites 1. The Deprecated and The Removed Let's omit all deprecated and removed functions, parameters, objects etс. See the documentation and be aware of it. Current version of the jQuery is the 1.9.1. 2. The Deferred is everywhere in the j
Read more

Glossary of synchronization of remote Git repositories

By -
Convention-Over-Git One of the approaches to automatically solve conflicts of synchronization between remote Git repositories. fast-forward safe, non-overwriting git fetch or push. non-fast-forward unsafe, forced & overwriting git fetch or push. side directly related one remote and many local git repositories. They are located on one side, i.e. in one company. owner owner of the side. A team that owns and uses their remote repository directly. refs git references, mostly such as branches and tags. conventional refs refs strictly separated by a convention and pertaining to different different sides. Each side owns its refs but can modify refs of another. prefixed refs This is a naming convention and an implementation of conventional refs by prefixes. As an example: " company1/ some_feature ", " company2- develop " where the " company1 / " and " company2 - " are the conventional prefixes. refspec
Read more