10 Naudingi CSS ir Javascript metodai

Kodo trūkumai yra puikus sprendimas kompromisui su daugybe unikalių lankytojų. Ne visi internete naudojasi ta pačia operacine sistema, žiniatinklio naršykle ar net fizine aparatūra. Visi šie veiksniai į tai, kaip jūsų tinklapis iš tikrųjų bus rodomas ekrane. Dirbdami su naujais „CSS“ arba „JavaScript“ gudrybėmis, dažnai susidursite su tokiomis techninėmis klaidomis.

Bet neleiskite šitų spąstų jums atgrasyti! Šiame vadove aš sudėjau kai kuriuos labiausiai paplitusių atsarginių metodų interneto dizaineriams, orientuotiems į CSS ir JavaScript / jQuery. Kai visa kita nepavyksta, norite suteikti vartotojams bent pagrindinio puslapio funkcionalumą. Paprastumas yra aukščiausias vartotojų patirties dizaino srityje.

Peržiūrėkite mūsų žemiau pateiktą vadovą ir praneškite apie savo mintis ir klausimus komentarų skiltyje.

1. Suapvalinti kampai su vaizdais

CSS3 metodai išaugo į pagrindinį interneto dizainą. Viena iš svarbiausių savybių pasienio spindulys kuris leidžia skristi į apačią. Tai atrodo gražiai praktiškai bet kuriame mygtuke, div arba teksto laukelyje. Vienintelė problema yra ribota žiniatinklio naršyklių parama.

Daugelis senesnių naršyklių, įskaitant „Internet Explorer 7“, nepalaiko šios savybės. Taigi, norint išlaikyti apvalius kampus visų standartinių naršyklių veikimui, turėsite sukurti atvaizdus su nuotraukomis.

Standartiniame kode pagrindinėse dviejose yra reguliarios CSS3 savybės, o kiekviename kampe - vaizdai. Tikėtina, kad pagrindiniame konteineryje turėsite nustatyti keletą papildomų dalelių, kurie naudojami kampe esančių vaizdų rodymui fone.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-spindulys: 5px; / * Firefox Gecko variklis * / -o-pasienio spindulys: 5px; / * Opera * / sienos spindulys: 5px;  #mainbox .topc background: url ('corner-tl.png') ne iš naujo pakartoti kairę;  #mainbox .topc span background: url ('corner-tr.png') ne pakartoti viršutinė dešinėn;  #mainbox .btmc background: url ('kampinis-bl.png') ne iš naujo pakartoti apačioje;  #mainbox .btmc span background: url ('corner-br.png') ne iš naujo apačioje dešinėje;  

Norėdami išgelbėti save nuo streso, labai rekomenduoju naudoti „RoundedCornr“ programą. Tai naršyklės žiniatinklio programa, kuri sukuria apvalią kampą CSS, naudojant tiek CSS3, tiek vaizdus. Tai bus ypač naudinga projektuotojams, neturintiems prieigos prie grafikos programinės įrangos, pvz., „Photoshop“ arba „GIMP“.

2. jQuery išskleidžiamojo meniu sistema

Išskleidžiamojo meniu sistemos puikiai tinka šiandieniniam internetui. Tačiau didžiausia problema yra lankytojai, kurie naudojasi jūsų svetaine be „JavaScript“ įgalinimo. Šiuo atveju nė vienas iš jūsų meniu neveiks! Geriausias sprendimas yra naudojant CSS, kad būtų rodomas / paslėptas kiekvienas sub-meniu du blokai ir rodomi juos slinkties metu.

Vienintelė problema, susijusi su šiuo sprendimu, yra ta, kad „Internet Explorer 6“ nepalaiko šių „CSS hover“ selektorių. Tačiau IE7 + puikiai veikia; ir, žinoma, visos naršyklės veiks gerai, jei „JavaScript“ bus įjungta pirmiausia. Šio vadovo kodas CSS Plus yra vienas iš geriausių rastų išteklių. Jis suteikia ne tik sprendimą su jQuery, bet ir CSS, reikalingą IE problemoms.

