10 Hyödyllisiä palautustapoja CSS lle ja Javascriptille

Koodit eivät ole täydellinen ratkaisu monien ainutlaatuisten kävijöiden kanssa. Kaikki eivät käytä verkossa samaa käyttöjärjestelmää, selainta tai jopa fyysistä laitteistoa. Kaikki nämä tekijät vaikuttavat siihen, miten verkkosivusi todella tulee näyttöön. Työskennellessäsi uusien CSS- tai JavaScript-temppuja käytettäessä usein tällaisiin teknisiin virheisiin.

Mutta älä anna näiden epäkohtien lannistaa sinua! Tässä oppaassa olen koonnut joitakin yleisimmät varmuuskopiointitekniikat Web-suunnittelijoille, jotka keskittyvät CSS- ja JavaScript / jQuery-palveluihin. Kun kaikki muu epäonnistuu, haluat antaa käyttäjille vähintään perussivun toiminnot. Yksinkertaisuus hallitsee ylimmän käyttäjäkokemuksen suunnittelun alalla.

Tutustu alla olevaan oppaaseen ja kerro ajatuksistasi ja kysymyksistänne kommenttien osiosta.

1. Pyöristetyt kulmat kuvilla

CSS3-tekniikat ovat nousseet valtavirran web-suunnitteluun. Yksi merkittävimmistä ominaisuuksista on border-säde jotka mahdollistavat pyöristetyt kulmat. Nämä näyttävät kauniilta käytännöllisesti katsoen mihin tahansa painikkeeseen, diviin tai tekstilaatikkoon. Ainoa ongelma on selaimien välinen rajoitettu tuki.

Monet vanhemmat selaimet, mukaan lukien Internet Explorer 7, eivät tue tätä ominaisuutta. Jotta pyöristetyt kulmat pysyisivät kaikilla tavallisilla selaimilla, sinun on luotava varmuuskopio kuvista.

Vakio-koodi käyttää tavallisia CSS3-ominaisuuksia päädialla, kun ne sopivat kuviin jokaisessa kulmassa. Sinun on todennäköisesti luotava ylimääräiset divit pääsäiliöön, jota käytetään näyttämään nurkakuvia taustalla.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-säde: 5px; / * Firefox Gecko Engine * / -o-raja-säde: 5px; / * Opera * / raja-säde: 5px;  #mainbox .topc tausta: url ('corner-tl.png') ei-toista ylhäällä vasemmalla;  #mainbox .topc span background: url ('corner-tr.png') ei-toista ylhäällä oikealla;  #mainbox .btmc tausta: url ('corner-bl.png') ei-toista alhaalla vasemmalle;  #mainbox .btmc span background: url ('corner-br.png') ei-toista alhaalla oikealla;  

Jotta voisit pelastaa itsesi stressistä, suosittelen erittäin hyvin käyttämään RoundedCornrin kaltaista sovellusta. Se on selaimen web-sovellus, joka muodostaa pyöristetyn kulman CSS: n sekä CSS3: n että kuvien avulla. Tämä on erityisen hyödyllistä suunnittelijoille, joilla ei ole pääsyä grafiikkaohjelmistoon, kuten Photoshopiin tai GIMP: hen.

2. jQuery-pudotusvalikkojärjestelmä

Pudotusvalikkojärjestelmät ovat täydellisiä nykypäivän Webille. Suurin ongelma on kuitenkin kävijät, jotka pääsevät sivustoosi ilman JavaScriptin sallimista. Tässä tapauksessa mikään valikoista ei toimi ollenkaan! Paras ratkaisu on CSS: n käyttäminen kunkin alavalikon div-lohkon näyttämiseen / piilottamiseen ja niiden näyttämiseen hover-tilassa.

Tämän ratkaisun ainoa ongelma on se, että Internet Explorer 6 ei tue näitä CSS-hover-valitsimia. Kuitenkin IE7 + toimii hyvin; ja tietenkin kaikki selaimet toimivat hyvin, jos JavaScript on käytössä ensin. Tämän opetusohjelman koodi CSS Plusista on yksi parhaista löydetyistä resursseista. Se tarjoaa ratkaisun jQueryn lisäksi myös IE-ongelmien kannalta välttämättömään CSS: ään.

