6 ms·

Normalize.css

69 points by Leftium 1y ago

reconnecting 1y ago
Actually, there are two normalizes. The first was: https://github.com/necolas/normalize.css https://github.com/necolas/normalize.css
- Leftium 1y ago
  I chose to share the one that seemed more recent/maintained. Brief history/explanation from: https://github.com/csstools/normalize.css/#differences-from-necolasnormalizecss https://github.com/csstools/normalize.css/#differences-from-... > Nicolas Gallagher and I started writing normalize.css together. I named and created the normalize.css repository with the help of Paul Irish and Ben Alman. I transferred the repository to Nicolas, who turned it into a “household” CSS library. > Later, I resumed authorship of normalize.css with Luciano Battagliero. Together, we tagged, deprecated, and removed “opinionated” styles — styles developers often prefer but which do not fix bugs or “normalize” browser differences. > Later, Nicolas resumed authorship and the issue of whether to include or omit the opinionated styles forced us to split.
- Leftium 1y ago
  And now there is a third variation, sanitize.css, which is the one I decided to use: https://github.com/csstools/sanitize.css https://github.com/csstools/sanitize.css Used here: https://github.com/Leftium/news/blob/0d507aecd05dfe94853d2781ac5b2869e6c93d35/src/routes/%2Blayout.svelte#L3 https://github.com/Leftium/news/blob/0d507aecd05dfe94853d278...
fouronnes3 1y ago
Obviously we can't break backwards compatibility, but why doesn't css have opt-in "use version" strings that could tell the browser: I want this set of defaults. Something like "use-defaults: system-ui;" or "use-defaults: none".
- JimDabell 1y ago
  You can always do something like: * { all: unset; } But then you’d have to reimplement everything from browser defaults, which can get a bit tedious. I agree, it would be nice to get a bit of a cleaned up set of defaults though, and you could polyfill it this way.
aetherspawn 1y ago
At some point I stopped caring about backwards compatibility, but I can’t put my finger on it. Perhaps connectivity became so good that now as long as it works on evergreen, it’s good to go. We used to put a lot of effort into this stuff, but it feels like it’s been years since we even thought about it.
- anilgulecha 1y ago
  It's when IE 11 was deprecated, and everyone moved to well supported CSS and HTML5 browsers - modern Webkit/blink/Gecko browsers.
fred_ 1y ago
The npm install text overflows horizontally for me on iPhone 16
- defanor 1y ago
  It does that in Firefox at certain window sizes, too, supporting its claim to consistency across major web browsers.
  - MonaroVXR 1y ago
    Same for me to, using Microsoft Edge on Android 16 using a Pixel 8
  - DANmode 11mo ago
    No better laugh than an HN laugh.
- misiek08 1y ago
  iP 15 Pro, Safari, same xD
  - mediumsmart 1y ago
    iP 12 runofthemill, Orion, same
johnnypangs 1y ago
Ive always found this explanation helpful for why these are useful: https://www.joshwcomeau.com/css/custom-css-reset/ https://www.joshwcomeau.com/css/custom-css-reset/
maxloh 1y ago
I found Bootstrap's reboot.css to be a better maintained version of this. More details here: https://getbootstrap.com/docs/5.3/content/reboot/ https://getbootstrap.com/docs/5.3/content/reboot/ Code: https://github.com/twbs/bootstrap/blob/v5.3.8/dist/css/bootstrap-reboot.css https://github.com/twbs/bootstrap/blob/v5.3.8/dist/css/boots...
chrismorgan 1y ago
This link is for the less-well-known normalize.css, https://github.com/csstools/normalize.css https://github.com/csstools/normalize.css. It was last touched five years ago. The better-known normalize.css is https://github.com/necolas/normalize.css https://github.com/necolas/normalize.css. It was last touched seven years ago. There’s a reason neither has seen more recent activity: they were mostly about making old browsers behave themselves, and they’re done. The stylesheets did have a little more to them, but it wasn’t what people actually cared about… and in some cases they were better off without them. I know I disagree with quite a few of their opinionated styles. Those old browsers are now long obsolete—half of them can’t even talk TLS 1.2, which basically excludes them from the modern web—so almost all of these stylesheets is obsolete, and you don’t need them. For the few pieces that might still have value, you would now prefer to use @layer or :where() for this kind of stylesheet, to make them behave more like user agent styles and avoid specificity conflicts.
- rhdunn 1y ago
  To add to this, HTML 5/LS have a section on rendering HTML elements [1]. That section provides default CSS rules that a conforming web browser must use. Therefore, modern browsers effectively have built-in normalize.css rules, providing a consistent web page default. There may be some rules you want to change in a set of baseline rules such as margin/padding, image sizing, and fonts. But those would be things you would add on top of normalize.css anyway. [1] https://html.spec.whatwg.org/multipage/rendering.html#rendering https://html.spec.whatwg.org/multipage/rendering.html#render...
  - extra88 1y ago
    Your link makes it very clear that those CSS rules are not required, that they are suggestions. However, all major browsers do use them.
