Siyempre, ang Internet Explorer ay naglalaman ng isang malaking bilang ng mga error sa iba't ibang mga bersyon, ngunit sa tulong ng mga kondisyon na komento maaari mong labanan ang mga ito at makamit ang kanilang pag-aalis. Ngunit kung ano ang walang maaaring ayusin ay ang IE ay walang pag-asa na luma na. Habang ang iba pang mga browser ay nagsasama ng higit at higit pang mga katangian ng CSS3 at sumusuporta sa iba't ibang mga bagong teknolohiya, ang IE ay nagmamarka ng oras. Ang paglabas ng IE9 ay hindi malulutas ang problema sa mga nakaraang bersyon; Sa ganoong sitwasyon, ang pinakamagandang solusyon ay ang magandang pagkasira - ang prinsipyo ng pagpapanatili ng pagganap habang nawawala ang ilang functionality.

Tingnan natin ang diskarteng ito gamit ang isang maliit na halimbawa, kung saan ipinapakita ang teksto sa isang bloke at isang pindutan. Ang bloke at pindutan ay may mga bilugan na sulok, at isang maliit na anino ay idinagdag din sa bloke. Sa ngayon, ang mga browser para sa CSS3 ay pangunahing gumagamit ng mga partikular na katangian na may sariling mga prefix:

• Firefox - mga pag-aari na nagsisimula sa -moz-;
• Safari at Chrome - mga pag-aari na nagsisimula sa -webkit-;
• Opera - mga katangian na nagsisimula sa -o-.

Naiintindihan ng iba't ibang bersyon ng mga browser na ito ang ilang property nang may prefix at walang prefix, kaya para sa pagiging pangkalahatan ay nagdaragdag sila ng ilang property nang sabay-sabay. Kaya, upang lumikha ng mga bilugan na sulok kailangan namin ang sumusunod na istilo.

Moz-border-radius: 10px; /* Para sa Firefox */ -webkit-border-radius: 10px; /* Para sa Safari at Chrome */ border-radius: 10px; /* Para sa Opera at IE9 */

Bagama't ang paggamit sa mga pag-aari na ito ay magreresulta sa di-wastong CSS code, sa kasong ito, mas mahalaga na gumana sa mga browser na Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, pati na rin ang kanilang mga mas lumang bersyon. Ipinapakita ng Halimbawa 1 kung paano gamitin ang mga katangian ng CSS3 upang lumikha ng mga anino at mga bilugan na sulok.

Halimbawa 1. Harang na may anino

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

Ang resulta ng halimbawa ay ipinapakita sa Fig. 1.

kanin. 1. I-block ang view sa Safari

Ang parehong halimbawa sa IE8 browser at sa ibaba ay ipinapakita sa Fig. 2.

kanin. 2. I-block ang view sa IE8

Kahit na ang hitsura ng mga elemento ay naiiba sa detalye, ang pag-andar ng pahina sa kabuuan ay nananatiling pareho. Maaaring i-click ang pindutan, ang teksto ay nananatiling pareho, kasama ang kulay at background nito, at walang mga error sa pagpapakita. Sa katunayan, ang pagkakaiba ay nasa maliliit na bagay lamang na gumaganap ng pandekorasyon sa halip na mga praktikal na function. Ang lahat ng mga prinsipyo ng matikas na pagkasira ay natutupad.

Ano ang ibinibigay ng diskarteng ito sa pagsasanay?

• Binibigyang-daan kang aktibong gumamit ng mga pandekorasyon na katangian ng CSS3 nang walang pagsasaalang-alang sa browser.
• Nag-uudyok na gumamit ng iba't ibang CSS3 effect.
• Pinapadali nito ang buhay ng developer, dahil hindi na niya kailangang maghanap ng mga solusyon para sa mga lumang browser.
• Pinapabilis ang pagiging produktibo sa trabaho.

Siyempre, hindi palaging naaangkop ang magandang pagkasira. Kung ang mga kinakailangan sa layout ay nagpapahiwatig ng suporta para sa mga mas lumang bersyon, kakailanganin mong maghanap ng mga alternatibong solusyon, halimbawa, gamit ang mga larawan para sa mga bilugan na sulok. Ngunit para sa karamihan, ang mga kinakailangan para sa layout ay itinakda nang hindi isinasaalang-alang ang pangkalahatang sitwasyon. At kung ihahambing natin ang lahat ng mga pakinabang ng kaaya-ayang pagkasira sa kawalan, na nagpapakita lamang ng sarili sa katotohanan na ang mga hindi napapanahong mga browser, lalo na ang IE8, ay hindi nagpapakita ng sapat na "maganda" sa pahina, kung gayon ang mga simpatiya ay nasa panig ng pag-unlad.

