Browser compatibility

jampack can improve browser compatibility by adding fallbacks, vendor prefixes or lowering syntax of cutting edge CSS features.

CSS transpilation

You can configure your level of compatibility by configuring the browser targets using the browserslist query syntax.

{
  "general": {
    "browserslist": 'last 12 versions'
  }
}

See browserslist for more details about the query syntax. See ligthningcss transpilation for examples of transpilation.

Demo

SOURCE

JAMPACKED

_jampack anemones.jpg 86155 anemones.jpg 78728index.html 288 index.html 320styles.css 415 styles.css 351

SOURCE

  • anemones.jpg 86155
  • index.html 288
  • styles.css 415

JAMPACKED

  • _jampack
  • anemones.jpg 78728
  • index.html 320
  • styles.css 351
Source Open in new tab
Jampacked Open in new tab
Terminal 
__                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  \__  \  /     \\____ \__  \ _/ ___\|  |/ /
    |  |/ __ \|  Y Y  \  |_> > __ \\  \___|    < 
/\__|  (____  /__|_|  /   __(____  /\___  >__|_ \
\______|    \/      \/|  |       \/     \/     \/
 v0.24.0              |__| by ‹div›RIOTS

Options:
{}

Merging default config with:
{
  "general": {
    "browserslist": "defaults"
  }
}

 PASS 1 - Optimizing 
▶ index.html
Done: 20.415ms

 PASS 2 - Compressing the rest 
Done: 77.386ms

 Summary 
╔════════╤════════════╤══════════╤════════════╤══════════╗
║ Action │ Compressed │ Original │ Compressed │     Gain ║
╟────────┼────────────┼──────────┼────────────┼──────────╢
║ .html  │      1 / 1 │ 321.00 B │   320.00 B │  -1.00 B ║
║ .css   │      1 / 1 │ 415.00 B │   351.00 B │ -64.00 B ║
║ .jpg   │      1 / 1 │ 84.14 KB │   76.88 KB │ -7.25 KB ║
╟────────┼────────────┼──────────┼────────────┼──────────╢
║ Total  │      3 / 3 │ 84.85 KB │   77.54 KB │ -7.32 KB ║
╚════════╧════════════╧══════════╧════════════╧══════════╝


 ✔ No issues