Bila shaka, Internet Explorer ina idadi kubwa ya makosa katika matoleo tofauti, lakini kwa msaada wa maoni ya masharti unaweza kukabiliana nao na kufikia uondoaji wao. Lakini hakuna kitu kinachoweza kurekebisha ni kwamba IE imepitwa na wakati. Ingawa vivinjari vingine vinajumuisha sifa zaidi na zaidi za CSS3 na kusaidia teknolojia mbalimbali mpya, IE inaashiria wakati. Kutolewa kwa IE9 hakutasuluhisha shida; matoleo ya awali hayatatoweka mara moja. Katika hali kama hiyo, suluhisho bora itakuwa uharibifu wa neema - kanuni ya kudumisha utendaji wakati kupoteza utendaji fulani.

Hebu tuangalie mbinu hii kwa mfano mdogo, ambayo maandishi yanaonyeshwa kwenye kizuizi na kifungo. Kizuizi na kifungo vina pembe za mviringo, na kivuli kidogo pia huongezwa kwenye kizuizi. Kufikia sasa, vivinjari vya CSS3 hutumia sifa maalum na viambishi vyao wenyewe:

• Firefox - mali zinazoanza na -moz-;
• Safari na Chrome - mali zinazoanza na -webkit-;
• Opera - sifa zinazoanza na -o-.

Matoleo tofauti ya vivinjari hivi yanaweza kuelewa baadhi ya vipengele vilivyo na kiambishi awali na bila, kwa hivyo kwa ulimwengu wote huongeza sifa kadhaa mara moja. Kwa hiyo, ili kuunda pembe za mviringo tunahitaji mtindo wafuatayo.

Moz-mpaka-radius: 10px; /* Kwa Firefox */ -webkit-border-radius: 10px; /* Kwa Safari na Chrome */ mpaka-radius: 10px; /* Kwa Opera na IE9 */

Ingawa kutumia sifa hizi kutasababisha msimbo batili wa CSS, katika kesi hii ni muhimu zaidi kufanya kazi katika vivinjari vya Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, pamoja na matoleo yao ya zamani. Mfano wa 1 unaonyesha jinsi ya kutumia sifa za CSS3 kuunda vivuli na pembe za mviringo.

Mfano 1. Kuzuia na kivuli

XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Matokeo ya mfano yanaonyeshwa kwenye Mtini. 1.

Mchele. 1. Zuia mtazamo katika Safari

Mfano sawa katika kivinjari cha IE8 na chini unaonyeshwa kwenye Mtini. 2.

Mchele. 2. Zuia mtazamo katika IE8

Ingawa kuonekana kwa vipengele hutofautiana kwa undani, utendaji wa ukurasa kwa ujumla unabaki sawa. Kitufe kinaweza kubofya, maandishi yanabaki sawa, ikiwa ni pamoja na rangi na mandharinyuma yake, na hakuna makosa ya kuonyesha. Kwa kweli, tofauti ni tu katika mambo madogo ambayo hufanya mapambo badala ya kazi za vitendo. Kanuni zote za uharibifu wa neema zinatimizwa.

Mbinu hii inatoa nini kwa vitendo?

• Inakuruhusu kutumia kikamilifu sifa za mapambo ya CSS3 bila kuzingatia kivinjari.
• Inahamasisha kutumia athari mbalimbali za CSS3.
• Hurahisisha maisha ya msanidi programu, kwani hatakiwi tena kutafuta suluhu za vivinjari vilivyopitwa na wakati.
• Huongeza kasi ya tija ya kazi.

Bila shaka, uharibifu wa neema hautumiki kila wakati. Ikiwa mahitaji ya mpangilio yanaonyesha msaada kwa matoleo ya zamani, basi itabidi utafute suluhisho mbadala, kwa mfano, kutumia picha kwa pembe za mviringo. Lakini kwa sehemu kubwa, mahitaji ya mpangilio yanawekwa bila kuzingatia hali ya jumla. Na ikiwa tunalinganisha faida zote za uharibifu wa neema na hasara, ambayo inajidhihirisha tu kwa ukweli kwamba vivinjari vya zamani, haswa IE8, havionyeshi ukurasa "kwa uzuri" wa kutosha, basi huruma zitakuwa upande wa maendeleo.