Sa artikulong ito, susubukan naming maunawaan ang pagkakaiba sa pagitan ng dalawang prinsipyo ng paggawa ng page batay sa tumutugon na disenyo ng web: Progressive Enhancement at Graceful Degradation.

Magiliw na pagkasira

Ang matikas na pagkasira, o "pagtitiis sa pagkabigo," ay isang mas malawak na konsepto na nalalapat hindi lamang sa disenyo ng web. Sa pangkalahatang kahulugan, ito ay nagpapahiwatig ng kakayahan ng isang sistema na gumana kahit na ang ilan sa mga bahagi nito ay nabigo. At mas seryoso ang pagkabigo, mas mababa ang kalidad ng system o gumagana sa system, ngunit sa parehong oras ang pangunahing pag-andar ng system ay nananatiling pagpapatakbo.

Ang kaaya-ayang pagkasira ay maaaring ipahayag sa kakayahang magtrabaho sa JavaScript na hindi pinagana, sa tumpak na pagpapakita ng site sa isang browser na walang suporta para sa detalye ng CSS3, sa sapat na pagpapakita ng site na may mga hindi pinaganang larawan. Ang lahat ng mga pagkabigo na ito ay hindi dapat makaapekto sa pagpapatakbo ng web application. Gayunpaman, kung gumagana ang lahat, kung gayon mas maginhawa para sa gumagamit na gamitin ang site.

Kung isasaalang-alang namin ang isang partikular na halimbawa, halimbawa sa larangan ng disenyo ng web interface, ang prinsipyong ito ay maaaring buuin bilang "ang system ay maaaring gumana nang ganap na hindi pinagana ang JavaScript, ngunit kapag pinagana ang JavaScript ay magiging mas maginhawang gamitin." Ang tanong ay hindi kung maaaring magkaroon ng sitwasyon kung saan hindi pinagana ang JS o hindi ganap na gumagana, o kung bakit ito nangyayari. Ang sitwasyong ito ay kinuha bilang isang ibinigay. Ang taga-disenyo ay dapat bumuo ng isang interface na patuloy na gagana, kahit na hindi pinagana ang JS.

Kadalasan, upang sundin ang prinsipyong ito, kailangan mong gawing muli ang lohika sa pagproseso ng form sa server-side. Gayunpaman, ang diskarte na ito ay magbabayad kung iisipin mo ang tungkol sa pagpapahintulot sa kasalanan sa yugto ng pagpaplano ng form.

Ang pagsunod sa prinsipyo ng magandang pagkasira ay nagbibigay-daan sa mga user (at ang bawat user ay isang potensyal na kliyente) na makapagtrabaho sa site sa anumang sitwasyon.

Progressive Enhancement

Ang progresibong pagpapahusay ay isang prinsipyo na, kasama ang mobile muna, ay lumilikha ng teoretikal na batayan para sa tumutugon na disenyo ng web. Sinasabi na ng pangalan nito na inilalagay nito ang paglikha ng isang web page sa mga yugto, paikot, ayon sa prinsipyong "mula sa simple hanggang sa kumplikado." Sa bawat isa sa mga paunang binalak na yugto, ang hitsura ng pahina ay dapat na maging mas maganda, mas mahusay at mas maginhawa, ngunit ang lahat ng pag-andar ay dapat na magagamit sa simula.

Ay isang mas espesyal na kaso ng magandang pagkasira , dahil ang lahat ng mga web page na binuo dito ay ganap na susunod sa prinsipyo ng magandang pagkasira.

Karaniwan, ang paglikha ng isang pahina gamit ang progresibong prinsipyo ng pagpapahusay ay binubuo ng mga sumusunod na hakbang:

• Paglikha ng isang pahina sa isang "malinis" na batayanHTML
  Sa yugtong ito, ang isang ganap na gumaganang pahina ay nilikha, na binubuo lamang ng HTML code, na semantiko at lohikal na tama, at samakatuwid ay maaaring bigyang-kahulugan ng anumang browser, kahit na ang pinakasimpleng isa. Sa yugtong ito, walang ginagawang pag-format at ang browser mismo ang nag-format ng pahina ayon sa mga pamantayang kasama dito. Iginiit ng progresibong pagpapabuti na ang unang yugto ang pinakamahalaga, dahil wala nang mas mahalaga sa web kaysa sa nilalaman.
  maikli: paglikha ng semantiko at lohikal na istraktura ng dokumento
