Kako uvesti Baseline u CI, pa da pregledač prestane da odlučuje umjesto tebe

Podrška pregledačima je odluka koju tim donosi, a većina timova je donese slučajno — neko upotrijebi svojstvo, niko ne provjeri, i odgovor stigne kao prijava greške iz pregledača koji niko nije testirao. Baseline to pretvara u broj koji staje u datoteku s podešavanjima. Ovdje je cijela postavka, s verzijama paketa provjerenim u npm registru 21. avgusta 2026.

Prvi korak: povuci liniju, namjerno

Baseline nudi dva načina da se povuče. Široko dostupno pokriva sve što je u potpunosti podržano u Chromeu, Edgeu, Firefoxu i Safariju 30 mjeseci prije današnjeg dana. Godišnji skup pokriva sve što je u ta četiri pregledača bilo u potpunosti podržano do kraja date kalendarske godine.

Trideset mjeseci je namjerno konzervativno, i to je cijela poenta: to je linija na kojoj mogućnost vjerovatno neće postati tvoj problem. Ako ti analitika kaže da posjetioci imaju svježe pregledače, skorija godina je poštenija linija. Pogledaj analitiku prije izbora, ne poslije.

Drugi korak: jedno podešavanje koje cijela gradnja čita

Paket browserslist-config-baseline, verzija 0.5.0, pretvara Baseline cilj u browserslist podešavanje. To je važno jer browserslist već čitaju Autoprefixer, Babel, Lightning CSS i većina paketara. Postaviš jednom i cio lanac alata se složi.

U package.json:

• npm i browserslist-config-baseline
• "browserslist": ["extends browserslist-config-baseline"]
• Dodaj objekat "browserslist-config-baseline" sa logConfigToConsole postavljenim na true ako hoćeš da se razriješen spisak pregledača ispiše pri svakom pokretanju.
• Podaci u paketu se mijenjaju kako pregledači izlaze, pa ga osvježavaj po rasporedu umjesto da ga zakucaš i zaboraviš.

Treći korak: linter koji upozori prije nego što to uradi pregled koda

Paket stylelint-plugin-use-baseline, verzija 1.4.6, provjerava CSS naspram Baselinea. Njegova dokumentacija preporučuje da se pokreće s težinom upozorenja, jer je svrha da suzi spisak mogućnosti s kojima treba pažljivo, a ne da ih zabrani.

Najmanji stylelint.config.js dodaje dodatak i pali jedno pravilo: plugin/use-baseline, s težinom postavljenom na upozorenje. Onda pokreneš npx stylelint nad svojim CSS-om. Timovi koji su već na ESLintu imaju drugi put: @eslint/css, verzija 1.4.0, nosi pravilo use-baseline u svom preporučenom skupu.

Težina upozorenja je ispravna podrazumijevana vrijednost s razlogom. Pravilo koje obara gradnju nauči ljude da ga isključe. Pravilo koje upozorava nauči ih da pogledaju.

Četvrti korak: neka to kaže CI

Vrijednost nije u tome da linter radi na tvom računaru. Vrijednost je u tome da se upozorenje pojavi na zahtjevu za spajanje, uz izmjenu koja ga je izazvala, dok je ta izmjena još jeftina.

Jedan posao na zahtjevima za spajanje: instaliraj, pokreni stylelint nad stilskim listovima, i pusti ga da prijavi. Prvo neka ne obara gradnju. Mjesec dana upozorenja ti kaže da li linija koju si izabrao odgovara načinu na koji tvoj tim stvarno piše CSS, a to je podatak koji hoćeš prije nego što kapiju zatvoriš.

Peti korak: prelazak linije, namjerno

Upozorenje nije zabrana. Kad novija mogućnost stvarno zaslužuje svoje mjesto, umotaj je tako da stariji pregledač dobije stranicu koja radi umjesto polomljene, a upozorenje lintera neka ostane kao zapis da je izbor bio svjestan.

To je cijela pogodba. Baseline ti ne kaže šta smiješ da koristiš. Kaže ti šta se spremaš da platiš, na vrijeme da odlučiš.

Šta ovo ne pokriva

Oba pomenuta lintera čitaju CSS. Sam Baseline pokriva mnogo više: web-features, verzija 3.35.1, je priređen skup podataka iza svega toga i sadrži i JavaScript API-je i HTML. Ako hoćeš istu provjeru nad upotrebom API-ja, taj skup je mjesto od kojeg se gradi, a gotovog lintera za to u ovoj postavci nema.

Postoji i baseline-browser-mapping, verzija 2.11.17, koji povezuje verzije pregledača s najvećim skupom Baseline mogućnosti koji podržavaju. To je paket za obrnuto pitanje: ne šta smijemo da koristimo, nego šta nam Safari 17 zapravo daje.