/ * JQuery * / #nav li.current> a background: # f7f7f7;  / * CSS atsarginė kopija * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild display: block;  

Šaltinis

Kitas alternatyvus sprendimas, kurį galite pabandyti, yra atviras kiekvieno IE6 meniu rodymas. Galite naudoti „Internet Explorer“ sąlygines pastabas, kad taikytumėte stilių lenteles pagal naršyklės versiją. Žinoma, tai nebus pats gražiausias sprendimas, bet jis tiesiog veiks.

Jei nemanote, kad „Internet Explorer 6“ yra labai nerimaujama, net nesijaudinkite su šia alternatyvia atsargine kopija. Pamoka ir vėlesnis kodas turėtų būti pakankami, kad „JavaScript“ meniu būtų įkeliamas net ir su griežta CSS visose pagrindinėse naršyklėse.

3. Tiksliniai „Internet Explorer“ stiliai

Esu įsitikinęs, kad visi žinome apie „Microsoft“ „Internet Explorer“ išleidimo problemas. Aš galiu suteikti šiek tiek kreditų už savo naujausią IE8 ir ateities perspektyvas su IE9. Tačiau vis dar yra maža auditorija, kurioje veikia IE6 / IE7, ir jūs tikrai negalite jų ignoruoti.

(Vaizdo šaltinis: github)

Sąlyginės pastabos, paminėtos paskutiniame skyriuje, gali būti naudingos pertvarkant puslapio sritis. Pavyzdžiui, jei turite išskleidžiamąjį meniu su sub-navigacija IE6, kuris bus rodomas tik naudojant „JavaScript“, nesėkmės bandysite CSS kaip atsarginį metodą. Vietoj to, geriausias sprendimas yra rodyti kiekvieną sąrašą kaip navigacijos bloką.

Įtraukę aukščiau pateiktą kodą į dokumento antraštę, galite nurodyti kiekvieno sub-navigacijos ekrano tipą. Geriausia dalis yra tai, kad galite perrašyti CSS ir vis dar dinamiškai rodyti / slėpti meniu, kai įgalintas „JavaScript“. Priešingu atveju jums bus rodomas atviras nuorodų sąrašas. Galite naudoti panašų kodą, kaip ir toliau pateiktą.

#nav li pozicija: santykinis; plotis: 150px; / * turi nustatyti ribinį plotį IE * / #nav li ul / * sub-nav kodams * / ekranui: blokas; pozicija: absoliutus; plotis: auto; / * nustatykite savo plotį arba nustatykite li elementą * / #nav li ul li plotis: 100%;  

4. Legacy IE Opacity / Skaidrumas

Vienas iš daugelio erzina klaidų su „Internet Explorer“ yra neskaidrumo sprendimas. CSS3 alfa skaidrumo nustatymus galima keisti per neskaidrumo savybę. Vis dėlto šiuo metu „Microsoft“ tik „Internet Explorer 9“ palaiko šią funkciją.

Geriausias sprendimas norint nukreipti IE6 + yra per filtras, nuosavybės teisę, kurią pripažįsta tik IE. Peržiūrėkite trumpą kodo pavyzdį:

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

Viskas, ką jums reikia padaryti, yra įtraukti aukščiau esančią eilutę į bet kurį elementą, kuriam reikia skaidrumo. Atkreipkite dėmesį, kad panašiai kaip CSS3 nuosavybė, visi vaiko elementai taip pat paveldės šį neskaidrumo pokytį. Jei ieškote naujesnio metodo, kuris konkrečiai nukreiptas į IE8, patikrinkite toliau pateiktą kodą. Jis elgiasi taip pat, kaip mūsų filtro savybę pripažįsta tik „Microsoft IE8“ analizatorius.

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

5. CSS3 mygtukų su „Fallback“ vaizdais kūrimas