/ * JQuery * / #nav li.current> a tausta: # f7f7f7;  / * CSS-palautus * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild näyttö: lohko;  

Lähde

Toinen vaihtoehtoinen ratkaisu, jonka voit kokeilla, on vain IE6: n kaikkien valikoiden avoimuus. Voit käyttää Internet Explorerin ehdollisia kommentteja, jos haluat käyttää tyylitaulukoita selaimen version perusteella. Tämä ei tietenkään ole kaikkein kaunein ratkaisu, mutta se toimii vain.

Jos et tunne, että Internet Explorer 6 on paljon huolta, älä edes vaivaudu tähän vaihtoehtoiseen palautukseen. Opetusohjelman ja sen jälkeen tulevan koodin pitäisi olla riittäviä, jotta JavaScript-valikko latautuu, vaikka kaikissa tärkeimmissä selaimissa olisi tiukka CSS.

3. Kohdistetut Internet Explorer -tyylit

Olen varma, että me kaikki tiedämme Microsoftin Internet Explorerista tulevista renderöintikysymyksistä. Voin antaa hieman luottoa heidän viimeisimmälle IE8: lle ja tulevaisuuden näkymistä IE9: n kanssa. Kuitenkin on vielä pieni yleisö, jolla on IE6 / IE7, ja et voi silti sivuuttaa niitä vielä.

(Kuvan lähde: github)

Edellisessä osassa mainitut ehdolliset kommentit voivat olla hyödyllisiä sivun aluetta muokkaamalla. Esimerkiksi, jos sinulla on pudotusvalikko, jossa on ali-navigointi IE6: ssa, joka näyttää vain JavaScriptin, voit olla onnea yrittäessään CSS: ää varmuuskopiointimenetelmänä. Sen sijaan paras ratkaisu on näyttää jokainen alaluettelo navigointilohkoksi.

Lisäämällä yllä oleva koodi asiakirjaotsikkoon voit määrittää kunkin alisataverkon näytön tyypin. Paras osa tästä palautuksesta on, että voit korvata CSS: n ja näyttää edelleen dynaamisesti valikot, kun JavaScript on käytössä. Muuten näet vain avoimen linkkiluettelon. Voit käyttää samanlaista koodia kuin mitä olen lisännyt alla.

#nav li position: suhteellinen; leveys: 150px; / * täytyy asettaa äärellinen leveys IE * / #nav li ul / * sub-nav-koodeihin * / näyttö: lohko; asema: absoluuttinen; leveys: auto; / * määrittele oma leveys tai aseta li elementti * / #nav li ul li leveys: 100%;  

4. Perinteinen IE Läpinäkyvyys / Läpinäkyvyys

Yksi Internet Explorerin monista ärsyttävistä virheistä on opasiteetti. CSS3: n alfa-läpinäkyvyysasetuksia voidaan muuttaa läpinäkyvyysominaisuuden kautta. Microsoft vain tukee Internet Explorer 9: tä tällä ominaisuudella.

Paras ratkaisu IE6 +: n kohdentamiseen on kautta suodattaa, omistusasetus, jonka vain IE tunnistaa. Tutustu alla olevaan lyhyen koodin esimerkkiin:

.mydiv opasiteetti: 0,55; / * CSS3 * / suodatin: alfa (opasiteetti = 55); / * IE6 + * / 

Sinun tarvitsee vain sisällyttää yllä oleva rivi mihin tahansa elementtiin, joka vaatii avoimuutta. Huomaa, että CSS3-ominaisuuden tavoin kaikki lapsen elementit perivät myös tämän opasiteetin muutoksen. Jos etsit uudempaa menetelmää, joka kohdistuu erityisesti IE8: een, tutustu alla olevaan koodiin. Se käyttäytyy samalla tavalla kuin Microsoft IE8 -seuraaja tunnistaa suodattimen ominaisuutemme.

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opasiteetti = 55)"; / * IE8 * / 

