Wat sinn si a firwat Dir se agesat
CSS Vendor Präfixe, och fréier bekannt als CSS Browser-Präfixe, sinn e Wee fir Browser-Produkter fir nei CSS-Fonktiounen ze addéieren, ier dës Features komplett an allen Browser ënnerstëtzt ginn. Dëst kann an engem Typ vun Tester an Experimentéierungsperiod gebraucht ginn, wou de Browser-Hersteller genau bestëmmt, wéi dës nei CSS-Funktiounen ëmgesat ginn. Dës Präfixe waren ganz populär mat dem Opstig vu CSS3 e puer Joer.
Wéi CCS3 fir d'éischt virgestallt ginn ass, hunn eng Rei vun opgereegt Eegeschaften ugefaang fir verschidde Browsers ze ënnerscheeden. Zum Beispill, de Webkit-Navigateuren (Safari a Chrome) waren déi éischt déi puer vun den Animatiounstil Objete wéi Transformation a Iwwergang bäi. Duerch de Verkaf vum préféréierten Eegeschafte konnten d'Webdesigner dës nei Fonctiounen an hirer Aarbecht benotzen an se op d'Browser gesinn hunn, déi se direkt erhoffe gelooss hunn, anstatt fir all aner Browserhersteller ze widderstoen!
Also aus der Perspektiv vun engem Front-End-Web-Entwéckler, ginn d'Browser-Präfixe benotzt fir nei CSS-Features op enger Site ze addelen, während et Komfort huet datt een d'Browsers dës Stile ënnerstëtzen. Dëst kann speziell Hëllef sinn, wann verschidde Browser-Provider Eegeschaften op verschidden Aart a Weis oder mat enger anerer Syntax realiséieren.
D'CSS-Browser-Präfixe kënnt Dir benotzen (all eenzel ass spezifesch fir e verschiddene Browser) sinn:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -Moos-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
In dene meisten Fällen, fir e brandneue CSS-Stil eegent ze benotzen, fille Dir d'Standard CSS-Propietéit an de Préfixe fir all Browser. Déi virgeschriwwe Versioun gët ëmmer an éischter (an all Optioun, déi Dir léiwer), während d'normale CSS Proportioun virkomm ass. Zum Beispill, wann Dir en CSS3-Iwwergank op Äre Dokument wëllt addieren, benotzt Dir d'Iwwergangsimmkeet, wéi et hei ënnendrënner gëtt:
-webkit- Übergang: all 4s liicht;
-moz- transitioun: all 4s liicht;
-ms- Iwwergank: all 4s liicht;
-o- Iwwergank: all 4s liicht;
Iwwergang: all 4s liicht;
Remark: Erënnere mir e puer Browser eng aner Syntax fir gewëssen Eegeschaften wéi anerer maachen, dofir ass net ugeholl datt d'Browser-préfixed Versioun vun enger Eigenschaft genau d'selwecht ass wéi déi standard Eigenschaft. Zum Beispill, fir e CSS Gradient ze erstellen, benotzt Dir d'Linear-Gradientenimm. Firefox, Opera a moderne Versiounen vu Chrome an Safari benotzen déi Eegeschafte mat dem adequat Präfix an déi fréi Versioune vu Chrome an Safari benotzen d'präfféiert Eegabe -webkit-Gradient. Och Firefox benotzt verschidden Wäerter wéi déi Standard.
De Grond datt Dir ëmmer Är Deklaratioun mat der normaler, net-virgeschriwwe Versioun vun der CSS-Eigenschaft beäntweren ass esou datt wann e Browser d'Regel benotzt gëtt, dann benotzt se eent. Erënnere wéi de CSS liesen. Déi spéider Regelen viraus fréiere virdrun, wann d'Spezifitéit déiselwecht ass, sou datt en Browser d'Vendor-Versioun vun enger Regel liest a benotzt datt wann et net normal ass, awer wann et da geet, wäert d'Vendor Versioun mat déi aktuell CSS Regel.
Vendor Präfixe sinn net e Hack
Wéi Viraarbechter Präfixe goufen éischt virgestallt, hunn vill Websäiten opgewuewt wann se en Hack hunn oder eng Ännerung zréck an d'donkel Deeg vu Viraussetzung de Code vun engem Site fir verschidde Browser ze ënnerstëtzen (Erënnerung datt " This site is best viewed in IE " Messagen). CSS Vendors Präfixe sinn net hacks awer Dir musst keng Reservatioun iwwer d'Benotze vu Leit an Ärer Aarbecht hunn.
E CSS-Hack exploit Fehler an der Ëmsetzung vun engem anere Element oder Eegeschafte fir aner Proportiounen ze maachen fir richteg ze schaffen. Zum Beispill, den Boxmodell Hack exploitéiert Feeler bei der Analyse vun der Stammfamilliewen oder wéi Browsers parse Backslashes (\). Awer dës Hacks ware gebraucht fir de Problem vum Ënnerscheed ze maachen wéi Internet Explorer 5.5 d'Këschtmodell behandelt huet a wéi d'Netscape et interpretéiert huet, an näischt mat der Stëmm Famillentest ze maachen. Glécklech sinn dës zwee verëffentlecht Browsere sinn déi mir eis net mat deenen Deeg concernéieren.
Een Vendorpréfixe ass net e Hack, well et de Spekulatioun erlaabt Regele fir eng Proportioun ze realiséieren, a gläichzäiteg de Browser-Makler erlaabt eng Immobilie op aner Weeër ze realiséieren ouni alles anescht ze briechen. Ausserdeem sinn dës Präfixe mat CSS-Propositiounen déi schliisslech Deel vun der Spezifikatioun sinn . Mir fanne just e Code fir een Zougang zu der Immobilie fréi ze kréien. Dëst ass en anere Grond, firwat Dir d'CSS Regel mat der normaler, net-prefixeder Eegabe beendet. Dofir kënnt Dir d'Präfixe Versionen erofofbréngen wann e ganze Browser-Support erreecht gëtt.
Wëllt Dir wësse wat d'Browser ënnerstëtzen fir eng gewëssen Eegeschafte? D'Websäit CanIUse.com ass eng wonnerbar Ressource fir dës Informatioun ze sammelen an datt Dir wësst, wéi Browsere sinn, a wéi eng Versioune vun dëse Browseren, déi momentan e Feature ënnerstëtzen.
Vendor Präfixe sinn annonéieren awer temporär
Jo, et kann fillen an repetitive futti ze hunn, d'Ziler 2-5 mol ze schreiwen fir et an allen Browseren ze schaffen, awer et ass eng temporär Situatioun. Zum Beispill, just e puer Joer, fir e gerundéierte Corner op enger Box ze setzen, musst Dir schreiben:
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
Grenzradius: 10px 5px;
Awer elo, datt Browsers déi vollstänneg Fonktioun ënnerstëtzen, brauch Dir just d'standardiséierter Versioun:
Grenzradius: 10px 5px;
Chrome huet d'CSS3-Eigenschaft ënnerstëtzt wéi d'Versioun 5.0, Firefox huet et an der Versioun 4.0 hinzugefügt. D'Safari huet et an 5.0, Opera an 10.5, iOS an 4.0, an Android an 2.1 benotzt. Och Internet Explorer 9 ënnerstëtzt et ouni Präfix (an IE 8 an ass net mat oder ouni Präfixen).
Vergiesst datt Browser Browser sinn ëmmer geännert ginn a kreativ Approche fir méi al Browser ze benotzen, wann Dir geplangt sidd fir Websäiten z'ënnerstëtzen , déi Joren hannert déi modernst Methoden sinn. Am Endeffekt schreift d'Browser-Präfixe méi einfach wéi d'Erklärung an d'Ausnotze vu Fehler, déi am wahrscheinlech an enger zukünfteger Versioun fixéiert ginn, fir datt Dir en anere Fehler ze exploitéiere brauch.