Katika makala haya, tutajaribu kuelewa tofauti kati ya kanuni mbili za kuunda ukurasa kulingana na muundo wa wavuti unaoitikia: Uboreshaji wa Maendeleo na Uharibifu wa Neema.

Udhalilishaji wa neema

Uharibifu wa neema, au "uvumilivu wa kushindwa," ni dhana pana ambayo inatumika sio tu kwa muundo wa wavuti. Kwa maana ya jumla, inamaanisha uwezo wa mfumo kufanya kazi hata kama baadhi ya vipengele vyake vinashindwa. Na kushindwa kubwa zaidi, ubora wa chini wa mfumo au kazi na mfumo, lakini wakati huo huo utendaji kuu wa mfumo unabaki kufanya kazi.

Uharibifu wa neema unaweza kuonyeshwa katika uwezo wa kufanya kazi na JavaScript imezimwa, katika onyesho sahihi la tovuti kwenye kivinjari bila usaidizi wa vipimo vya CSS3, katika onyesho la kutosha la tovuti iliyo na picha zilizozimwa. Makosa haya yote yasiathiri utendakazi wa programu ya wavuti. Walakini, ikiwa kila kitu kitafanya kazi, basi ni rahisi zaidi kwa mtumiaji kutumia tovuti.

Ikiwa tutazingatia mfano maalum, kwa mfano katika uwanja wa muundo wa kiolesura cha wavuti, kanuni hii inaweza kutengenezwa kama "mfumo unaweza kufanya kazi na JavaScript imezimwa kabisa, lakini ikiwa JavaScript imewashwa itakuwa rahisi zaidi kufanya kazi nayo." Swali sio ikiwa kunaweza kuwa na hali ambapo JS imezimwa au haifanyi kazi kikamilifu, au kwa nini hii inafanyika. Hali hii inachukuliwa kama ilivyo. Mbuni lazima atengeneze kiolesura ambacho kitaendelea kufanya kazi, ingawa JS imezimwa.

Mara nyingi, ili kufuata kanuni hii, unapaswa kufanya upya mantiki ya usindikaji wa fomu ya seva. Hata hivyo, mbinu hii italipa ikiwa unafikiri juu ya uvumilivu wa makosa katika hatua ya kupanga fomu.

Kuzingatia kanuni ya uharibifu wa neema inaruhusu watumiaji (na kila mtumiaji ni mteja anayewezekana) kuweza kufanya kazi na tovuti katika hali yoyote.

Uboreshaji wa Maendeleo

Uboreshaji unaoendelea ni kanuni ambayo, pamoja na simu ya mkononi kwanza, huunda msingi wa kinadharia wa muundo sikivu wa wavuti. Jina lake tayari linasema kwamba inaweka uundaji wa ukurasa wa wavuti kwa hatua, kwa mzunguko, kulingana na kanuni "kutoka rahisi hadi ngumu." Katika kila hatua iliyopangwa tayari, kuonekana kwa ukurasa kunapaswa kuwa nzuri zaidi, bora na rahisi zaidi, lakini utendaji wote unapaswa kupatikana hapo awali.

Ni kesi maalum zaidi ya uharibifu wa neema , kwa kuwa kurasa zote za wavuti zilizojengwa juu yake zitazingatia kikamilifu kanuni ya uharibifu wa neema.

Kwa kawaida, kuunda ukurasa kwa kutumia kanuni ya uboreshaji inayoendelea huwa na hatua zifuatazo:

• Kuunda ukurasa kwa msingi wa "safi".HTML
  Katika hatua hii, ukurasa unaofanya kazi kikamilifu umeundwa, ambao una msimbo wa HTML pekee, ambao ni sahihi kimantiki na kimantiki, na kwa hiyo unaweza kufasiriwa na kivinjari chochote, hata rahisi zaidi. Katika hatua hii, hakuna fomati inayofanywa na kivinjari yenyewe hutengeneza ukurasa kulingana na viwango ambavyo vimejumuishwa ndani yake. Uboreshaji unaoendelea unasisitiza kuwa hatua ya kwanza ni muhimu zaidi, kwa kuwa hakuna kitu cha thamani zaidi kwenye wavuti kuliko maudhui.
  Fupi: kuunda muundo wa hati ya kimantiki na kimantiki