• Pagdaragdag ng Mga PanuntunanCSS
  Sa yugtong ito, ginagamit ang isang CSS table ng lumang format: isang markup grid ay idinagdag, ang mga elemento ay nakaposisyon, ang mga larawan sa background ay inilalapat sa mga bloke, mga estilo, mga kulay at mga estilo ng teksto ay binago. Sa pangkalahatan, ang pahina ay nakakakuha ng isang bagong inilarawan sa pangkinaugalian hitsura, nagiging mas maganda at kaaya-aya.
  maikli: pagbibigay ng hitsura ng isang dokumento
• Paglalapat ng CSS3
  Maaari mo na ngayong ilapat ang lahat ng mga epekto at pagpapahusay na ibinigay ng detalye ng CSS3 sa dokumento. Iyon ay, magdagdag ng translucency, mga anino, mga bilugan na sulok para sa mga bloke, makinis na mga animated na paglipat para sa mga pseudo-class o mga elemento ng form.
  maikli: pagbibigay ng walang kamali-mali na hitsura sa dokumento
• Naka-on ang paggawa ng mga scriptJavaScript
  Sa yugtong ito, ang lahat ng mga epekto at prinsipyo ng pakikipag-ugnayan ng web page sa user ay nilikha gamit ang JavaScript. Kabilang dito ang mga kahilingan sa AJAX, dynamic na paglo-load o pagpapatunay ng data, mga epekto ng animation at mga widget (halimbawa, Prototype o jQuery). Sa pangkalahatan, ginagawa naming mas madaling gamitin ang page.
  maikli: pakikipag-ugnayan, interaktibidad, kaginhawahan

Subukan nating ilapat ang pamamaraang ito sa pagsasanay. Kami ay bubuo at magdidisenyo ng isang simpleng form sa pag-login sa site. Sa unang yugto, gagawa kami ng login form sa purong HTML. Ang hugis ay hindi ganoon kaganda, ngunit ito ay ganap na gumagana. Nasa ibaba ang page code at ang resulta na ipinapakita sa browser:

Ngayon sa ikalawang hakbang ay bibigyan namin ang form ng isang istilo sa pamamagitan ng paglalapat dito ng isang style sheet na naglalaman lamang ng mga panuntunang naaangkop sa CSS nang walang mga espesyal na katangian. Magdagdag tayo ng kulay ng background, padding, alignment. Ngayon ang form ay mukhang mas mahusay:

Ngayon, idagdag natin ang mga panuntunan mula sa detalye ng CSS3. Magdagdag tayo ng mga sulok sa mga bloke, mga anino para sa mga field ng text input, i-istilo ang button, at gumamit ng mga bagong tagapili upang alisin ang hindi kinakailangang padding sa itaas. Nakakakuha kami ng pinahusay na form:

Sa huling yugto, maaari tayong lumikha ng kahilingan sa AJAX upang ma-access ng user ang site nang hindi kinakailangang i-reload ang pahina.

Sa kasong ito, sa bawat partikular na yugto (kung sinusuportahan ito ng browser), isang fully functional na page ang ipapakita. Ngunit kung ang browser ay sumusuporta sa mas advanced na mga teknolohiya, ang pahina ay magiging mas mahusay lamang.

Aling prinsipyo ang dapat mong sundin?

Kung ang site ay binuo nang mahusay hangga't maaari ayon sa konsepto ng kaaya-ayang pagkasira, ang magiging resulta ay humigit-kumulang kapareho ng kung ano ang mangyayari kung ginamit ang progresibong pagpapahusay. Kaya ano ang pagkakaiba kung gayon?

Ang katotohanan ay ang pagbuo ng isang website batay sa prinsipyo ng kaaya-ayang pagkasira ay medyo mahirap, dahil kakaunti ang mga developer ang makakagawa nito nang mahusay. Sa pinakasimpleng kaso ng magandang pagkasira, magagawa mo ang sumusunod: lumikha ng site para sa pinakabagong bersyon ng browser, at pagkatapos ay magpakita sa mga user ng mensahe na nagsasabi sa kanila na kailangan nilang mag-download ng bagong bersyon ng browser. Kasabay nito, maaaring walang pakialam ang mga developer sa hitsura ng site sa mga mas lumang browser. Ang isa pang halimbawa ng masamang magandang pagkasira ay ang kumpletong hindi pagpapagana ng paggana ng site kapag hindi pinagana ang JavaScript. Ang isang kapansin-pansing halimbawa ay ang pagpapadala ng mga mensahe sa Facebook.com.

