Tekniikat css:n asteittaiseen hajoamiseen. Mitä on siro huononeminen web-suunnittelussa? Graceful degradation käyttämällä etuliitteitä ei enää toimi

Kirjailijalta:-Webkit-etuliite on nykyään niin yleinen CSS:ssä, että jotkut sivustot kieltäytyvät toimimasta oikein ilman sitä. Vaikka kehittäjille, myyjän css-etuliitteet ovat viimeisten parin vuoden ajan merkinneet suoraa merkkiä, ei aivan täydellinen työ Tämä sai Mozillan ottamaan epätoivoisen mutta välttämättömän askeleen. Firefox 46:ssa tai 47:ssä (julkaistu huhti- tai toukokuussa 2016) Mozilla aikoo ottaa käyttöön tuen useille ei-standardeille -webkit-etuliitteille parantaakseen selaimen yhteensopivuutta kyseisen etuliitteen kanssa (jopa mobiililaitteissa).

Idea ei ole uusi Microsoft Edge tukee myös erilaisia ​​-webkit- etuliitteitä yhteensopivuuden varmistamiseksi. Opera aloitti -webkit- etuliitteiden tukemisen vuonna 2012 ja siirtyi sitten Webkit Blink -moottoriin. W3C ja selainkehittäjät eivät aikoneet käyttää tätä etuliitettä verkkosivustojen kehityksessä:

"Virallinen W3C-käytäntö sanoo, että kokeellisia ominaisuuksia ei saa käyttää sivuston koodissa. Ihmiset kuitenkin käyttävät niitä, koska he haluavat, että heidän sivustonsa käyttävät uusinta teknologiaa ja näyttävät siistiltä."- W3C-sivu sisällön optimoinnista eri selaimet

Kehittäjät haluavat kuitenkin aina käyttää uusimpia ominaisuuksia mahdollisimman nopeasti. Myyjien etuliitteet käänsivät kaiken ylösalaisin ja antoivat Webkitille dominanssin, mutta uskon, että etuliitteillä oli valtava vaikutus Internetin nopeaan kehitykseen.

Mozillan ja Microsoftin menetelmät vahingoittavat vain useimpia sivustoja. Useimmilla sivustoilla on jo -moz-etuliitteet käytössä, tai ne huomaavat, että uuden päivityksen myötä Mozilla tukee uusia ominaisuuksia ilman tarvetta tehdä muutoksia. Ammattimaisena web-kehittäjinä meidän on kuitenkin saatava tämä rauhaan ja ymmärrettävä, että jotkin mallit voivat tuottaa ristiriitaisia ​​tuloksia. Saatat jo tietää, mitkä projekteistasi tuhoutuvat tämän päivityksen seurauksena. Verkkokehittäjät, on aika harkita uudelleen lähestymistapaasi toimittajan etuliitteisiin ja testata niitä sivustoilla.

Uudet etuliitteet

Mozilla aikoo sisällyttää joukon -webkit-etuliitteitä. Keräykseni perusteella näyttää siltä, ​​​​että Mozillalla ei ole aikomusta sovittaa luetteloaan Edgen ominaisuuksiin. Kaikkien ominaisuuksien ei tarvitse olla yhteensopivia Mozilla-moottorin kanssa. Mozillan lisäämien etuliitteiden joukossa Yhteensopivuus/Mobiili/Ei vakioyhteensopivuus -wiki-sivun perusteella ovat seuraavat:

Webkit - kaltevuudet

Webkit-muuntuu

Webkit-siirtymät

Webkit-ulkonäkö

Webkit-tausta-leike

Webkit-laite-pikselisuhde

Webkit-animaatio

Jotkut muut ominaisuudet voivat olla @-webkit-keyframesissa.

Selaimien välinen testaus on kriittistä

Jos sinä, verkkokehittäjä, et lisännyt etuliitettä -moz-, jotta et testaisi uusia CSS-ominaisuuksia Firefoxissa, ja määräaika lähestyy ja asiakas pakottaa sinut lisäämään tämän etuliiteen, sinun on testattava sivusto uudelleen. Firefox 46 tai 47. Nämä versiot julkaistaan ​​huhtikuussa tai toukokuussa, joten sinulla on vielä aikaa.

