Web-selaimet ovat olleet ympärillä niin kauan kuin verkkosivustoilla on. Itse asiassa selaimet ovat keskeinen osa kokemusta tai ihmisiä, jotka katsovat sivustoasi - mutta kaikkia selaimia ei luoda yhtäläisesti. On täysin mahdollista (ja varsin todennäköisesti), että asiakkaat katselevat verkkosivuja selaimissa, jotka ovat äärimmäisen vanhoja ja puuttuvat nykyaikaisimmissa selaimissa. Tämä voi aiheuttaa merkittäviä ongelmia, kun pyrkii kehittämään verkkosivustoja, jotka hyödyntävät viimeisimpiä verkkosivustojen suunnittelun ja kehityksen edistysaskeleita . Jos joku tulee sivustoosi jollakin näistä vanhentuneista selaimista, ja viimeisimmät edistykselliset tekniikat eivät toimi heille, saatat olla huono kokemus kaiken kaikkiaan. Progressiivinen lisälaite on strategia, jolla käsitellään verkkosivujen suunnittelua eri selaimille, nimittäin vanhoja selaimia, joilla ei ole nykyaikaista tukea.
Progressiivinen lisäys on tapa suunnitella verkkosivuja niin, että enemmän käyttäjäagenttien ominaisuuksia tukee, mitä enemmän ominaisuuksia web-sivuilla on. Se on päinvastainen muotoilustrategiasta, jota kutsutaan sievältä hajoamiselta . Tämä strategia luo sivut uusimmille selaimille ensin ja varmistaa, että ne toimivat myös kohtuullisen hyvin vähemmän toimivilla selaimilla - että kokemus "huononee gracefully". Progressiivinen parannus alkaa vähiten helppokäyttöisillä selaimilla ja rakentaa kokemuksen ylöspäin.
Kuinka käyttää progressiivista parannusta
Kun luot web-suunnittelun progressiivisen lisälaitteen avulla, ensimmäinen asia, jonka teet, on luoda malli, joka toimii verkkoselainten alimmalle yhteiselle nimittäjälle. Sen ytimessä progressiivinen parannus kertoo, että sisällön tulee olla kaikkien verkkoselainten käytettävissä, ei pelkästään alisarjaa. Siksi aloitat tukemalla näitä vanhoja, vanhentuneita ja vähemmän helppokäyttöisiä selaimia. Jos luot sivuston, joka toimii hyvin heille, tiedät, että olet luonut perustan, jonka pitäisi tarjota ainakin käyttökelpoinen kokemus kaikille kävijöille.
Kun aloitat ensin helpoimmilla selaimilla, varmista, että kaikki HTML-koodisi on oltava päteviä ja semanttisesti oikein. Tämä auttaa varmistamaan, että käyttäjäagenttien laajin valikoima voi tarkastella sivua ja näyttää sen tarkasti.
Muista, että visuaaliset muotoilutyypit ja yleinen sivuasettelu lisätään ulkoisten tyyliarkkien avulla . Tämä on todellakin silloin, kun progressiivinen lisäys tapahtuu. Käytät tyyliarkkia luodaksesi sivuston suunnittelun, joka toimii kaikille kävijöille. Tämän jälkeen voit lisätä uusia tyylejä sivun parantamiseksi, kun käyttäjäagentit saavat toiminnot. Jokainen saa perusviivat tyylit, mutta kaikki uutisselaimet, jotka voivat tukea kehittyneempää ja nykyaikaisempia tyylejä, saavat lisää ylimääräisiä. Sinä "progressiivisesti parannat" sivua selaimille, jotka voivat tukea näitä tyylejä.
Voit ottaa käyttöön progressiivisen parannuksen muutamia tapoja. Ensinnäkin, kannattaa harkita, mitä selaimessa tapahtuu, jos se ei ymmärrä CSS-riviä - se jättää sen huomiotta! Tämä todella toimii sinun hyväksi. Jos luot perustason joukon tyylejä, jotka kaikki selaimet ymmärtävät, voit lisätä uusia tyylejä uusille selaimille. Jos he tukevat tyylejä, he käyttävät niitä. Jos ei, he jättävät ne huomiotta ja käyttävät vain näitä perustasoja. Tässä CSS: ssä voidaan nähdä yksinkertainen esimerkki progressiivisesta parannuksesta:
.main-content {
tausta: # 999;
tausta: rgba (153, 153, 153, 75);
}
Tämä tyyli asettaa taustan ensin harmaaksi. Toinen sääntö käyttää RGBA-väriarvoja avoimen läpinäkyvyyden asettamiseksi. Jos selain tukee RGBA: ta, se ohittaa ensimmäisen tyyliin toisen. Jos näin ei tapahdu, sovelletaan vain ensimmäistä. Olet määrittänyt perustason värin ja lisää sitten ylimääräisiä tyylejä nykyaikaisempia selaimia varten.
Feature-kyselyiden käyttäminen
Toinen tapa, jolla voit soveltaa progressiivista lisäystä, on käyttää mitä kutsutaan "ominaisuustiedusteluiksi". Nämä ovat samankaltaisia kuin mediakyselyt , jotka ovat keskeinen osa herkkiä verkkosivustoja . Vaikka tietyn näytön koon tiedotusvälineiden kyselyteksti, ominaisuuskysymykset tarkistavat, onko tietty ominaisuus tuettu vai ei. Käytettävä syntaksi on:
@supports (display: flex) {}Kaikki tämän säännön sisältämät tyylit toimisivat vain, jos kyseinen selain tukee "flex", joka on Flexboxin tyylejä. Voit asettaa kaikille säännöt kaikille ja käyttää ominaisuustiedostoja lisäämällä ylimääräistä vain tietyille selaimille.
Alkuperäinen artikkeli Jennifer Krynin. Toimittaja Jeremy Girard 13.1.16.