Samakatuwid, umusbong ang progresibong pagpapahusay bilang tugon sa hindi magandang kalidad ng matikas na pagkasira. Ang pagdidisenyo ng gayong mga interface ay naging mas madali at mas may kalidad, dahil may malinaw na tinukoy na mga yugto para sa paglikha ng isang interface.

Sa tumutugon na disenyo ay mayroong konsepto ng "mobile muna", na sa ilang paraan ay tumutugma sa konsepto ng progresibong pagpapahusay, dahil nangangailangan ito ng pagkilos mula sa simple hanggang sa kumplikado, mula sa mga mobile na screen hanggang sa mga desktop PC. Kaya naman ang susi sa tamang aplikasyon ng tumutugon na disenyo ng web ay nakasalalay sa kakayahan ng developer na ilapat ang mga prinsipyo ng progresibong pagpapahusay at mobile muna.

Mula sa may-akda: Ang -webkit- prefix ay napakakaraniwan sa CSS ngayon na ang ilang mga site ay tumangging gumana nang tama nang wala ito. Bagama't ang mga prefix ng css ng vendor ay naging isang malinaw na tanda ng hindi gaanong perpektong mga katangian para sa mga developer sa nakalipas na ilang taon, ito ay humantong sa Mozilla na gumawa ng isang desperado ngunit kinakailangang hakbang. Sa Firefox 46 o 47 (inilabas noong Abril o Mayo 2016), pinaplano ng Mozilla na ipakilala ang suporta para sa isang serye ng mga di-karaniwang –webkit- prefix para mapahusay ang pagiging tugma ng browser sa prefix na iyon (kahit sa mga mobile device).

Ang ideya ay hindi bago, sinusuportahan din ng Microsoft Edge ang iba't ibang -webkit- prefix para sa pagiging tugma. Nagsimulang suportahan ng Opera ang -webkit- prefix noong 2012, at pagkatapos ay lumipat sa Webkit Blink engine. Hindi binalak ng mga developer ng W3C at browser na gamitin ang prefix na ito sa pagbuo ng website:

"Opisyal na patakaran ng W3C ay nagsasaad na ang mga pang-eksperimentong katangian ay hindi dapat gamitin sa code ng site. Gayunpaman, ginagamit ito ng mga tao dahil gusto nilang gamitin ng kanilang mga site ang pinakabagong teknolohiya at magmukhang cool."— W3C page sa pag-optimize ng nilalaman para sa iba't ibang browser

Gayunpaman, palaging nais ng mga developer na ma-access ang pinakabagong mga tampok sa lalong madaling panahon. Binaligtad ng mga prefix ng vendor ang lahat at nagbigay ng dominante sa Webkit, ngunit naniniwala ako na ang mga prefix ay may malaking epekto sa mabilis na pag-unlad ng Internet.

Ang mga pamamaraan ng Mozilla at Microsoft ay makakasama lamang sa karamihan ng mga site. Karamihan sa mga site ay magkakaroon na ng –moz- prefix na pinagana, o makikita na sa bagong update, susuportahan ng Mozilla ang mga bagong property nang hindi na kailangang gumawa ng mga pagbabago. Gayunpaman, bilang mga propesyonal na web developer, kailangan nating ilagay ito at maunawaan na ang ilang mga disenyo ay maaaring magdulot ng magkahalong resulta. Maaaring alam mo na kung alin sa iyong mga proyekto ang masisira ng update na ito. Mga web developer, oras na para pag-isipang muli ang iyong diskarte sa mga prefix ng vendor at subukan ang mga ito sa mga site.

Mga bagong prefix

Isasama ng Mozilla ang ilang –webkit- prefix. Mula sa aking nakalap, lumalabas na ang Mozilla ay walang intensyon na itugma ang listahan nito sa mga katangian ng Edge. Hindi lahat ng property ay kailangang tugma sa Mozilla engine. Kabilang sa mga prefix na idaragdag ni Mozilla, batay sa page ng Compatibility/Mobile/Non Standard Compatibility wiki, ay ang mga sumusunod:

Webkit - para sa mga gradient