Testaaksesi verkkosivustoasi odottamatta Firefox 46/47:ää, voit ottaa nämä muutokset käyttöön Firefox Nightlyssa asettamalla layout.css.prefixes.webkit kohtaan about:config. Jos sinulla on uusin Nightly-versio asennettuna, oletusarvon pitäisi olla tosi. Kaikki -webkit-etuliitemuutokset eivät vielä toimi Firefox Nightlyssa, mutta se on silti hyvä paikka testata, miltä sivustosi pian näyttää. Odottaisin maaliskuuhun ennen kuin testaisin sivustoa vakavasti Firefox Nightlyssa.

Vielä tärkeämpää on, että Microsoft Edge jo tulkitsee ja näyttää -webkit-etuliitteet samalla tavalla. Tämä tarkoittaa, että kaikki WebKit-tyylit sivustossasi näkyvät jo selaimessa, mikä oli täysin odottamatonta. Jos et ole vielä työskennellyt tämän selaimen kanssa, asenna Windows 10 ja hanki pääsy siihen testisivustoille.

Myyjien etuliitteet katoavat vähitellen

Onneksi toimittajan etuliitteet häviävät vähitellen, kun kehitystiimit löytävät uusia ratkaisuja. Chrome/Blink-tiimi muutti hieman lähestymistapaansa:

"Jatkossa sen sijaan, että ottaisimme käyttöön toimittajaetuliitteet oletusarvoisesti, säilytämme tavalliset ominaisuudet Ota käyttöön kokeelliset verkkoalustan ominaisuudet -lipun takana about:flagsissa, kunnes kyseiset ominaisuudet ovat oletusarvoisesti käytössä."— Chrome/Blink-tiimi

Firefox-tiimi seurasi samanlaista polkua: ”Mozillan työskentelyn pääsuunta on nyt siirtyminen pois toimittajien etuliitteistä poistamalla ne käytöstä tai siirtämällä ne tavallisten kiinteistöjen tilaan, jos ne ovat jo vakaita. Tämä on ainakin yleinen käytäntömme; yksittäiset tapaukset ansaitsevat poikkeuksia. »- Boris Mozillasta

Microsoft Edge tähtää myös etuliitetuen poistamiseen: "Microsoft yrittää myös päästä eroon toimittajan etuliitteistä Edgessä. Tämä tarkoittaa, että kehittäjien ei tarvitse lisätä erityistä etuliitettä käyttäessään erityisiä HTML5-tageja tai CSS-ominaisuuksia. Edge-selain. Sen sijaan kehittäjät kirjoittavat vakiokoodin."– Mashable

Graceful degradation käyttämällä etuliitteitä ei enää toimi

Luopuminen toimittajan etuliitteistä tarkoittaa vain yhtä asiaa – etuliitteiden kautta tapahtuva siro degradaatiotekniikka ei ole enää vaihtoehto. Tiettyjen selainten eristäminen toimittajan etuliitteillä (esimerkiksi Chromelle) ei ollut näiden etuliitteiden tarkoitus. Kehittäjiä on aina kannustettu käyttämään kaikkia etuliitteitä (–webkit- to –o-). Jos käytät mitä tahansa toimintoja, jotka toimivat kiinteistöissä, joissa on toimittajan etuliite, ja olet myös käyttänyt siroa huononemistekniikkaa suunnittelussasi muille selaimille, tämä ei enää toimi.

Johtopäätös

Ajat muuttuu. WebKitin dominointi oli tahatonta ja aiheutti hälinää ja yhteensopimattomuutta Internetissä. Muut selaimet pyrkivät laajentamaan yhteensopivuutta lisäämällä -webkit-etuliitteet. Vähitellen, myyjän etuliitteiden katoamisen myötä Tämä ongelma. Kehittäjien tulee tarkistaa, ettei etuliitteiden käyttö aiheuta ei-toivottuja seurauksia muissa kuin WebKit-selaimissa.

Tässä artikkelissa yritämme ymmärtää eron kahden responsiiviseen web-suunnitteluun perustuvan sivun luomisen periaatteen välillä: Progressive Enhancement ja Graceful Degradation.

Suloinen huononeminen

