10 Užitečné metody zpětné vazby pro CSS a Javascript

Základy kódu jsou ideálním řešením pro kompromisy s mnoha jedinečnými návštěvníky. Ne každý na webu používá stejný operační systém, webový prohlížeč nebo dokonce fyzický hardware. Všechny tyto faktory do toho, jak vaše webové stránky budou skutečně vykreslit na obrazovce. Při práci s novými CSS nebo JavaScript triky často narazíte na takové technické chyby.

Nedovolte, aby vás tato úskalí odradila! V této příručce jsem složil některé z nich nejpoužívanějších technik pro webové designéry se zaměřením na CSS a JavaScript / jQuery. Pokud vše ostatní selže, chcete uživatelům poskytnout alespoň základní funkce stránky. Jednoduchost vládne v oblasti designu uživatelských zkušeností.

Podívejte se na náš průvodce níže a dejte nám vědět své myšlenky a otázky v sekci komentáře.

1. Zaoblené rohy s obrázky

Techniky CSS3 vyletěly do běžného webového designu. Jednou z nejvýznamnějších vlastností je poloměr ohraničení který umožňuje zaokrouhlené rohy. Vypadají krásně prakticky na každém tlačítku, div nebo textovém poli. Jediný problém je omezená podpora mezi webovými prohlížeči.

Mnoho starších prohlížečů včetně aplikace Internet Explorer 7 tuto vlastnost nepodporuje. Aby bylo možné zachovat zaoblené rohy pro všechny standardní prohlížeče, budete muset vytvořit záložní obrázek s obrázky.

Standardní kód používá běžné CSS3 vlastnosti na hlavním div při přizpůsobení pro obrazy na každém z rohů. Pravděpodobně budete muset nastavit některé extra divs uvnitř hlavního kontejneru, které se používají pro zobrazení rohových obrazů v pozadí.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox Gecko Engine * / -o-border-radius: 5px; / * Opera * / hraniční rádius: 5px;  #mainbox .topc background: url ('corner-tl.png') vlevo vlevo;  #mainbox .topc span background: url ('corner-tr.png') pravé opakování vpravo;  #mainbox .btmc background: url ('corner-bl.png') vlevo vlevo dole;  #mainbox .btmc span background: url ('corner-br.png') vpravo dole;  

Chcete-li ušetřit ze stresu jsem velmi doporučuji používat aplikaci, jako je RoundedCornr. Jedná se o webovou aplikaci v prohlížeči, která generuje zaoblený roh CSS pomocí CSS3 a obrázků. To bude užitečné zejména pro designéry, kteří nemají přístup k grafickému softwaru, jako je Photoshop nebo GIMP.

2. jQuery Dropdown Menu System

Systémy rozevírací nabídky jsou ideální pro dnešní web. Největším problémem však jsou návštěvníci, kteří přistupují na vaše webové stránky bez aktivovaného JavaScriptu. V tomto případě by žádné z vašich nabídek nefungovalo vůbec! Nejlepším řešením je použití CSS k zobrazení / skrytí každého z dílčích menu dílčí nabídky a zobrazení na přechodu.

Jediný problém s tímto řešením je, že aplikace Internet Explorer 6 tyto přepínače CSS hover nepodporuje. Nicméně IE7 + funguje skvěle; a samozřejmě všechny prohlížeče budou fungovat správně, pokud je JavaScript zapnut na prvním místě. Kód z tohoto návodu na CSS Plus je jedním z nejlepších zdrojů, které jsem našel. Poskytuje nejen řešení s jQuery, ale také CSS potřebné pro IE problémy.

/ * Třída proudu bude přidána přes jQuery * / #nav li.current> a background: # f7f7f7;  / * CSS nouzové * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild zobrazit: blok;  

Zdroj

Dalším alternativním řešením, které můžete vyzkoušet, je pouze zobrazení jednotlivých nabídek v IE6. Podmíněné komentáře aplikace Internet Explorer můžete použít k použití stylů založených na verzi prohlížeče. Samozřejmě to nebude nejkrásnější řešení, ale bude to prostě fungovat.

Pokud nemáte pocit, že Internet Explorer 6 je hodně starostí, pak se ani neobtěžujte tímto alternativním nouzovým řešením. Výukový program a následující kód by měl stačit k načtení nabídky JavaScriptu i s přísnými CSS ve všech hlavních prohlížečích.

