10 Užitočné metódy obnovy pre CSS a Javascript

Záložky kódu sú dokonalým riešením pre kompromisy s mnohými jedinečnými návštevníkmi. Nie všetci používatelia na webe používajú rovnaký operačný systém, webový prehliadač alebo dokonca fyzický hardvér. Všetky tieto faktory ovplyvňujú, ako sa vaša webová stránka skutočne zobrazí na obrazovke. Pri práci s novými prvkami CSS alebo JavaScript sa často vyskytujú také technické chyby.

Ale nenechajte tieto nástrahy odradiť! V tejto príručke som dal dohromady niektoré najčastejšie núdzové techniky pre webových dizajnérov so zameraním na CSS a JavaScript / jQuery. Keď sa všetky ostatné zlyhajú, chcete poskytnúť používateľom aspoň základné funkcie stránky. Jednoduchosť vládne najvyššie v oblasti návrhu používateľských skúseností.

Pozrite si našu sprievodcu nižšie a dajte nám vedieť vaše myšlienky a otázky v sekcii komentárov.

1. Zaoblené rohy so snímkami

Techniky CSS3 sa rýchlo rozvinuli do bežného webového dizajnu. Jednou z najvýznamnejších vlastností je border-radius ktorá umožňuje zaoblené zaoblené rohy. Vyzerajú krásne na prakticky ľubovoľnom tlačidle, div alebo textovom poli. Jediným problémom je obmedzená podpora medzi webovými prehliadačmi.

Mnohé staršie prehliadače vrátane programu Internet Explorer 7 túto vlastnosť nepodporujú. Takže ak chcete mať zaoblené rohy fungujúce pre všetky štandardné prehliadače, musíte vytvoriť záložný obraz.

Štandardný kód používa bežné vlastnosti CSS3 na hlavnom div, pričom je schopný zachytiť obrazy v každom rohu. Pravdepodobne budete musieť nastaviť niekoľko extra divov v hlavnom kontajneri, ktoré sa používajú na zobrazenie rohových obrázkov na pozadí.

#mainbox -webkit-okraj-polomer: 5px; / * Safari * / -moz-okraj-polomer: 5px; / * Firefox \ Gecko Engine * / -o-okraj-polomer: 5px; / * Opera * / okraj-polomer: 5px;  #mainbox .topc background: url ('corner-tl.png') neopakovať vľavo hore;  #mainbox .topc span pozadie: url ('corner-tr.png') no-repeat vpravo hore;  #mainbox .btmc pozadie: url ('corner-bl.png') no-repeat bottom left;  #mainbox .btmc span (pozadie: url ('corner-br.png') no-repeat bottom right;  

Ak chcete ušetriť zo stresu, odporúčam používať aplikáciu ako RoundedCornr. Je to webová aplikácia v prehliadači, ktorá vytvára zaoblené rohové CSS pomocou CSS3 aj obrázkov. To bude obzvlášť užitočné pre návrhárov, ktorí nemajú prístup k grafickému softvéru, ako je Photoshop alebo GIMP.

2. JQuery Dropdown Menu System

Systémy rozbaľovacích ponúk sú ideálne pre dnešné webové stránky. Avšak najväčším problémom sú návštevníci, ktorí pristupujú na vašu webovú lokalitu bez povoleného jazyka JavaScript. V tomto prípade by žiadne z vašich ponúk nefungovalo vôbec! Najlepším riešením je použitie CSS na zobrazenie / skrytie jednotlivých blokov diviniek a ich zobrazenie na hover.

Jediným problémom s týmto riešením je, že program Internet Explorer 6 nepodporuje tieto selektory CSS hover. IE7 + funguje skvele; a samozrejme všetky prehliadače budú fungovať dobre, ak je zapnutý JavaScript. Kód z tohto tutoriálu na CSS Plus je jedným z najlepších zdrojov, ktoré som našiel. Poskytuje nielen riešenie s jQuery, ale aj CSS nevyhnutné pre IE problémy.

/ * Trieda prúdu sa pridá cez jQuery * / #nav li.current> a background: # f7f7f7;  / * Záložka CSS * / #nav li: hover> ul.child zobrazenie: blok;  #nav li: hover> ul.grandchild zobrazenie: blok;  

zdroj

Ďalším alternatívnym riešením, ktoré môžete vyskúšať, je otvorené zobrazenie každej ponuky v IE6. Podmienené komentáre programu Internet Explorer môžete použiť na použitie štýlov založených na verzii prehliadača. Toto samozrejme nebude najkrajším riešením, ale jednoducho to bude fungovať.

Ak nemáte pocit, že program Internet Explorer 6 vyvoláva veľa obáv, potom sa s touto alternatívnou náhradou neobťažuje. Tutoriál a následný kód uvedený vyššie by mali stačiť na to, aby sa vaše menu s JavaScriptom načítavalo aj pri prísnom CSS vo všetkých hlavných prehliadačoch.