Graceful degradation tai "viansietokyky" on laajempi käsite, joka ei koske vain web-suunnittelua. Yleisesti ottaen se tarkoittaa järjestelmän kykyä toimia, vaikka jotkin sen komponentit epäonnistuvat. Ja mitä vakavampi vika, sitä huonompi on järjestelmän tai järjestelmän kanssa työskentelyn laatu, mutta samalla järjestelmän päätoiminnot pysyvät toimintakunnossa.

Siro huonontuminen voidaan ilmaista kyvyssä työskennellä JavaScriptin ollessa pois käytöstä, sivuston tarkassa näyttämisessä selaimessa, joka ei tue CSS3-spesifikaatiota, sekä sivuston riittävänä näytössä poistettujen kuvien kanssa. Kaikkien näiden vikojen ei pitäisi vaikuttaa verkkosovelluksen toimintaan. Jos kaikki kuitenkin toimii, käyttäjän on paljon mukavampaa käyttää sivustoa.

Jos tarkastelemme erityistä esimerkkiä, esimerkiksi verkkokäyttöliittymäsuunnittelun alalla, tämä periaate voidaan muotoilla seuraavasti: "Järjestelmä voi toimia JavaScriptin ollessa kokonaan pois käytöstä, mutta JavaScriptin ollessa käytössä sen kanssa on paljon mukavampaa työskennellä." Kysymys ei ole siitä, voisiko olla tilanne, jossa JS on poissa käytöstä tai ei toimi täysin, tai miksi näin tapahtuu. Tämä tilanne on otettu itsestäänselvyytenä. Suunnittelijan on kehitettävä käyttöliittymä, joka jatkaa toimintaansa, vaikkakin JS ei ole käytössä.

Usein tämän periaatteen noudattamiseksi sinun on tehtävä palvelinpuolen lomakkeiden käsittelylogiikka uudelleen. Tämä lähestymistapa kannattaa kuitenkin, jos ajattelet vikasietoisuutta lomakesuunnitteluvaiheessa.

Graceful degradation -periaatteen noudattaminen mahdollistaa sen, että käyttäjät (ja jokainen käyttäjä on potentiaalinen asiakas) voivat työskennellä sivuston kanssa missä tahansa tilanteessa.

Progressiivinen parannus

Progressiivinen parantaminen on periaate, joka yhdessä mobiilien kanssa luo teoreettisen perustan responsiiviselle web-suunnittelulle. Sen nimi kertoo jo, että se sijoittaa verkkosivun luomisen vaiheittain, syklisesti periaatteen "yksinkertaisesta monimutkaiseen" mukaan. Jokaisessa ennalta suunnitellussa vaiheessa sivun ulkonäön tulisi muuttua kauniimmaksi, paremmaksi ja mukavammaksi, mutta kaikkien toimintojen pitäisi olla aluksi käytettävissä.

On erikoisempi tapaus suloisesta huonontumisesta , koska kaikki sille rakennetut web-sivut noudattavat täysin suloisen huonontumisen periaatetta.

Tyypillisesti sivun luominen progressiivisen parannuksen periaatteella koostuu seuraavista vaiheista:

• Sivun luominen "puhtaalta" pohjaltaHTML
  Tässä vaiheessa luodaan täysin toimiva sivu, joka koostuu vain HTML-koodista, joka on semanttisesti ja loogisesti oikea, ja siksi sitä voi tulkita mikä tahansa selain, jopa yksinkertaisin. Tässä vaiheessa muotoilua ei suoriteta ja selain itse muotoilee sivun siihen sisältyvien standardien mukaisesti. Progressiivinen parantaminen vaatii, että ensimmäinen vaihe on tärkein, koska verkossa ei ole mitään arvokkaampaa kuin sisältö.
  Lyhyt: semanttisen ja loogisen dokumenttirakenteen luominen
• Sääntöjen lisääminenCSS
  Tässä vaiheessa käytetään vanhan muodon CSS-taulukkoa: merkintäruudukko lisätään, elementit sijoitetaan, taustakuvia lisätään lohkoihin, tyylejä, värejä ja tekstityylejä muutetaan. Yleisesti ottaen sivu saa uuden tyylitellyn ilmeen, kauniimmaksi ja miellyttävämmäksi.
  Lyhyt: antaa asiakirjan vaikutelman