3. Cílené styly aplikace Internet Explorer

Jsem si jistý, že všichni víme o problémech s renderováním, které vycházejí z Internet Exploreru Microsoftu. Mohu dát trochu úvěru na jejich nejnovější IE8 a budoucí vyhlídky s IE9. Nicméně stále existuje malé publikum běžící IE6 / IE7 a opravdu je nemůžete ignorovat.

(Zdroj obrázku: github)

Podmíněné komentáře uvedené v poslední části mohou být užitečné pro přeformátování oblastí stránky. Například, pokud máte v IE6 rozbalovací nabídku s dílčí navigací, která se bude zobrazovat pouze pomocí JavaScriptu, budete mít štěstí, že se CSS pokouší jako nouzová metoda. Místo toho je nejlepším řešením zobrazit každý dílčí seznam jako navigační blok.

Přidání výše uvedeného kódu do záhlaví dokumentu pak můžete určit typ zobrazení pro každou dílčí navigaci. Nejlepší část o tomto nouzovém stavu je, že můžete přepsat CSS a stále dynamicky zobrazovat / skrýt nabídky, když je povolen JavaScript. Jinak se zobrazí pouze otevřený seznam odkazů. Můžete použít podobný kód jako to, co jsem přidal níže.

#nav li position: relativní; šířka: 150px; / * musí nastavit konečnou šířku pro IE * / #nav li ul / * sub-nav kódy * / display: block; pozice: absolutní; width: auto; / * definujte svou vlastní šířku nebo nastavte v prvku li * / #nav li ul li width: 100%;  

4. Legacy IE Opacity / Transparency

Jednou z mnoha nepříjemných chyb s aplikací Internet Explorer je řešení s neprůhledností. Nastavení průhlednosti alfa v CSS3 lze měnit prostřednictvím vlastnosti opacity. V současné době tuto funkci podporuje pouze aplikace Internet Explorer 9 společnosti Microsoft.

Nejlepší řešení pro cílení IE6 + je filtr, vlastní nastavení rozpoznané pouze IE. Podívejte se na stručný příklad kódu níže:

.mydiv opacity: 0.55; / * CSS3 * / filtr: alfa (opacity = 55); / * IE6 + * / 

Jediné, co musíte udělat, je zahrnout řádek nad libovolný prvek vyžadující průhlednost. Všimněte si, že podobná vlastnost CSS3, všechny podřízené prvky také zdědí tuto změnu opacity. Pokud hledáte novější metodu, která cílí konkrétně IE8, podívejte se na níže uvedený kód. Chová se stejně jako naše vlastnost filtru je rozpoznána pouze analyzátorem Microsoft IE8.

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

5. Vytvoření CSS3 tlačítek s Fallback Images

Tlačítka jsou fantastickým webovým prvkem pro všechny druhy rozhraní. Mohou se chovat jako vstupy do formulářů, navigační položky nebo dokonce přímé odkazy na stránky. S CSS3 je nyní možné formátovat tlačítka s mnoha jedinečnými styly, jako jsou přechody pozadí, stíny boxů, zaoblené rohy atd..

Nemůžete však věřit, že všichni vaši návštěvníci budou moci tyto novější vlastnosti vykreslit. Při vytváření nouzového návrhu pro tlačítka (nebo dokonce podobné prvky uživatelského rozhraní) existují dvě odlišné možnosti. První je zahrnout obrázek na pozadí navržený přesně podle vzhledu CSS. To lze snadno provést ve Photoshopu. Nicméně pokud nejste odborník na software, pak to může být problematické.

Alternativou je narušení prosté barvy pozadí a jednodušších stylů CSS. Používám některé z příkladů kódu z CSS-triků skvělý příspěvek na CSS3 přechody. Všechny hlavní prohlížeče včetně Safari, Firefox, Chrome a dokonce i Opera podporují tyto vlastnosti. Oblast, kde narazíte na problémy, je v podpoře starších prohlížečů: starších motorů Mozilla, IE6 / 7, možná i mobilního Safari.

