Ilmainen CSS-etuliite Verkossa

Lisää vendor-etuliitteet CSS:ään automaattisesti selaimessasi.

CSS-syöte

Etuliitteellinen CSS

Esimerkkejä CSS-etuliitteistä

Vendor-etuliitteet varmistavat tuen useissa selaimissa. Esimerkki:

Flexbox ja muunnokset

Syöte (ei etuliitteitä):

Syöte

Tulos etuliitteillä:

Tulos

Käytä yllä olevaa Esimerkki-painiketta ladataksesi lisää dataa.

Mikä on CSS-etuliite?

Selaimet toteuttavat joskus CSS-ominaisuuksia vendor-etuliitteillä ennen standardointia: -webkit- (Chrome, Safari), -moz- (Firefox), -ms- (vanha IE/Edge). CSS-etuliite lisää nämä automaattisesti, jotta tyylit toimivat eri selaimissa. W3C:n CSS-määrittelyt määrittelevät kielen; Can I Use seuraa selaintukea.

Työkalu jäsentää CSS:si ja lisää vendor-etuliitteitä tarvittaessa. Se toimii kokonaan selaimessasi. Mitään ei lähetetä palvelimelle. Modernit selaimet tarvitsevat vähemmän etuliitteitä kuin ennen, mutta jotkin ominaisuudet (esim. user-select, display: flex vanhemmassa Safarissa) hyötyvät yhä. Muotoiluun CSS-muotoilija. Tiivistämiseen CSS-tiivistin.

Miten työkalua käytetään

1

Liitä tai lataa CSS

Kopioi CSS ja liitä se vasempaan editoriin. Voit myös napsauttaa Lataa ja avata .css-tiedoston. Esimerkki lataa esimerkkidataa. Virheellinen CSS näyttää virheen.

2

Tarkista tulos etuliitteillä

Oikea paneeli näyttää CSS:n vendor-etuliitteillä. Ominaisuudet kuten display: flex, user-select ja transform saavat sopivat etuliitteet vanhemmille selaimille.

3

Kopioi tai lataa

Käytä Kopioi tai Lataa tiedostona. SCSS tai Less: käänä ensin SCSS CSS:ksi tai Less CSS:ksi, sitten lisää etuliitteet. Validointiin CSS-tarkistin.

Milloin CSS-etuliitteet auttavat

Vanhempia selaimia (Safari, vanhempi Chrome, legacy IE) tuettaessa tai uudempia CSS-ominaisuuksia käytettäessä etuliitteet varmistavat yhteensopivuuden. Build-työkalut kuten Autoprefixer tai PostCSS hoitavat tämän usein tuotannossa, mutta tämä työkalu sopii kertaluonteisiin tiedostoihin, nopeisiin tarkistuksiin tai kun build-vaihetta ei ole.

Sähköpostin CSS, upotetut tyylit tai CDN:llä hostattu CSS saattavat vaatia käsityönä etuliitteitä. Tyylitiedoston ajaminen täällä antaa selaimille valmiin tuloksen. Inline-tyyleihin (esim. sähköposti) CSS inliniksi etuliitteiden jälkeen.

Usein kysyttyä

Tarvitsenko etuliitteitä vielä vuonna 2024?

Monilla ominaisuuksilla on nyt tuki ilman etuliitettä. Vanhemmalle Safarille, iOS:lle tai legacy-selaimille jotkin ominaisuudet (esim. -webkit-backdrop-filter) tarvitsevat yhä etuliitteitä. Tarkista Can I Use kohdeselaimillesi.

Onko datani yksityinen?

Kyllä. Etuliitteiden lisäys tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle.

Miksi tätä Autoprefixerin sijaan?

Autoprefixer toimii build-putkessa. Tämä työkalu toimii selaimessa — ei Node.js:ää tai build-vaihetta. Käytä nopeisiin tarkistuksiin, kertaluonteisiin tiedostoihin tai kun buildia ei voi ajaa.

Tukeeko se kaikkia ominaisuuksia?

Työkalu lisää etuliitteitä yleisiin ominaisuuksiin. Kattavaan kattavuuteen käytä Autoprefixeriä buildisi kanssa. Useimmissa tapauksissa tämä työkalu kattaa olennaisen.

Entä @keyframes?

Keyframe-nimet saattavat tarvita etuliitteitä joissakin konteksteissa. Työkalu käsittelee yleiset tapaukset. Monimutkaisille animaatioille varmista kohdeselaimissa.

Liittyvät työkalut

CSS-muotoilutyokalu CSS-tiivistin CSS-tarkistin CSS inliniksi SCSS CSS:ksi Less CSS:ksi CSS SCSS:ksi CSS Lessiksi JSON-muotoilutyokalu

CSS-määrittely: W3C CSS. Viite: MDN CSS. Can I Use selaintuesta. Autoprefixer build-putkiin.