Prefixes ya Wafanyabiashara wa CSS

Ni nini na kwa nini unapaswa kutumia

Nambari ya prefixes ya CSS, pia wakati mwingine unaojulikana kama prefixes ya kivinjari au wa CSS , ni njia ya watungaji wa kivinjari kuongeza msaada kwa vipengele vipya vya CSS kabla ya vipengele hivi viliungwa mkono kikamilifu katika vivinjari vyote. Hii inaweza kufanyika wakati wa aina ya majaribio na kipindi cha majaribio ambapo mtengenezaji wa kivinjari anaamua jinsi vipengele hivi vipya vya CSS vitatekelezwa. Prefixes hizi zilikuwa maarufu sana kwa kupanda kwa CSS3 miaka michache iliyopita.

Wakati CCS3 ilipoanzishwa kwanza, mali kadhaa ya msisimko ilianza kugonga browsers tofauti kwa nyakati tofauti. Kwa mfano, vivinjari vyenye mtandao (Safari na Chrome) ndio wa kwanza kuanzisha baadhi ya vipengele vya uhuishaji kama vile kubadilisha na mabadiliko. Kwa kutumia mali ya prefixed, wasanidi wa wavuti waliweza kutumia vipengele hivi vipya kwenye kazi zao na kuziwezesha kwenye vivinjari ambavyo viliwasaidia mara moja, badala ya kusubiri mtengenezaji mwingine wa kivinjari kupata!

Hivyo kwa mtazamo wa msanidi wa wavuti wa mbele, mshuhuri wa kivinjari hutumiwa kuongeza vipengele vipya vya CSS kwenye tovuti wakati una faraja kujua kwamba vivinjari vinasaidia mitindo hiyo. Hii inaweza kuwa na manufaa hasa wakati wajenzi mbalimbali wa kivinjari kutekeleza mali kwa njia tofauti tofauti au kwa syntax tofauti.

Profixes ya kivinjari CSS ambayo unaweza kutumia (kila moja ambayo ni maalum kwa kivinjari tofauti) ni:

Katika hali nyingi, kutumia mali mpya ya mtindo wa CSS, unachukua mali ya CSS ya kawaida na kuongeza kiambishi awali kwa kila kivinjari. Matoleo ya prefixed daima inakuja kwanza (kwa utaratibu wowote unapendelea) wakati mali ya kawaida ya CSS itakuja mwisho. Kwa mfano, ikiwa unataka kuongeza mpito wa CSS3 kwenye waraka wako, utatumia mali ya mpito kama ilivyoonyeshwa hapa chini:

-babkit- mabadiliko: kila 4s urahisi;
-moz- mpito: wote 4s urahisi;
-ms- mpito: wote 4s urahisi;
-o mpito: kila 4s urahisi;
Mpito: wote 4s urahisi;

Kumbuka , baadhi ya vivinjari vina sambamba tofauti kwa mali fulani kuliko wengine wanavyofanya, hivyo usifikiri kwamba kivinjari-prefixed version ya mali ni sawa na mali ya kawaida. Kwa mfano, ili uundaji wa CSS , unatumia mali ya mstari. Firefox, Opera, na matoleo ya kisasa ya Chrome na Safari hutumia mali hiyo na kiambatisho sahihi wakati matoleo mapema ya Chrome na Safari kutumia mali ya prefixed -webkit-gradient. Pia, Firefox hutumia maadili tofauti kuliko yale ya kawaida.

Sababu kwamba daima umalizika tangazo lako kwa toleo la kawaida, isiyo na prefixed ya mali ya CSS ili kwamba kivinjari hakiunga mkono utawala, itatumia hiyo moja. Kumbuka jinsi CSS inasomwa. Sheria za baadaye zinatangulia juu ya zile za awali kama upeo huo ni sawa, hivyo kivinjari kitaisoma toleo la muuzaji wa sheria na kutumia kwamba ikiwa haitumii moja ya kawaida, lakini mara moja itakapofanya, itapunguza toleo la muuzaji na utawala wa CSS halisi.

Prefixes ya Wafanyabiashara Sio Hack

