Vendor-etuliitteet CSS:ssä

Mennessä selaimille oli kehittynyt seuraava tilanne: ennen kuin CSS-ominaisuus ilmestyy spesifikaatioon, selaimet toteuttivat kokeellisen version tästä ominaisuudesta erityisellä etuliitteellä, jota kutsutaan vendor-etuliitteeksi.

Katsotaanpa esimerkin avulla ominaisuudesta box-sizing miltä se näyttää:

p {
	box-sizing: border-box;
}

Tämä ominaisuus alkoi saada tukea vasta Firefox29:stä alkaen, mutta se oli saatavilla jo Firefox2-versiosta lähtien -moz-etuliitteellä:

p {
	-moz-box-sizing: border-box;
}

Muilla selaimilla oli vastaavia etuliitteitä: -moz - Mozilla Firefox, -webkit - Webkit- ja Blink-moottoreilla toimivat selaimet, -o - Presto-moottorilla toimiva Opera, -ms - IE.

Siten kaikista laajimmin selainyhteensopiva versio ominaisuudesta box-sizing, vendor-etuliitteitä käyttäen, näytti suunnilleen tältä:

p {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

Nykyään selaimet ovat päättäneet luopua etuliitteistä niiden hankaluuden vuoksi. Ja nyt niiden sijasta käytetään niin kutsuttuja lippuja. Ominaisuudet otetaan nyt käyttöön selaimeen, mutta ne ovat oletusarvoisesti pois päältä, mutta ne voidaan kytkeä päälle selaimen asetuksista laittamalla vastaava valintaruutu asetuksiin. Tämä on tehty siksi, että kehittäjät voisivat kokeilla uutta ominaisuutta ennen sen virallista ilmestymistä.