A modern and opinionated CSS normalization file for better cross-browser design and default styling in 2024 and beyond!
MIT License
Betterize is a modern and opinionated CSS normalization file for better foundational styling and cross-browser design in 2024 and beyond.
Instead of CSS resets that will overwrite all the user-agent styles and require you to add much of what was taken away back in yourself, CSS normalization seeks to make your markup render consistently across browsers while maintaining modern standards.
With normalize.css remaining unchanged for more than 6 years now, it is now necessary to expand upon it. To remove old fixes that are no longer necessary and take advantage of modern CSS properties. To provide broad cross-browser and legacy support and improve the experience of developing stylesheets for the web.
This is betterize version 2.0.9 - Last updated: 03/30/2024
Betterize is available in .css
, .min.css
, .sass
, .scss
, and .less
versions.
There is also a print stylesheet available in all of these file types as well. See: Print Styles.
The file size of betterize.min.css is 11.61kB and is 3.6kB minified and Gzipped.
The file size of betterize-slim.min.css is 9.29kB and is 3.22kB minified and Gzipped.
_Betterize is now available on NPM! To install using NPM, simply run:
npm i betterize
You can see Betterize on the NPM website here: https://www.npmjs.com/package/betterize
Alternately, you can use Betterize by simply downloading the Betterize repo.
After using either method, you will need to choose which version of the file you
will use. This depends on which CSS preprocessor you are using, or if you are
using one at all. Betterize is included as a CSS file and a minified CSS file,
but there are also versions for CSS preprocessors Less
and Sass (both .sass
and .scss
syntax available).
Next decide if you want to use betterize or betterize-slim. While betterize attempts to offer maximum browser and device compatibility, from bleeding-edge to legacy, betterize-slim attempts to trim the fat by removing all styles and bug fixes that only benefit very old browsers, such as those that only target Internet Explorer.
Choose the file version and type you want and either copy it from the
node_modules/betterize
folder, or the downloaded repo folder, and paste it
into your project. You could also have your build process pull it directly from
the node_modules
folder.
Of course, you can also simply copy and paste from the files in the repo itself.
To copy all of the files from the pacackage out of the node_modules
folder and
into your project's style directory, you can use the following CLI command in bash.
Change the path to wherever you want to move the file in your own project.
cp -r node_modules/betterize your/path-to/sass/vendors/
To copy just your chosen Betterize and print file type project folder into your own style directory, you can use the following bash command:
cp node_modules/betterize/{_betterize-slim.scss,_print.scss} www/sass/vendors
It is recommended to put this file at the top of your existing stylesheet, either manually or as part of your build process, and not to link to it on its own, so as to minimize the number of HTTP requests made just for stylesheets.
The CSS version of betterize has a minified version included for your
convenience, but you could also just add the .css
file to your project and
bundle and minify everything together as a part of your build process.
There are many key design choices with betterize that are very opinionated, so if you are going to use betterize you should know what to look out for.
box-sizing
property is changed from content-box
by by usinginherit
here and then setting the html
element to border-box
.min-width
property is set to 0
. This can save you a lot of time tryingmin-width
for that element explicitly.background-repeat
property no-repeat
. If you have a backgroundbackground-repeat
property for thathtml
element, many modern CSS features are used:
color-scheme
property is set to light dark
. If you are onlyonly light
or only dark
. For accessibility and UX purposes,overflow: hidden scroll
with scrollbar-gutter: stable
toscrollbar-gutter
property workshanging-punctuation
to first last
to make punctuation like<html>
element. This ensures consistent inheritance and allows you to<body>
with a guaranteed fall back in case your fontmargin-top
. Vertical marginsmargin-top
or margin-block-start
anywhere in the code, and shouldmargin-bottom
or margin-block-end
.<body>
sets line-height: 1.5
, and text-align:left
. This is<hr>
default look which uses currentColor
for the color<hr>
look, use the class hr-light
on<hr>
elements.For more information about each specific choice, you can read the betterize files themselves, as they are heavily documented.
After version 2.0.0, Betterize split into two major versions, betterize
and
betterize-slim
, each with 5 possible file extension types that provide
versions for the Sass and Less preprocessors, and a minified CSS file. (.css
.min.css
, .sass
, .scss
, and .less
).
While betterize
has a design philosophy of offering the maximum browser and
device compatibility possible, from legacy to the bleeding-edge,
betterize-slim
attempts to trim the fat by removing all styles and bug fixes
that only benefit very old browsers or devices, such as those that only target
Internet Explorer or Safari on iOS 5.1-. It also has a reduced numbers of fixes
and styling that targets legacy Edge (18-) or versions of "Evergreen"
PC browsers which are more than a few years old, such as Chrome 64-.
If you need to support as many browsers and devices that you can, choose
betterize
. If you don't need to worry about very old devices and browsers,
and in particular if you don't need to support IE, feel free to choose
betterize-slim
to save some bytes in your file size.
.scss
/.sass
) and Less (.less
).pre
and code
stylesbody
selectors comments.::placeholder
selector to have the same properties as:focus-visible
and :-moz-focusring
dd
selector to use the shorthandmargin
property instead of setting margin-bottom
and margin-left
-webkit-fit-content
to the correct legacy WebKit,fit-content
: -webkit-intrinsic
.WindowFrame
color frombutton
, input
, select
, and text-area
selectors.<hr>
styling to look more subtle. The .hr-light
.sr-only
/ .visually-hidden
classes to remove an unnecessary_betterize.sass
:not(.hr-light)
to the hr
selector so using .hr-light
would not<hr>
element.::-moz-placeholder
selector due to already using:-moz-placeholder
to support Firefox 18- as well.rgb()
or hsl()
notation were converted::before
and ``::afterand instead switched to using
:before` and `:after`.rem
unit values.padding-block
and padding-inline
below normal padding
properties).background-color: #fff
and color: #212529
was addedbody
selector. A very faint background gradient was also added.body
selector.line-height
on the body
fromselect
element.padding
and border-width
to 0 for [type='color']
and [type='range']
!important
.html
element.range
do not have touch-action: manipulation
applied.@charset "UTF-8";
to the top of the file.<kbd>
text elements that makes themimage-rendering: smooth
on <img>
elements to only be applied ifimage-rendering: crisp-edges
to <img>
elements with .svg file extensions.I have also included a file of default styles for printing. I recommend that you take the contents of this file and append it to the very bottom of your stylesheet in CSS. This is because you want to minimize the number of HTTP requests required to optimize loading times and this is the easiest way to accomplish that. If you want to lazy load the print stylesheet so it doesn't load until the user needs to print or after the page has already finished loading, then you can do that as well.
The file size of print.min.css
is 1.32 kB and is 656 Bytes minified and Gzipped.
If you are using one of the CSS preprocessors (Sass or Less) then I recommend
using _print.sass
, _print.scss
, and _print.less
in their current form and
importing the file from your main file that contains the imports for all the
other partials.
In Less you would use the
less import at-rule like
this: @import 'vendor/print'
In Sass' .sass & .scss syntax you would import it with
Sass' use at-rule like this
@use 'vendor/print'
. You could also do it with @import 'vendor/print'
but keep in mind that
Sass' import at-rule is
being phased out of Sass and will eventually be removed.
For more information about migrating away from the soon-to-be-deprecated
@import
and using the newer @forward
and @use
directives, see the offical
Sass documentation for:
If you have any questions about how to use Betterize that cannot be answered by this README or the documentation in the file, or if you have any issues, suggestions or comments, I would be happy to help anyone who reaches out. You can find me on X/Twitter at @metric_dev.
Feel free to ask me anything you like in a tweet, or shoot me a DM (though if you are not verified on X/Twitter I may not see the DM).
If you are interested in a Sass/SCSS library of mixins and functions that aid in front-end development, please consider checking out my project, smoother.
Along with having more than 150 mixins and more than 80 functions, Smoother
has its own version of _betterize.scss
that is reworked to be used exclusively
with the Smoother library.
You can install Smoother in NPM like this:
npm i -D smoother
If you would like to contribute to Betterize, whether it is to add something new or fix a bug you have found, check out the Contributions document.
Betterize is distributed under an MIT License.
TL;DR: Anyone can use this code however they want but it would sure be nice if they also included a copy of the above license.
Created by SM Irving <@metric_dev>.
New contributors are welcome!
Contains work and research done by: