Skip to content

Commit

Permalink
docs: add some notes about checkbox sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
bryanbraun committed Jun 6, 2020
1 parent 885b322 commit 2f21c65
Showing 1 changed file with 13 additions and 0 deletions.
13 changes: 13 additions & 0 deletions src/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,19 @@ So, let's fix this by not making them inline-block! Unfortunately, we don't have

For now, I'm using inline-block with some styles (like `vertical-align: top`) that minimizes most of the cross-browser differences.

Firefox's checkboxes have border-spacing around them, which it can't be overridden since they exist in the shadow-root (which cannot be customized). It's not too big of a deal, as long as the checkboxes are the same size (see next).

## Size

The default size of checkboxes can differ from browser to browser, which can affect the size of the full checkbox grid. The current browser default sizes look like this:

* Firefox: 14px;
* Edge: 14px;
* Chrome: 14px;
* Safari: 12px;

Checkboxland doesn't currently try to change these default checkbox sizes, but [this stylesheet used in the docs](https://github.com/bryanbraun/checkboxland/blob/master/docs/css/cbl-normalize-size.css) shows how to do it.

## Performance

Updating the checkboxes can be performance intensive when there's a lot of them. [Google recommends a your DOM be 1500 nodes or smaller](https://web.dev/dom-size/), which is pretty restrictive, given what we're trying to do.
Expand Down

0 comments on commit 2f21c65

Please sign in to comment.