International box-sizing Awareness Day
3 days ago
- #CSS
- #Frontend Development
- #Web Design
- February 1st is declared International Box-Sizing Awareness Day.
- The CSS property `box-sizing: border-box` is highlighted as highly useful for layout design.
- Paul Irish's method of applying `box-sizing: border-box` universally using `*, *:before, *:after` is recommended.
- Default `box-sizing: content-box` includes padding and border in element width, complicating layout calculations.
- `box-sizing: border-box` ensures the set width includes padding and border, simplifying responsive design.
- Browser support details for `box-sizing` are provided, including prefixes for older versions.
- The article discusses the benefits of `border-box` for columns and responsive layouts.
- Performance impact of universal `box-sizing` is deemed negligible.
- Alternatives and mixins for applying `box-sizing` in Sass/LESS are mentioned.
- Historical context is given, comparing IE's box model to the standard `border-box`.
- Community feedback includes preferences for `normalize.css` over universal resets.
- Practical examples demonstrate `border-box` simplifying width calculations in layouts.