- assimpleaspossi 1y ago
  In the nearly 25 years of running a web dev company, we never used such resets because it always felt like browsers had their built in settings, then one would have a reset to shift everything around one way, then we'd have settings to throw things another way and that's how it felt--like we were slamming things back and forth far too much. Instead, we'd just set elements to what we wanted them to be which is what we'd have to do in most cases anyway, making any reset unnecessary.
kuekacang 1y ago
Now ui libraries does its own reset. The no-nonsense blogger just use a few styling, and yeah, the default now is good enough.
simjnd 1y ago
I moved away from using Tailwind CSS, but still use their "preflight.css" [1]. It doesn't really care about backwards compatibility (IE stuff), but does a great job at unstyling everything so you have a clean cross-browser base to work with (button will look like text until you add your styling). [1]: https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css https://github.com/tailwindlabs/tailwindcss/blob/main/packag...
- BrandoElFollito 1y ago
  Could you write a few words why you moved away from TailwindCSS? I am an amateur dev (I write open-source useful for me and possibly others) and I am prone to the "front-end diarrhea syndrome", where when I see something cooler, I jump on it and regret afterwards the time spent. I am on TailwindCSS right now and I am afraid to learn the drawbacks, but one must be courageous in life.
  - alt187 1y ago
    https://colton.dev/blog/tailwind-is-the-worst-of-all-worlds/ https://colton.dev/blog/tailwind-is-the-worst-of-all-worlds/ This is a pretty good post. In general, I don't think `class` is a good place for styling.
    - pacha3000 1y ago
      This is actually an awesome post, thank you for sharing
    - BrandoElFollito 1y ago
      Thank you, this is a nice post. On the other hand, the author is happy to have HTML and CSS generated with JS, which is weird as well (I know - React).
      - llbbdd 1y ago
        Why is that weird?
croemer 1y ago
Looks unmaintained, last release 2 years ago. The website points at v11 when the most recent release is v12. Has nothing changed in browsers to necessitate code changes?
ugur2nd 1y ago
Why is Normalize.css back in the spotlight after all this time? My take on Normalize.css is how something so simple can have such a huge impact. It's astonishing.
jgalt212 1y ago
CSS is a monster, and it just keeps growing. If one wants to do something truly visually crazy / innovative / impressive, just use canvas. Didn't Google Docs abandon CSS and go straight with canvas? The feature creep in CSS is distasteful. The counter argument is if we keep adding features that will keep the LLMs at bay as they are not good at extrapolation and / or stuff they have not seen before. rant over.
- robin_reala 1y ago
  Seems way too much work to completely recreate an accessibility tree as well as the rendering framework.
microflash 1y ago
At this point, writing a reset is kind of rite of passage for a web developer. Here’s mine[1] which I wrote while working on multilingual projects involving both Latin and non-Latin languages. [1] https://github.com/Microflash/preset/blob/main/src/preset.css https://github.com/Microflash/preset/blob/main/src/preset.cs...
inflames123 1y ago
[flagged]
robin_reala 1y ago
Personally I prefer Sindre Sorhus’s modern-normalise, which is gradually deleting itself as browser compatibility issues are resolved: https://github.com/sindresorhus/modern-normalize https://github.com/sindresorhus/modern-normalize
- jszymborski 1y ago
  Kind of a bummer it only targets the latest version of browsers. I get trying to remove cruft by not trying to support older versions, but if you only support the latest you're targetting a smaller % of browsers.
  - socalgal2 1y ago
    What’s the percentage?
    - jszymborski 1y ago
      Depends what "latest" means, but eyeballing this table quickly, often much less than 10% https://caniuse.com/usage-table https://caniuse.com/usage-table
sholladay 1y ago
I always preferred to use sanitize.css, which is the same thing except it also makes sure everything looks pretty good. https://csstools.github.io/sanitize.css/ https://csstools.github.io/sanitize.css/

