10 Koristne nadomestne metode za CSS in Javascript

Opombe s kodami so odlična rešitev za kompromise s številnimi edinstvenimi obiskovalci. Vsi na spletu ne uporabljajo istega operacijskega sistema, spletnega brskalnika ali celo fizične strojne opreme. Vsi ti dejavniki vplivajo na to, kako se bo spletna stran dejansko prikazala na zaslonu. Pri delu z novimi triki CSS ali JavaScript boste pogosto naleteli na takšne tehnične napake.

Toda ne pustite, da vas te pasti odvrnejo! V tem priročniku sem sestavil nekaj najpogostejših nadomestnih tehnik za spletne oblikovalce, ki se osredotočajo na CSS in JavaScript / jQuery. Ko vse ostalo ne uspe, uporabnikom zagotovite vsaj osnovno funkcionalnost strani. Preprostost prevladuje na področju oblikovanja uporabniške izkušnje.

Oglejte si naš vodnik spodaj in nam sporočite svoje misli in vprašanja v oddelku za komentarje.

1. Zaobljeni koti s slikami

Tehnike CSS3 so prerasle v mainstream web design. Ena izmed najbolj opaznih lastnosti je polmer meje ki omogoča zaokrožene vogale na letalu. Te so lepe na praktično poljubnem gumbu, div ali besedilnem polju. Edini problem je omejena podpora med spletnimi brskalniki.

Mnogi starejši brskalniki, vključno z Internet Explorerjem 7, ne podpirajo te lastnosti. Da bi ohranili zaobljene vogale za vse standardne brskalnike, boste morali ustvariti nadomestne slike s slikami.

Standardna koda uporablja navadne lastnosti CSS3 na glavnem disku, pri tem pa prilagaja slike na vsakem vogalu. Verjetno boste morali v glavnem vsebniku nastaviti nekaj dodatnih divov, ki se uporabljajo za prikaz kotnih slik v ozadju.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox Gecko Engine * / -o-border-radius: 5px; / * Opera * / obrobni polmer: 5px;  #mainbox .topc background: url ('corner-tl.png') brez ponovitve zgoraj levo;  #mainbox .topc span ozadje: url ('corner-tr.png') brez ponovitve desno zgoraj;  #mainbox .btmc ozadje: url ('corner-bl.png') spodaj levo;  #mainbox .btmc span ozadje: url ('corner-br.png') spodaj desno;  

Da bi se rešili stresa, vam priporočam uporabo aplikacije, kot je RoundedCornr. To je spletna aplikacija v brskalniku, ki ustvari zaokrožen kot CSS z uporabo CSS3 in slik. To bo še posebej koristno za oblikovalce, ki nimajo dostopa do grafične programske opreme, kot je Photoshop ali GIMP.

2. jQuery Sistem padajočega menija

Spustni meniji so idealni za današnji Web. Največji problem pa je, da obiskovalci dostopajo do vašega spletnega mesta brez omogočenega JavaScripta. V tem primeru nobeden od vaših menijev ne bo deloval! Najboljša rešitev je, da uporabite CSS za prikaz / skrivanje vsakega od podmenij div blokov in jih prikažete na lebdenju.

Edina težava pri tej rešitvi je, da Internet Explorer 6 ne podpira teh selektorjev CSS. Vendar IE7 + odlično deluje; in seveda bodo vsi brskalniki delovali dobro, če je JavaScript omogočen. Koda iz te vadnice o CSS Plus je eden najboljših virov, ki sem jih našel. Zagotavlja ne samo rešitev z jQuery, temveč tudi CSS, ki je potreben za izdajo IE.

/ * Razred toka bo dodan preko jQuery * / #nav li.current> a ozadje: # f7f7f7;  / * Varnost CSS * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild display: block;  

Vir

Druga alternativna rešitev, ki jo lahko poskusite, je samo odprto prikazovanje vsakega menija v IE6. Uporabite lahko pogojne komentarje za Internet Explorer, da uporabite slogovne sloge na podlagi različice brskalnika. Seveda to ne bo najlepša rešitev, ampak bo preprosto delovala.

Če ne menite, da je Internet Explorer 6 precej skrbi, potem se sploh ne trudite za to alternativno zamenjavo. Vadnica in naknadna zgornja koda bi morala biti dovolj velika, da se v vseh glavnih brskalnikih obremenitve z JavaScript-om prenesejo celo s strogim CSS-jem.