• CSS3:n käyttö
  Nyt voit käyttää kaikkia CSS3-spesifikaation tarjoamia tehosteita ja parannuksia dokumenttiin. Eli lisää läpikuultavuutta, varjoja, pyöristettyjä kulmia lohkoille, sileitä animoituja siirtymiä pseudo-luokille tai lomakeelementeille.
  Lyhyt: antaa täydellisyyttä ulkomuoto asiakirja
• Skriptien luominen päälläJavaScript
  Tässä vaiheessa kaikki verkkosivun ja käyttäjän vuorovaikutuksen vaikutukset ja periaatteet luodaan JavaScriptin avulla. Näitä ovat AJAX-pyynnöt, dynaaminen lataus tai tietojen validointi, animaatiotehosteet ja widgetit (esimerkiksi Prototype tai jQuery). Yleisesti ottaen teemme sivusta käyttäjäystävällisemmän.
  Lyhyt: vuorovaikutus, vuorovaikutus, mukavuus

Yritetään soveltaa tätä lähestymistapaa käytännössä. Kehitämme ja suunnittelemme yksinkertaisin muoto kirjaudu sisään sivustolle. Ensimmäisessä vaiheessa luomme kirjautumislomakkeen puhtaalla HTML:llä. Muoto ei ole niin kaunis, mutta se on täysin toimiva. Alla on sivun koodi ja tulos, joka näkyy selaimessa:

Nyt toisessa vaiheessa annamme lomakkeelle tyylin soveltamalla siihen tyylitaulukkoa, joka sisältää vain ne säännöt, jotka soveltuvat CSS:ään ilman erityisiä ominaisuuksia. Lisätään taustaväri, täyte, tasaus. Nyt muoto näyttää paremmalta:

Lisätään nyt säännöt CSS3-spesifikaatiosta. Lisätään lohkoihin kulmia, varjoja tekstinsyöttökentille, muotoillaan painikkeen tyyli ja poistetaan ylhäältä tarpeettomat täytteet uusilla valitsimilla. Saamme parannetun lomakkeen:

Viimeisessä vaiheessa voimme luoda AJAX-pyynnön, jotta käyttäjä pääsee sivulle lataamatta sivua uudelleen.

Tässä tapauksessa jokaisessa vaiheessa (jos selain tukee sitä) näytetään täysin toimiva sivu. Mutta jos selain tukee kehittyneempiä tekniikoita, sivu vain paranee.

Mitä periaatetta kannattaa noudattaa?

Jos kohde rakennetaan mahdollisimman tehokkaasti graceful degradation -käsitteen mukaisesti, lopputulos on suunnilleen sama kuin tapahtuisi, jos käytettäisiin progressiivista parantamista. Mitä eroa sitten on?

Tosiasia on, että verkkosivuston rakentaminen siron hajoamisen periaatteeseen on melko vaikeaa, koska harvat kehittäjät voivat tehdä sen tehokkaasti. Yksinkertaisimmassa hienon huonontumisen tapauksessa voit tehdä seuraavaa: rakentaa sivusto selaimen uusimmalle versiolle ja näyttää sitten käyttäjille viesti, jossa kerrotaan, että heidän on ladattava uusi versio selain. Samaan aikaan kehittäjät eivät välttämättä välitä siitä, miltä sivusto näyttää vanhemmilla selaimilla. Toinen esimerkki huonosta laadukkaasta heikkenemisestä on sivuston toimintojen täydellinen poistaminen käytöstä, kun JavaScript on poistettu käytöstä. Silmiinpistävä esimerkki on viestien lähettäminen Facebook.comissa.

Siksi asteittainen parannus syntyi vastauksena huonolaatuiseen sirolliseen heikkenemiseen. Tällaisten rajapintojen suunnittelusta on tullut helpompaa ja laadukkaampaa, koska rajapinnan luomisessa on selkeästi määritellyt vaiheet.

Mukautuvassa suunnittelussa on käsite "mobiili ensin", joka jollain tavalla vastaa progressiivisen tehostamisen käsitettä, koska se vaatii toimintaa yksinkertaisesta monimutkaiseen, mobiilinäytöt pöytätietokoneisiin. Siksi avain oikea käyttö Responsiivinen web-suunnittelu riippuu kehittäjän kyvystä soveltaa progressiivisen parantamisen periaatteita ja ensin mobiilia.

