Kymmenen vuotta sitten vain huippuluokan web-suunnittelijat käyttivät CSS:ää asetteluihin ja muotoiluun. Selaintuki CSS-asetteluille oli ohutta ja buginen, joten nämä ihmiset puolsivat verkkostandardien noudattamista luodessaan hakkereita, jotka saivat CSS-asettelut toimimaan kaikissa selaimissa. Eräs laajalti käytetty hakkerointi oli selaimen nuuskiminen: Käyttäjän selaimen ja version havaitseminen JavaScriptin navigator.userAgent-ominaisuuden avulla. Selaimen haisteleminen mahdollisti nopean ja helpon koodin haaroittamisen, jolloin kehittäjät voivat kohdistaa eri selaimiin eri ohjeilla.

Nykyään CSS-pohjaiset asettelut ovat yleisiä ja jokaisella selaimella on melko vankka tuki niille. Mutta nyt meillä on CSS3 ja HTML5, ja tilanne toistaa itseään. Eri selaimet osoittavat erilaista tukea näille uusille teknologioille. Olemme kuitenkin älykkäämpiä, emmekä enää käytä CSS-hakkerointia emmekä käytä selaimen nuuskimista epäluotettavana, huonona käytäntönä. Olemme myös vakuuttaneet yhä useammat asiakkaat siitä, että verkkosivustojen ei tarvitse näyttää täsmälleen samalta kaikissa selaimissa. Joten miten käsittelemme tätä uutta mutta tuttua ongelmaa? Yksinkertainen: Käytämme ominaisuuden tunnistusta, mikä tarkoittaa, että emme kysy selaimelta kuka olet. Siitä eteenpäin teen epäluotettavia oletuksia. Sen sijaan kysymme selaimelta, voitko tehdä tämän ja sen? Se on yksinkertainen tapa testata selaimen ominaisuuksia, mutta kaikkien näiden testien tekeminen manuaalisesti jatkuvasti väsyy. Tämän ongelman (ja muiden) ratkaisemiseksi voit käyttää Modernizria.

Ominaisuustunnistuskirjasto

Modernizr on avoimen lähdekoodin JavaScript-kirjasto, jonka avulla web-suunnittelijoiden on helppo tukea erilaisia käyttökokemuksia vierailijan selaimen ominaisuuksien perusteella. Tämä antaa suunnittelijoille mahdollisuuden hyödyntää täysimääräisesti kaikkea, mikä on toteutettu joissakin selaimissa, tinkimättä muiden selainten käyttökokemuksesta.

Kun upotat Modernizr-komentosarjan sivullesi, se havaitsee, tukeeko nykyinen selain border-radius-, border-image-, box-shadow-, rgba()- ja niin edelleen, sekä HTML5-ominaisuuksia, kuten audio-, video-, localStorage- ja uusia elementtityyppejä ja attribuutteja. Tämän tiedon avulla voit hyödyntää näitä ominaisuuksia tukevien selaimien natiivitoteutuksia ja päättää, luodaanko JavaScript-pohjainen varavaihtoehto vai yksinkertaisesti huonontaako sivua sellaisissa selaimissa, jotka eivät tue niitä. Lisäksi Modernizr tarjoaa uudet HTML5-elementit Internet Explorerin muotoilua varten, jotta voit aloittaa niiden parannetun semantiikan käytön heti.

Modernizr luotiin progressiivisen parantamisen periaatteella, joten se tukee ja rohkaisee jopa verkkosivustosi rakentamista kerros kerrokselta alkaen JavaScript-vapaasta perustasta ja lisäämällä parannuskerroksia yksitellen. Tämä on helppoa kanssa, koska tiedät, mihin selain pystyy. Katsotaanpa käytännön esimerkkiä käyttämisestä huippuluokan verkkosivustojen rakentamiseen.

Modernizr luo myös JavaScript-objektin, nimeltään Modernizr, ja jossa on luettelo ominaisuuksista, jotka sisältävät loogisia arvoja kullekin ominaisuudelle. On tosi, jos selain tukee uutta canvas-elementtiä, ja epätosi, jos selain ei tue sitä. JavaScript-objekti sisältää myös tarkempia tietoja tietyistä ominaisuuksista, jotka kertovat, tukeeko selain kyseistä koodekkia. Modernizr. syöttötyypit. haku kertoo, onko uutta hakusyötetyyppiä tuettu ja niin edelleen.

Raaka näytesivumme näyttää hieman paljaalta, mutta se on erittäin semanttinen ja helposti saatavilla. Tehdään sille perustyyli; muotoilu, väri ja asettelu, jotta se olisi hieman visuaalisesti miellyttävämpi. Toistaiseksi tämä prosessi ei ole mikään uusi: lisäämme yksinkertaisen semanttisesti jäsennellylle HTML-sivulle, ja tulos perusversiossa on hyvin suoraviivainen.

Seuraavaksi parannellaan sivua ja tehdään siitä mielenkiintoisempi. Haluan käyttää hienoa (avoimen lisenssin) kirjasinta h1-otsikossa, jakaa ominaisuusluettelon kahteen sarakkeeseen ja siirtää Modernizria käsittelevän osion valokuvalla kaiken oikealle. Aion myös muuttaa sivun reunusta ja tehdä siitä mukavamman. Nyt CSS on aika hieno, koska voit vain lisätä uusia ominaisuuksia sääntöön, ja jos selain ei tunnista (lue: tue) niitä, se yksinkertaisesti jättää ne huomiotta. Yhdistä se CSS:n peräkkäiseen luonteeseen ja voit käyttää esimerkiksi rajan sädettä ilman, että sinun tarvitsee luottaa Modernizriin. Modernizrin käyttö tarjoaa kuitenkin jotain, jota et voi saavuttaa ilman sitä: Mahdollisuuden muuttaa selaimen tukemia ominaisuuksia vain sillä ehdolla, että se tukee jotain muuta ominaisuutta. Havainnollistan tätä lisäämällä sivullemme kaksi uutta CSS-sääntöä: