Шта су ЦСС добављачи или префикси прегледача?

click fraud protection

Префикси добављача ЦСС, такође познатији као или ЦСС префикси прегледача, начин су на који произвођачи прегледача могу да додају подршку нове ЦСС функције пре него што те функције буду у потпуности подржане у свим прегледачима. То се може урадити током својеврсног периода тестирања и експериментисања где произвођач прегледача тачно одређује како ће се применити ове нове ЦСС функције. Ови префикси су постали веома популарни са порастом ЦСС3 пре неколико година.

Фирефок веб прегледач
КТСДЕСИГН / Научна библиотека фотографија / Гетти Имагес

Порекло префикса добављача

Када је ЦЦС3 први пут представљен, бројна узбуђена својства почела су да погађају различите прегледаче у различито време. На пример, прегледачи са Вебкит-ом (Сафари и Цхроме) први су увели нека својства у стилу анимације попут трансформисања и преласка. Коришћењем префикса добављача својства, веб дизајнери су могли да користе те нове функције у свом раду и да их виде у прегледачима који су их одмах подржали, уместо да чекају да их ухвати сваки други произвођач прегледача горе!

instagram viewer

Уобичајени префикси

Дакле, из перспективе фронт-енд веб програмера, префикси прегледача се користе за додавање нових ЦСС функција на веб локацију, истовремено имајући удобност знајући да ће прегледачи подржати те стилове. Ово може бити посебно корисно када различити произвођачи прегледача имплементирају својства на мало другачије начине или са различитом синтаксом.

Префикси ЦСС прегледача које можете користити (од којих је сваки специфичан за други прегледач) су:

  • Андроид:
    -вебкит-
  • Хром:
    -вебкит-
  • Фирефок:
    -моз-
  • Интернет претраживач:
    -Госпођа-
  • иОС:
    -вебкит-
  • Опера:
    -о-
  • Сафари:
    -вебкит-

Додавање префикса

У већини случајева, да бисте користили потпуно ново својство ЦСС стила, узимате стандардно својство ЦСС и додајете префикс за сваки прегледач. Верзије са префиксом би увек биле на првом месту (у било којем редоследу који желите), док ће нормално својство ЦСС бити последње. На пример, ако желите да додате ЦСС3 прелаз у документ, користићете својство преласка као што је приказано доле:

-вебкит-транзиција: лакоћа свих 4-их;
-моз-транзиција: лакоћа свих 4;
-мс-транзиција: лакоћа свих 4;
-о-транзиција: лакоћа свих 4;
прелаз: све 4с лакоћа;

Имајте на уму да неки прегледачи имају другачију синтаксу за нека својства од других, па немојте претпостављати да је верзија својства са префиксом прегледача потпуно иста као и стандардно својство. На пример, да бисте креирали ЦСС градијент, користите својство линеарног градијента. Фирефок, Опера и модерне верзије Цхроме-а и Сафари-ја користе то својство са одговарајућим префиксом, док ране верзије Цхроме-а и Сафари-ја користе префиксирано својство -вебкит-градиент.

Такође, Фирефок користи вредности које се разликују од стандардних.

Разлог што декларацију увек завршавате нормалном верзијом својства ЦСС-а без префикса је тај што када прегледач подржава правило, он ће то и користити. Сетите се како се чита ЦСС. Каснија правила имају предност над ранијима ако је специфичност иста, па би прегледач читао верзију добављача правило и користите ако не подржава уобичајену верзију, али када то једном подеси, замениће верзију добављача стварним ЦСС-ом правило.

Префикси добављача нису хаковање

Када су префикси добављача први пут представљени, многи веб стручњаци питали су се да ли су хак или не вратите се у мрачне дане форсирања кода веб странице за подршку различитих прегледача (запамтите то "Ову страницу је најбоље прегледати у ИЕ„порука). Префикси добављача ЦСС-а нису хаковање, и не бисте требали имати резерве у вези са њиховом употребом у свом раду.

ЦСС хацк користи недостатке у имплементацији другог елемента или својства како би постигао да неко друго својство ради исправно. На пример, хацк бок модел искористио је недостатке у рашчлањивању породице гласова или у начину на који прегледачи рашчлањују косе црте \. Али ови хакови су коришћени за решавање проблема разлике између начина на који је Интернет Екплорер 5.5 поступао са моделом бок-а и како Нетсцапе протумачио и нема никакве везе са породичним стилом гласа. Срећом ова два застарела претраживача су она којима се данас не морамо бавити.

Префикс добављача није хаковање, јер омогућава спецификацији постављање правила о начину примене својства, док у исто време дозвољава произвођачима прегледача да својство имплементирају на другачији начин без да све разбијају иначе. Штавише, ови префикси раде са ЦСС својствима која на крају ће бити део спецификације. Једноставно додајемо неки код како бисмо раније добили приступ својству. Ово је још један разлог због којег ЦСС правило завршавате са нормалним својством без префикса. На тај начин можете одустати од префиксираних верзија када се постигне пуна подршка за прегледач.

Желите да знате која је подршка прегледача за одређену функцију? Вебсајт ЦанИУсе.цом је диван ресурс за прикупљање ових информација и обавештавање који прегледачи и које верзије тих прегледача тренутно подржавају функцију.

Префикси добављача су досадни, али привремени

Да, могло би се осећати досадно и понављати се ако морате да напишете својства 2-5 пута да би то функционисало у свим прегледачима, али то је привремена ситуација. На пример, пре само неколико година, да бисте поставили заобљени угао на кутији, морали сте да напишете:

-моз-радијус-границе: 10пк 5пк;
-вебкит-бордер-топ-лефт-радиус: 10пк;
-вебкит-бордер-топ-ригхт-радиус: 5пк;
-вебкит-бордер-боттом-ригхт-радиус: 10пк;
-вебкит-бордер-боттом-лефт-радиус: 5пк;
радијус границе: 10пк 5пк;

Али сада када су прегледачи у потпуности подржали ову функцију, заиста вам треба само стандардизована верзија:

радијус границе: 10пк 5пк; 

Цхроме подржава својство ЦСС3 од верзије 5.0, Фирефок га је додао у верзији 4.0, Сафари је додао у 5.0, Опера у 10.5, иОС у 4.0, а Андроид у 2.1. Чак га и Интернет Екплорер 9 подржава без префикса (а ИЕ 8 и старији га нису подржавали са или без њега префикси).

Имајте на уму да ће се прегледачи увек мењати и биће потребни креативни приступи подршци старијим прегледачима, осим ако то не планирате израда веб страница то су године иза најсавременијих метода. На крају, писање префикса прегледача је много лакше од проналажења и искоришћавања грешака које ће највероватније бити исправљене у будућој верзији, захтевајући да пронађете другу грешку коју треба искористити и тако даље.

instagram story viewer