5. CSS3-painikkeiden luominen Fallback-kuvilla

Painikkeet ovat fantastinen web-elementti kaikenlaisille rajapinnoille. Ne voivat käyttäytyä lomakkeen tuloina, navigointinäytöinä tai jopa suorina linkkeinä. CSS3: n avulla on nyt mahdollista muotoilla painikkeita, joilla on monia ainutlaatuisia tyylejä, kuten taustakaltevuudet, laatikon varjot, pyöristetyt kulmat jne..

Et kuitenkaan voi luottaa siihen, että kaikki kävijät voivat tehdä nämä uudemmat ominaisuudet. Kun rakennetaan painikkeiden (tai jopa samanlaisten käyttöliittymän elementtien) varmuuskopiointi, on kaksi erillistä vaihtoehtoa. Ensimmäinen on sisällyttää taustakuva, joka on suunniteltu juuri niin kuin CSS näyttää. Tämä voidaan toteuttaa helposti Photoshopissa. Jos et kuitenkaan ole ohjelmiston asiantuntija, tämä voi olla hankalaa.

Vaihtoehto on pelkkä taustaväri ja yksinkertaisempi CSS-tyyli. Käytän joitakin CSS-Tricksin suurista postituksista CSS3-kaltevuuksissa. Kaikki tärkeimmät selaimet, kuten Safari, Firefox, Chrome ja jopa Opera, tukevat näitä ominaisuuksia. Alue, jolla törmäät ongelmiin, on vanhojen selainten tukeminen: vanhemmat Mozilla-moottorit, IE6 / 7, mahdollisesti jopa Mobile Safari.

.gradientti-bg taustaväri: # 1a82f7; / * käyttää kiinteää väriä pahimmassa * / taustakuvassa: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); taustakuva: -webkit-gradient (lineaarinen, 0% 0%, 0% 100%, (# 2F2727), (# 1a82f7)); taustakuva: -webkit-lineaarinen gradientti (alkuun, # 2F2727, # 1a82f7); taustakuva: -moz-linear-gradient (alkuun, # 2F2727, # 1a82f7); tausta-kuva: -ms-lineaarinen gradientti (alkuun, # 2F2727, # 1a82f7); taustakuva: -o-lineaarinen gradientti (alkuun, # 2F2727, # 1a82f7);  

Lähde

Ainoa pieni ongelma, joka koskee vain kuvien käyttämistä varamenetelmänä, on se, että sinulla ei ole aktiivista tilamuutosta, kun käyttäjä napsauttaa painiketta. Voit rakentaa kaksi erilaista kuvaa näille tavallisille vs. aktiivisille tiloille, vaikka se vie jonkin verran ylimääräistä työtä. Pelkästään tämä syy voi painaa sinua käyttämään kiinteää taustavärin varakuvien sijaan. Kokeile pari eri ratkaisua nähdäksesi, mikä näyttää parhaiten ulkoasustasi.

6. Mobiilisisällön tarkistaminen

Toinen suuri trendi vuonna 2012 on mobiilin Internetin selaamisen suosio. Älypuhelimet ovat kaikkialla ja 3G / Wi-Fi: n tiedot ovat yhä helpommin saatavilla. Niinpä monet suunnittelijat haluavat tarjota varmuuskopion mobiilikäyttäjille.

Pari suosituista mobiiliselaimista tekee sivut samanlaiseksi kuin työpöytäympäristö. Mobile Safari ja Opera tunnetaan tästä parhaiten, jopa tukemalla monia yhteisiä jQuery-skriptejä. Nämä sivut eivät kuitenkaan aina ole mobiiliystävällisiä, ja UX: ssä on tilaa laajentaa.

Voit havaita kaksi selainta ja näyttää vaihtoehtoisen ulkoasun tai tyylitaulukon. Ensimmäinen on JavaScript, joka toimii erinomaisesti frontend-työkaluna. Alla oleva komentosarja on hyvin yksinkertainen ja tarkistaa vain iPhone / iPod Touch -käyttäjät. Detect Mobile Browsers on loistava sivusto, joka tarjoaa yksityiskohtaisemman käsikirjoituksen.