Mygtukai yra fantastiškas interneto elementas visų rūšių sąsajoms. Jie gali elgtis kaip formos įvestys, navigacijos elementai ar net tiesioginės puslapio nuorodos. Su CSS3 dabar galima formatuoti mygtukus su daugybe unikalių stilių, pvz., Fono gradientų, langelių šešėlių, apvalių kampų ir tt.

Tačiau negalite pasitikėti, kad visi jūsų lankytojai galės pateikti šias naujesnes savybes. Statant atsarginį dizainą mygtukams (ar net panašiems UI elementams) yra dvi skirtingos parinktys. Pirmasis - įtraukti fono paveikslėlį, kuris būtų sukurtas taip, kaip atrodytų CSS. Tai galima lengvai atlikti „Photoshop“ programoje. Tačiau, jei nesate programinės įrangos ekspertas, tai gali būti varginantis.

Alternatyva yra atkurti paprastą fono spalvą ir paprastesnius CSS stilius. Aš naudoju kai kuriuos CSS-Tricks'o kodo pavyzdžius CSS3 gradientuose. Visos pagrindinės naršyklės, įskaitant „Safari“, „Firefox“, „Chrome“ ir net „Opera“, palaiko šias savybes. Vietovė, kurioje susidursite su problemomis, yra senųjų naršyklių palaikymas: senesni „Mozilla“ varikliai, IE6 / 7, galbūt net „Mobile Safari“.

.gradientas-bg fono spalva: # 1a82f7; / * naudoja kietąją spalvą blogiausiu * / fono atvaizdu: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); fono vaizdas: -webkit-gradientas (tiesinis, 0% 0%, 0% 100%, nuo (# 2F2727) iki (# 1a82f7)); fono vaizdas: -webkit-linijinis gradientas (viršuje, # 2F2727, # 1a82f7); fono vaizdas: -moz-linijinis gradientas (viršuje, # 2F2727, # 1a82f7); fono vaizdas: -ms-linijinis gradientas (viršuje, # 2F2727, # 1a82f7); fono vaizdas: -o-linijinis gradientas (viršuje, # 2F2727, # 1a82f7);  

Šaltinis

Vienintelė maža problema, susijusi tik su vaizdų naudojimu kaip atsarginiu būdu, yra ta, kad, kai vartotojas spustelės mygtuką, nebus aktyvios būsenos keitimo. Galite sukurti du skirtingus vaizdus šioms reguliarioms ir aktyvioms būsenoms, nors tai užtruks papildomo darbo. Vien tik dėl šios priežasties galite naudoti kietą fono spalvą vietoj atsarginių vaizdų. Išbandykite keletą skirtingų sprendimų, kad pamatytumėte, kuris išvaizda geriausiai atitinka jūsų išdėstymą.

6. Mobiliojo turinio tikrinimas

Kita didžiulė tendencija 2012 m. Yra mobiliojo interneto naršymo populiarumas. Išmanieji telefonai yra visur ir 3G / Wi-Fi duomenys tampa vis labiau prieinami. Taigi daugelis dizainerių ieškos mobiliojo ryšio naudotojų atsarginio išdėstymo.

Pora populiarių mobiliųjų žiniatinklio naršyklių puslapius atvaizduos panašius į darbalaukio aplinką. Mobilieji „Safari“ ir „Opera“ tai geriausiai žinomi, netgi palaikantys daugelį bendrų „jQuery“ scenarijų. Tačiau šie puslapiai ne visada yra mobilūs, o „UX“ galima išplėsti.

Yra du būdai, kaip aptikti mobiliuosius naršykles ir rodyti alternatyvų išdėstymą ar stilių lentelę. Pirmasis yra „JavaScript“, kuris puikiai veikia kaip „frontend“ įrankis. Žemiau pridėtas scenarijus yra labai paprastas ir tik tikrina „iPhone“ / „iPod Touch“ naudotojus. „Detect Mobile Browsers“ - tai fantastiška svetainė, kuri siūlo išsamesnį scenarijų, kurį galite paleisti.

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