3. Zacielené štýly programu Internet Explorer

Som si istý, že všetci vieme o problémoch s vykresľovaním, ktoré vyšli z programu Internet Explorer spoločnosti Microsoft. Môžem dať trochu úver pre ich najnovšie IE8 a budúce vyhliadky s IE9. IE6 / IE7 však stále má malé publikum, ktoré ste naozaj nemôžete ignorovať.

(Zdroj obrázku: github)

Podmienené komentáre uvedené v poslednej časti môžu byť užitočné pri preformátovaní oblastí stránky. Napríklad, ak máte rozbaľovaciu ponuku s navigačnou navigáciou v IE6, ktorá sa zobrazí iba pomocou jazyka JavaScript, nebudete mať radšej skúšať CSS ako záložnú metódu. Namiesto toho je najlepším riešením zobraziť každý podsúbor ako navigačný blok.

Pridaním vyššie uvedeného kódu do záhlavia dokumentu môžete potom špecifikovať typ zobrazenia pre každú navigačnú podložku. Najlepšia časť tohto zálohovania je, že pri prepínaní jazyka JavaScript môžete prepísať ponuky CSS a dynamicky zobrazovať / skryť ponuky. V opačnom prípade stačí zobraziť otvorený zoznam odkazov. Môžete použiť podobný kód, aký som pridal nižšie.

#nav li pozícia: relatívna; šírka: 150 pixlov; / * musí nastaviť konečnú šírku pre IE * / #nav li ul / * sub-nav kódy * / display: block; poloha: absolútna; šírka: auto; / * definujte svoju vlastnú šírku alebo nastavte v prvku li * / #nav li ul li šírka: 100%;  

4. Opacity / Transparency IE

Jedna z mnohých otravných chýb s programom Internet Explorer je riešenie opacity. Nastavenie alfa-transparentnosti v CSS3 možno zmeniť pomocou vlastnosti krytia. Napriek tomu v spôsobe Microsoft iba Internet Explorer 9 v súčasnosti podporuje túto funkciu.

Najlepšie riešenie na zacielenie na IE6 + je cez filter, proprietárne nastavenie, ktoré uznáva IE. Pozrite si príklad krátkeho kódu:

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

Všetko, čo musíte urobiť, je zaradiť vyššie uvedený riadok do akéhokoľvek prvku vyžadujúceho priehľadnosť. Všimnite si, že podobne ako vlastnosť CSS3, všetky podradené elementy takisto zdedia túto zmenu opacity. Ak hľadáte novšiu metódu, ktorá je špecificky zameraná na IE8, pozrite si kód uvedený nižšie. Chová sa to rovnakým spôsobom, ako naša vlastnosť filtra je rozpoznávaná iba analyzátorom Microsoft IE8.

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

5. Vytváranie tlačidiel CSS3 s fallback obrázky

Tlačidlá sú fantastický webový prvok pre všetky druhy rozhraní. Môžu sa správať ako vstupné formuláre, navigačné položky alebo dokonca priamo odkazy na stránky. Pomocou CSS3 je teraz možné formátovať tlačidlá s mnohými unikátnymi štýlmi, ako sú gradienty na pozadí, tieň v skrinke, zaoblené rohy atď..

Nemôžete však veriť, že všetci vaši návštevníci budú môcť vykresliť tieto novšie vlastnosti. Pri vytváraní záložnej konštrukcie tlačidiel (alebo dokonca podobných prvkov používateľského rozhrania) existujú dve odlišné možnosti. Prvým je zahrnutie obrázka pozadia navrhnutého presne tak, ako by vyzeral ako CSS. To sa dá ľahko realizovať vo Photoshope. Ak však nie ste odborníkom na softvér, môže to byť problém.

Alternatívou je núdzová farba na obyčajnú farbu pozadia a jednoduchšie štýly CSS. Používam niektoré z príkladov kódu z CSS-triky skvelého príspevku na gradientoch CSS3. Všetky tieto hlavné prehliadače vrátane programov Safari, Firefox, Chrome a dokonca Opera podporujú tieto vlastnosti. Oblasť, kde narazíte na problémy, je v podpore starších prehliadačov: staršie motory Mozilla, IE6 / 7, dokonca aj Mobile Safari.

.gradient-bg farba pozadia: # 1a82f7; / * používa pevnú farbu v najhoršom prípade * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); obrázok-pozadí: -webkit-gradient (lineárny, 0% 0%, 0% 100%, od (# 2F2727) až po (# 1a82f7)); pozadie-obrázok: -webkit-lineárny gradient (hore, # 2F2727, # 1a82f7); pozadia-obrázok: -moz-lineárny gradient (hore, # 2F2727, # 1a82f7); pozadie-obrázok: -ms-lineárny gradient (hore, # 2F2727, # 1a82f7); obrázok na pozadí: -o-lineárny gradient (hore, # 2F2727, # 1a82f7);  