// Suuntaa iPhone / iPod Touch -toiminto isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1));  if (isiPhone ()) window.location = "m.yourdomain.com";  

Nyt toinen vaihtoehto on tarkistaa backend-kielen kuten PHP. Voit tarkistaa muuttujan, joka tunnetaan nimellä HTTP_USER_AGENT. Kymmeniä sivustoja tulee esiin, jos käytät näitä ehtoja. Suosittelen silti edellisen kappaleen lisännyttä Detect Mobile Browsers -linkkiä.

Sivustolla on ilmaisia ​​ladattavia komentosarjoja, jotka käsittelevät paitsi PHP: tä, myös tonnia muita suosittuja taustakieliä. Näitä ovat ASP.NET, ColdFusion, Rails, Perl, Python ja jopa palvelinpohjainen koodi, kuten IIS ja Apache.

7. Slicebox-liukusäädin, jossa on Graceful Fallback

Suosikkini CSS3 freebie vuodesta 2011 on todennäköisesti oltava Codropsin julkaisema Slicebox 3D Image Slider. Se käyttää kauniita CSS-animaatio-siirtymiä selaimissa, jotka tukevat niitä, tällä hetkellä Google Chromessa ja uusimmissa Safarissa. On outoa, että jopa uusin Firefox- tai IE9-julkaisu ei vieläkään voi käyttää näitä siirtymiä.

Paras osa tästä koodista on se, että se on edelleen varmuuskopio, jotta saadaan aikaan siirtymävaiheen perusvaikutuksia kuvien välillä. Annetun paljon animaatiota suoritetaan jQueryn kautta, mutta tavallinen CSS-varmuuskopiointivaihtoehto on edelleen erittäin luotettava, kun otetaan huomioon, kuinka monta selainta ei voi tukea hohtavia CSS3-animaatioita.

Vaihtoehtoisesti Codrops julkaisi äskettäin myös toisen liukuvan kuvan paneelin, jossa hyödynnetään vielä luovempia CSS3-tekniikoita. Tämä kuva-liukusäädin luodaan käyttämällä taustakuvia CSS: ssä, joten jopa ilman siirtymäefektejä se toimii hyvin sujuvasti.

8. jQuery-komentosarjan CDN-vianmääritysmenetelmä

JQuery-kirjasto on tullut lähes välttämättömäksi JavaScriptin kehittämiseksi verkossa. Monet vaihtoehtoiset CDN-toimittajat ovat luoneet staattisia URL-osoitteita, joissa ne vastaanottavat kaikki jQueryn julkaisuversion. Google, Microsoft ja jopa jQuery ovat itse laatineet CDN-portaalin kehittäjille muutamien muiden vähemmän tunnettujen verkkosivustojen joukossa.

Näistä palveluntarjoajista riippuu mahdollisesti satoja tuhansia kehittäjiä. Mitä tapahtuisi, jos jokin linkeistä rikkoutuisi jostain syystä tai palvelimet menivät offline-tilaan? Olisi hyvä ajatus järjestää paikallinen kopio ja toteuttaa se vain, jos tarvitset sitä. No tämä suuri CSS-Tricks-koodinpätkä voit tehdä juuri niin!

Lähde

9. Ainutlaatuiset HTML5-valintaruudut

HTML5 on avannut oven tuoreille viileille tyyleille verkkosivujen luomiseksi. Osa tästä parannetusta web-kokemuksesta on lomakkeiden ja syöttöelementtien kautta. Valintaruudut ovat vain yksi esimerkki, joka voidaan räätälöidä tarpeidesi mukaan.

Juoksin tähän ihanaan CSS / jQuery-opetusohjelmaan, joka julkaistiin keväällä 2011. Se tarjoaa yksinkertaisen menetelmän Apple-tyylisten kytkimien luomiseksi valintaruutuihin, jotka hajoavat vanhoissa selaimissa. Koodi käyttää taustakuvia korvaamaan käyttäjän vuorovaikutusten väliset päälle / pois-tyylit.