Dabar kita alternatyva yra tikrinti naudojant „backend“ kalbą, pvz., PHP. Galite patikrinti kintamąjį, žinomą kaip HTTP_USER_AGENT. Dešimtys svetainių pasirodys, jei „Google“ naudos šias sąlygas. Tačiau vis tiek rekomenduoju ankstesnėje pastraipoje pridėtą „Detect Mobile Browsers“ nuorodą.

Svetainėje yra nemokami atsisiunčiami scenarijai, skirti analizuoti ne tik PHP, bet ir kitų populiarių backend kalbų. Tai apima „ASP.NET“, „ColdFusion“, „Rails“, „Perl“, „Python“ ir netgi serverio kodą, pvz., „IIS“ ir „Apache“.

7. „Slicebox“ slankiklis su grakštumu

Mano mėgstamiausia „CSS3“ nemokamų žaidynių versija nuo 2011 m. Turbūt turi būti „Slicebox 3D Image Slider“, išleista „Codrops“. Jis naudoja gražius CSS animacijos perėjimus naršyklėse, palaikančiose jas, šiuo metu „Google Chrome“ ir naujausias „Safari“. Tai keista, kad net naujausias „Firefox“ arba „IE9“ leidimas vis dar negali naudoti šių perėjimų.

Geriausia šio kodo dalis yra ta, kad jis vis tiek bus nepagrįstas, kad būtų galima atlikti pagrindinius perėjimo efektus tarp vaizdų. Didelė dalis animacijos atliekama naudojant „jQuery“, tačiau standartinė „CSS“ atsarginė galimybė vis dar yra labai patikima, atsižvelgiant į tai, kiek naršyklės negali palaikyti baisių CSS3 animacijų.

Arba „Codrops“ taip pat neseniai išleido kitą stumdomų vaizdų skydelį, kuriame naudojami dar kūrybiškesni CSS3 metodai. Šis vaizdo slankiklis sukuriamas naudojant foninius vaizdus CSS, taigi net be perėjimo efektų jis veikia labai sklandžiai.

8. jQuery scenarijaus CDN „Failsafe“ metodas

„JQuery“ biblioteka tapo beveik būtina plėtojant „JavaScript“ žiniatinklyje. Daugelis alternatyvių CDN tiekėjų sukūrė statinius URL, kuriuose jie priima visas „jQuery“ versijas. „Google“, „Microsoft“ ir net „jQuery“ sukūrė CDN portalą kūrėjams, tarp kelių kitų mažiau žinomų svetainių.

Galbūt šimtai tūkstančių kūrėjų priklauso nuo šių paslaugų teikėjų. Kas atsitiktų, jei kuri nors iš nuorodų buvo sugadinta dėl bet kokios priežasties arba jei serveriai neprisijungę? Būtų gera idėja surengti vietinę kopiją ir ją įgyvendinti tik tuo atveju, jei to reikia. Na, šis puikus atsarginių kodų fragmentas iš CSS-Tricks leidžia jums tai padaryti!

Šaltinis

9. Unikalūs HTML5 žymės langeliai

HTML5 atvėrė duris tam tikriems šviežiams stiliams kurti. Dalis šios patobulintos interneto patirties yra formų ir įvesties elementų. Dėžutės yra tik vienas pavyzdys, kuris gali būti pritaikytas pagal jūsų poreikius.

Buvau į šį nuostabų CSS / jQuery vadovėlį, kuris buvo paskelbtas 2011 m. Pavasario pradžioje. Jis siūlo paprastą „Apple“ stiliaus jungiklių kūrimo būdą jūsų žymimiesiems langeliams, kurie gražiai sugriauna senesnėse naršyklėse. Kodas naudoja fono paveikslėlius, kad pakeistų įjungimo / išjungimo stilius tarp vartotojų sąveikos.