3. Ciljni slogi Internet Explorerja

Prepričan sem, da vsi vemo o problemih upodabljanja, ki izhajajo iz Microsoftovega Internet Explorerja. Lahko dam malo zasluge za njihovo zadnjo IE8 in prihodnje možnosti z IE9. Vendar pa je še vedno majhno občinstvo, ki uporablja IE6 / IE7 in jih pravzaprav še ne morete prezreti.

(Vir slike: github)

Pogojni komentarji, kot so omenjeni v zadnjem razdelku, so lahko uporabni za preoblikovanje področij strani. Na primer, če imate v spustnem meniju s pod-navigacijo v IE6, ki se bo prikazal samo s pomočjo JavaScripta, ne boste imeli sreče, če boste poskusili CSS kot nadomestno metodo. Namesto tega je najboljša rešitev prikazati vsak podseznam kot navigacijski blok.

Če dodate zgornjo kodo v glavo dokumenta, lahko določite vrsto prikaza za vsako pod-navigacijo. Najboljši del pri tej zamenjavi je, da lahko prepišete CSS in še vedno dinamično prikažete / skrijete menije, ko je JavaScript omogočen. V nasprotnem primeru boste prikazali le odprt seznam povezav. Uporabite lahko podobno kodo, kot sem jo dodal spodaj.

#nav li position: relative; širina: 150px; / * mora določiti končno širino za IE * / #nav li ul / * sub-nav kode * / prikaz: blok; položaj: absolutno; width: auto; / * določite lastno širino ali nastavite v elementu li * / #nav li ul li širina: 100%;  

4. Legacy IE Opacity / Transparency

Eden od mnogih nadležnih napak z Internet Explorerjem je posel z motnjami. Nastavitve prosojnosti alfa v CSS3 se lahko spremenijo z lastnostmi motnosti. Toda na poti Microsofta to funkcijo trenutno podpira samo Internet Explorer 9.

Najboljša rešitev za ciljanje IE6 + je filter, lastniška nastavitev, ki jo priznava samo IE. Preglejte spodnji primer kode:

.mydiv nepreglednost: 0,55; / * CSS3 * / filter: alfa (motnost = 55); / * IE6 + * / 

Vse, kar morate storiti, je vključitev zgornje vrstice v kateri koli element, ki zahteva preglednost. Opazite, da bodo podobno kot lastnost CSS3 vsi podrejeni elementi podedovali to spremembo motnosti. Če iščete novejšo metodo, ki cilja posebej na IE8, si oglejte spodnjo kodo. Obnaša se na enak način, kot je naš lastnost filtra prepoznala samo razčlenjevalnik Microsoft IE8.

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

5. Ustvarjanje gumbov CSS3 z rezervnimi slikami

Gumbi so fantastičen spletni element za vse vrste vmesnikov. Lahko se obnašajo kot vhodni elementi, navigacijske postavke ali celo neposredne povezave strani. Z CSS3 je zdaj mogoče oblikovati gumbe z mnogimi edinstvenimi slogi, kot so prelivi ozadja, senčne škatle, zaobljeni vogali itd..

Vendar pa ne morete zaupati, da bodo vsi vaši obiskovalci lahko prikazali te nove lastnosti. Pri izdelavi nadomestnega načrta za gumbe (ali celo podobne elemente uporabniškega vmesnika) obstajata dve različni možnosti. Prva je vključitev slike ozadja, ki je zasnovana natančno tako, kot bi izgledala CSS. To je mogoče enostavno doseči v Photoshopu. Vendar, če niste strokovnjak za programsko opremo, potem je to lahko problematično.

Druga možnost je, da zamenjate navadno barvo ozadja in preprostejše stile CSS. Uporabljam nekaj primerov kode iz CSS-Tricks velike objave na CSS3 gradientih. Vse glavne brskalnike, vključno s Safari, Firefox, Chrome in celo Opera, podpirajo te lastnosti. Področje, kjer boste naleteli na težave, podpira starejše brskalnike: starejši Mozilla, IE6 / 7, morda celo Mobile Safari.