• Kuongeza KanuniCSS
  Katika hatua hii, meza ya CSS ya muundo wa zamani hutumiwa: gridi ya markup imeongezwa, vipengele vimewekwa, picha za mandharinyuma hutumiwa kwa vitalu, mitindo, rangi na mitindo ya maandishi hubadilishwa. Kwa ujumla, ukurasa unapata sura mpya ya stylized, kuwa nzuri zaidi na ya kupendeza.
  Fupi: kutoa muonekano wa hati
• Unatumia CSS3
  Sasa unaweza kutumia athari na nyongeza zote zinazotolewa na vipimo vya CSS3 kwenye hati. Hiyo ni, ongeza uwazi, vivuli, pembe za mviringo kwa vitalu, mabadiliko ya uhuishaji laini kwa madarasa ya uwongo au vipengele vya fomu.
  Fupi: kutoa mwonekano usio na dosari kwa hati
• Kuunda hati kumewashwaJavaScript
  Katika hatua hii, athari zote na kanuni za mwingiliano wa ukurasa wa wavuti na mtumiaji huundwa kwa kutumia JavaScript. Hizi ni pamoja na maombi ya AJAX, upakiaji unaobadilika au uthibitishaji wa data, athari za uhuishaji na wijeti (kwa mfano, Prototype au jQuery). Kwa ujumla, tunafanya ukurasa kuwa rahisi zaidi kwa watumiaji.
  Fupi: mwingiliano, mwingiliano, urahisi

Hebu jaribu kutumia mbinu hii katika mazoezi. Tutatengeneza na kutengeneza fomu rahisi ya kuingia kwenye tovuti. Katika hatua ya kwanza, tutaunda fomu ya kuingia katika HTML safi. Sura sio nzuri sana, lakini inafanya kazi kikamilifu. Ifuatayo ni msimbo wa ukurasa na matokeo yanayoonyeshwa kwenye kivinjari:

Sasa katika hatua ya pili tutatoa fomu ya mtindo kwa kuitumia karatasi ya mtindo iliyo na sheria hizo tu zinazotumika kwa CSS bila mali maalum. Hebu tuongeze rangi ya asili, padding, alignment. Sasa fomu inaonekana bora:

Sasa hebu tuongeze sheria kutoka kwa vipimo vya CSS3. Wacha tuongeze pembe kwenye vizuizi, vivuli vya uga wa ingizo la maandishi, tengeneza kitufe, na tutumie viteuzi vipya ili kuondoa pedi zisizo za lazima juu. Tunapata fomu iliyoboreshwa:

Katika hatua ya mwisho, tunaweza kuunda ombi la AJAX ili mtumiaji aweze kufikia tovuti bila kulazimika kupakia upya ukurasa.

Katika kesi hii, katika kila hatua maalum (ikiwa inasaidiwa na kivinjari), ukurasa unaofanya kazi kikamilifu utaonyeshwa. Lakini ikiwa kivinjari kinasaidia teknolojia za juu zaidi, basi ukurasa unakuwa bora zaidi.

Ni kanuni gani unapaswa kufuata?

Ikiwa tovuti imejengwa kwa ufanisi iwezekanavyo kulingana na dhana ya uharibifu wa neema, basi matokeo yatakuwa takriban sawa na kile ambacho kingetokea ikiwa uboreshaji unaoendelea ungetumiwa. Kwa hivyo kuna tofauti gani basi?

Ukweli ni kwamba kujenga tovuti kulingana na kanuni ya uharibifu wa neema ni vigumu sana, kwa kuwa watengenezaji wachache wanaweza kufanya hivyo kwa ufanisi. Katika hali rahisi zaidi ya uharibifu wa neema, unaweza kufanya yafuatayo: kuunda tovuti kwa toleo la hivi karibuni la kivinjari, na kisha uonyeshe watumiaji ujumbe unaowaambia kwamba wanahitaji kupakua toleo jipya la kivinjari. Wakati huo huo, watengenezaji wanaweza wasijali jinsi tovuti inavyoonekana katika vivinjari vya zamani. Mfano mwingine wa uharibifu mbaya wa neema ni kulemaza kabisa utendakazi wa tovuti wakati JavaScript imezimwa. Mfano mzuri ni kutuma ujumbe kwenye Facebook.com.

Kwa hivyo, uboreshaji wa hatua kwa hatua uliibuka katika kukabiliana na uharibifu wa ubora duni. Kubuni miingiliano kama hiyo imekuwa rahisi na ya ubora bora, kwani kuna hatua zilizoainishwa wazi za kuunda kiolesura.

