mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
51 lines
2.9 KiB
Plaintext
51 lines
2.9 KiB
Plaintext
---
|
|
title: Browser support
|
|
description: Which browsers Tabler supports, and the CSS features that set the minimum versions of Chrome, Firefox, Edge, Safari and Opera.
|
|
summary: Which browsers Tabler supports and the CSS features that set the minimum versions.
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
|
|
Tabler runs in every current browser: Chrome, Firefox, Edge, Safari, Opera and the Chromium browsers built on them.
|
|
|
|
The minimum versions below are not a policy, they are what the CSS needs. Tabler's colors and color modes are built on `light-dark()` and `color-mix()`, and the layout uses `:has()` and `@property`. None of them have a fallback, so a browser that misses one drops those declarations and the page renders wrong - usually as missing colors. See [what sets the floor](#what-sets-the-floor) for the exact features.
|
|
|
|
## Supported browsers
|
|
|
|
Browser|Minimum Version
|
|
---|----------
|
|
<img src="/img/browsers/chrome.svg" width="24" height="24" alt="Chrome Logo"/>|Chrome 123+
|
|
<img src="/img/browsers/firefox.svg" width="24" height="24" alt="Firefox Logo"/>|Firefox 128+
|
|
<img src="/img/browsers/safari.svg" width="24" height="24" alt="Safari Logo"/>|Safari 17.5+
|
|
<img src="/img/browsers/edge.svg" width="24" height="24" alt="Edge Logo"/>|Edge 123+
|
|
<img src="/img/browsers/opera.svg" width="24" height="24" alt="Opera Logo"/>|Opera 109+
|
|
<img src="/img/browsers/electron.svg" width="24" height="24" alt="Electron Logo"/>|Chromium 123+
|
|
<img src="/img/browsers/brave.svg" width="24" height="24" alt="Brave Logo"/>|Chromium 123+
|
|
<img src="/img/browsers/vivaldi.svg" width="24" height="24" alt="Vivaldi Logo"/>|Chromium 123+
|
|
|
|
## Mobile browsers
|
|
|
|
Browser|Minimum Version
|
|
---|----------
|
|
iOS Safari|iOS 17.5+
|
|
Samsung Internet|Samsung 27+
|
|
|
|
## What sets the floor
|
|
|
|
Each row is the first version that supports the feature. The highest number in a column becomes the minimum for that browser.
|
|
|
|
Feature|Used for|Chrome|Firefox|Safari
|
|
---|---|---|---|---
|
|
`light-dark()`|Every color that differs between light and dark mode|123|120|17.5
|
|
`@property`|The animated gradient on cards|85|128|16.4
|
|
`:has()`|State that depends on a child, for example a selected table row or the folded sidebar|105|121|15.4
|
|
`color-mix()`|Tints, shades and translucent surfaces|111|113|16.2
|
|
Relative colors, `oklch(from …)`|The darker hover shade of every color and the dark mode borders|122|128|16.4
|
|
|
|
Opera 109 and Samsung Internet 27 are the first releases built on Chromium 123.
|
|
|
|
Safari 16.4 to 17 follow an older draft of relative colors, where math on the hue needs a `deg` unit. Tabler only changes the lightness, which works the same in every version. If you override a Tabler color with `light-dark()`, its `-darken` shade needs Safari 18.
|
|
|
|
## Unsupported browsers
|
|
|
|
Internet Explorer is not supported, and neither is any browser released before the versions above. There is no polyfill to add: the features that set the floor are CSS, so a missing one cannot be patched with JavaScript.
|