# Browser support

> Which browsers are supported, and what newer features do where they are missing.

Page: https://pico.rusticstack.com/docs/getting-started/browser-support

Pico Reforged supports current browsers only. The floor is the same as Tailwind CSS v4.

| Browser            | Minimum |
| ------------------ | ------- |
| Chrome, Edge       | 111     |
| Firefox            | 128     |
| Safari, iOS Safari | 16.4    |

The default build target is the browserslist query `chrome >= 111, edge >= 111, firefox >= 128, safari >= 16.4, ios_saf >= 16.4`. Lightning CSS flattens nesting and lowers `light-dark()` for those browsers, so the ready-made files in `css/` work at the floor. There is no legacy build, no unlayered build and no polyfill. Browsers below the floor are not tested. If you must support them, stay on Pico CSS v2.1.1, or pass your own query with `--targets` or the `targets` option.

## Newer features

These are additive. Where a floor browser does not support one, the page still works.

| Feature                                     | Without support                                     |
| ------------------------------------------- | --------------------------------------------------- |
| Popover and `popover="hint"`                | the element shows as normal content                 |
| Anchor positioning                          | popovers open in the top layer with fixed placement |
| `@starting-style` and `transition-behavior` | no open or close animation on dialogs and popovers  |
| `::details-content` and `interpolate-size`  | accordions open and close instantly                 |

## Your own CSS

The ready-made files are compiled for the floor. Your own stylesheet is not, unless a bundler or an integration does it. Relative color syntax needs Chrome and Edge 119, so it is not available at the floor. `light-dark()` written in your own CSS is native from Chrome 123, Firefox 120 and Safari 17.5, so below that, use a CLI theme or write the two values yourself under `prefers-color-scheme` and `data-theme`.

The unminified files in `src/` are the plain source. They still hold nesting and `light-dark()`, so load them directly only in current browsers.

## Modern preset

`--targets modern` (or `targets: "modern"`) is an optional higher floor: Chrome and Edge 123, Firefox 128, Safari and iOS Safari 17.5. The compiler then keeps native nesting and `light-dark()` instead of lowering them. `pico.min.css` goes from 77,969 to 69,917 bytes raw and from 10,281 to 9,957 bytes with brotli. The ready-made files in `css/` use the default floor. `pico-reforged purge` flattens the nesting of a modern file before it judges selectors.

## Serving the files

Precompress with brotli at quality 11 when you serve the files yourself, which is about 1 KB smaller than q5. If your server supports compression dictionaries (RFC 9842), use `pico.min.css` as the dictionary for the theme variants. In a test, `pico.jade.min.css` went from 10,438 to 120 bytes.