69 points by Leftium 1y ago

Actually, there are two normalizes. The first was: https://github.com/necolas/normalize.css https://github.com/necolas/normalize.css

Leftium 1y ago
I chose to share the one that seemed more recent/maintained. Brief history/explanation from: https://github.com/csstools/normalize.css/#differences-from-necolasnormalizecss https://github.com/csstools/normalize.css/#differences-from-... > Nicolas Gallagher and I started writing normalize.css together. I named and created the normalize.css repository with the help of Paul Irish and Ben Alman. I transferred the repository to Nicolas, who turned it into a “household” CSS library. > Later, I resumed authorship of normalize.css with Luciano Battagliero. Together, we tagged, deprecated, and removed “opinionated” styles — styles developers often prefer but which do not fix bugs or “normalize” browser differences. > Later, Nicolas resumed authorship and the issue of whether to include or omit the opinionated styles forced us to split.
Leftium 1y ago
And now there is a third variation, sanitize.css, which is the one I decided to use: https://github.com/csstools/sanitize.css https://github.com/csstools/sanitize.css Used here: https://github.com/Leftium/news/blob/0d507aecd05dfe94853d2781ac5b2869e6c93d35/src/routes/%2Blayout.svelte#L3 https://github.com/Leftium/news/blob/0d507aecd05dfe94853d278...

fouronnes3 1y ago

Obviously we can't break backwards compatibility, but why doesn't css have opt-in "use version" strings that could tell the browser: I want this set of defaults. Something like "use-defaults: system-ui;" or "use-defaults: none".

JimDabell 1y ago
You can always do something like: * { all: unset; } But then you’d have to reimplement everything from browser defaults, which can get a bit tedious. I agree, it would be nice to get a bit of a cleaned up set of defaults though, and you could polyfill it this way.

aetherspawn 1y ago

At some point I stopped caring about backwards compatibility, but I can’t put my finger on it. Perhaps connectivity became so good that now as long as it works on evergreen, it’s good to go. We used to put a lot of effort into this stuff, but it feels like it’s been years since we even thought about it.

anilgulecha 1y ago
It's when IE 11 was deprecated, and everyone moved to well supported CSS and HTML5 browsers - modern Webkit/blink/Gecko browsers.

fred_ 1y ago

The npm install text overflows horizontally for me on iPhone 16

defanor 1y ago
It does that in Firefox at certain window sizes, too, supporting its claim to consistency across major web browsers.
- MonaroVXR 1y ago
  Same for me to, using Microsoft Edge on Android 16 using a Pixel 8
- DANmode 11mo ago
  No better laugh than an HN laugh.
misiek08 1y ago
iP 15 Pro, Safari, same xD
- mediumsmart 1y ago
  iP 12 runofthemill, Orion, same

johnnypangs 1y ago

Ive always found this explanation helpful for why these are useful: https://www.joshwcomeau.com/css/custom-css-reset/ https://www.joshwcomeau.com/css/custom-css-reset/

maxloh 1y ago

I found Bootstrap's reboot.css to be a better maintained version of this. More details here: https://getbootstrap.com/docs/5.3/content/reboot/ https://getbootstrap.com/docs/5.3/content/reboot/ Code: https://github.com/twbs/bootstrap/blob/v5.3.8/dist/css/bootstrap-reboot.css https://github.com/twbs/bootstrap/blob/v5.3.8/dist/css/boots...

chrismorgan 1y ago

This link is for the less-well-known normalize.css, https://github.com/csstools/normalize.css https://github.com/csstools/normalize.css. It was last touched five years ago. The better-known normalize.css is https://github.com/necolas/normalize.css https://github.com/necolas/normalize.css. It was last touched seven years ago. There’s a reason neither has seen more recent activity: they were mostly about making old browsers behave themselves, and they’re done. The stylesheets did have a little more to them, but it wasn’t what people actually cared about… and in some cases they were better off without them. I know I disagree with quite a few of their opinionated styles. Those old browsers are now long obsolete—half of them can’t even talk TLS 1.2, which basically excludes them from the modern web—so almost all of these stylesheets is obsolete, and you don’t need them. For the few pieces that might still have value, you would now prefer to use @layer or :where() for this kind of stylesheet, to make them behave more like user agent styles and avoid specificity conflicts.