Katika muundo wa msikivu kuna dhana ya "simu ya kwanza", ambayo kwa namna fulani inalingana na dhana ya uboreshaji wa maendeleo, kwani inahitaji hatua kutoka rahisi hadi ngumu, kutoka skrini za simu hadi Kompyuta za kompyuta. Ndiyo maana ufunguo wa utumiaji sahihi wa muundo wa wavuti unaoitikia unategemea uwezo wa msanidi programu kutumia kanuni za uboreshaji unaoendelea na simu kwanza.

Kutoka kwa mwandishi: Kiambishi awali -webkit- ni cha kawaida sana katika CSS leo hivi kwamba tovuti zingine hukataa kufanya kazi kwa usahihi bila hiyo. Ingawa viambishi awali vya css ya muuzaji vimekuwa ishara wazi ya sifa zisizo kamili kwa wasanidi programu katika miaka michache iliyopita, hii imesababisha Mozilla kuchukua hatua ya kukata tamaa lakini muhimu. Katika Firefox 46 au 47 (iliyotolewa Aprili au Mei 2016), Mozilla inapanga kuanzisha usaidizi kwa mfululizo wa viambishi awali vya -webkit- visivyo vya kawaida ili kuboresha upatanifu wa kivinjari na kiambishi awali hicho (hata kwenye vifaa vya rununu).

Wazo sio geni, Microsoft Edge pia inasaidia viambishi awali vya -webkit- kwa utangamano. Opera ilianza kuunga mkono viambishi awali -webkit- mnamo 2012, na kisha kubadili injini ya Webkit Blink. W3C na wasanidi wa kivinjari hawakupanga kutumia kiambishi awali hiki katika ukuzaji wa tovuti:

"Sera rasmi ya W3C inasema kuwa sifa za majaribio hazifai kutumika katika msimbo wa tovuti. Hata hivyo, watu wanazitumia kwa sababu wanataka tovuti zao zitumie teknolojia ya kisasa na zionekane nzuri."- Ukurasa wa W3C juu ya kuboresha yaliyomo kwa vivinjari tofauti

Hata hivyo, wasanidi daima wanataka kufikia vipengele vipya haraka iwezekanavyo. Viambishi awali vya wauzaji viligeuza kila kitu chini na kutoa utawala wa Webkit, lakini ninaamini viambishi awali vilikuwa na athari kubwa katika maendeleo ya haraka ya Mtandao.

Mbinu za Mozilla na Microsoft zitadhuru tovuti nyingi pekee. Tovuti nyingi tayari zitakuwa na viambishi awali vya -moz- kuwezeshwa, au watapata kwamba kwa sasisho jipya, Mozilla itaauni sifa mpya bila hitaji la kufanya mabadiliko. Hata hivyo, kama wasanidi wataalamu wa wavuti, tunahitaji kuweka hili kwa utulivu na kuelewa kwamba baadhi ya miundo inaweza kutoa matokeo mchanganyiko. Huenda tayari unajua ni ipi kati ya miradi yako itaharibiwa na sasisho hili. Wasanidi wa wavuti, ni wakati wa kufikiria upya mbinu yako ya viambishi awali vya wauzaji na kuvijaribu kwenye tovuti.

Viambishi awali vipya

Mozilla itajumuisha viambishi awali vya -webkit-. Kutoka kwa kile nimekusanya, inaonekana kwamba Mozilla haina nia ya kulinganisha orodha yake na mali ya Edge. Sio sifa zote zinazohitajika kuendana na injini ya Mozilla. Miongoni mwa viambishi awali ambavyo Mozilla itaongeza, kwa kuzingatia ukurasa wa Wiki ya Upatanifu/Simu ya Mkononi/Isiyo ya Upatanifu wa Kawaida, ni zifuatazo:

Webkit - kwa gradients

Webkit-mabadiliko

Webkit-mpito

Muonekano wa wavuti

Klipu ya usuli wa wavuti

Uwiano wa saizi-kifaa cha wavuti

Uhuishaji wa wavuti

Baadhi ya mali zingine zinaweza kuwa katika @-webkit-keyframes.

Jaribio la kivinjari-mbali litakuwa muhimu