.gradient-bg background-color: # 1a82f7; / * používá plnou barvu v nejhorším * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); pozadí-obraz: -webit-gradient (lineární, 0% 0%, 0% 100%, od (# 2F2727), do (# 1a82f7)); pozadí-obraz: -webk-lineární gradient (horní, # 2F2727, # 1a82f7); pozadí-obraz: -moz-lineární gradient (horní, # 2F2727, # 1a82f7); pozadí-obraz: -ms-lineární gradient (horní, # 2F2727, # 1a82f7); pozadí-obraz:-lineární gradient (horní, # 2F2727, # 1a82f7);  

Zdroj

Jediný malý problém s použitím pouze obrázků jako nouzové metody je, že nebudete mít aktivní stav, když uživatel klikne na tlačítko. Můžete vytvořit dva různé obrazy pro tyto pravidelné versus aktivní stavy, i když by to vyžadovalo nějakou práci navíc. Tento důvod vás může nutit k použití pevné barvy pozadí namísto záložních obrazů. Vyzkoušejte několik různých řešení, abyste zjistili, co nejlépe vypadá ve vašem rozložení.

6. Kontrola mobilního obsahu

Dalším obrovským trendem v roce 2012 je popularita mobilního prohlížení internetu. Smartphony jsou všude a data přes 3G / Wi-Fi jsou stále přístupnější. Mnoho designérů tak bude chtít poskytnout mobilnímu uživateli záložní uspořádání.

Několik populárních mobilních webových prohlížečů vykreslí stránky podobné prostředí pracovní plochy. Mobile Safari a Opera jsou nejlépe známé pro toto, dokonce podporovat mnoho obyčejných jQuery skriptů. Tyto stránky však nejsou vždy mobilní a je zde prostor pro rozšíření o UX.

Existují dva způsoby detekce mobilních prohlížečů a zobrazení alternativního rozložení nebo šablony stylů. První je prostřednictvím JavaScriptu, který funguje jako nástroj frontendu. Skript, který jsem přidal níže, je velmi jednoduchý a pouze kontroluje uživatele zařízení iPhone / iPod Touch. Rozpoznat mobilní prohlížeče je fantastický web, který nabízí podrobnější skript, který můžete spouštět.

// Přesměrování iPhone / iPod Dotyková funkce isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1));  if (isiPhone ()) window.location = "m.yourdomain.com";  

Druhou alternativou je kontrola prostřednictvím backendového jazyka, například PHP. Můžete zkontrolovat proměnnou známou jako HTTP_USER_AGENT. Desítky webových stránek se objeví, pokud Google tyto podmínky. Nicméně stále doporučuji odkaz Rozpoznat mobilní prohlížeče přidaný v předchozím odstavci.

Stránky mají zdarma ke stažení skripty pro analýzu nejen v PHP, ale také tuny dalších populárních backend jazyků. Patří mezi ně technologie ASP.NET, ColdFusion, Rails, Perl, Python a dokonce i serverový kód, například IIS a Apache..

7. Slicebox Posuvník s Graceful Fallback

Můj oblíbený CSS3 freebie z roku 2011 pravděpodobně musí být Slicebox 3D Image Slider vydaný Codropsem. Využívá krásné přechody CSS animací v prohlížečích, které je podporují, v současné době v prohlížeči Google Chrome a nejnovější verzi Safari. Je divné, že i ty nejnovější verze Firefoxu nebo IE9 tyto přechody nemohou používat.

Nejlepší část o tomto kódu je to, že bude i nadále poskytovat základní přechodové efekty mezi obrazy. Velká část animace je udělována prostřednictvím jQuery, ale standardní volba CSS pádu je stále velmi spolehlivá s ohledem na to, kolik prohlížečů nemůže podporovat honosné animace CSS3.

Alternativně Codrops také nedávno vydal další panel s posuvnými obrázky, který využívá ještě více kreativních technik CSS3. Tento posuvník je vytvořen pomocí obrázků na pozadí v CSS, takže i bez přechodových efektů se chová velmi hladce.

8. jQuery Script CDN Failsafe metoda

Knihovna jQuery se stala téměř nezbytnou pro vývoj JavaScriptu na webu. Mnoho alternativních dodavatelů CDN vytvořilo statické adresy URL, na kterých jsou umístěny všechny verze vydání produktu jQuery. Google, Microsoft a dokonce i jQuery sami vytvořili portál CDN pro vývojáře, mezi několika málo méně známými webovými stránkami..

