Wat is hulle en hoekom moet jy dit gebruik
CSS-verkopersvoorvoegsels, ook soms bekend as CSS- blaaiervoorvoegsels, is 'n manier vir blaaiermakers om ondersteuning vir nuwe CSS-funksies te voeg voordat hierdie funksies ten volle ondersteun word in alle blaaiers. Dit kan gedoen word tydens 'n soort toets- en eksperimenteringsperiode waar die blaaier vervaardiger presies bepaal hoe hierdie nuwe CSS-funksies geïmplementeer sal word. Hierdie voorvoegsels het 'n paar jaar gelede baie gewild geraak met die opkoms van CSS3 .
Toe CCS3 vir die eerste keer bekendgestel is, het 'n aantal opgewonde eiendomme op verskillende tye verskillende blaaiers getref. Byvoorbeeld, die webkit-aangedrewe blaaiers (Safari en Chrome) was die eerste wat sommige van die animasie-styl eienskappe soos transformasie en oorgang bekend gestel het. Deur gebruik te maak van voorverkoopte eiendomme, kon webontwerpers daardie nuwe funksies in hul werk gebruik en hulle sien op die blaaiers wat hulle dadelik ondersteun het, in plaas daarvan om te wag vir elke ander blaaiervervaardiger om in te haal!
Vanuit die perspektief van 'n front-end webontwikkelaar word blaaiervoorvoegsels gebruik om nuwe CSS-funksies op 'n webwerf by te voeg, terwyl dit gerus is dat die blaaiers die style sal ondersteun. Dit kan veral behulpsaam wees wanneer verskillende blaaiervervaardigers eienskappe op effens verskillende maniere of met 'n ander sintaksis implementeer.
Die CSS-blaaier-voorvoegsels wat u kan gebruik (elkeen is spesifiek vir 'n ander blaaier) is:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
In die meeste gevalle, om 'n splinternuwe CSS-styl eiendom te gebruik, neem jy die standaard CSS-eiendom en voeg die voorvoegsel vir elke blaaier by. Die voorgeprogrammeerde weergawes sal altyd eerste wees (in enige volgorde wat u verkies) terwyl die normale CSS-eiendom laas sal kom. As u byvoorbeeld 'n CSS3-oorgang na u dokument wil byvoeg, gebruik u die oorgangsgoed soos hieronder aangedui:
-webkit- oorgang: al 4s gemak;
-moz- oorgang: al 4s gemak;
-ms- oorgang: al 4s gemak;
-o- oorgang: al 4s gemak;
oorgang: al 4s gemak;
Nota: Onthou, sommige blaaiers het 'n ander sintaksis vir sekere eienskappe as ander doen. Moenie dus aanvaar dat die leser se voorvertoning van 'n eiendom presies dieselfde is as die standaard eiendom nie. Byvoorbeeld, om 'n CSS-gradiënt te skep, gebruik jy die lineêre gradiënt-eienskap. Firefox, Opera en moderne weergawes van Chrome en Safari gebruik daardie eiendom met die toepaslike voorvoegsel, terwyl vroeë weergawes van Chrome en Safari die voorvoegsel-eienskap -webkit-gradiënt gebruik. Ook gebruik Firefox verskillende waardes as die standaard een.
Die rede waarom jy altyd jou verklaring met die normale, nie-voorgeprogrammeerde weergawe van die CSS-eiendom beëindig, is dus dat wanneer 'n blaaier die reël ondersteun, dit die een sal gebruik. Onthou hoe CSS gelees word. Die latere reëls het voorrang bo vroeëre as die spesifisiteit dieselfde is, so 'n leser sal die verskaffer weergawe van 'n reël lees en dit gebruik as dit nie die normale een ondersteun nie, maar sodra dit dit doen, sal dit die verskaffer weergawe met die werklike CSS reël.
Verkopersvoorvoegsels is nie 'n Hack nie
Wanneer verkopersvoorvoegsels die eerste keer bekendgestel is, het baie webprofessors gewonder of hulle 'n hack of 'n verskuiwing was na die donker dae om 'n webwerf se kode te verhoed om verskillende blaaiers te ondersteun (onthou dat hierdie webwerf die beste in IE- boodskappe is). Voorvoegsels van CSS-verkopers is egter nie 'n hack nie, en jy moet geen besprekings hê oor hoe om dit in jou werk te gebruik nie.
'N CSS-hack gebruik foute in die implementering van 'n ander element of eiendom om 'n ander eiendom te kry om korrek te werk. Byvoorbeeld, die boksmodel-hack het foute gebruik in die ontleding van die stemfamilie-eiendom of in hoe blaaiers die terugslag (\) ontleed. Maar hierdie hacks is gebruik om die probleem van die verskil tussen die manier waarop Internet Explorer 5.5 die kassamodel hanteer en hoe Netscape dit geïnterpreteer het, reg te stel en het niks te doen met die stemfamiliestyl nie. Gelukkig is hierdie twee verouderde blaaiers die een wat ons vandag nog nie bekommerd maak nie.
'N Verkopersvoorvoegsel is nie 'n hack nie omdat dit die spesifikasie toelaat om reëls op te stel vir hoe 'n eiendom geïmplementeer kan word, terwyl terselfdertyd blaaiermakers 'n eiendom op 'n ander manier kan implementeer sonder om alles anders te breek. Verder werk hierdie voorvoegsels met CSS-eienskappe wat uiteindelik deel van die spesifikasie sal wees . Ons voeg net 'n paar kode by om vroegtydig toegang tot die eiendom te kry. Dit is ook 'n rede waarom jy die CSS-reël beëindig met die normale, nie-voorgeprogrammeerde eiendom. Op hierdie manier kan jy die voorgeprogrammeerde weergawes laat val sodra volle blaaierondersteuning bereik is.
Wil jy weet wat die leser vir 'n sekere kenmerk ondersteun? Die webwerf CanIUse.com is 'n wonderlike bron om hierdie inligting te versamel en te laat weet watter blaaiers, en watter weergawes van die blaaiers, wat tans 'n kenmerk ondersteun.
Verkopersvoorvoegsels is irriterend maar tydelik
Ja, dit mag dalk irriterend en herhalend wees om die eiendomme 2-5 keer te skryf om dit in alle blaaiers te laat werk, maar dit is 'n tydelike situasie. Byvoorbeeld, net 'n paar jaar gelede, om 'n afgeronde hoek op 'n boks te stel, moes jy skryf:
-moz-grens-radius: 10px 5px;
-webkit-grens-bo-links-radius: 10px;
-webkit-grens-bo-regs-radius: 5px;
-webkit-grens-onder-regs-radius: 10px;
-webkit-grens-onder-links-radius: 5px;
grens radius: 10px 5px;
Maar nou dat blaaiers gekom het om hierdie kenmerk ten volle te ondersteun, het jy eintlik net die gestandaardiseerde weergawe nodig:
grens radius: 10px 5px;
Chrome het die CSS3-eiendom ondersteun sedert weergawe 5.0, Firefox het dit bygevoeg in weergawe 4.0, Safari het dit in 5.0, Opera in 10.5, iOS in 4.0 en Android in 2.1 bygevoeg. Selfs Internet Explorer 9 ondersteun dit sonder 'n voorvoegsel (en IE 8 en laer ondersteun dit nie met of sonder voorvoegsels nie).
Onthou dat blaaiers altyd gaan verander en kreatiewe benaderings om ouer blaaiers te ondersteun sal benodig word tensy jy beplan om webbladsye te bou wat jare agter die modernste metodes is. Uiteindelik is die lees van die leser voorvoegsels baie makliker as om foute te vind en te gebruik wat waarskynlik in 'n toekomstige weergawe vasgestel sal word. Dit vereis dat u nog 'n fout moet ontgin en so aan.