Mitkä ovat CSS-toimittajan tai selaimen etuliitteet?

CSS-toimittajan etuliitteet, joita kutsutaan joskus myös nimellä CSS-selaintiedostoiksi, ovat selaimen tekijöille mahdollisuus lisätä tukea uusille CSS-ominaisuuksille ennen kuin kaikki ominaisuudet ovat täysin tuettuja kaikissa selaimissa. Tämä voidaan tehdä jonkinlaisen testaus- ja kokeilujakson aikana, jolloin selaimen valmistaja määrittelee tarkasti, miten nämä uudet CSS-ominaisuudet otetaan käyttöön. Nämä etuliitteet ovat erittäin suosittuja CSS3: n nousun kanssa muutama vuosi sitten.

Kun CCS3 otettiin ensimmäisen kerran käyttöön, joukko innokkaita ominaisuuksia alkoi osua eri selaimiin eri aikoina. Esimerkiksi Webkit-powered selaimet (Safari ja Chrome) olivat ensimmäisiä, jotka esittelivät joitain animaatiotyyppisiä ominaisuuksia, kuten muunnosta ja siirtymistä. Käyttämällä myyjän etusijaisia ominaisuuksia web-suunnittelijat pystyivät käyttämään näitä uusia ominaisuuksia työstään ja näkemään ne selaimissa, jotka tuottivat heitä heti, eikä joutuisi odottamaan, että jokainen muu selaimen valmistaja kiinniisi!

Joten etupään web-kehittäjän näkökulmasta selaimen etuliitteitä käytetään uusien CSS-ominaisuuksien lisäämiseen sivustoon samalla, kun he tietävät, että selaimet tukevat näitä tyylejä. Tämä voi olla erityisen hyödyllinen, kun eri selaimen valmistajat toteuttavat ominaisuuksia hieman eri tavoin tai eri syntaksilla.

Käytettävät CSS-selaimesi etuliitteet (joista jokainen on eri selaimella) ovat:

Android:
-webkit-
Kromi:
-webkit-
Firefox:
-moz-
Internet Explorer:
-neiti-
iOS:
-webkit-
Ooppera:
-o-
Safari:
-webkit-

Useimmissa tapauksissa, jos haluat käyttää uutta CSS-tyyppistä ominaisuutta, otat tavallisen CSS-ominaisuuden ja lisää etuliitteen jokaiselle selaimelle. Esiasetetut versiot tulevat aina ensin (missä tahansa järjestyksessä), kun normaali CSS-ominaisuus tulee viimeiseksi. Jos haluat esimerkiksi lisätä CSS3-siirtymän dokumenttiin, käytä

siirtyminen

omaisuus alla esitetyllä tavalla:

-webkit- siirtyminen: kaikki 4: t helpottavat; -moz- siirtyminen: kaikki 4: t helpottavat; -neiti- siirtyminen: kaikki 4: t helpottavat; -o- siirtyminen: kaikki 4: t helpottavat;siirtyminen: kaikki 4: t helpottavat;

Huomautus: Muista, että tietyillä selaimilla on erilainen syntaksi tietyille ominaisuuksille kuin toiset, joten älä ota oletta, että ominaisuuden selain-esiasetettu versio on täsmälleen sama kuin tavallinen ominaisuus. Jos haluat esimerkiksi luoda CSS-gradientin, käytä

lineaarinen-gradientti
omaisuutta. Chrome- ja Safari-sovelluksen Firefox-, Opera- ja nykyaikaiset versiot käyttävät kyseistä ominaisuutta asianmukaisella etuliitteellä, kun taas Chrome- ja Safari-versiot käyttävät prefikssiä

-webkit-gradientti
. Lisäksi Firefox käyttää eri arvoja kuin tavalliset.

Syy, että lopetat aina ilmoituksesi CSS-ominaisuuden tavanomaisella, ei-esiasetuksella, on se, että selaimesi tukee sääntöä. Muista, miten CSS luetaan. Myöhemmät säännöt ovat etusijalla aiempiin, jos spesifisyys on sama, joten selain lukee säännön myyjäversion ja käyttää sitä, jos se ei tue normaalia, mutta kun se ei, se ohittaa toimittajan version todellinen CSS-sääntö.

