CSS-toimittajan etuliitteet, joita joskus kutsutaan myös nimellä CSS selaimen etuliitteet ovat tapa selaimen valmistajille lisätä tukea uudet CSS-ominaisuudet ennen kuin nämä ominaisuudet ovat täysin tuettuja kaikissa selaimissa. Tämä voidaan tehdä eräänlaisen testaus- ja kokeilujakson aikana, jolloin selaimen valmistaja määrittää tarkalleen, miten nämä uudet CSS-ominaisuudet otetaan käyttöön. Näistä etuliitteistä tuli erittäin suosittuja CSS3 muutama vuosi sitten.
Toimittajan etuliitteiden alkuperä
Kun CCS3 otettiin ensimmäisen kerran käyttöön, joukko innostuneita ominaisuuksia alkoi osua eri selaimiin eri aikoina. Esimerkiksi Webkit-pohjaiset selaimet (Safari ja Chrome) esittivät ensimmäisinä joitain animaatiotyylisiä ominaisuuksia, kuten muunnos ja siirtyminen. Käyttämällä toimittajan etuliitettä ominaisuudet, verkkosuunnittelijat pystyivät käyttämään näitä uusia ominaisuuksia työssään ja saamaan ne näkymään selaimissa joka tuki heitä heti sen sijaan, että tarvitsisi odottaa kaikkien muiden selaimen valmistajien saavan kiinni ylös!
Yleiset etuliitteet
Joten käyttöliittymän web-kehittäjän näkökulmasta selaimen etuliitteitä käytetään lisäämään uusia CSS-ominaisuuksia sivustolle samalla kun ne tietävät, että selaimet tukevat näitä tyylejä. Tämä voi olla erityisen hyödyllistä, kun eri selaimen valmistajat toteuttavat ominaisuuksia hieman eri tavoin tai eri syntaksilla.
CSS-selaimen etuliitteet, joita voit käyttää (joista kukin on ominainen eri selaimelle), ovat:
- Android:
-verkkosarja
- Kromi:
-verkkosarja
- Firefox:
-moz-
- Internet Explorer:
-neiti-
- iOS:
-verkkosarja
- Ooppera:
-o-
- Safari:
-verkkosarja
Etuliitteen lisääminen
Useimmissa tapauksissa, kun haluat käyttää upouutta CSS-tyylistä ominaisuutta, sinun on käytettävä tavallista CSS-ominaisuutta ja lisättävä etuliite jokaiselle selaimelle. Etuliiteversiot tulevat aina ensin (missä tahansa järjestyksessä), kun taas normaali CSS-ominaisuus tulee viimeiseksi. Esimerkiksi, jos haluat lisätä CSS3-siirtymän asiakirjaan, käytä siirtymisominaisuutta alla olevan kuvan mukaisesti:
-webkit-siirtyminen: kaikki 4: t helposti;
-moz-siirtyminen: kaikki 4: t helposti;
-ms-siirtymä: kaikki 4: t helposti;
-o-siirtymä: kaikki 4: t helposti;
siirtyminen: kaikki 4s helpottavat;
Muista, että joillakin selaimilla on erilainen syntaksi tietyille ominaisuuksille kuin muille, joten älä oleta, että selaimen etuliitteinen ominaisuusversio on täsmälleen sama kuin tavallinen ominaisuus. Esimerkiksi CSS-gradientin luomiseen käytetään lineaarisen gradientin ominaisuutta. Firefox, Opera sekä Chromen ja Safarin uudet versiot käyttävät tätä ominaisuutta sopivalla etuliitteellä, kun taas Chrome- ja Safari-ohjelmien varhaisemmat versiot käyttävät etuliitettä ominaisuus -webkit-gradient.
Lisäksi Firefox käyttää erilaisia arvoja kuin tavalliset.
Syy siihen, että lopetat ilmoituksen aina CSS-ominaisuuden normaalilla, etuliittämättömällä versiolla, on niin, että kun selain tukee sääntöä, se käyttää sitä. Muista, kuinka CSS luetaan. Myöhemmät säännöt ovat etusijalla aikaisempiin nähden, jos spesifisyys on sama, joten selain lukisi sääntö ja käytä, että jos se ei tue normaalia, mutta kun se tukee, se ohittaa toimittajan version todellisella CSS: llä sääntö.
Toimittajan etuliitteet eivät ole hakkerointi
Kun toimittajan etuliitteet otettiin ensimmäisen kerran käyttöön, monet verkkoammattilaiset ihmettelivät, olivatko ne hakkereita vai a palaa takaisin pimeisiin päiviin, jolloin verkkosivuston koodi haarautuu tukemaan eri selaimia (muista "Tätä sivustoa katsellaan parhaiten IE: ssä"viesti". CSS-toimittajien etuliitteet eivät kuitenkaan ole hakkerointeja, eikä sinun tarvitse varata niiden käyttöä työssäsi.
CSS-hakkerointi käyttää toisen elementin tai ominaisuuden käyttöönoton virheitä saadakseen toisen omaisuuden toimimaan oikein. Esimerkiksi ruutimallihakkeroinnissa hyödynnettiin virheitä ääniperheen jäsentämisessä tai siinä, miten selaimet jäsentävät taaksepäinviivoja \. Mutta näitä hakkerointeja käytettiin korjaamaan ongelma, joka johtui siitä, kuinka Internet Explorer 5.5 käsitteli laatikkomallia ja miten Netscape tulkinnut sitä, eikä niillä ole mitään tekemistä ääniperhetyylin kanssa. Onneksi nämä kaksi vanhentunutta selainta ovat niitä, joita meidän ei tarvitse huolehtia itsestämme näinä päivinä.
Toimittajan etuliite ei ole hakkerointi, koska se sallii määrittelyn määrittää säännöt siitä, miten omaisuus voidaan toteuttaa, sallien samalla selaimen valmistajien toteuttaa omaisuuden eri tavalla rikkomatta kaikkea muu. Lisäksi nämä etuliitteet toimivat CSS-ominaisuuksien kanssa tulee lopulta osa eritelmää. Lisäämme vain jonkin verran koodia saadaksesi pääsyn omaisuuteen aikaisin. Tämä on toinen syy, miksi lopetat CSS-säännön normaalilla, etuliitetyllä ominaisuudella. Näin voit pudottaa etuliiteversiot, kun selaimen täysi tuki on saavutettu.
Haluatko tietää, mitä selaimen tuki tukee tiettyä ominaisuutta? Nettisivu CanIUse.com on hieno resurssi näiden tietojen keräämiseen ja ilmoittamiseen, mitkä selaimet ja mitkä näiden selainten versiot tällä hetkellä tukevat ominaisuutta.
Toimittajan etuliitteet ovat ärsyttäviä, mutta väliaikaisia
Kyllä, saattaa tuntua ärsyttävältä ja toistuvalta, kun joudumme kirjoittamaan ominaisuudet 2–5 kertaa saadaksesi sen toimimaan kaikissa selaimissa, mutta se on tilapäinen tilanne. Esimerkiksi vain muutama vuosi sitten, jotta voit asettaa pyöristetyn kulman laatikkoon, sinun oli kirjoitettava:
-moz-raja-säde: 10px 5px;
-webkit-reunus-vasen ylä-säde: 10 kuvapistettä;
-webkit-reunus-oikea-yläsäde: 5 kuvapistettä;
-webkit-reunus-oikea-ala-säde: 10 kuvapistettä;
-webkit-border-bottom-left-säde: 5px;
reunan säde: 10 kuvapistettä 5 kuvapistettä;
Mutta nyt, kun selaimet ovat tukeneet tätä ominaisuutta täysin, tarvitset oikeastaan vain standardoidun version:
reunan säde: 10 kuvapistettä 5 kuvapistettä;
Chrome on tukenut CSS3-ominaisuutta versiosta 5.0 lähtien, Firefox lisäsi sen versioon 4.0, Safari lisäsi versioon 5.0, Opera 10.5: ään, iOS sisään. 4.0 ja Android 2.1: ssä. Jopa Internet Explorer 9 tukee sitä ilman etuliitettä (ja IE 8 tai vanhempi ei tue sitä ilman tai ilman etuliitteet).
Muista, että selaimet muuttuvat aina ja vanhempien selainten tukeminen edellyttää luovaa lähestymistapaa, ellet suunnittele sitä verkkosivujen rakentaminen jotka ovat vuosia jäljessä nykyaikaisimmista menetelmistä. Loppujen lopuksi selaimen etuliitteiden kirjoittaminen on paljon helpompaa kuin sellaisten virheiden löytäminen ja hyödyntäminen, jotka todennäköisesti korjataan tulevassa versiossa.