10 Hasznos módszerek a CSS és a Javascript használatához
A kódkeresések tökéletes megoldást jelentenek számos egyedülálló látogatóval való kompromisszumra. Nem mindenki használja az interneten ugyanazt az operációs rendszert, webböngészőt vagy akár fizikai hardvert. Mindezek a tényezők arra vonatkoznak, hogy a weblapod hogyan fog megjelenni a képernyőn. Amikor új CSS vagy JavaScript trükkökkel dolgozik, akkor gyakran ilyen technikai hibákba ütközik.
De ne hagyd, hogy ezek a buktatók megakadályozzák Önt! Ebben az útmutatóban összeállítottam néhányat leggyakoribb visszaállítási technikák a CSS és JavaScript / jQuery webes tervezők számára. Amikor minden más nem sikerül, legalább a felhasználók alapvető oldal funkcióit szeretné biztosítani. A felhasználói élménytervezés területén az egyszerűség uralkodik.
Nézze meg az alábbi útmutatót, és ossza meg velünk a gondolataidat és a kérdéseidet a megjegyzések részben.
1. Lekerekített sarkok képekkel
A CSS3 technikák a webes webáruházban elterjedtek. Az egyik legjelentősebb tulajdonság border-radius amely lehetővé teszi a lekerekített sarkokat. Ezek gyakorlatilag bármilyen gombon, divon vagy szövegdobozon szépek. Az egyetlen probléma a böngészők közötti korlátozott támogatás.
Számos régebbi böngésző, beleértve az Internet Explorer 7-et, nem támogatja ezt a tulajdonságot. Tehát annak érdekében, hogy a lekerekített sarkok minden szabványos böngésző számára működjenek, képeket kell készítenie.
A szabványos kód a rendszeres CSS3 tulajdonságokat használja a fő divinál, miközben mindegyik sarkon képeket készít. Valószínűleg fel kell állítania néhány extra osztót a fő konténerben, amelyeket a sarokban lévő képek megjelenítésére használnak.
#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-sugár: 5px; / * Firefox Gecko Engine * / -O-határ-sugár: 5px; / * Opera * / határ-sugár: 5px; #mainbox .topc háttér: url ('corner-tl.png') no-megismétlés felső balra; #mainbox .topc span background: url ('corner-tr.png') nem ismétlődő jobb felső; #mainbox .btmc background: url ('corner-bl.png') bal alsó rész; #mainbox .btmc span background: url ('corner-br.png') no-ismétlés alul jobb; Ahhoz, hogy megmentse magát a stressztől, nagyon javaslom egy olyan alkalmazást, mint a RoundedCornr. Ez egy böngésző webes alkalmazás, amely lekerekített sarok CSS-t generál mind a CSS3, mind a képek segítségével. Ez különösen hasznos lesz azoknak a tervezőknek, akik nem férnek hozzá olyan grafikai szoftverekhez, mint a Photoshop vagy a GIMP.
2. jQuery legördülő menü rendszer
A legördülő menürendszerek tökéletesek a mai webhez. A legnagyobb probléma azonban az, hogy a látogatók hozzáférnek a webhelyéhez a JavaScript engedélyezése nélkül. Ebben az esetben a menük egyike sem fog működni! A legjobb megoldás a CSS használata az egyes al-menük div blokkjainak megjelenítéséhez / elrejtéséhez, és azok megjelenítése a lebegőn.
Ezzel a megoldással az egyetlen probléma, hogy az Internet Explorer 6 nem támogatja ezeket a CSS hover szelektorokat. Az IE7 + nagyszerűen működik; és természetesen minden böngésző jól fog működni, ha a JavaScript engedélyezve van. A CSS Plus-on található ez a bemutató egyik legjobb forrása, amit találtam. Nemcsak megoldást kínál a jQuery-vel, hanem az IE-hez szükséges CSS-hez is.
/ * A jQuery * / #nav li.current> a background: # f7f7f7; / * CSS visszaesés * / #nav li: hover> ul.child display: block; #nav li: hover> ul.grandchild display: block;
Forrás
Egy másik alternatív megoldás, amit megpróbálhat, csak az IE6 összes menüjének nyílt megjelenítése. Az Internet Explorer feltételes megjegyzéseit felhasználhatja a böngésző verziójához tartozó stíluslapok alkalmazásához. Természetesen ez nem lesz a legszebb megoldás, de egyszerűen működik.
Ha nem érzi, hogy az Internet Explorer 6 nagy aggodalomra ad okot, akkor ne is zavarja ezt az alternatív tartalékot. A fenti bemutatónak és az azt követő kódnak elegendőnek kell lennie ahhoz, hogy a JavaScript menüjének betöltése még szigorú CSS-sel is történjen az összes főbb böngészőben.
3. Célzott Internet Explorer stílusok
Biztos vagyok benne, hogy mindannyian tudjuk, hogy a Microsoft Internet Explorer böngészőjéből jönnek ki a renderelési problémák. Adok egy kis hitelt a legújabb IE8-nak és a jövőbeli kilátásoknak az IE9-vel. Azonban még mindig van egy kis közönség, amely IE6 / IE7-et futtat, és tényleg nem hagyhatja figyelmen kívül őket.
(Képforrás: github)
Az utolsó szakaszban említett feltételes megjegyzések hasznosak lehetnek az oldalterületek átformázásához. Például, ha van egy legördülő menü al-navigációval az IE6-ban, amely csak a JavaScript használatával fog megjelenni, nem lesz szerencséje a CSS-nek mint alternatív módszernek. Ehelyett a legjobb megoldás az, hogy minden allistát navigációs blokkként jelenítsen meg.
A fenti kód hozzáadása a dokumentumfejléchez megadhatja az egyes al-navigációk megjelenítési típusát. A legjobb megoldás ebben a lemaradásban az, hogy felülírhatja a CSS-t és még mindig dinamikusan megjelenítheti / elrejtheti a menüket, ha a JavaScript engedélyezve van. Ellenkező esetben csak egy nyílt listát jelenít meg. Hasonló kódot használhat, mint amit az alábbiakban adtam.
#nav li pozíció: relatív; szélesség: 150px; / * be kell állítania egy véges szélességet az IE * / #nav li ul / * al-nav kódok * / kijelzésére: blokk; pozíció: abszolút; szélesség: auto; / * határozza meg saját szélességét vagy állítsa be a li elemben * / #nav li ul li (szélesség: 100%;
4. Legacy IE Opacity / Átláthatóság
Az Internet Explorer egyik bosszantó hibája az áttetszőség kezelése. A CSS3 alfa-átláthatósági beállításai az opacitás tulajdonságon keresztül módosíthatók. A Microsoft azonban csak az Internet Explorer 9 támogatja ezt a funkciót.
A legjobb megoldás az IE6 + -ra való célzáshoz szűrő, csak az IE által elismert szabadalmaztatott beállítás. Nézze meg az alábbi rövid kód példát:
.mydiv opacitás: 0,55; / * CSS3 * / szűrő: alfa (opacitás = 55); / * IE6 + * /
Mindössze annyit kell tennie, hogy az átláthatóságot igénylő elemek között szerepeljen a fenti sor. Figyeljük meg, hogy a CSS3 tulajdonságához hasonlóan minden gyermekelem örökölni fogja ezt az átlátszatlanságot. Ha újabb módszert keres, amely kifejezetten az IE8-at célozza meg, nézze meg az alábbi kódot. Ugyanúgy viselkedik, mint a szűrő tulajdonságainkat csak a Microsoft IE8 elemzője ismeri fel.
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacitás = 55)"; / * IE8 * /
5. CSS3 gombok létrehozása Fallback képekkel
A gombok fantasztikus webelemek mindenféle interfész számára. Ők úgy viselkedhetnek, mint formai bemenetek, navigációs elemek vagy akár közvetlen oldal linkek. A CSS3 segítségével most számos egyedi stílussal rendelkező gombokat lehet formázni, mint például a háttér színátmenetek, a doboz árnyékai, a lekerekített sarkok stb..
Azonban nem bízhat abban, hogy az összes látogató képes lesz az újabb tulajdonságok megjelenítésére. A gombok (vagy akár hasonló UI elemek) tartalék kialakítása esetén két különböző lehetőség áll rendelkezésre. Az első az, hogy tartalmazzon egy olyan háttérképet, amelyet pontosan úgy terveztek, ahogyan a CSS megjelenne. Ez könnyen megvalósítható a Photoshopban. Ha azonban nem vagy szakértő a szoftverben, akkor ez problémás lehet.
Az alternatíva egy egyszerű háttérszín és egyszerűbb CSS stílusok visszavonása. A CSS-trükkök CSS3-as színátmenetei közül a CSS-trükkök közül néhányat használok. A főbb böngészők, mint például a Safari, a Firefox, a Chrome és az Opera, támogatják ezeket a tulajdonságokat. Az a terület, ahová a problémák merülnek fel, a régi böngészők támogatása: régebbi Mozilla motorok, IE6 / 7, esetleg még a Mobile Safari is.
.gradiens-bg háttérszín: # 1a82f7; / * tömör színt használ a legrosszabb * / háttérképen: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); háttérkép: -webkit-gradiens (lineáris, 0% 0%, 0% 100%, (# 2F2727), (# 1a82f7)); háttérkép: -webkit-lineáris gradiens (felső, # 2F2727, # 1a82f7); háttérkép: -moz-lineáris gradiens (felső, # 2F2727, # 1a82f7); háttérkép: -ms-lineáris gradiens (felső, # 2F2727, # 1a82f7); háttérkép: -o-lineáris gradiens (felső, # 2F2727, # 1a82f7); Forrás
Az egyetlen kicsi probléma, hogy kizárólag képeket használunk, mert nem lesz aktív állapotváltozás, ha a felhasználó egy gombra kattint. Ezeket a rendszeres és aktív állapotokat két különböző kép készítheti, bár további munkát igényelne. Ez az ok önmagában arra kényszerítheti Önt, hogy a háttérképek helyett szilárd háttérszínt használjon. Próbálja ki egy pár különböző megoldást, hogy megnézhesse, melyik néz ki a legjobban az elrendezésben.
6. Mobil tartalom ellenőrzése
Egy másik hatalmas trend 2012-ben a mobil internetes böngészés népszerűsége. Az okostelefonok mindenhol megtalálhatók, és a 3G / Wi-Fi-n keresztüli adatok egyre hozzáférhetőbbé válnak. Így a tervezők sokan úgy tervezik, hogy a mobil felhasználók számára tartalék elrendezést biztosítanak.
Néhány népszerű mobil böngésző az asztali környezethez hasonló oldalakat fog megjeleníteni. A Mobile Safari és az Opera a legismertebb, még akkor is, ha sok közös jQuery-parancsfájlt is támogat. De ezek az oldalak nem mindig mobilbarátak, és az UX-en bővíthető.
Kétféleképpen észlelheti a mobil böngészőket és megjeleníthet egy alternatív elrendezést vagy stíluslapot. Az első a JavaScript, amely nagyszerűen működik frontend eszközként. Az alább felsorolt szkript nagyon egyszerű, és csak az iPhone / iPod Touch felhasználókat ellenőrzi. A Detect Mobile Browsers egy fantasztikus webhely, amely részletesebb parancsfájlt kínál, melyet futtathat.
// Az iPhone / iPod Touch funkció átirányítása isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1)); if (isiPhone ()) window.location = "m.yourdomain.com"; Most a másik alternatíva a backend nyelv, például a PHP ellenőrzése. Ellenőrizheti a változó nevét HTTP_USER_AGENT. Több tucat weboldal fog megjelenni, ha ezeket a feltételeket Google. Azonban még mindig ajánlom az előző bekezdésben feltüntetett Mobilböngészők észlelése linket.
Az oldal ingyenesen letölthető szkripteket tartalmaz, amelyek nem csak a PHP-ben értelmezhetők, hanem más népszerű backend nyelvek is. Ezek közé tartozik az ASP.NET, a ColdFusion, a Rails, a Perl, a Python és a szerver alapú kód, például az IIS és az Apache..
7. Slicebox csúszka kecses fallbackrel
A 2011-es kedvenc CSS3 freebie-nek valószínűleg a Codrops által kiadott Slicebox 3D Image Slidernek kell lennie. A böngészők gyönyörű CSS animációs átmeneteit használják, amelyek támogatják őket, jelenleg a Google Chrome-ban és a legújabb Safari-ban. Furcsa, hogy még a legutóbbi Firefox vagy IE9 kiadás még mindig nem tudja használni ezeket az átmeneteket.
Ennek a kódnak a legjobb része az, hogy továbbra is visszafogja a képek közötti átmeneti hatások biztosítását. Az animáció nagy részét a jQuery-n keresztül hajtják végre, de a szabványos CSS visszaállítási lehetőség még mindig nagyon megbízható, figyelembe véve, hogy hány böngésző nem tudja támogatni a gyors CSS3 animációkat.
Alternatív megoldásként a Codrops most is újabb kiadványt készített, amely még kreatívabb CSS3 technikákat használ. Ez a kép csúszka a CSS-ben készült háttérképek használatával jön létre, így az átmeneti hatások nélkül is nagyon jól működik.
8. jQuery Script CDN hibajavítási módszer
A jQuery könyvtár szinte nélkülözhetetlen ahhoz, hogy a JavaScript a weben fejlődjön. Számos alternatív CDN-szolgáltató statikus URL-címeket hozott létre, ahol a jQuery összes kiadási verzióját adják meg. A Google, a Microsoft és még a jQuery is létrehozott egy CDN portált a fejlesztők számára, néhány más kevésbé ismert webhely közül.
Ezekre a szolgáltatókra több százezer fejlesztő működik. Mi történne, ha bármelyik hivatkozás valamilyen okból megszakadna, vagy a szerverek offline állapotba kerültek? Jó ötlet lenne egy helyi másolatot elhelyezni, és ezt csak akkor kell végrehajtani, ha szüksége lenne rá. Hát ez a CSS-trükkökből származó nagyszerű visszamenőleges kódrészlet ezt teszi!
Forrás
9. Egyedi HTML5 jelölőnégyzetek
A HTML5 megnyitotta az ajtót a friss weboldalak létrehozásához. A továbbfejlesztett webes tapasztalatok egy része formákon és bemeneti elemeken keresztül történik. A jelölőnégyzetek csak egy példa, melyet igényeihez igazíthatunk.
Bemerültem a csodálatos CSS / jQuery bemutatóba, amely 2011 tavaszán jelent meg. A kód háttérképeket használ a felhasználói interakciók közötti be- és kikapcsolási stílusok helyettesítésére.
Az eredeti bemeneti jelölőnégyzetek alapértelmezés szerint rejtve vannak, és értéküket a JavaScript hívások határozzák meg. Ez azt jelenti, hogy dinamikusan húzhatja az értéket bármely ponton a jQuery-n keresztül, de azt is átadja az űrlapba a “beküldése” gomb.
Feltételezve, hogy a JavaScript ki van kapcsolva, vagy a régebbi böngészőkben nem támogatott, a parancsfájl alapértelmezetten a szokásos HTML bemenetekre vonatkozik. Ez szintén letiltja az újabb jelölőnégyzetek CSS-jét, így úgy tűnik, mintha semmi nem változott volna. A szkript jobban viselkedik, mint egy esztétikus előfutó, aki tiszta másolattal rendelkezik, mint bármi más. De ezek a csúszkák fantasztikusak, és ugyanazt a technikát más formátumú beviteli mezőkre is alkalmazni lehet, mint például a menük és a rádió gombok.
10. HTML5 támogatott videó
Az új HTML5 specifikációk sok területen nagyon progresszívek voltak. Mind a video-, mind az audioelemek fokozottan támogatják a nagyszámú médiafájlt. Ugyanakkor kiderül, hogy a HTML5 által támogatott böngészők között nem mindegyik megegyezik a fájltípusokkal.
A Mozilla Firefox általában támogatja a .OGG videót, amelyet a VLC-t használhat konverterként. A Google Chrome & Safari a .MP4 vagy a H.264 kódolt .MOV fájlokat keresi. Ezeknek a különbségeknek köszönhetően általában be kell vonni három különböző videó formátumok - a fent felsorolt kettő együtt.
Szerencsére néhány igazán okos srác összeállította a VideoJS nevű könyvtárat. Ez egy rendkívül kicsi JavaScript-felépítés, amely lehetővé teszi a Flash és HTML5 videó egyetlen megvalósítását egyetlen címkén. Ingyenesen letölthető és nyílt forráskódú, így a fejlesztők is szívesen segítenek. Mind a Flash, mind a HTML5 videolejátszó egyforma, így minden felhasználó ugyanazzal a tapasztalattal rendelkezik. Nézze meg a HTML5 videó beágyazási kód példáját:
Forrás
Hasonló útvonalat követve a html5media projekt egy olyan módszert kínál, amely az összes adatfolyamot egyetlen fájltípusba konszolidálja. Sajnos még a VideoJS sem tökéletes minden egyes böngészővel. A html5media projekt célja, hogy a böngésző összeférhetetlensége körül dolgozzon, hogy támogasson bármilyen videofájltípust az összes platform között. És tényleg jól működik!
Következtetés
Remélem, ez a hasznos hasznosítási módszerek útmutatója hasznos lesz a webes fejlesztők számára világszerte. A szoftver specifikációk széles skálájához való alkalmazkodás nehéz webhelyeket kínálhat. Ez különösen igaz, ha sok különböző nyelven dolgozik, mint például a CSS és a JavaScript.
A trendek azonban azt jelzik, hogy közelebb vagyunk egy támogatóbb korszakhoz a web designban. Soha többet nem állapítottak meg böngészők és webes szabványok, különösen a CSS3 és a HTML5 között. Ezek a technikák csak néhány közülük, amelyeket figyelembe kell venni a szabványoknak megfelelő weboldalak létrehozásakor. Webfejlesztőként folyamatosan szeretné követni a legújabb tervezési trendeket és alkalmazkodni a közönséghez.