Toimittajan etuliitteet eivät ole hakata

Kun myyjän etuliitteet otettiin käyttöön ensimmäisen kerran, monet web-ammattilaiset ihmettelivät, olivatko he hakkerointi vai siirtymässä takaisin pimeille päiville, jotka haittaavat verkkosivuston koodin tukemaan eri selaimia (muista " Tätä sivustoa tarkastellaan parhaiten IE: ssä "viestit). CSS-toimittajien etuliitteet eivät kuitenkaan ole hakkoja, eikä sinun pitäisi olla varaa käyttää niitä työhösi.

CSS-hakkeri käyttää virheitä toisen elementin tai omaisuuden toteutuksessa, jotta toinen omaisuus toimisi oikein. Esimerkiksi laatumallin hack käytti virheitä jäsentelyssä

ääni-perhe
tai miten selaimet analysoivat paluupaloja (

). Mutta nämä hakkerit käytettiin ratkaisemaan ongelman siitä, miten Internet Explorer 5.5 käsitteli laatikkomallin ja kuinka Netscape tulkitsi sen, eikä sillä ollut mitään tekemistä äänen perheen tyylin kanssa. Onneksi nämä kaksi vanhentunutta selainta ovat ne, joita emme ole tällä hetkellä huolissaan.

Toimittajan etuliite ei ole hakku, koska se sallii määritelmän määrittää sääntöjä siitä, miten omaisuus voidaan toteuttaa, samalla kun selaimen päättäjät voivat toteuttaa omaisuuden eri tavalla rikkomatta kaikkea muuta. Lisäksi nämä etuliitteet toimivat CSS-ominaisuuksien kanssa lopulta osa erittelyä . Lisäsimme vain jonkin koodin saadaksemme pääsyn kiinteistöön aikaisin. Tämä on toinen syy, jonka vuoksi lopetat CSS-säännön tavallisella, ei-ennalta määritellyllä ominaisuudella. Näin voit pudottaa prefixed-versiot, kun täysi selaintuki saavutetaan.

Haluatko tietää, mitä selain tukee tietyn ominaisuuden? Verkkosivusto CanIUse.com on loistava resurssi näiden tietojen keräämiseen ja kerrotaan, millä selaimilla ja millä selainten versiot tukevat tällä hetkellä ominaisuutta.

Toimittajan etuliitteet ovat ärsyttäviä mutta väliaikaisia

Kyllä, se saattaa tuntua ärsyttävältä ja toistuvilta, että sinun on kirjoitettava ominaisuudet 2-5 kertaa, jotta se toimisi kaikissa selaimissa, mutta se on tilapäinen tilanne. Esimerkiksi muutama vuosi sitten, jos haluat asettaa pyöristetyn kulman ruutuun, sinun piti kirjoittaa:

-moz-raja-säde: 10px 5px;-webkit-border-top-left-säde: 10px;-webkit-border-top-right-säde: 5px;-webkit-border-bottom-right-säde: 10px;-webkit-raja-ala-vasen-säde: 5px;raja-säde: 10px 5px;
Mutta nyt, kun selaimet ovat tulleet täysin tukemaan tätä ominaisuutta, tarvitset vain standardoitua versiota:

raja-säde: 10px 5px;
Chrome on tukenut CSS3-ominaisuutta version 5.0 jälkeen, Firefox lisäsi sen version 4.0, Safari lisäsi sen 5.0, Opera 10.5, iOS 4.0 ja Android 2.1. Jopa Internet Explorer 9 tukee sitä ilman etuliitettä (ja IE 8 ja uudemmat eivät tukeneet sitä etuliitteillä tai ilman niitä).

Muista, että selaimet ovat aina muuttumassa ja luovia lähestymistapoja vanhempien selainten tukemiseen tarvitaan, ellet suunnittele sellaisten verkkosivujen rakentamista, jotka ovat vuosien mittaan vanhimmista menetelmistä. Selainten etuliitteiden kirjoittaminen lopulta on paljon helpompaa kuin sellaisten virheiden löytäminen ja hyödyntäminen, jotka todennäköisimmin vahvistetaan tulevassa versiossa, edellyttäen, että löydät toisen erehdyksen hyödyntämiseen ja niin edelleen.