Na tyto poskytovatele se mohou spolehnout stovky tisíc vývojářů. Co by se stalo, kdyby některý z odkazů byl z nějakého důvodu přerušen nebo kdyby servery šly offline? Bylo by dobré hostit místní kopii a implementovat ji pouze v případě, že ji budete potřebovat. No tento velký útržek kódu z CSS-Tricks vám to umožní!

Zdroj

9. Unikátní zaškrtávací políčka HTML5

HTML5 otevřela dveře pro některé nové cool styly pro tvorbu webových stránek. Součástí této vylepšené webové zkušenosti je prostřednictvím formulářů a vstupních prvků. Zaškrtávací políčka jsou jen jeden příklad, který může být silně přizpůsoben vašim potřebám.

Běžel jsem do této nádherné CSS / jQuery tutorial zaslán zpět na začátku jara 2011. Nabízí jednoduchý způsob vytváření přepínačů ve stylu Apple pro vaše zaškrtávací políčka, které ladně degradují ve starších prohlížečích. Kód používá obrázky pozadí k nahrazení stylů zapnuto / vypnuto mezi interakcemi uživatele.

Prvky vstupního políčka jsou ve výchozím nastavení skryty a jejich hodnota je určena pomocí volání JavaScriptu. To znamená, že můžete dynamicky tahat hodnotu v libovolném bodě přes jQuery, ale bude také předána do formuláře po stisknutí klávesy “Předložit” tlačítko.

Za předpokladu, že JavaScript je ve starších prohlížečích vypnutý nebo nepodporovaný, bude skript standardně nastaven na běžné HTML vstupy. Tím se také vypnou CSS pro novější styly zaškrtávacího políčka, takže se bude zobrazovat, jako by se nic nezměnilo. Skript se chová spíše jako estetický front-runner s čistým pádem než cokoliv jiného. Ale tyto posuvníky vypadají fantasticky a stejné techniky by mohly být aplikovány na jiná pole pro vstup do formulářů, jako je výběr nabídek a přepínačů.

10. HTML5 Podporované video

Nové specifikace HTML5 byly v mnoha oblastech velmi progresivní. Prvky videa i zvuku mají vylepšenou nativní podporu pro velký počet mediálních souborů. Ukázalo se však, že mezi prohlížeči podporovanými HTML5 se ne všechny shodují na typech souborů.

Mozilla Firefox obecně podporuje .OGG video, které můžete použít jako konvertor. Google Chrome a Safari hledají soubory .MOV kódované ve formátu .MP4 nebo H.264. Kvůli těmto rozdílům byste normálně museli zahrnout tři různých video formátů - dva výše uvedené spolu s .FLV pádem.

Naštěstí někteří opravdu chytří kluci dali dohromady knihovnu zvanou VideoJS. Jedná se o extrémně malou sestavu jazyka JavaScript, která umožňuje jednu implementaci videa Flash a HTML5 do jedné značky. Je to zdarma ke stažení a open source, takže vývojáři jsou vítáni přispět také. Flash i HTML5 video přehrávače jsou přizpůsobeny tak, aby byly shodné, takže všichni uživatelé budou mít stejné zkušenosti. Podívejte se na příklad kódu pro vložení videa ve formátu HTML5:

Zdroj

Po podobné cestě projekt html5media nabízí metodu pro konsolidaci všech streamovaných médií do jednoho typu souboru. Bohužel ani VideoJS není dokonalý s každým prohlížečem. Co se projekt html5media snažil udělat, je práce s nekompatibilitou prohlížeče, která podporuje všechny typy video souborů mezi všemi platformami. A ve skutečnosti to funguje docela dobře!

Závěr

Doufám, že tento průvodce užitečnými metodami bude vhodný pro webové vývojáře po celém světě. To může být těžké stavební webové stránky přizpůsobit se širokému spektru softwarových specifikací. To platí zejména, pokud pracujete s mnoha různými jazyky, jako je CSS a JavaScript.

Ale trendy naznačují, že se blíží více podporující éra ve web designu. Nikdy předtím nebylo dohodnuto více prohlížečů a webových standardů, zejména v CSS3 & HTML5. Tyto techniky jsou jen některé z mnoha, které je třeba zvážit při vytváření webových stránek vyhovujících normám. Jako webový vývojář budete neustále chtít sledovat nejnovější trendy v designu a přizpůsobit se tak, aby co nejlépe vyhovovalo vašemu publiku.