zdroj

Jediný malý problém, ktorý používa výlučne obrázky ako alternatívna metóda, je, že nebudete mať aktívnu zmenu stavu, keď používateľ klikne na tlačidlo. Mohli by ste vytvoriť dva rôzne obrázky pre tieto pravidelné a aktívne stavy, hoci by to vyžadovalo niečo navyše. Z tohto dôvodu vás môže dôjsť k tomu, aby ste namiesto záložných obrázkov používali pevnú farbu pozadia. Vyskúšajte niekoľko rôznych riešení, aby ste zistili, čo najlepšie vyzerá v rozložení.

6. Kontrola mobilného obsahu

Ďalším obrovským trendom v roku 2012 je popularita prehliadania mobilného internetu. Smartfóny sú všade a dáta cez 3G / Wi-Fi sa stávajú stále dostupnejšie. Takže mnohí dizajnéri sa budú snažiť poskytnúť núdzové usporiadanie pre mobilných používateľov.

Niekoľko populárnych mobilných webových prehliadačov bude zobrazovať stránky podobné pracovnému prostrediu. Mobilné Safari a Opera sú najznámejšie, dokonca podporujú mnohé bežné skripty jQuery. Tieto stránky však nie sú vždy priateľské k mobilným telefónom a existuje priestor na rozšírenie na UX.

Existujú dva spôsoby, ako môžete zistiť mobilné prehliadače a zobraziť alternatívne rozloženie alebo štýl. Prvý je cez JavaScript, ktorý funguje skvele ako nástroj frontend. Nižšie uvedený skript je veľmi jednoduchý a kontroluje iba používateľov iPhone / iPod Touch. Detect Mobile Browsers je fantastická webová stránka, ktorá ponúka podrobnejší skript, ktorý môžete spustiť.

// Presmerovanie funkcie iPhone / iPod Touch isiPhone () return ((navigátor.platform.indexOf ("iPhone")! = -1) || (navigátor.platform.indexOf ("iPod")! = -1));  ak (isiPhone ()) window.location = "m.yourdomain.com";  

Teraz druhá alternatíva prechádza cez podporný jazyk, napríklad PHP. Môžete skontrolovať premennú známu ako HTTP_USER_AGENT. Desiatky webových stránok sa objavia v prípade, že Google tieto podmienky. Stále však odporúčam odkaz Detect Mobile Browsers, ktorý som pridala do predchádzajúceho odseku.

Stránka má voľne stiahnuteľné skripty na analýzu nielen v PHP, ale aj veľa ďalších populárnych podporných jazykov. Patria sem ASP.NET, ColdFusion, Rails, Perl, Python a dokonca aj serverový kód ako IIS a Apache.

7. Slider Slicebox s elegantným Fallback

Môj obľúbený CSS3 freebie od roku 2011 pravdepodobne musí byť Slicebox 3D Image Slider, ktorý vydal Codrops. Využíva krásne prechody animácie CSS v prehliadačoch, ktoré ich podporujú, v súčasnosti v prehliadači Google Chrome a najnovšie v programe Safari. Je divné, že ani najnovšie vydanie prehliadača Firefox ani IE9 nemôže tieto prechody využívať.

Najlepšia časť o tomto kóde je to, že bude stále späť, aby poskytlo základné prechodové efekty medzi obrázkami. Veľká časť animácie sa vykonáva prostredníctvom nástroja jQuery, ale štandardná možnosť zálohovania CSS je stále veľmi spoľahlivá vzhľadom na to, koľko prehliadačov nemôže podporovať farebné animácie CSS3.

Alternatívne sa Codrops taktiež nedávno vydali ďalším posuvným obrazovým panelom, ktorý využíva ešte viac kreatívne techniky CSS3. Tento posúvač obrázkov je vytvorený pomocou obrázkov na pozadí v systéme CSS, takže aj bez prechodových efektov sa správa veľmi hladko.

8. JQuery Script CDN metóda Failsafe

Knižnica jQuery sa stala takmer nevyhnutnou pre vývoj JavaScriptu na webe. Mnoho alternatívnych dodávateľov CDN vytvorilo statické adresy URL, na ktorých sú umiestnené všetky vydané verzie jQuery. Google, Microsoft a dokonca i jQuery vytvorili CDN portál pre vývojárov, medzi niekoľkými ďalšími menej známymi webovými stránkami.

