Mitä he ovat ja miksi heidän pitäisi käyttää niitä
CSS-toimittajan etuliitteet, jotka tunnetaan myös nimellä CSS- selainesimerkkejä, 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-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Useimmissa tapauksissa, jos haluat käyttää uutta CSS-tyyppistä ominaisuutta, otat tavallisen CSS-ominaisuuden ja lisää etuliitteen jokaiselle selaimelle. Etuliitteiset versiot tulevat aina ensin (missä tahansa järjestyksessä haluat), kun normaali CSS-ominaisuus tulee viimeiseksi. Jos haluat esimerkiksi lisätä CSS3-siirtymän dokumenttiin, käytä siirtymäominaisuutta alla olevan kuvan mukaisesti:
-webkit- transition: kaikki 4s helpottavat;
-moz- siirtyminen: kaikki 4s helpottavat;
-ms- siirtyminen: kaikki 4s helpottavat;
-o- siirtyminen: kaikki 4s helpottavat;
siirtyminen: kaikki 4: t helpottavat;
Huomaa: Muista, että tietyillä selaimilla on erilainen ominaisuus kuin toisilla, joten älä ota oletta, että ominaisuuden selain-esivaiheinen versio on täsmälleen sama kuin tavallinen ominaisuus. Esimerkiksi CSS-gradientin luomiseen käytetään lineaarisen gradientin ominaisuutta. Chrome, Safari ja Opera sekä nykyaikaiset versiot Chrome ja Safari käyttävät kyseistä ominaisuutta asianmukaisella etuliitteellä, kun taas Chrome- ja Safari-versiot käyttävät prefixed -webkit-gradienttia. 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ävaiheessa takaisin pimeisiin päiviin, kun haettiin verkkosivuston koodia tukemaan eri selaimia (muista, että tämä sivusto on parhaiten katseltu IE: n viesteissä). CSS-toimittajien etuliitteet eivät kuitenkaan ole hakkuita, 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 laatimallin hakkerointi heikensi puhuvan perheominaisuuden jäsentämiseen liittyviä puutteita tai miten selaimet parsivat taaksepäin (\). 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-ominaisuuksilla, jotka lopulta ovat osa määrittelyä . 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.