Varmasti, Internet Explorer sisältää suuren määrän virheitä eri versioita, mutta ehdollisten kommenttien avulla voit taistella niitä vastaan ​​ja saada ne pois. Mutta mitä mikään ei voi korjata, on se, että IE on toivottoman vanhentunut. Vaikka muut selaimet sisältävät yhä enemmän CSS3-ominaisuuksia ja tukevat erilaisia ​​uusia teknologioita, IE merkitsee aikaa. IE9:n julkaisu ei ratkaise ongelmaa, aiemmat versiot tämä ei haihdu yössä. Tällaisessa tilanteessa paras ratkaisu tapahtuu hienoa heikkenemistä - periaate suorituskyvyn ylläpitämisestä, kun jokin toiminnoista katoaa.

Katsotaanpa tätä tekniikkaa pienellä esimerkillä, jossa teksti näytetään lohkossa ja painikkeessa. Lohkossa ja painikkeessa on pyöristetyt kulmat, ja lohkoon on myös lisätty pieni varjo. Toistaiseksi CSS3:n selaimet käyttävät pääasiassa tiettyjä ominaisuuksia omilla etuliitteillään:

• Firefox - ominaisuudet alkavat -moz-;
• Safari ja Chrome - ominaisuudet alkavat -webkit-;
• Opera - ominaisuudet alkavat -o-.

Näiden selainten eri versiot voivat ymmärtää joitakin ominaisuuksia sekä etuliitteen kanssa että ilman, joten yleisyyden vuoksi ne lisäävät useita ominaisuuksia kerralla. Joten, jotta voimme luoda pyöristetyt kulmat, tarvitsemme seuraavan tyylin.

Moz-reunan säde: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari ja Chrome */ border-radius: 10px; /* Operalle ja IE9:lle */

Vaikka näiden ominaisuuksien käyttö johtaa virheelliseen CSS-koodi, tässä tapauksessa on tärkeämpää työskennellä Firefox selaimet 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9 sekä niiden vanhemmat versiot. Esimerkki 1 näyttää, kuinka CSS3-ominaisuuksien avulla luodaan varjoja ja pyöristettyjä kulmia.

Esimerkki 1. Lohko varjolla

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

Esimerkin tulos näkyy kuvassa. 1.

Riisi. 1. Estä näkymä Safarissa

Sama esimerkki IE8-selaimessa ja alla on esitetty kuvassa. 2.

Riisi. 2. Estä näkymä IE8:ssa

Vaikka elementtien ulkoasu eroaa yksityiskohdista, sivun toimivuus kokonaisuutena pysyy samana. Painiketta voi napsauttaa, teksti pysyy samana, mukaan lukien sen väri ja tausta, eikä näyttöön tule virheitä. Itse asiassa ero on vain pienissä asioissa, jotka suorittavat enemmän koristeellisia kuin käytännön toimintoja. Kaikki suloisen degradaation periaatteet täyttyvät.

Mitä tämä lähestymistapa antaa käytännössä?

• Voit käyttää aktiivisesti CSS3:n koristeellisia ominaisuuksia selaimesta riippumatta.
• Motivoi käyttämään erilaisia ​​CSS3-efektejä.
• Se helpottaa kehittäjän elämää huomattavasti, koska hänen ei enää tarvitse etsiä ratkaisuja vanhentuneisiin selaimiin.
• Nopeuttaa työn tuottavuutta.

Siro hajoaminen ei tietenkään aina sovellu. Jos asetteluvaatimukset osoittavat tuen vanhemmille versioille, sinun on etsittävä vaihtoehtoisia ratkaisuja, esimerkiksi käyttämällä kuvia pyöristetyille kulmille. Mutta suurimmaksi osaksi asettelun vaatimukset asetetaan ottamatta huomioon yleistä tilannetta. Ja jos vertaamme kaikkia siron huonontumisen etuja haittoon, joka ilmenee vain siinä, että vanhentuneet selaimet, erityisesti IE8, eivät näytä sivua tarpeeksi "kauniisti", sympatiat ovat edistyksen puolella.