Webkit-transforms

Webkit-transition

Webkit-hitsura

Webkit-background-clip

Webkit-device-pixel-ratio

Webkit-animation

Ang ilang iba pang mga katangian ay maaaring nasa @-webkit-keyframes.

Magiging kritikal ang pagsubok sa cross-browser

Kung ikaw, isang web developer, ay hindi nagsama ng -moz- prefix upang hindi subukan ang mga bagong CSS properties sa Firefox, at ang deadline ay nalalapit na, at pinipilit ka ng kliyente na idagdag ang prefix na ito, pagkatapos ay kailangan mong muling subukan ang site sa Firefox 46 o 47. Ipapalabas ang mga bersyong ito sa Abril o Mayo, kaya may oras ka pa.

Upang subukan ang iyong website nang hindi naghihintay para sa Firefox 46/47, maaari mong paganahin ang mga pagbabagong ito sa Firefox Nightly sa pamamagitan ng pagtatakda ng layout.css.prefixes.webkit sa about:config. Kung mayroon kang pinakabagong bersyon ng Nightly na naka-install, ang default ay dapat totoo. Hindi pa gumagana ang lahat ng -webkit- prefix na pagbabago sa Firefox Nightly, ngunit isa pa rin itong magandang lugar upang subukan kung ano ang magiging hitsura ng iyong site sa lalong madaling panahon. Maghihintay ako hanggang Marso bago seryosong subukan ang site sa Firefox Nightly.

Higit sa lahat, binibigyang-kahulugan at ipinapakita na ng Microsoft Edge ang mga prefix na -webkit- sa katulad na paraan. Nangangahulugan ito na ang anumang mga istilo ng WebKit sa iyong site ay ipinapakita na sa isang browser na ganap na hindi inaasahan. Kung hindi ka pa nakakagamit ng browser na ito, pagkatapos ay i-install ang Windows 10 at makakuha ng access dito sa mga site ng pagsubok.

Unti-unting nawawala ang mga prefix ng vendor

Sa kabutihang palad, ang mga prefix ng vendor ay unti-unting nawawala habang ang mga development team ay nakakahanap ng mga bagong solusyon. Medyo binago ng koponan ng Chrome/Blink ang kanilang diskarte:

"Sa pasulong, sa halip na i-enable ang mga prefix ng vendor bilang default, pananatilihin namin ang mga regular na property sa likod ng flag na 'paganahin ang mga pang-eksperimentong web platform properties' sa about:flags hanggang sa paganahin ang mga property bilang default."— Ang Chrome/Blink Team

Ang koponan ng Firefox ay sumunod sa isang katulad na landas: "Ang pangunahing direksyon ng trabaho sa Mozilla ngayon ay ang paglayo sa mga prefix ng vendor, sa pamamagitan ng hindi pagpapagana sa kanila o paglilipat sa mga ito sa estado ng mga regular na ari-arian kung sila ay matatag na. Ito ay hindi bababa sa aming pangkalahatang patakaran ay nararapat sa mga pagbubukod. »— Boris mula sa Mozilla

Tina-target din ng Microsoft Edge ang pag-alis ng suporta sa prefix: "Sinusubukan din ng Microsoft na alisin ang mga prefix ng vendor sa Edge. Nangangahulugan ito na ang mga developer ay hindi na kailangang magdagdag ng isang espesyal na prefix para sa Edge browser kapag gumagamit ng mga espesyal na HTML5 tag o CSS property. Sa halip, magsusulat ang mga developer ng karaniwang code."— Mashable

Hindi na gumagana ang magandang pagkasira gamit ang mga prefix

Ang paglayo sa mga prefix ng vendor ay nangangahulugan lamang ng isang bagay - ang pamamaraan ng kaaya-ayang pagkasira sa pamamagitan ng mga prefix ay hindi na isang opsyon. Ang paghihiwalay ng mga partikular na browser sa pamamagitan ng mga prefix ng vendor (halimbawa, para sa Chrome) ay hindi ang layunin ng mga prefix na ito; Palaging hinihikayat ang mga developer na gamitin ang lahat ng prefix (–webkit- to –o-). Kung gumagamit ka ng anumang functionality na gumagana sa mga property na may mga prefix ng vendor, at ginamit mo rin ang magandang diskarte sa pagkasira sa iyong disenyo para sa iba pang mga browser, hindi na ito gumagana.

Konklusyon