Alkuperäiset syötteen valintaruudut on piilotettu oletusarvoisesti ja niiden arvo määritetään JavaScript-puheluilla. Tämä tarkoittaa, että voit dynaamisesti vetää arvon missä tahansa kohdassa jQueryn kautta, mutta se siirtyy myös lomakkeeseen lyömällä “Lähetä” nappi.

Olettaen, että JavaScript on sammutettu tai sitä ei tueta vanhemmissa selaimissa, skripti on oletusarvoisesti tavallinen HTML-tulo. Tämä poistaa myös uudempien valintaruutujen tyylien CSS: n, joten se näkyy kuin mikään ei ole muuttunut. Käsikirjoitus käyttäytyy enemmän kuin esteettinen etukäyttäjä, jolla on puhdas varmuus kuin mikään muu. Mutta nämä liukusäätimet näyttävät fantastiselta, ja samoja tekniikoita voitaisiin soveltaa muihin lomakkeen syöttökenttiin, kuten valikkojen ja radiopainikkeiden valintaan.

10. HTML5-tuettu video

Uudet HTML5-tiedot ovat olleet hyvin progressiivisia monilla alueilla. Sekä video- että äänielementeillä on parannettu natiivituki suurelle joukolle mediatiedostoja. On kuitenkin käynyt ilmi, että HTML5-tuettujen selainten välillä ne eivät kaikki sovi tiedostotyypeistä.

Mozilla Firefox tukee yleensä .OGG-videota, jota voit käyttää VLC-muuntimena. Google Chrome & Safari etsii .MP4- tai H.264-koodattuja .MOV-tiedostoja. Näiden erojen vuoksi sinun pitäisi yleensä sisällyttää kolme eri videoformaatit - kaksi edellä mainittua.

Onneksi jotkut todella älykkäät kaverit koottivat kirjaston nimeltä VideoJS. Se on erittäin pieni JavaScript-rakennus, joka sallii Flash- ja HTML5-videon yhden toteutuksen yhdellä tunnisteella. Se on ladattavissa ilmaiseksi ja avoimen lähdekoodin avulla, joten kehittäjät voivat myös osallistua. Sekä Flash- että HTML5-videosoittimet on räätälöity siten, että ne ovat samat, joten kaikilla käyttäjillä on sama kokemus. Tutustu HTML5-videoiden upotuskoodin esimerkkiin:

Lähde

Vastaavan reitin jälkeen html5media-projekti tarjoaa menetelmän kaikkien streaming-medioiden yhdistämiseksi yhteen tiedostotyyppiin. Valitettavasti jopa VideoJS ei ole täydellinen jokaisen selaimen kanssa. Mitä html5media-projekti on yrittänyt tehdä, on selata selaimen yhteensopimattomuuksia tukemaan kaikkia videotiedostotyyppejä kaikkien alustojen välillä. Ja se toimii todella hyvin!

johtopäätös

Toivon, että tämä hyödyllisten varamenetelmien opas on kätevä web-kehittäjille ympäri maailmaa. Se voi olla vaikeaa rakentaa verkkosivustoja sopeutua laajaan valikoimaan ohjelmistoja. Tämä pätee erityisesti silloin, kun työskentelet monilla eri kielillä, kuten CSS ja JavaScript.

Mutta suuntaukset osoittavat, että lähestymme web-suunnittelun tukevampaa aikakautta. Koskaan ei ole aiemmin sovittu enemmän selaimia ja web-standardeja, erityisesti CSS3: ssa ja HTML5: ssä. Nämä tekniikat ovat vain muutamia niistä monista, joita harkitaan standardien mukaisten verkkosivujen rakentamisessa. Web-kehittäjänä haluat jatkuvasti seurata uusimpia muotoilusuunnitelmia ja mukauttaa niitä parhaiten yleisönne mukaan.