En ole kirjoittanut pitkään aikaan, jouduin muuttamaan paikkaan, jossa ei ollut Internetiä (se on kauheaa), minkä seurauksena en voinut kirjoittaa blogiin. Tänään haluan puhua kehitys (layout) menetelmästä, jota käytetään osittain blogini suunnittelussa.

SISÄÄN uusimmat versiot Innovatiiviset selaimet (kuten FF 3.5, Opera 10) ovat ottaneet käyttöön joitain koristeellisia tehosteita ehdotetusta CSS 3 -spesifikaatiosta. Läpinäkyvyys, varjot ja seepra (raitaefekti) ovat nyt saatavilla ilman JavaScriptin käyttöä tai lisämerkintöjä. Mutta joissakin vanhemmissa selaimissa, jotka ovat edelleen käytössä, ei ole näitä ominaisuuksia, ja olisi surullista ajatella, että sinulla ei ole mahdollisuutta käyttää näitä upeita tehosteita vielä muutamaan vuoteen.

Tässä artikkelissa puhun siitä, kuinka voit tehdä mukavia (asteittain) parannuksia selaimiin, jotka tukevat CSS3-ominaisuuksia ja tarjoavat silti tyydyttävän asettelun muille käyttäjille.

Mitä on progressiivinen parantaminen?

Ymmärtääksesi "asteittaisen parannuksen" käsitteen, sinun on ymmärrettävä "suoloisen degradaation" periaate, joka kuvataan hyvin seuraavassa lainauksessa:

Lievä huonontuminen tarkoittaa, että sivustosi toimii edelleen, vaikka sitä katsottaisiin vähemmän kuin optimaalisella selaimella, jossa edistyneet tehosteet eivät toimi.
Fluid Thinking, kirjoittanut Peter-Paul Koch

"Inkrementaalinen parantaminen" käyttää samaa menetelmää vain vastakkaiselta puolelta, sen sijaan, että huolehdit sivuston hajoamisesta vanhassa selaimessa, sinun on ensin mietittävä sisältöä ja yksinkertaisesti lisättävä suunnitteluun nykyaikaisten ohjelmien ominaisuuksia käyttäjän parantamiseksi. kokemus, kun taas perustilan asettelu toimii edelleen vanhemmissa koneissa. Tämä on tällä hetkellä paras tapa käyttää CSS 3:n uusia ominaisuuksia.

Esimerkki

Tehdään esimerkiksi yksinkertainen navigointivalikko, joka näyttää hieman kauniimmalta selaimesi CSS-tuesta riippuen.

Haluan huomauttaa, että tässä esimerkissä en käytä grafiikkaa, hakkereita tai selainkohtaisia ​​etuliitteitä - kaikki parannukset johtuvat ilmoitetuista ominaisuuksista. Tätä silmällä pitäen jotkin alla olevista asioista ovat vain esimerkkitarkoituksia, eivätkä välttämättä ole paras valinta todellisten verkkosivustojen luomiseen.

Merkintä

Tehdään yksinkertainen valikko järjestämättömällä listalla (ul):

• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum

Perustyyli

Käytän pohjana tyyliä, joka käyttää vain yksinkertaisia ​​kerrosvalitsimia. Se luo reunuksen jokaiselle elementille ja vaihtaa taustaa, kun hiirtä liikutetaan (onmouseover). Tämän pitäisi toimia kaikissa selaimissa, jotka on tehty viimeisten 7-8 vuoden aikana (ja mahdollisesti useammankin vuoden aikana).

CSS on hyvin yksinkertainen:

Ul(
taustaväri: sininen;
border-bottom: 1px katkoviiva #999;
listatyyli: ei mitään;
marginaali: 15px;
leveys: 150 pikseliä;
}

li (
taustaväri: #fff;
reunus: 1px katkoviiva #999;
raja-ala-leveys: 0;
fontti: 1.2em/1.333 Verdana, Arial, sans-serif;
}

li a (
väri musta;
näyttö: lohko;
korkeus: 100%;
pehmuste: 0,25em 0;
tekstin tasaus: keskellä;
tekstikoristelu: ei mitään;
}