.gradient-bg ozadje-barva: # 1a82f7; / * uporablja najslabšo barvo * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); background-image: -webkit-gradient (linearni, 0% 0%, 0% 100%, od (# 2F2727), do (# 1a82f7)); background-image: -webkit-linear-gradient (vrh, # 2F2727, # 1a82f7); background-image: -moz-linearni gradient (zgoraj, # 2F2727, # 1a82f7); background-image: -ms-linearni gradient (zgoraj, # 2F2727, # 1a82f7); background-image: -o-linearni gradient (zgoraj, # 2F2727, # 1a82f7);  

Vir

Edina majhna težava s samo uporabo slik kot nadomestne metode je, da ne boste imeli spremembe aktivnega stanja, ko uporabnik klikne na gumb. Lahko bi zgradili dve različni sliki za ta redna vs aktivna stanja, čeprav bi to zahtevalo nekaj dodatnega dela. Samo zaradi tega razloga lahko uporabite trdno barvo ozadja namesto nadomestnih slik. Preizkusite nekaj različnih rešitev in si oglejte, kaj najbolje izgleda v vaši postavitvi.

6. Preverjanje mobilne vsebine

Še en velik trend v letu 2012 je priljubljenost mobilnega brskanja po internetu. Pametni telefoni so povsod in podatki preko 3G / Wi-Fi postajajo vse bolj dostopni. Tako bodo mnogi oblikovalci želeli zagotoviti nadomestno postavitev za mobilne uporabnike.

Nekaj ​​priljubljenih mobilnih spletnih brskalnikov bo prikazalo strani, podobne namiznemu okolju. Mobile Safari in Opera sta najbolj znana po tem, saj podpirajo številne običajne skripte jQuery. Toda te strani niso vedno prijazne za mobilne naprave in obstaja prostor za razširitev na UX.

Mobilni brskalnik lahko zaznate na dva načina in prikažete nadomestno postavitev ali slogovno predlogo. Prvi je preko JavaScripta, ki odlično deluje kot orodje za frontende. Skript, ki sem ga dodal spodaj, je zelo preprost in samo preverja uporabnike iPhone / iPod Touch. Zaznavanje mobilnih brskalnikov je fantastično spletno mesto, ki ponuja podrobnejšo skripto, ki jo lahko zaženete.

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

Druga možnost je preverjanje preko podpornega jezika, kot je PHP. Preverite lahko spremenljivko, znano kot HTTP_USER_AGENT. Če boste google te izraze, se bo pojavilo več deset spletnih mest. Vendar še vedno priporočam povezavo Detect Mobile Browsers, ki sem jo dodal v prejšnjem odstavku.

Spletna stran vsebuje brezplačne skripte za razčlenjevanje ne samo v PHP-ju, temveč tudi za druge priljubljene jezike. Med njimi so ASP.NET, ColdFusion, Rails, Perl, Python in celo strežniška koda, kot sta IIS in Apache.

7. Slicebox Slider z elegantno rezervno funkcijo

Moj najljubši CSS3 freebie iz leta 2011 verjetno mora biti Slicebox 3D Image Slider, ki ga je izdal Codrops. Uporablja lepe prelaze CSS animacij v brskalnikih, ki jih podpirajo, trenutno v brskalniku Google Chrome in najnovejši v Safariju. Čudno je, da tudi najnovejša različica Firefoxa ali IE9 ne more uporabiti teh prehodov.

Najboljši del te kode je, da bo še vedno nadomestil osnovne učinke prehoda med slikami. Velik del animacije se izvaja prek jQuery, vendar je standardna rezervna možnost za CSS še vedno zelo zanesljiva, če upoštevamo, koliko brskalnikov ne podpira bleščečih animacij CSS3.

Codrops je prav tako pred kratkim izdal še eno ploščo z drsnimi slikami, ki uporablja še bolj kreativne CSS3 tehnike. Ta slikovni drsnik je ustvarjen z uporabo slik ozadja v CSS-ju, zato se tudi brez učinkov prehoda obnaša zelo gladko.

8. jQuery Script CDN varna metoda

Knjižnica jQuery je postala skoraj nujna za razvoj JavaScripta v spletu. Veliko nadomestnih dobaviteljev CDN je ustvarilo statične URL-je, kjer gostijo vse izdaje jQuery. Google, Microsoft in celo jQuery so ustvarili portal CDN za razvijalce, med nekaj manj znanih spletnih mest.