Existujú pravdepodobne stovky tisíc vývojárov, ktorí sú odkázaní na týchto poskytovateľov. Čo by sa stalo, keby sa niektorý z odkazov prerušil z akéhokoľvek dôvodu alebo aby sa servery odpojili? Bolo by dobré hostiť miestnu kópiu a implementovať ju iba v prípade, že by ste ju potrebovali. No tento skvelý útržok kódu z CSS-Tricks vám to umožní jednoducho!

zdroj

9. Unikátne políčka HTML5

HTML5 otvoril dvere pre niektoré nové cool štýly stavať webové stránky. Časť tejto vylepšenej skúsenosti s webom je prostredníctvom formulárov a vstupných prvkov. Zaškrtávacie políčka sú len jedným príkladom, ktorý môže byť veľmi prispôsobený vašim potrebám.

Prichádzal som do tohto úžasného tutoriálu CSS / jQuery vyslaného späť na začiatku jari 2011. Ponúka jednoduchú metódu vytvárania prepínačov v štýle Apple pre vaše začiarkavacie políčka, ktoré elegantne zhoršujú staršie prehliadače. Kód používa obrázky na pozadí na nahradenie štýlov zapnutia / vypnutia medzi interakciami používateľov.

Pôvodné prvky začiarkavacieho políčka sú v predvolenom nastavení skryté a ich hodnota je určená prostredníctvom volaní v jazyku JavaScript. To znamená, že môžete dynamicky vytiahnuť hodnotu v ľubovoľnom bode cez jQuery, ale tiež prejdete do formy po stlačení tlačidla “Predložiť” gombík.

Za predpokladu, že JavaScript je vypnutý alebo nepodporovaný v starších prehliadačoch, bude skript predvolený na normálne HTML vstupy. Toto tiež zakáže CSS pre novšie štýly začiarkavacích políčok, takže sa to bude zdalo, akoby sa nič nezmenilo. Skript sa správa viac ako estetický front-runner s čistou núdzou, ako čokoľvek iné. Ale tieto posúvače vyzerajú fantasticky a rovnaké techniky by sa mohli použiť aj na iné vstupné polia formulára, ako sú napríklad výberové menu a prepínacie tlačidlá.

10. Podporované video HTML5

Nové špecifikácie HTML5 boli v mnohých oblastiach veľmi progresívne. Obe video a audio prvky majú vylepšenú natívnu podporu pre veľký počet mediálnych súborov. Ukázalo sa však, že medzi prehliadačmi podporovanými formátom HTML5 sa všetci nedohodnú na typoch súborov.

Mozilla Firefox vo všeobecnosti podporuje video .OGG, ktoré môžete použiť ako konvertor VLC. Prehliadač Google Chrome a Safari vyhľadávajú súbory MOV s formátom .MP4 alebo H.264. Kvôli týmto rozdielom by ste zvyčajne museli zahrnúť tri rôzne video formáty - dva vyššie uvedené spolu s náhradou .FLV.

Našťastie niektorí skutočne inteligentní chlapci vytvorili knižnicu s názvom VideoJS. Je to mimoriadne malá zostava jazyka JavaScript, ktorá umožňuje jedinú implementáciu videa vo formáte Flash a HTML5 v jednej značke. Je zadarmo na stiahnutie a open source, takže vývojári sú vítaní aj prispievať. Prehrávače videa Flash i HTML5 sú prispôsobené tak, aby boli rovnaké, takže všetci používatelia budú mať rovnaký zážitok. Pozrite si ich príklad kódovania vloženia videa HTML5:

zdroj

Po podobnej ceste ponúka projekt html5media metódu na konsolidáciu všetkých streamingových médií do jedného súborového typu. Bohužiaľ ani VideoJS nie je perfektný pri každom prehliadači. Projekt html5media sa pokúsil vyriešiť nekompatibilitu prehliadačov, aby podporila akýkoľvek typ video súborov medzi všetkými platformami. A funguje to celkom dobre!

záver

Dúfam, že táto príručka užitočných núdzových metód prichádza do praxe pre webových vývojárov po celom svete. Môže byť ťažké budovanie webových stránok prispôsobiť sa širokému spektru špecifikácií softvéru. Platí to najmä vtedy, keď pracujete s mnohými rôznymi jazykmi, ako sú CSS a JavaScript.

Trendy však naznačujú, že sa blížime k podpornej ére vo webovom dizajne. Nikdy predtým nebolo dohodnuté viac prehliadačov a webových štandardov, najmä v rámci CSS3 a HTML5. Tieto techniky sú len niektoré z mnohých, ktoré je potrebné zvážiť pri vytváraní webových stránok kompatibilných s normami. Ako webový vývojár budete neustále chcieť sledovať najnovšie trendy v oblasti dizajnu a prispôsobovať sa tak, aby najlepšie vyhovovali vašim publikám.