CSS prefix workbench

Zobacz CSS, ktory wygeneruje Autoprefixer

Wklej CSS, wybierz targety przegladarek i porownaj tryby grid, add oraz remove przed zmiana pipeline builda. Podglad dziala lokalnie w workerze i blokuje lookup configu projektu.

  • CSS nie opuszcza przegladarki
  • PostCSS preview w workerze
  • Caveaty grid sa widoczne

Uzyj przed zmiana target browser policy

Autoprefixer zamienia targety Browserslist na decyzje o prefixach CSS i cleanupie. Ten playground pokazuje output dla flexboxa, grid, appearance, user-select i innych czestych deklaracji.

Route uzywa bundlowanego Autoprefixera i PostCSS w workerze przegladarki. Nie czyta .browserslistrc, package.json, source maps, zmiennych srodowiskowych ani paczek browserslist-config.

Prefix preview workbench

Wybierz preset, edytuj CSS i uruchom kontrolowany podglad. Komentarze sterujace Autoprefixera sa blokowane, zeby opcje UI pozostaly zrodlem prawdy.

Gotowe

Pokazuje koszt i caveaty wlaczenia legacy grid prefixes.

CSS i targety

Wynik preview

Uruchom preview, zeby zobaczyc output CSS, diagnostyke i config PostCSS do skopiowania.

Notatki do review Autoprefixera

Targety decyduja o output

Ten sam CSS moze dac inne prefixy po zmianie targetow Browserslist. Traktuj preview jako dowod do review, a potem potwierdz realny build repozytorium.

Tryby grid wymagaja kontekstu

Grid template prefixes moga pomoc w legacy review, ale autoplace nie jest pelna gwarancja layoutu IE. Caveat powinien zostac widoczny w pull requestach.

Lookup projektu jest zablokowany

Publiczny playground nie powinien rozwiazywac paczek, czytac plikow projektu, ladowac poprzednich source map ani sluchac control comments z inputu uzytkownika.

Uzyj ich, gdy CSS prefix output zalezy od targetow przegladarek, build configu albo transformacji JavaScript.