Wakati prefixes wa wauzaji walipoanzisha kwanza, wataalamu wengi wa wavuti walishangaa kama walikuwa hack au kurudi nyuma ya giza siku ya kutafuta code ya tovuti ya kusaidia browsers tofauti (kumbuka wale " Tovuti hii ni bora kutazamwa katika IE " ujumbe). Wafanyabiashara wa CSS prefixes hawana hacks, hata hivyo, na hupaswi kutoridhishwa kuhusu kuitumia katika kazi yako.

Hack CSS hutumia makosa katika utekelezaji wa kipengele kingine au mali ili kupata mali nyingine kufanya kazi kwa usahihi. Kwa mfano, hack model sanduku ilitumia makosa katika kupitisha mali ya familia-sauti au jinsi vivinjari vinavyotafuta backslashes (\). Lakini hacks hizi zilizotumiwa kurekebisha tatizo la tofauti kati ya jinsi Internet Explorer 5.5 ilivyoshughulikia mfano wa sanduku na jinsi Netscape ilivyotafasiri, na hawana uhusiano wowote na mtindo wa familia ya sauti. Shukrani hizi browsers mbili zilizopita ni wale ambao hatuna wasiwasi na siku hizi.

Kiambatanisho cha muuzaji sio hack kwa sababu inaruhusu vipimo kuweka sheria kuhusu jinsi mali inaweza kutekelezwa, wakati huo huo kuruhusu watunga kivinjari kutekeleza mali kwa njia tofauti bila kuvunja kila kitu kingine. Zaidi ya hayo, prefixes hizi zinafanya kazi na mali CSS ambayo hatimaye itakuwa sehemu ya vipimo . Tunaongeza tu kanuni fulani ili kupata upatikanaji wa mali mapema. Hii ni sababu nyingine ya kumaliza utawala wa CSS na mali isiyo ya kawaida, isiyo ya prefixed. Kwa njia hiyo unaweza kuacha matoleo ya prefixed mara moja msaada kamili wa kivinjari unafanikiwa.

Unataka kujua nini msanidi wa kivinjari kwa kipengele fulani ni? CanIUse.com ya tovuti ni rasilimali nzuri ya kukusanya taarifa hii na kukujulisha ni wapi browsers, na ni matoleo gani ya vivinjari hivi, kwa sasa wanaunga mkono kipengele.

Prefixes ya Wafanyabiashara Wanasikitisha Lakini Kwa Muda

Ndio, inaweza kujisikia kuwa hasira na kurudia tena ili kuandika mali mara 2-5 ili kupata kazi katika vivinjari vyote, lakini ni hali ya muda mfupi. Kwa mfano, miaka michache iliyopita, kuweka kona iliyozunguka kwenye sanduku ulipaswa kuandika:

-mali-mpaka-radius: 10px 5px;
-bomba-mpaka-juu-kushoto-radius: 10px;
-busi-mpaka-juu-kulia-radius: 5px;
-bomba-mpaka-chini-kulia-radius: 10px;
-bomba-mpaka-chini-kushoto-radius: 5px;
mpaka-mpaka: 10px 5px;

Lakini sasa kwamba vivinjari vimekuja kukusaidia kikamilifu kipengele hiki, kwa kweli unahitaji tu toleo la kawaida:

mpaka-mpaka: 10px 5px;

Chrome imeunga mkono mali ya CSS3 tangu toleo la 5.0, Firefox aliongeza kwenye toleo la 4.0, Safari aliiongeza kwenye 5.0, Opera katika 10.5, IOS katika 4.0, na Android katika 2.1. Hata Internet Explorer 9 huiunga mkono bila kiambishi awali (na IE 8 na chini haikuunga mkono bila au bila prefixes).

Kumbuka kwamba vivinjari huenda kubadilika na mbinu za ubunifu ili kusaidia vivinjari vidogo zitahitajika isipokuwa unapanga mpango wa kuunda kurasa za wavuti ambazo ni miaka nyuma ya mbinu za kisasa zaidi. Mwishoni, kuandika prefixes ya kivinjari ni rahisi zaidi kuliko kupata na kutumia makosa ambayo kwa uwezekano utastahikiwa katika toleo la baadaye, linahitajika kupata hitilafu nyingine ya kutumia na kadhalika.