Ikiwa wewe, msanidi wa wavuti, haukujumuisha kiambishi awali cha -moz- ili usijaribu sifa mpya za CSS katika Firefox, na tarehe ya mwisho inakaribia, na mteja anakulazimisha kuongeza kiambishi hiki, basi itabidi ujaribu tena tovuti. katika Firefox 46 au 47. Matoleo haya yatatolewa mwezi wa Aprili au Mei, kwa hivyo bado una muda.

Ili kujaribu tovuti yako bila kungoja Firefox 46/47, unaweza kuwezesha mabadiliko haya katika Firefox Nightly kwa kuweka layout.css.prefixes.webkit katika about:config. Ikiwa una toleo jipya zaidi la Nightly iliyosakinishwa, chaguomsingi inapaswa kuwa kweli. Bado sio kiambishi awali cha -webkit- kinachofanya kazi katika Firefox Nightly, lakini bado ni mahali pazuri pa kujaribu tovuti yako itakuwaje hivi karibuni. Ningengoja hadi Machi kabla ya kujaribu tovuti kwa umakini katika Firefox Nightly.

Muhimu zaidi, Microsoft Edge tayari inatafsiri na kuonyesha -webkit- viambishi awali kwa njia sawa. Hii ina maana kwamba mitindo yoyote ya WebKit kwenye tovuti yako tayari imeonyeshwa kwenye kivinjari ambacho hakikutarajiwa kabisa. Ikiwa bado haujafanya kazi na kivinjari hiki, kisha usakinishe Windows 10 na upate ufikiaji wa tovuti za majaribio.

Viambishi awali vya muuzaji vinapotea hatua kwa hatua

Kwa bahati nzuri, viambishi awali vya wauzaji vinatoweka polepole wakati timu za maendeleo zinapata suluhu mpya. Timu ya Chrome/Blink ilibadilisha mbinu yao kidogo:

"Kuendelea mbele, badala ya kuwezesha viambishi awali vya wauzaji kwa chaguo-msingi, tutaweka sifa za kawaida nyuma ya bendera ya 'washa kipengele cha majaribio ya mfumo wa wavuti' katika about:flags hadi sifa hizo ziwashwe kwa chaguomsingi."- Timu ya Chrome/Blink

Timu ya Firefox ilifuata njia sawa: "Mwelekeo mkuu wa kazi katika Mozilla sasa ni kuondoka kutoka kwa viambishi vya wauzaji, kwa kuzima au kuhamishia hali ya mali ya kawaida ikiwa tayari ni thabiti. Angalau hii ni sera yetu ya jumla; kesi za mtu binafsi zinastahili kutengwa. »- Boris kutoka Mozilla

Microsoft Edge pia inalenga kuondolewa kwa usaidizi wa kiambishi awali: "Microsoft pia inajaribu kuondoa viambishi awali vya wauzaji kwenye Edge. Hii inamaanisha kuwa wasanidi hawatalazimika kuongeza kiambishi awali maalum kwa kivinjari cha Edge wakati wa kutumia lebo maalum za HTML5 au sifa za CSS. Badala yake, watengenezaji wataandika msimbo wa kawaida."- Mashable

Uharibifu wa neema kwa kutumia viambishi awali haufanyi kazi tena

Kuhama kutoka kwa viambishi awali vya muuzaji kunamaanisha jambo moja tu - mbinu ya uharibifu wa neema kupitia viambishi awali sio chaguo tena. Kutenga vivinjari mahususi kupitia viambishi awali vya wauzaji (kwa mfano, kwa Chrome) halikuwa madhumuni ya viambishi awali hivi; Wasanidi programu wamehimizwa kila mara kutumia viambishi awali vyote (–webkit- to –o-). Iwapo unatumia utendakazi wowote unaofanya kazi kwenye sifa zilizo na viambishi awali vya wauzaji, na pia umetumia mbinu ya uharibifu wa hali ya juu katika muundo wako wa vivinjari vingine, basi hii haitafanya kazi tena.

Hitimisho

Nyakati zinabadilika. Utawala wa WebKit haukuwa wa kukusudia na ulisababisha zogo na kutopatana kwenye Mtandao. Vivinjari vingine vinatafuta kupanua utangamano kwa kuongeza viambishi awali vya -webkit. Hatua kwa hatua, kwa kutoweka kwa viambishi vya muuzaji, tatizo hili pia litaondoka. Wasanidi wanapaswa kuangalia kama matumizi ya viambishi awali hayasababishi matokeo yasiyofaa katika vivinjari visivyo vya WebKit.