Nagbabago ang panahon. Ang pangingibabaw ng WebKit ay hindi sinasadya at nagdulot ng kaguluhan at hindi pagkakatugma sa Internet. Ang ibang mga browser ay naghahanap upang palawigin ang pagiging tugma sa pamamagitan ng pagdaragdag ng –webkit- prefix. Unti-unti, sa pagkawala ng mga prefix ng vendor, mawawala din ang problemang ito. Dapat suriin ng mga developer kung ang paggamit ng mga prefix ay hindi nagdudulot ng hindi kanais-nais na mga kahihinatnan sa mga hindi WebKit na browser.

Matagal na akong hindi nagsusulat, kailangan kong lumipat sa isang lugar na walang Internet (nakakatakot iyan), bilang isang resulta kung saan hindi ako makapagsulat sa blog. Ngayon gusto kong pag-usapan ang paraan ng pag-unlad (layout), na bahagyang ginagamit sa disenyo ng aking blog.

Ang pinakabagong mga bersyon ng mga makabagong browser (tulad ng FF 3.5, Opera 10) ay nagpakilala ng ilang mga pandekorasyon na epekto mula sa ipinanukalang CSS 3 na detalye, ang mga anino at ang zebra (striping) na epekto ay magagamit na nang walang paggamit ng JavaScript o karagdagang markup. Ngunit ang ilang mga mas lumang browser na ginagamit pa rin ay walang mga tampok na ito, at nakakalungkot isipin na hindi ka magkakaroon ng pagkakataong gamitin ang mga magagandang epekto na ito sa loob ng ilang taon.

Sa artikulong ito, pag-uusapan ko kung paano gumawa ng magagandang (incremental) na mga pagpapabuti sa mga browser na sumusuporta sa mga feature ng CSS3 at nagbibigay pa rin ng kasiya-siyang layout para sa ibang mga user.

Ano ang progresibong pagpapahusay?

Upang maunawaan ang konsepto ng "unti-unting pagpapabuti", kailangan mong maunawaan ang prinsipyo ng "graceful degradation", na mahusay na inilarawan ng sumusunod na quote:

Ang mahinang pagkasira ay nangangahulugan na ang iyong site ay patuloy na gumagana kahit na tiningnan sa isang mas mababa sa pinakamainam na browser kung saan ang mga advanced na epekto ay hindi gumagana.
Fluid Thinking, ni Peter-Paul Koch

Ang "Incremental improvement" ay gumagamit lamang ng parehong paraan mula sa kabilang panig, sa halip na mag-alala tungkol sa site na hindi bumagsak sa isang lumang browser, kailangan mo munang isipin ang nilalaman at magdagdag lamang ng mga tampok ng mga modernong programa sa disenyo upang mapabuti ang user karanasan, habang gumagana pa rin ang pangunahing layout ng estado sa mga mas lumang makina. Ito ang kasalukuyang pinakamahusay na paraan upang gamitin ang mga bagong feature ng CSS 3.

Halimbawa

Bilang halimbawa, gumawa tayo ng simpleng menu ng nabigasyon na magmumukhang mas maganda nang kaunti depende sa suporta ng CSS sa iyong browser.

Gusto kong tandaan na sa halimbawang ito ay hindi ako gumagamit ng mga graphics, hack o prefix na tukoy sa browser - lahat ng mga pagpapabuti ay dahil sa ipinahayag na mga kakayahan. Sa pag-iisip na iyon, ang ilan sa mga bagay sa ibaba ay para lamang sa mga layuning halimbawa, at maaaring hindi ito ang pinakamahusay na pagpipilian para sa paglikha ng mga aktwal na website.

Pagmamarka

Gumawa tayo ng simpleng menu gamit ang isang unordered list (ul):

• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum

Pangunahing istilo

Bilang batayan, gagamit ako ng isang istilo na gumagamit lamang ng mga simpleng layering selector. Lumilikha ito ng hangganan para sa bawat elemento at binabago ang background kapag ini-hover ang mouse (onmouseover). Dapat itong gumana sa anumang browser na ginawa sa nakalipas na 7-8 taon (at posibleng higit pa).

Ang CSS ay napaka-simple:

Ul (
kulay ng background: asul;
border-bottom: 1px na may tuldok #999;
list-style: wala;
margin: 15px;
lapad: 150px;
}

li (
kulay ng background: #fff;
hangganan: 1px na may tuldok #999;
border-bottom-width: 0;
font: 1.2em/1.333 Verdana, Arial, sans-serif;
}