Obstaja morda več sto tisoč razvijalcev, ki so odvisni od teh ponudnikov. Kaj bi se zgodilo, če bi bila katera od povezav iz kakršnegakoli razloga prekinjena ali če bi strežniki ostali brez povezave? Dobro bi bilo gostiti lokalno kopijo in jo izvajati le, če jo potrebujete. Ta odličen odloženi kodni odrezek CSS-Tricks vam omogoča prav to!

Vir

9. Edinstvena potrditvena polja HTML5

HTML5 je odprl vrata za nekaj svežih stilov za izdelavo spletnih mest. Del te izboljšane spletne izkušnje je skozi oblike in elemente vnosa. Potrditvena polja so le en primer, ki ga lahko prilagodimo vašim potrebam.

Sem naletel na to čudovito CSS / jQuery tutorial objavil nazaj v začetku pomladi 2011. Ponuja preprost način za ustvarjanje Apple-style stikala za vaše potrditvena polja, ki se elegantno razgradijo v starejših brskalnikih. Koda uporablja slike ozadja za zamenjavo stilov za vklop / izklop med uporabniškimi interakcijami.

Elementi potrditvenega polja izvornega vnosa so privzeto skriti, njihova vrednost pa je določena s klici JavaScript. To pomeni, da lahko dinamično povlečete vrednost na katerikoli točki skozi jQuery, vendar se bo prav tako prenesla v obrazec ob pritisku gumba “predložiti” gumb.

Ob predpostavki, da je JavaScript izklopljen ali nepodprt v starejših brskalnikih, bo skript privzeto nastavljen na običajne HTML vnose. To bo tudi onemogočilo CSS za novejše sloge potrditvenega polja, tako da se bo prikazalo, kot da se nič ni spremenilo. Skript se obnaša bolj kot estetski sprednji tekač s čistim nadomestkom kot karkoli drugega. Toda ti drsniki izgledajo fantastično, enake tehnike pa lahko uporabite tudi za druga polja za vnos obrazcev, kot so izbrani meniji in izbirni gumbi.

10. Podprti video za HTML5

Nove specifikacije HTML5 so bile zelo napredne na mnogih področjih. Tako video kot avdio elementi imajo izboljšano naravno podporo za veliko število večpredstavnostnih datotek. Vendar se izkaže, da se med brskalniki, ki jih podpira HTML5, ne strinjajo vsi o vrstah datotek.

Mozilla Firefox na splošno podpira .OGG video, ki ga lahko uporabite kot pretvornik. Google Chrome & Safari išče datoteke .MOV4 ali H.264, ki so kodirane .MOV. Zaradi teh razlik bi morali običajno vključiti tri različne video formate - obe zgoraj navedeni skupaj s funkcijo.

K sreči so nekateri res pametni fantje sestavili knjižnico VideoJS. To je zelo majhna gradnja JavaScripta, ki omogoča eno samo izvedbo Flash in HTML5 videa v eni oznaki. To je brezplačen prenos in odprtokodni program, zato lahko tudi razvijalci prispevajo svoje prispevke. Videopredvajalnika Flash in HTML5 sta prilagojena tako, da sta enaka, tako da bodo imeli vsi uporabniki enako izkušnjo. Oglejte si primer kode za vdelavo videoposnetkov HTML5:

Vir

Po podobni poti projekt html5media ponuja metodo za konsolidacijo vseh pretočnih medijev v eno vrsto datoteke. Na žalost tudi VideoJS ni popoln za vsak brskalnik. Projekt html5media je poskušal narediti okoli nezdružljivosti brskalnikov, da bi podprl vse vrste video datotek med vsemi platformami. In dejansko deluje zelo dobro!

Zaključek

Upam, da bo ta priročnik koristnih nadomestnih metod koristen za spletne razvijalce po vsem svetu. Lahko je težko graditi spletne strani za prilagoditev na širok spekter specifikacij programske opreme. To še posebej velja, ko delate z različnimi jeziki, kot sta CSS in JavaScript.

Toda trendi kažejo, da se približujemo bolj podporni dobi v spletnem oblikovanju. Še nikoli doslej ni bilo dogovorjenih več brskalnikov in spletnih standardov, zlasti v CSS3 in HTML5. Te tehnike so le nekatere od mnogih, ki jih je treba upoštevati pri gradnji spletnih strani, skladnih s standardi. Kot spletni razvijalec boste nenehno želeli slediti najnovejšim trendom oblikovanja in se prilagajati tako, da bodo ustrezali vašemu občinstvu.