Hacker News Reader

Comment by archmaster | Hacker News Reader

Why?

I make a bunch of tiny static websites for API demos and such, and always run against the same problem: I hate the browser's default styles but don't want to spend time writing my own stylesheet for such a tiny app.

Now I can just include Water.css in my `<head>` and forget about it. The demo app will still work, it'll look good, and I won't have spent any time making a stylesheet.

Who?

Let me quote the GitHub repository:

> You might want to use Water.css if you're making a simple static or demo website that you don't want to spend time styling.

> You probably don't want to use it for a production app or something that has more than a simple document. Rule of thumb: if your site has a navbar, don't use Water.css. It's just not meant for that kind of content.

Water.css has a dark theme by default, but some users wanted a light theme so I added one. Think it's ugly? Feel free to create a pull request :D

View on HN

You should consider shipping a combined css file that uses the prefers-color-scheme media query to show dark or light as appropriate!

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

I didn’t know this feature but I love it! I’ll try to use it in all future projects

Also chiming in to say thanks. I hadn't seen this gem in my MDN browsing either.

I investigated this a few months ago and no browser, not even Safari supported it. Hopefully more platforms will start to support it.

Safari supports it as of 12.1 (It was available in the Tech Preview prior to 12.1)

It sounds backwards, but this is why you should use this feature. It sends a message to browser vendors (via Chrome Status eg https://www.chromestatus.com/features/5109758977638400) that developers want to use those features, which helps the Chrome team (and other vendors) prioritize what to work on.

Build sites to be standards compliant and accessible first, and then progressively enhance them using new browser features to give the user a better experience. It's absolutely the best way to build for the web.

It's also supported already in Firefox Nightly (macOS and Windows) and WIP in Chrome

Great idea (and cute name). Default browser styles are hideous; honestly just this makes a world of difference:

  body {
    font-family: sans-serif;
    max-width: 800px;
    margin: 0 auto;
  }

Another idea (you have some default transitions in there already, but I like this one):

  * {
    transition: all 0.2s ease-out;
  }

It's bold, but quite effective. Suddenly literally every property change looks natural.

It's a pain on the CPU though if you have a lot of non-transform/opacity changes though. It's much better to just animate the elements that you want animated and leave the rest alone.

I hadn't considered that, although it shouldn't create waste, right? Presumably, unchanging properties with transitions enabled don't add any work to be done. If it's only the ones that change, and if I really do want all of those to transition, there's no problem.

Right, but a lot of properties you probably don't want animated, and modern frameworks also reuse dom elements sometimes, so it might create a lot of lag and weird transitions between elements that you didn't foresee.

Cool. Reminds me of the original W3C Core Styles [0]. Created long before Boostrap, YUI or Eric Meyer's CSS [1], the stylesheets providing the web with free stylesheets and looked great back in the day. Simpler times when you could understand most web dev by reading a spec or two.

[0] https://www.w3.org/StyleSheets/Core/

[1] https://web.archive.org/web/19980703153940/https://www.w3.or...

I happen to prefer the browser's default styles. I only ever need to tamper with them if the browser's default styles are not used.

Reply on news.ycombinator.com