Кои се тие и зошто треба да ги користите
Префиксите на продавачите на CSS, исто така познати како префикси на прелистувачите на CSS , се начин за креаторите на прелистувачи да додадат поддршка за нови CSS функции пред тие карактеристики да бидат целосно поддржани во сите прелистувачи. Ова може да се направи за време на еден вид на тестирање и период на експериментирање, кога производителот на прелистувачот одредува како точно ќе се имплементираат овие нови CSS карактеристики. Овие префикси станаа многу популарни со порастот на CSS3 пред неколку години.
Кога CCS3 беше првпат воведен, голем број на возбудени својства почнаа да удираат различни прелистувачи во различни периоди. На пример, интернет-прелистувачите (Сафари и Хром) беа првите кои воведоа некои од атрибути во стилот на анимација како трансформација и транзиција. Со користење на префиксни својства на добавувачите, веб-дизајнерите беа во можност да ги користат тие нови функции во нивната работа и да ги видат на прелистувачите што веднаш ги поддржуваа, наместо да чекаат секој друг производител на прелистувач да се израмни!
Значи, од перспектива на веб-развивач на предната страна, префиксите на прелистувачот се користат за додавање на нови CSS функции на веб-страница, додека имаат удобност знаејќи дека прелистувачите ќе ги поддржат тие стилови. Ова може да биде особено корисно кога различни производители на прелистувачи ги имплементираат својствата на малку поинакви начини или со поинаква синтакса.
Префиксите на прелистувачот на CSS што можете да ги користите (од кои секоја е специфична за друг прелистувач) се:
- Андроид: -webkit-
- Хром: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Опера: -оо-
- Safari: -webkit-
Во повеќето случаи, за да користите сосема нов стил на стил на CSS, го земате стандардниот CSS имот и додадете префикс за секој прелистувач. Префиксните верзии секогаш ќе бидат први (во било кој поредок што сакате), додека нормалното својство на CSS ќе биде последно. На пример, ако сакате да додадете транзиција на CSS3 во вашиот документ, ќе го користите имотот за транзиција како што е прикажано подолу:
-webkit- транзиција: сите 4s леснотија;
-моз- транзиција: сите 4s леснотија;
-ms- транзиција: сите 4s леснотија;
- транзиција: сите 4s леснотија;
транзиција: сите 4s леснотија;
Забелешка: Запомнете, некои прелистувачи имаат поинаква синтакса за одредени својства од другите, па затоа не претпоставувајте дека претходната верзија на прелистувачот на имотот е иста како и стандардната особина. На пример, за да креирате CSS градиент , го користите линеарен градиент својство. Firefox, Opera и модерни верзии на Chrome и Safari го користат тој имот со соодветен префикс, додека раните верзии на Chrome и Safari го користат префиксот -webkit-gradient. Исто така, Firefox користи различни вредности од стандардните.
Причината дека секогаш ја завршувате вашата декларација со нормална, не-префиксна верзија на имотот на CSS е така што кога прелистувачот го поддржува правилото, тој ќе го користи тој. Запомни како се чита CSS. Подоцнежните правила имаат предност пред претходните ако специфичноста е иста, така што прелистувачот ќе ја прочита верзијата на продавачот на правилото и ќе го користи тоа ако не го поддржува нормалното, но откако ќе го направи тоа, ќе ја пребрише верзијата на продавачот со правилата на CSS.
Префикси на продавачите не се хак
Кога првично се воведоа префикси на продавачите, многу веб-професионалци се прашуваа дали тие се пробиени или префрлаат во мрачните денови кога ќе го искористат кодот на веб-страницата за поддршка на различни прелистувачи (запомнете ги овие пораки " Оваа страница е најдобро видена во IE " пораки). Префиксите на продавачите на CSS не се хакове, и не треба да имате резервации за нивно користење во вашата работа.
CSS пробие експлоатира недостатоци во спроведувањето на друг елемент или имот, со цел да се добие друг имот да работи правилно. На пример, кутијата модел хакира експлоатира недостатоци во парсирање на сопственост на глас-семејство или во тоа како прелистувачи ги анализираат косиоткрити (\). Но, овие хакове се користеа за да се реши проблемот со разликата помеѓу тоа како Internet Explorer 5.5 го ракуваше кутичниот модел и како Netscape го интерпретира, и немаат никаква врска со стилот на гласовното семејство. За среќа, овие два застарени прелистувачи се оние кои ние не се грижиме самите со овие денови.
Префиксот на продавачот не е пробив, бидејќи дозволува спецификација да поставува правила за тоа како може да се реализира имотот, а истовремено да им овозможи на производителите на прелистувачи да имплементираат имот на поинаков начин, без да се прекршат сè друго. Понатаму, овие префикси работат со својства на CSS кои на крајот ќе бидат дел од спецификацијата . Ние едноставно додаваме некој код за да можеме рано да добиеме пристап до имотот. Ова е уште една причина зошто го завршувате правилото CSS со нормалното, не-префиксирано својство. На тој начин можете да ги испуштите префиксните верзии откако ќе се постигне целосна поддршка за прелистувачот.
Сакате да знаете што поддржува прелистувачот за одредена опција? Веб-страницата CanIUse.com е прекрасен ресурс за собирање на оваа информација и допуштајќи да знаете кои прелистувачи и кои верзии на тие прелистувачи моментално ја поддржуваат функцијата.
Префикси на продавачите се досадни, но привремено
Да, тоа би можело да се почувствува досадно и повторливо да мора да ги напишете својствата 2-5 пати за да може да работи во сите прелистувачи, но тоа е привремена ситуација. На пример, пред само неколку години, за да поставите заоблен агол на кутијата што требаше да ја напишете:
-moz-граница-радиус: 10px 5px;
-webkit-граница-горе-лев радиус: 10px;
-webkit-border-top-right-радиус: 5px;
-webkit-граница-долен-десен-радиус: 10px;
-webkit-граница-долен-лев радиус: 5px;
граница-радиус: 10px 5px;
Но, сега кога прелистувачите целосно ја поддржуваат оваа функција, навистина потребна е само стандардизирана верзија:
граница-радиус: 10px 5px;
Chrome го поддржа сопственоста на CSS3 од верзијата 5.0, Firefox го додаде во верзија 4.0, Safari го додаде во 5.0, Opera во 10.5, iOS во 4.0 и Android 2.1. Дури и Internet Explorer 9 го поддржува без префикс (и IE 8 и пониски не го поддржуваат со или без префикси).
Запомни дека прелистувачите секогаш ќе се менуваат и креативните пристапи за поддршка на постарите пребарувачи ќе бидат потребни, освен ако не планирате да изградите веб-страници кои се години зад најсовремените методи. На крајот, пишувањето префикси на прелистувачите е многу полесно отколку наоѓање и искористување на грешки кои најверојатно ќе бидат решени во идната верзија, барајќи да најдете друга грешка за експлоатација и сл.