Sijaandika kwa muda mrefu, ilibidi nihamie mahali bila mtandao (hiyo ni mbaya), kama matokeo ambayo sikuweza kuandika kwenye blogi. Leo nataka kuzungumza juu ya njia ya maendeleo (mpangilio), ambayo hutumiwa kwa sehemu katika muundo wa blogi yangu.

Matoleo ya hivi punde ya vivinjari vibunifu (kama vile FF 3.5, Opera 10) yameleta athari za mapambo kutoka kwa vipimo vilivyopendekezwa vya CSS 3. Uwazi, vivuli na athari ya zebra (striping) sasa zinapatikana bila matumizi ya JavaScript au markup ya ziada. Lakini baadhi ya vivinjari vya zamani ambavyo bado vinatumika havina vipengele hivi, na itakuwa ya kusikitisha kufikiria kuwa hutapata fursa ya kutumia athari hizi nzuri kwa miaka michache zaidi.

Katika makala haya, nitazungumza kuhusu jinsi ya kufanya maboresho mazuri (ya nyongeza) katika vivinjari vinavyoauni vipengele vya CSS3 na bado vinatoa mpangilio wa kuridhisha kwa watumiaji wengine.

Uboreshaji unaoendelea ni nini?

Ili kuelewa wazo la "uboreshaji wa taratibu", unahitaji kuelewa kanuni ya "uharibifu wa neema", ambayo inaelezewa vizuri na nukuu ifuatayo:

Uharibifu mdogo unamaanisha kuwa tovuti yako inaendelea kufanya kazi hata kama inatazamwa katika kivinjari kisicho bora zaidi ambacho madoido ya kina hayafanyi kazi.
Fluid Thinking, na Peter-Paul Koch

"Uboreshaji wa kuongezeka" hutumia njia ile ile tu kutoka upande wa pili, badala ya kuwa na wasiwasi juu ya tovuti kutoanguka kwenye kivinjari cha zamani, unahitaji kufikiria kwanza yaliyomo na kuongeza tu huduma za programu za kisasa kwenye muundo ili kuboresha mtumiaji. uzoefu, wakati mpangilio wa msingi wa hali bado unafanya kazi kwenye mashine za zamani. Kwa sasa hii ndiyo njia bora ya kutumia vipengele vipya vya CSS 3.

Mfano

Kama mfano, hebu tutengeneze menyu rahisi ya kusogeza ambayo itaonekana kuwa nzuri zaidi kulingana na usaidizi wa CSS kwenye kivinjari chako.

Ningependa kutambua kwamba katika mfano huu situmii michoro, hacks au viambishi maalum vya kivinjari - maboresho yote yanatokana na uwezo uliotangazwa. Kwa kuzingatia hilo, baadhi ya mambo yaliyo hapa chini ni kwa madhumuni ya mfano tu, na huenda yasiwe chaguo bora zaidi la kuunda tovuti halisi.

Kuashiria

Wacha tutengeneze menyu rahisi kwa kutumia orodha isiyopangwa (ul):

• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum

Mtindo wa msingi

Kama msingi, nitatumia mtindo unaotumia viteuzi rahisi tu vya kuweka tabaka. Inaunda mpaka kwa kila kipengele na kubadilisha mandharinyuma wakati wa kupeperusha kipanya (onmouseover). Hii inapaswa kufanya kazi katika kivinjari chochote kilichotengenezwa katika miaka 7-8 iliyopita (na ikiwezekana zaidi).

CSS ni rahisi sana:

Ul (
background-rangi: bluu;
mpaka-chini: 1px yenye nukta #999;
mtindo wa orodha: hakuna;
ukingo: 15px;
upana: 150px;
}

li(
rangi ya mandharinyuma: #fff;
mpaka: 1px yenye nukta #999;
mpaka-chini-upana: 0;
font: 1.2em/1.333 Verdana, Arial, sans-serif;
}

li a (
rangi: nyeusi;
kuonyesha: kuzuia;
urefu: 100%;
padding: 0.25em 0;
panga maandishi: katikati;
maandishi-mapambo: hakuna;
}

