How do you add 'box-sizing: border-box' to Normalize.css file?


Tags: css,css3,global,reset,css-reset

Problem :

I constantly use box-sizing: border-box; on all elements when creating CSS files, ie

* {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

However I cannot seem to get this to work with the file 'Normalize.css' (https://github.com/necolas/normalize.css)

I have tried adding the above code to the top of my own CSS file, within normalize itself, but have been unsuccessful

I would very much like to utilise normalize.css as it is not as drastic as some other CSS reset files, but how do I make it accept box-sizing: border-box; so that it effects all elements and is cross browser friendly?



Solution :

The best way I have seen so far of getting box-sizing working is:

html {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

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

If your CSS reset (normalize.css) is inserted at the very top of your stylesheet, with this rule just after normalize, all should work as expected.

The rule above allows easier control over setting box-sizing: content-box for things like third party widgets.

For more information on this technique, I'd recommmend: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ or http://www.paulirish.com/2012/box-sizing-border-box-ftw/


    CSS Howto..

    How to remove all css classes of all items of a
    with jQuery?

    How to make text wrap when resizing in a inline div, without the div moving onto a new line first?

    How to create a floating JavaScript Clock for UTC and Local Time?

    how to make changes permanently to css elements with -moz-transform?

    how to use jquery closest function

    How to remove border from appearing around the image?

    How to change a form's CSS class without affecting FormController.$pristine?

    how to deselect the active span element?

    Ionic2 : How to set up css in single page

    How Can I remove the injected CSS Resource in GWT?

    How to position two divs on either side of the screen, HTML, CSS

    How to add font to a web page

    How can I change the background-color using ng-class?

    How to add far-future expires headers to minified cssfiles/scripts?

    How to apply CSS class to a parent element?

    How do I keep a mouse cursor from changing to 'selected text' in JQuery?

    how to wrap a text around a image?

    How to adjust the opacity of CSS background image instead of radio button with an icon overlay

    How to scale and center text vertically in a fluid layout? (using CSS)

    jQuery - How to show element when another has a value

    CSS, how to put a div inside a div that is responsive?

    How to select css id's with numbers in them?

    Vertical alignment in css of multiple elements (How to achieve this layout)

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    How to pass a Rails variable into a view's CSS that must be refreshed dynamically (every 60 seconds)?

    How to align vertical text horizontally center?

    How to recreate Mac like File Browser in all OS with JS/CSS

    How to remove space between columns in BluePrint CSS framework?

    how to get css highlighting and hinting for php files in dreamweaver that are being read as css files?

    How to change the icon of a JStree node using only css?