Pradiniai įvesties žymės elementai yra paslėpti pagal numatytuosius nustatymus ir jų vertė nustatoma naudojant „JavaScript“ skambučius. Tai reiškia, kad jūs galite dinamiškai ištraukti vertę bet kuriame taške per jQuery, bet jis taip pat bus perduotas į formą, kai pataikysite “Pateikti” mygtukas.

Darant prielaidą, kad „JavaScript“ yra išjungtas arba nepalaikomas senesnėse naršyklėse, scenarijus bus numatytas įprastoms HTML įvestims. Tai taip pat išjungs naujesnių žymės langų CSS, todėl jis bus rodomas taip, tarsi niekas nepasikeitė. Scenarijus elgiasi labiau kaip estetinis priekinis bėgikas, turintis švarų atsargą nei bet kas kitas. Tačiau šie slankikliai atrodo fantastiški, ir tokie patys metodai gali būti taikomi kitiems formų įvesties laukams, pvz., Pasirinkti meniu ir radijo mygtukus.

10. HTML5 palaikomas vaizdo įrašas

Naujosios HTML5 specifikacijos daugelyje sričių buvo labai progresyvios. Tiek vaizdo, tiek garso elementai turi didesnę paramą daugeliui medijos failų. Tačiau paaiškėja, kad tarp HTML5 palaikomų naršyklių jie ne visi sutinka su failų tipais.

„Mozilla Firefox“ paprastai palaiko .OGG vaizdo įrašą, kurį galite naudoti VLC kaip konverterį. „Google Chrome“ ir „Safari“ ieško .MP4 arba H.264 koduotų .MOV failų. Dėl šių skirtumų jūs paprastai turite įtraukti trys skirtingi vaizdo formatai - du pirmiau išvardyti kartu su.

Laimei, kai kurie iš tikrųjų protingi vaikinai sujungė biblioteką, pavadintą „VideoJS“. Tai labai mažas „JavaScript“ kūrimas, kuris leidžia vienu „Flash“ ir „HTML5“ vaizdo įrašo įgyvendinimu vienu žymekliu. Nemokamai parsisiųsti ir atviro kodo, todėl kūrėjai taip pat kviečiami prisidėti. „Flash“ ir „HTML5“ vaizdo įrašų grotuvai yra pritaikyti taip, kad jie būtų vienodi, todėl visi vartotojai turės tą pačią patirtį. Peržiūrėkite jų HTML5 vaizdo įterpimo kodo pavyzdį:

Šaltinis

Po panašaus maršruto projektas html5media siūlo būdą, kaip konsoliduoti visas transliavimo laikmenas į vieną failo tipą. Deja, net ir „VideoJS“ nėra tobula su kiekviena naršykle. „Html5media“ projektas bandė atlikti naršyklės nesuderinamumą, kad palaikytų bet kokį vaizdo failų tipą tarp visų platformų. Ir tai tikrai veikia gana gerai!

Išvada

Tikiuosi, kad šis naudingų atsarginių metodų vadovas bus naudingas žiniatinklio kūrėjams visame pasaulyje. Tai gali būti sunku kurti tinklapis, kad pritaikytumėte įvairioms programinės įrangos specifikacijoms. Tai ypač pasakytina, kai dirbate su įvairiomis kalbomis, pvz., CSS ir JavaScript.

Tačiau tendencijos rodo, kad artėjame prie palankesnės interneto dizaino epochos. Niekada anksčiau nebuvo susitarta dėl daugiau naršyklių ir interneto standartų, ypač CSS3 ir HTML5. Šie metodai yra tik keletas iš daugelio, į kuriuos reikia atsižvelgti kuriant standartus atitinkančius tinklalapius. Kaip žiniatinklio kūrėjas, jūs nuolat norėsite sekti naujausias dizaino tendencijas ir prisitaikyti, kad geriausiai atitiktų jūsų auditoriją.