简体中文
English
Website review
This review may include AI-generated content and is not individually verified. Domain, certificate and other facts come from the observed data on this page.
What is Water.css?
Water.css is a single stylesheet you add to an HTML page to make plain, semantic markup look presentable without writing any CSS classes. You keep writing ordinary tags — headings, paragraphs, tables, forms, buttons — and the stylesheet handles typography, spacing, form controls and tables for you. Its stated goals are responsiveness, small file size (under 2 KB minified and gzipped), broad browser support and no classes, so it suits static sites, documentation, prototypes and quick demos where a full framework would be overkill.
How you actually use it
Paste one <link> tag into your page's <head>, then write normal HTML. There is nothing to configure and no class names to learn. The site also lists light and dark theme options, and a "Waterize" bookmarklet: a snippet you drag to your bookmarks bar that restyles an existing page in the browser, which is handy for reading cluttered articles or checking how your own markup would look.
What it is good at, and what it is not
| Situation | Water.css fits | A class-based framework fits better |
|---|---|---|
| Static page, README-style docs, blog post | Yes — one link tag, no build step | Unnecessary weight |
| Quick prototype or teaching example | Yes — semantic HTML is the whole input | Slower to set up |
| Custom brand, grids, complex components | No — you would fight the defaults | Yes |
| Existing site with its own design system | No | Yes |
The trade-off is deliberate: you get consistency and speed in exchange for design control. Because it avoids classes and keeps the CSS minimal, it stays responsive with just the standard viewport meta tag, but it will not give you a bespoke look. The demo page on the site is worth skimming, since it shows real form fields, tables, code blocks, a dialog and typography so you can judge the defaults before committing.
A practical next step: take one small page you already have, add Water.css, and compare it against your current styling. If the result is close enough to what you want, keep it; if you find yourself overriding many rules, that is the signal to move to a framework with a class system. For adjacent lightweight options, see Pico CSS and Simple.css.
How do I install Water.css on my website?
Paste a single <link> tag into the <head> of your HTML page and Water.css styles your whole document automatically. It is a drop-in stylesheet, so there is no build step, no JavaScript, and no classes to add to your markup.
Basic installation
- Open your HTML file and find the closing
</head>tag. - Add the stylesheet link just before it:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
</head>
- Write normal semantic HTML (
<h1>,<p>,<table>,<form>) and the styles apply by element.
The viewport meta tag is worth including. Water.css itself is minimal and flows well on small screens, but without that tag mobile browsers render the page at desktop width and your layout will look zoomed out.
Choosing a theme
Water.css ships light and dark variants, and an "automatic" option that follows the visitor's system preference. If you want dark mode to switch on its own, use the automatic stylesheet instead of the plain one. If you want to force one look, link the light or dark file directly. Pick the version that matches your site's intent: automatic suits general reading pages; a fixed theme suits branded or embedded interfaces where consistency matters more than user preference.
When to use it, and when not to
| Situation | Water.css fits | Water.css does not fit |
|---|---|---|
| Documentation, README-style pages, personal notes | Yes — instant readable typography | — |
| Marketing or branded landing page | — | You need custom layout, grids and hero sections |
| Prototypes and demos | Yes — zero setup | — |
| Large app with a design system | — | Conflicting resets and specificity |
Its goals are explicitly small size, responsiveness, good browser support and no classes, so it styles elements rather than offering a component library. There are no cards, nav bars or utility classes to compose with.
A quick way to test it
Water.css provides a "Waterize" bookmarklet: a JavaScript snippet you drag to your bookmarks bar. Clicking it on any page swaps that page's styles for Water.css, which is a fast way to see how the stylesheet handles real content before committing. Treat this as a preview tool, not a deployment method — it only affects your own browser session.
Practical next step
Build one small page with a heading, two paragraphs, a list, a table and a form, then open it on a phone. If the result reads cleanly and nothing overflows, the install is correct. If you later need components beyond bare elements, look at a fuller framework instead, such as Bootstrap or Tailwind CSS, and keep Water.css for the simple pages where it does its job best.
Does Water.css work with mobile devices?
Yes. Water.css is built to stay out of the way on small screens: because it applies minimal, unstyled-by-default rules rather than fixed widths, floats or complex layouts, content reflows naturally on phones and tablets. The project's own Goals list includes "Responsive," and its page explicitly says it "doesn't include any fancy styles so it's easily mobile responsive."
What you still need to do
Water.css handles typography, forms, tables and spacing, but it does not add a viewport meta tag for you. Without it, mobile browsers assume a desktop-width page and zoom out, which makes text tiny even with good CSS. Add this inside your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
That single line, plus Water.css, is the intended mobile setup.
Where mobile behavior is strongest
- Prose and headings — line lengths and font sizes adapt without breakpoints.
- Forms — inputs, selects and buttons are styled at their natural sizes, so they remain tappable.
- Tables — these are the weak point. Wide tables can still overflow on narrow screens, since Water.css does not add scroll wrappers. For data-heavy pages, wrap tables in a container with
overflow-x: auto.
A quick way to judge fit
Open your page on a phone and resize the browser window on desktop. If the layout flows rather than clipping, Water.css is doing its job. If a table or a long code block spills sideways, that is a content-structure issue rather than a framework limitation — fix it with a scroll container.
For comparison, Bootstrap gives you a full responsive grid and components at the cost of classes and weight, while Pico CSS takes a similar classless, semantic approach with more built-in theming. Water.css sits at the smallest, simplest end of that range, which is exactly why it holds up on mobile for simple static sites.
What is the Waterize bookmarklet and how do I use it?
The Waterize bookmarklet is a small JavaScript snippet you drag to your browser's bookmarks bar. When you click it on any page, it swaps that page's existing styles for Water.css, so plain, cluttered or badly styled pages become more readable without you editing anything.
How to use it
- Open Water.css and find the Bookmarklet section.
- Drag the "Waterize" link into your bookmarks bar (or copy its address and create a bookmark manually).
- Visit a page you find hard to read and click the bookmarklet.
- Reload the page to restore its original styling.
The effect is temporary and local to your browser. It does not change the site for anyone else, and it disappears on reload or navigation.
What to expect
Water.css is a classless, drop-in stylesheet: it styles semantic HTML elements directly, so the bookmarklet works best on pages built with ordinary headings, paragraphs, lists, tables and form controls. It is not a reader mode that strips ads or scripts, and pages that rely on heavy custom CSS, fixed layouts or complex components may look odd rather than improved.
The project's stated goals include being responsive, small (under 2kb minified and gzipped), and free of classes, with good browser support. It also offers automatic dark/light theme options for people who install the stylesheet properly rather than through the bookmarklet.
When to use which approach
| Situation | Better choice |
|---|---|
| You want your own simple static site to look decent | Paste the stylesheet into your HTML <head> |
| You want to read one poorly styled page right now | Click the Waterize bookmarklet |
| You need a permanent fix for a site you control | Install Water.css, not the bookmarklet |
| The page depends on custom layout or app-like UI | Expect limited benefit; try a dedicated reader mode instead |
A practical next step: keep the bookmarklet in your bookmarks bar for documentation pages, old blogs and plain HTML files, but test it on a page you know well first so you can see how much it changes before relying on it.
How can I enable a dark theme with Water.css?
Water.css ships with a dark theme, but you don't enable it with a class or a toggle in your markup. The theme is chosen through the stylesheet you load.
The straightforward approach
Load the dark version of the stylesheet in the <head> of your page instead of the default. Water.css provides a dark theme as a separate option, so the swap is a single line: point your <link> at the dark stylesheet rather than the automatic or light one.
The automatic option is the one that follows the visitor's operating-system preference, switching between light and dark on its own. Choose it when you want the page to respect what the reader has already set on their device. Choose the explicit dark file when you want dark regardless of system settings — for example, a page that sits alongside a dark-branded product.
Choosing between them
| Option | What it does | Good for |
|---|---|---|
| Automatic | Follows the visitor's OS light/dark setting | General-purpose pages where you don't want to impose a look |
| Dark | Always dark | Sites that should match a dark brand or a night-time reading context |
| Light | Always light | Documents, print-like pages, situations where contrast matters most |
A practical next step
If you're unsure, start with automatic. Open the page, then change your operating system's appearance setting and reload — if the page follows along, it's wired up correctly. If you specifically want dark at all times, switch the link to the dark stylesheet and confirm the change on a phone as well as a desktop, since form controls and code blocks are where theme mismatches usually show up first.
One thing to keep in mind: because Water.css is classless, you don't add anything to your HTML to get the theme. That keeps your markup clean, but it also means you can't offer an in-page light/dark toggle without writing your own CSS or JavaScript on top. For a simple static site, that trade-off is usually fine — the reader's system preference is a reasonable default. If you do need a manual switch, you'd be adding a small amount of custom styling, at which point Water.css is still doing the bulk of the work but no longer the whole job.
The project itself is at Water.css.
What types of HTML elements does Water.css style out of the box?
Water.css styles plain semantic HTML without requiring you to add classes. Its demo page shows the usual document building blocks: headings, paragraphs, links, lists, blockquotes, tables, horizontal rules, images, and inline text elements such as bold, italics and code. It also covers forms, including text inputs, email inputs, read-only and disabled fields, select menus, checkboxes, radio buttons, textareas, buttons, and labels. Interactive and structural elements are included too: details and summary, dialog, menu, and form tags, plus code blocks with scrollbars. The result is that a simple static page written with correct HTML looks intentionally designed rather than browser-default.
How to decide whether that coverage is enough
Water.css is aimed at small static sites and documentation-style pages, not complex application interfaces. If your page is mostly text, forms and tables, it will likely cover everything you need. If you rely on card grids, navigation bars, modals with custom layouts, or utility-class systems, you will still need your own CSS on top.
A practical test: open your page with Water.css removed. If the unstyled version is still readable and logically ordered, Water.css will make it look good. If the unstyled version collapses into an unusable pile, the problem is markup structure, not styling.
Try it on an existing page first
The site offers a Waterize bookmarklet, a JavaScript snippet you drag to your bookmarks bar. Opening an ugly or cluttered page and clicking it swaps the page's styles for Water.css, which is a fast way to see how the framework handles real content before committing to it. For a more permanent comparison, Bootstrap and Tailwind CSS take the opposite approach: they give you many more components and layout utilities, but expect class names throughout your HTML. Water.css is the lighter option when you want to keep markup clean and are willing to accept plainer, more uniform results.
Cloudflare
Netlify
User reviews (0)