li a:hover ( rangi ya asili: #efefef; )

Kitu pekee cha ajabu hapa ni asili ya bluu

; Nitalieleza hili baadaye. Kwa mtindo huu, tutakuwa na mwonekano wa kimsingi ufuatao, utaonyeshwa katika IE6 kama hii:

Mpangilio wa kimsingi, hii ndivyo itakavyoonekana katika IE6 na vivinjari vingine vya zamani.

Kutumia maboresho

IE7 ilikuwa ya kwanza katika mfululizo wa IE wa vivinjari kusaidia viteuzi vyote vya sifa kutoka CSS 2.1, ambayo pia ni ya kawaida katika karibu vivinjari vingine vyote. Tunaweza kutumia mmoja wao - kichaguzi cha watoto - kuanza kuboresha. Kwa kuwa IE6 haiungi mkono wateuzi wa watoto, itapuuza sheria zifuatazo:

Mwili > ul ( upana wa mpaka: 0; )

ul > li (
mpaka: 1px imara #fff;
upana wa mpaka: 1px 0 0 0;
}

li > a (
rangi ya asili: #666;
rangi: nyeupe;
font-uzito: ujasiri;
}

li:wa kwanza--mtoto a ( rangi: njano; )

li > a:hover ( rangi ya usuli: #999; )

Kwa sheria hizi za CSS, orodha inaonekana kama hii:



Menyu sasa ina mandharinyuma yenye rangi na maandishi mazito, na kiungo cha kwanza kimeangaziwa kwa rangi tofauti.

Hivi ndivyo IE7, Firefox, Safari na Opera itaonyesha orodha.

Hebu tuweke mkazo zaidi

Hatua inayofuata ni kuongeza mkazo kwa kutumia mali ambayo IE haitambui: Uwazi. Hatuhitaji kutumia wateule maalum kwa hili, kwa sababu IE itaruka tu mali ambayo haiungi mkono:

Li (usio wazi: 0.9; )

li: hover ( opacity: 1; )

Picha ifuatayo inaonyesha jinsi mali hii inavyofanya kazi katika Opera, unaweza kuona kwamba vitu vya orodha vimepata tint kidogo ya bluu kutoka kwa nyuma.

. Kwenye kipanya, kila kipengele kinakuwa wazi kabisa:



Bila shaka unaweza kutumia kipengele cha kichujio cha IE kwa athari sawa katika IE. Pamoja na viambishi awali maalum vya kivinjari (-moz-, -webkit-) kwa sifa zilizo hapa chini. Lakini kwa madhumuni ya kielimu nitashikamana na kiwango cha CSS, kwa kuwa kichungi sio mali ya kawaida, basi sio halali.

Firefox 2 inasaidia uwazi, lakini katika vivinjari vya baadaye tunaweza kwenda mbali zaidi. Katika Safari na Opera, tunaweza kupamba maandishi kwa kutumia mali ya kivuli cha maandishi:

Li a:hover ( text-shadow: 2px 2px 4px #333; )

Kama picha ifuatayo inavyoonyesha, kipengele kina kivuli kidogo kwenye kielelezo na kinaonekana kujitokeza kidogo kutoka kwa ukurasa:



Hatimaye, unaweza kuhakikisha kuwa Opera inaauni viteuzi vipya vya CSS 3 kikamilifu na kuongeza safu nyingine ya uboreshaji: anuwai za rangi za mandharinyuma kwa kutumia kiteuzi cha mtoto wa nth:

Li:nth-child(2n+1) a ( rangi ya asili: #333; )

li:nth-child(n) a:hover (
rangi ya asili: #aaa;
rangi: #000;
}

li:first--mtoto > a:hover ( rangi: njano; )

Tutaona menyu yenye milia katika Opera:



Muhtasari na hitimisho

Picha hapa chini inaonyesha jinsi markup ya awali inaonekana katika IE6, IE7, Firefox, Safari na Opera, baada ya kutumia sheria za CSS zilizoelezwa katika makala hii. Kama unavyoona, usaidizi wa kivinjari kwa CSS unavyozidi kuwa wa kisasa zaidi, menyu huwa maridadi na changamano zaidi, na kwa kutumia mbinu za uboreshaji wa ziada, menyu huendelea kufanya kazi hata katika vivinjari vya zamani sana.



Kwa kweli, vivinjari vingi vina safu ya sifa zingine ambazo sijashughulikia hapa lakini ambazo zinaweza kutumika, kama vile rangi za RGBA na SVG kama rangi za mandharinyuma.

Jedwali la Yaliyomo:

Kiambishi awali -webkit- kinatawala sana katika CSS hivi kwamba tovuti zingine hazifanyi kazi vizuri bila hiyo. Hii inaonyesha kuwa wasanidi programu hawajafuata mbinu bora zaidi katika miaka ya hivi karibuni na hii ilisababisha bahati mbaya, lakini karibu uamuzi wa kulazimishwa kwa upande wa Mozilla. Katika toleo la 46 au la 47 la Firefox (hii ni Aprili au Mei 2016), Mozilla inapanga kutekeleza usaidizi kwa viambishi awali vya -webkit- zisizo za kawaida ili kuboresha upatanifu wa Firefox na tovuti zinazotumia kikamilifu -webkit (kawaida tovuti za kwanza za rununu).

Hata hivyo, wasanidi hutumia viambishi awali ili kutumia vipengele vya hivi punde vya kivinjari haraka iwezekanavyo. Viambishi awali vilisababisha mkanganyiko na utawala wa WebKit, lakini pia vililazimisha wavuti kusonga mbele kwa mwendo wa kasi.

Mbinu ya Mozilla na Microsoft ni salama kwa tovuti nyingi. Tovuti nyingi zitatumia kiambishi awali cha -moz- au hazihitaji hatua yoyote ili kuendana na sasisho la Firefox la siku zijazo. Lakini kama watengenezaji wa kitaalamu wa wavuti, lazima tuzingatie kwa makini na kuelewa ni matokeo gani hii itahusisha. Labda unajua ni tovuti gani kati ya tovuti zako zinaweza kuathiriwa na sasisho hili.

Kwa hivyo, ni wakati wa kufikiria upya mbinu ya viambishi awali na tovuti za majaribio nazo.

Viambishi Vinavyotumika

Kuna idadi ya viambishi awali -webkit- ambavyo Mozilla inaweza kutekeleza. Kutoka kwa kile nimekusanya, Mozilla hailingani na orodha yake ya sifa za kiambishi awali zinazotumika na Edge, kwani sio zote zinahitajika kwa utangamano wa injini ya mpangilio.

Watengenezaji wa Firefox pia wako karibu na mbinu kama hiyo:

Mwenendo wa sasa katika Mozilla ni kuepuka viambishi awali vya wauzaji kwa kuzima sifa zisizo na viambishi awali na kutumia toleo lisilo na kiambishi chenye uthabiti wa kutosha. Hii ni sera ya jumla: isipokuwa kunaweza kutumika katika hali zingine - Boris kutoka Mozilla

Microsoft Edge pia itaachana na viambishi awali vya muuzaji:

"Microsoft pia itaondoa viambishi awali vya wauzaji kwenye Edge. Hii inamaanisha kuwa wasanidi programu wanaotaka kutumia vipengele mahususi vya HTML na CSS hawatatumia kiambishi awali mahususi cha Edge. Badala yake, wataandika msimbo kulingana na viwango” - Mashable

Hakutakuwa na uharibifu tena wa taratibu kulingana na viambishi awali

Kuhama huku kutoka kwa viambishi awali vya muuzaji kunamaanisha jambo moja - uharibifu wa taratibu kwa kutumia viambishi awali vya muuzaji hauna matarajio.

Kutumia viambishi awali vya wachuuzi kutumia mitindo kwa kivinjari mahususi (kwa mfano, Chrome pekee) halikuwa kusudi la kuvitambulisha; Pendekezo kwa wasanidi programu daima imekuwa kutumia viambishi awali vyote (kutoka -webkit- hadi -o-). Ikiwa unatumia vipengele vinavyotegemea sifa za kiambishi awali na kutumia viambishi awali ili kuharibu muundo wako katika vivinjari vingine, basi hii haitafanya kazi tena.

Hitimisho

Nyakati zinabadilika. Utawala wa WebKit umesababisha matatizo ya kutopatana bila kujua, na kuwalazimu wachuuzi wengine wa vivinjari kutekeleza viambishi awali vya -webkit. Suala hili litaisha huku wachuuzi wa vivinjari wakiondoa viambishi awali vya wauzaji, lakini kwa sasa wasanidi wanapaswa kuhakikisha kuwa viambishi awali havisababishi matokeo yasiyotarajiwa katika vivinjari visivyo vya WebKit.