li a (
kulay itim;
display: block;
taas: 100%;
padding: 0.25em 0;
text-align: center;
text-dekorasyon: wala;
}

li a:hover (kulay ng background: #efefef; )

Ang kakaiba lang dito ay ang asul na background

; Ipapaliwanag ko ito mamaya. Sa istilong ito, magkakaroon tayo ng sumusunod na pangunahing view, ipapakita ito sa IE6 tulad nito:

Basic na layout, ito ang magiging hitsura nito sa IE6 at iba pang mas lumang mga browser.

Paglalapat ng mga pagpapabuti

Ang IE7 ang una sa serye ng IE ng mga browser na sumuporta sa lahat ng mga tagapili ng katangian mula sa CSS 2.1, na karaniwan din sa halos lahat ng iba pang mga browser. Maaari naming gamitin ang isa sa kanila - ang tagapili ng bata - upang simulan ang pagpapabuti. Dahil hindi sinusuportahan ng IE6 ang mga child selector, babalewalain nito ang mga sumusunod na panuntunan:

Body > ul ( lapad ng hangganan: 0; )

ul > li (
hangganan: 1px solid #fff;
lapad ng hangganan: 1px 0 0 0;
}

li > a (
kulay ng background: #666;
kulay puti;
font-weight: bold;
}

li:first--child a (kulay: dilaw; )

li > a:hover (kulay ng background: #999; )

Sa mga panuntunang ito ng CSS, ganito ang hitsura ng listahan:



Ang menu ay mayroon na ngayong may kulay na background at naka-bold na teksto, at ang unang link ay naka-highlight sa ibang kulay.

Ito ay kung paano ipapakita ng IE7, Firefox, Safari at Opera ang listahan.

Bigyan natin ng higit na diin

Ang susunod na hakbang ay pataasin ang diin gamit ang isang property na hindi kinikilala ng IE: Transparency. Hindi namin kailangang gumamit ng mga espesyal na tagapili para dito, dahil Lalaktawan lang ng IE ang property na hindi nito sinusuportahan:

Li (opacity: 0.9; )

li:hover ( opacity: 1; )

Ipinapakita ng sumusunod na larawan kung paano gumagana ang property na ito sa Opera, makikita mo na ang mga item sa listahan ay nakakuha ng bahagyang asul na tint mula sa background

. Sa mouseover, ang bawat elemento ay nagiging ganap na malabo:



Siyempre, maaari mong gamitin ang sariling pag-aari ng filter ng IE para sa parehong epekto sa IE pati na rin ang mga prefix na tukoy sa browser (-moz-, -webkit-) para sa mga katangian sa ibaba. dahil hindi karaniwang property ang filter, hindi ito wasto.

Sinusuportahan ng Firefox 2 ang transparency, ngunit sa mga susunod na browser ay maaari pa tayong pumunta nang higit pa. Sa Safari at Opera, maaari naming palamutihan ang text gamit ang text-shadow property:

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

Tulad ng ipinapakita ng sumusunod na larawan, ang elemento ay may bahagyang anino sa pag-hover at lumilitaw na bahagyang nakausli mula sa pahina:



Sa wakas, masisiguro mong ganap na sinusuportahan ng Opera ang mga bagong tagapili ng CSS 3 at magdagdag ng isa pang layer ng mga pagpapabuti: mga variable ng kulay ng background gamit ang nth-child selector:

Li:nth-child(2n+1) a ( background-color: #333; )

li:nth-child(n) a:hover (
kulay ng background: #aaa;
kulay: #000;
}

li:first--child > a:hover (kulay: dilaw; )

Makakakita kami ng isang guhit na menu sa Opera:



Buod at konklusyon

Ipinapakita ng larawan sa ibaba kung ano ang hitsura ng paunang markup sa IE6, IE7, Firefox, Safari at Opera, pagkatapos ilapat ang mga panuntunan ng CSS na inilarawan sa artikulong ito. Gaya ng nakikita mo, habang nagiging mas sopistikado ang suporta ng browser para sa CSS, nagiging mas naka-istilo at kumplikado ang mga menu, at gamit ang mga incremental na diskarte sa pagpapahusay, nananatiling gumagana ang mga menu kahit sa napakatandang browser.



Siyempre, maraming mga browser ang may isang string ng iba pang mga katangian na hindi ko pa sakop dito ngunit magagamit iyon, tulad ng mga kulay ng RGBA at SVG bilang mga kulay ng background.

Talaan ng mga Nilalaman:

Ang -webkit- prefix ay nangingibabaw sa CSS na ang ilang mga site ay hindi gumagana nang maayos kung wala ito. Ipinahihiwatig nito na hindi sinunod ng mga developer ang pinakamahuhusay na kagawian sa mga nakaraang taon at ito ay humantong sa isang kapus-palad, ngunit halos sapilitang desisyon sa bahagi ng Mozilla. Sa bersyon 46 o 47 ng Firefox (ito ay Abril o Mayo 2016), pinaplano ng Mozilla na magpatupad ng suporta para sa hindi karaniwang -webkit- prefix upang mapabuti ang pagiging tugma ng Firefox sa mga site na aktibong gumagamit ng -webkit (karaniwan ay mga site na unang-mobile).

Gayunpaman, ang mga developer ay gumagamit ng mga prefix upang magamit ang pinakabagong mga tampok ng browser sa lalong madaling panahon. Ang mga prefix ay nagdulot ng pagkalito sa pangingibabaw ng WebKit, ngunit pinilit din nila ang web na sumulong sa isang pinabilis na bilis.

Ang diskarte ng Mozilla at Microsoft ay ligtas para sa karamihan ng mga site. Maraming mga site ang gagamit ng -moz- prefix o hindi nangangailangan ng aksyon upang maging tugma sa isang pag-update ng Firefox sa hinaharap. Ngunit bilang mga propesyonal na web developer, dapat nating maingat na isaalang-alang at maunawaan kung ano ang mga kahihinatnan nito. Malamang na alam mo kung alin sa iyong mga site ang maaaring maapektuhan ng update na ito.

Kaya, oras na para pag-isipang muli ang diskarte sa mga prefix at mga site ng pagsubok sa kanila.

Mga Sinusuportahang Prefix

Mayroong ilang mga -webkit- prefix na maaaring ipatupad ng Mozilla. Mula sa kung ano ang aking nakalap, Mozilla ay hindi malamang na tumugma sa listahan ng mga suportadong prefix na katangian sa Edge's, dahil hindi lahat ng mga ito ay kailangan para sa layout engine compatibility.

Ang mga developer ng Firefox ay malapit din sa isang katulad na diskarte:

Ang kasalukuyang trend sa Mozilla ay ang pag-iwas sa mga prefix ng vendor sa pamamagitan ng hindi pagpapagana ng mga hindi prefix na property at paggamit ng hindi prefix na bersyon na may sapat na katatagan. Ito ay isang pangkalahatang patakaran: maaaring malapat ang mga pagbubukod sa ilang mga kaso - Boris mula sa Mozilla

Aalisin din ng Microsoft Edge ang mga prefix ng vendor:

"Aalisin din ng Microsoft ang mga prefix ng vendor sa Edge. Nangangahulugan ito na ang mga developer na gustong gumamit ng mga partikular na feature ng HTML at CSS ay hindi gagamit ng prefix na tukoy sa Edge. Sa halip, magsusulat lang sila ng code ayon sa mga pamantayan” - Mashable

Wala nang unti-unting pagkasira batay sa mga prefix

Ang paglipat na ito mula sa mga prefix ng vendor ay nangangahulugan ng isang bagay - ang unti-unting pagkasira gamit ang mga prefix ng vendor ay walang mga prospect.

Ang paggamit ng mga prefix ng vendor upang maglapat ng mga istilo para sa isang partikular na browser (halimbawa, Chrome lang) ay hindi layunin ng pagpapakilala sa mga ito; Ang rekomendasyon para sa mga developer ay palaging gamitin ang lahat ng prefix (mula sa -webkit- hanggang -o-). Kung gumagamit ka ng mga feature na nakadepende sa mga katangian ng prefix at gumagamit ng mga prefix upang unti-unting pababain ang iyong disenyo sa ibang mga browser, hindi na ito gagana.

Konklusyon

Nagbabago ang panahon. Ang pangingibabaw ng WebKit ay hindi sinasadyang humantong sa mga problema sa hindi pagkakatugma, na pumipilit sa ibang mga vendor ng browser na ipatupad ang -webkit- prefix. Matatapos ang isyung ito habang inalis ng mga vendor ng browser ang mga prefix ng vendor, ngunit pansamantala dapat tiyakin ng mga developer na ang mga prefix ay hindi magdudulot ng mga hindi inaasahang resulta sa mga browser na hindi WebKit.