rhdunn 1y ago
To add to this, HTML 5/LS have a section on rendering HTML elements [1]. That section provides default CSS rules that a conforming web browser must use. Therefore, modern browsers effectively have built-in normalize.css rules, providing a consistent web page default. There may be some rules you want to change in a set of baseline rules such as margin/padding, image sizing, and fonts. But those would be things you would add on top of normalize.css anyway. [1] https://html.spec.whatwg.org/multipage/rendering.html#rendering https://html.spec.whatwg.org/multipage/rendering.html#render...
- extra88 1y ago
  Your link makes it very clear that those CSS rules are not required, that they are suggestions. However, all major browsers do use them.
assimpleaspossi 1y ago
In the nearly 25 years of running a web dev company, we never used such resets because it always felt like browsers had their built in settings, then one would have a reset to shift everything around one way, then we'd have settings to throw things another way and that's how it felt--like we were slamming things back and forth far too much. Instead, we'd just set elements to what we wanted them to be which is what we'd have to do in most cases anyway, making any reset unnecessary.

kuekacang 1y ago

Now ui libraries does its own reset. The no-nonsense blogger just use a few styling, and yeah, the default now is good enough.

simjnd 1y ago

I moved away from using Tailwind CSS, but still use their "preflight.css" [1]. It doesn't really care about backwards compatibility (IE stuff), but does a great job at unstyling everything so you have a clean cross-browser base to work with (button will look like text until you add your styling). [1]: https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css https://github.com/tailwindlabs/tailwindcss/blob/main/packag...

BrandoElFollito 1y ago
Could you write a few words why you moved away from TailwindCSS? I am an amateur dev (I write open-source useful for me and possibly others) and I am prone to the "front-end diarrhea syndrome", where when I see something cooler, I jump on it and regret afterwards the time spent. I am on TailwindCSS right now and I am afraid to learn the drawbacks, but one must be courageous in life.
- alt187 1y ago
  https://colton.dev/blog/tailwind-is-the-worst-of-all-worlds/ https://colton.dev/blog/tailwind-is-the-worst-of-all-worlds/ This is a pretty good post. In general, I don't think `class` is a good place for styling.
  - pacha3000 1y ago
    This is actually an awesome post, thank you for sharing
  - BrandoElFollito 1y ago
    Thank you, this is a nice post. On the other hand, the author is happy to have HTML and CSS generated with JS, which is weird as well (I know - React).
    - llbbdd 1y ago
      Why is that weird?

croemer 1y ago

Looks unmaintained, last release 2 years ago. The website points at v11 when the most recent release is v12. Has nothing changed in browsers to necessitate code changes?

ugur2nd 1y ago

Why is Normalize.css back in the spotlight after all this time? My take on Normalize.css is how something so simple can have such a huge impact. It's astonishing.

jgalt212 1y ago

CSS is a monster, and it just keeps growing. If one wants to do something truly visually crazy / innovative / impressive, just use canvas. Didn't Google Docs abandon CSS and go straight with canvas? The feature creep in CSS is distasteful. The counter argument is if we keep adding features that will keep the LLMs at bay as they are not good at extrapolation and / or stuff they have not seen before. rant over.

robin_reala 1y ago
Seems way too much work to completely recreate an accessibility tree as well as the rendering framework.

microflash 1y ago

At this point, writing a reset is kind of rite of passage for a web developer. Here’s mine[1] which I wrote while working on multilingual projects involving both Latin and non-Latin languages. [1] https://github.com/Microflash/preset/blob/main/src/preset.css https://github.com/Microflash/preset/blob/main/src/preset.cs...

inflames123 1y ago

[flagged]

robin_reala 1y ago

Personally I prefer Sindre Sorhus’s modern-normalise, which is gradually deleting itself as browser compatibility issues are resolved: https://github.com/sindresorhus/modern-normalize https://github.com/sindresorhus/modern-normalize

jszymborski 1y ago
Kind of a bummer it only targets the latest version of browsers. I get trying to remove cruft by not trying to support older versions, but if you only support the latest you're targetting a smaller % of browsers.
- socalgal2 1y ago
  What’s the percentage?
  - jszymborski 1y ago
    Depends what "latest" means, but eyeballing this table quickly, often much less than 10% https://caniuse.com/usage-table https://caniuse.com/usage-table

sholladay 1y ago

I always preferred to use sanitize.css, which is the same thing except it also makes sure everything looks pretty good. https://csstools.github.io/sanitize.css/ https://csstools.github.io/sanitize.css/