li a:hover ( taustaväri: #efefef; )

Ainoa outo asia tässä on sininen tausta

; Selitän tämän myöhemmin. Tällä tyylillä meillä on seuraava perusnäkymä, se näkyy IE6:ssa seuraavasti:

Perusasettelu, tältä se näyttää IE6:ssa ja muissa vanhemmissa selaimissa.

Parannusten käyttöönotto

IE7 oli ensimmäinen IE-selainsarjassa, joka tuki kaikkia CSS 2.1:n attribuuttien valitsimia, mikä on myös yleistä lähes kaikissa muissa selaimissa. Voimme käyttää yhtä niistä - lapsivalitsinta - aloittaaksemme parantamisen. Koska IE6 ei tue lapsivalitsimia, se jättää huomiotta seuraavat säännöt:

Runko > ul ( reunuksen leveys: 0; )

ul > li (
reuna: 1px kiinteä #fff;
reunan leveys: 1px 0 0 0;
}

li > a (
taustaväri: #666;
väri valkoinen;
fontin paino: lihavoitu;
}

li:first--lapsi a ( väri: keltainen; )

li > a:hover ( taustaväri: #999; )

Näillä CSS-säännöillä luettelo näyttää tältä:



Valikossa on nyt värillinen tausta ja lihavoitu teksti, ja ensimmäinen linkki on korostettu eri värillä.

Näin IE7, Firefox, Safari ja Opera näyttävät luettelon.

Laitetaan enemmän painoarvoa

Seuraava askel on lisätä painotusta käyttämällä ominaisuutta, jota IE ei tunnista: Transparency. Meidän ei tarvitse käyttää erityisiä valitsimia tähän, koska IE yksinkertaisesti ohittaa ominaisuuden, jota se ei tue:

Li (opasiteetti: 0,9; )

li:hover (opasiteetti: 1; )

Seuraava kuva näyttää kuinka tämä ominaisuus toimii Operassa, näet, että listan kohteet ovat saaneet hieman sinisen sävyn taustasta

. Kun hiiren osoitinta siirretään, jokainen elementti muuttuu täysin läpinäkymättömäksi:



Voit tietysti käyttää IE:n omaa suodatinominaisuutta samaan tehosteeseen IE:ssä. Sekä selainkohtaisia ​​etuliitteitä (-moz-, -webkit-) alla oleville ominaisuuksille. Mutta opetustarkoituksiin pysyn CSS-standardissa, koska suodatin ei ole vakioominaisuus, se ei ole kelvollinen.

Firefox 2 tukee läpinäkyvyyttä, mutta myöhemmissä selaimissa voimme mennä vielä pidemmälle. Safarissa ja Operassa voimme koristella tekstiä käyttämällä text-shadow -ominaisuutta:

Li a:hover (tekstivarjo: 2px 2px 4px #333; )

Kuten seuraavasta kuvasta näkyy, elementillä on hieman varjoa, ja se näyttää ulkonevan hieman sivusta:



Lopuksi voit varmistaa, että Opera tukee täysin uusia CSS 3 -valitsimia, ja lisätä toisen kerroksen parannuksia: taustavärimuuttujat n:nnen alivalitsimen avulla:

Li:nth-child(2n+1) a ( taustaväri: #333; )

li:nth-child(n) a:hover (
taustaväri: #aaa;
väri: #000;
}

li:first--child > a:hover ( väri: keltainen; )

Näemme Operassa raidallisen valikon:



Yhteenveto ja johtopäätökset

Alla oleva kuva näyttää, miltä alkuperäinen merkintä näyttää IE6:ssa, IE7:ssä, Firefoxissa, Safarissa ja Operassa tässä artikkelissa kuvattujen CSS-sääntöjen soveltamisen jälkeen. Kuten näette, kun selaimen tuki CSS:lle kehittyy, valikoista tulee tyylikkäämpiä ja monimutkaisempia, ja käyttämällä asteittaisia ​​parannustekniikoita, valikot pysyvät toimivina jopa hyvin vanhoissa selaimissa.



Tietenkin monilla selaimilla on sarja muita ominaisuuksia, joita en ole käsitellyt tässä, mutta joita voidaan käyttää, kuten RGBA-värit ja SVG taustavärinä.