Alapvető HTML, CSS és JavaScript technikák

Szerző: Monica Porter

A Teremtés Dátuma: 22 Március 2021

Frissítés Dátuma: 17 Lehet 2024

Alapvető HTML, CSS és JavaScript technikák - Kreatív

Tartalom

Elrendezés
Clearfix
Dobozméretezés
Többoszlopos
Számítások
Stílus
Átláthatóság
Szűrők
Képcsere
Adaptív videó
Funkcionalitás
Könnyen kiválasztható elemek
Új tömbök létrehozása
Tisztítsa meg a dokumentum- és ablakobjektumokat
Tetszett ez? Olvassa el ezeket!

Ez a cikk először a .net magazin 234. számában jelent meg - ez a világ legkeresettebb webes tervezői és fejlesztői magazinja.

A technika lényege a feladat végrehajtásának módja, és mivel frontend fejlesztők és tervezők vagyunk, nagyon sok feladatunk van. Ennek ellenére gyakran elfelejtjük, mennyire megváltozott ez a táj. 2002 és 2010 között közösségünk rohadt volt a kóddal és az erőforrásokkal, ami akadályozta a teljesítményt és a karbantarthatóságot. Ennek leküzdésére létrehoztunk egy sor tippet, trükköt és hacket, amelyeket „technikának” neveztünk. Még mindig teljesítettük a feladatokat, csak nem a leghatékonyabban.

A 360-as modell elvégzésével az elmúlt években jobb szabványok és szabványok megvalósulása tűnt életre, ami közösségként lehetővé tette számunkra az újabb és fejlettebb „technikák” kifejlesztését. Ezt az új tájat tekintik a „modern hálónak”.

Amint a „Web 2.0” stagnálóvá és zavarossá vált, a „modern web” is ugyanúgy lesz. Adj neki időt. Ez azt jelenti, hogy egyelőre használhatjuk és visszaélhetünk a kifejezéssel, amennyiben közös a megértés abban, hogy mit képvisel.

2010-ben a HTML5 specifikáció landolt, vadonatúj, félig szabványosított webes környezetet biztosítva. Az olyan böngészők, mint az Opera, a Firefox, a Chrome és a Safari, magukévá tették ezt az új hullámot, és a szabványok megvalósításának és az API-k feltárásának új korlátjai felé terelték fejlesztői csapataikat. Ha képet szeretne kapni arról, hogy ezek a böngészők miként vannak „fedélzeten”, nézze meg a www.html5readiness.com megjelenítésének HTML5-támogatásának változását.

Ne aggódjon az Internet Explorer támogatásának hiánya miatt. A Google Chrome Frame-nek köszönhetően ez ellen küzdhetünk. A Google 2010-es bevezetése óta az Internet Explorer támogatási mechanizmusává vált. Az IE összes verziója megcélozható a Chrome Frame segítségével, amely arra kéri az új felhasználót, hogy töltsön le egy plug-int, amely a Chrome könnyű verziójával rendelkező weblapokat teszi lehetővé az IE-n belül. A Chrome Frame megvalósításához a következő meta> taget adjuk hozzá a webhelyünk head> címkéjéhez.

meta http-equiv = "X-UA-kompatibilis" content = "chrome = 1" />

Innen kérhetjük az IE felhasználókat, hogy töltsék le a plug-int, ha még nincs telepítve, a JavaScript használatával:

script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
szkript>
window.onload = function () {
CFInstall.check ({
mód: "overlay",
rendeltetési hely: "http://www.sajatdomain.com"
});
};
/ script>

A cél beállítható úgy, hogy a plug-in telepítése után egy bizonyos linkre küldje a felhasználót. Óvatosan: bár a Chrome Frame módszert kínál számunkra, hogy szigorúan az igazán modern böngészők számára fejlesszünk, nem szabad megfeledkeznünk arról, hogy a felhasználónak lehetősége van arra, hogy ne töltse le a bővítményt, ha nem akarja. Ha nem, és Önnek támogatást kell nyújtania az IE egy vagy másik különböző verziójához, akkor még több időt kell töltenie annak kiderítésével, hogy mit adhat és mit nem tud nyújtani tapasztalataival, több böngészővel.

Ezzel a kóddal lényegesen egyenlőbb versenyfeltételeket biztosítunk, amelyeken tovább lehet fejlődni a modern internetes veremben, könnyedén haladhatunk előre. Emlékezhet arra, hogy számos böngészőspecifikus hacket kellett létrehoznia ahhoz, hogy webhelye jobb oldali böngészővel rendelkezzen, számtalan üres elemet hozott létre a szeletelt képeihez, vagy akár túlságosan bőbeszédű vagy redundáns JavaScript kódot is írt a a legegyszerűbb működés. Mindezek a fájdalmak bizonyos értelemben ugyanazok a problémák, amelyek miatt ma aggódunk. Még mindig küzdünk a nagyobb irányításért és jobb eszközökért az elrendezés, a stílus és a funkcionalitás elleni küzdelemért, de érett szinten.

Elrendezés

Clearfix

A lebegő elemet visszavezették a CSS 2.1-be, de soha nem bizonyult a teljes megoldásnak, amelyet reméltünk. Az egyik legnagyobb probléma a szülőelem méreteinek fenntartása volt, amikor a gyermekelemet lebegtették. Ennek megoldására létrehozták a clearfix technikát.

Vegyük a következő HTML-t:

div>
div> ... / div>
div> ... / div>
/ div>

Ezt a technikát Nicolas Gallagher írta:

.clearfix: előtt,
.clearfix: {után
tartalom: " ";
kijelző: táblázat;
}
.clearfix: {után
egyértelmű: mindkettő;
}
.clearfix {
* nagyítás: 1;
}

Ha a HTML5Boilerplate segítségével indítja el projektjeit, akkor már elkészült a clearfix technika ezen verziója.

Dobozméretezés

A fejlesztők évek óta vitatták, hogy melyik dobozmodell megvalósításának van értelme. A Quirks vs Standards mód valóban azt jelentette: „megváltoznak-e az elemek méretei a beállítás után, amikor a szegélyeket és a betéteket alkalmazzák vagy sem”.

Ma már széles körben elfogadott, hogy ésszerűbb, ha a szegélyek és a betétek elveszik az elemen belül a rendelkezésre álló helyet, és nem növelik az elem szélességét vagy magasságát. A vitát lényegtelenné tették a dobozos méretezés széles körű bevezetése. A böngésző megfordítja tőled a jeleket, és nem fordítva.

Chris Coyier és Paul Irish népszerűsítve egy mindent átfogó technika a következőkkel valósítható meg:

* {
-webkit-box-méretezés: border-box;
-moz-box-méretezés: border-box;
doboz-méretezés: border-box;
}

A * választó használata a CSS-ben megvitatásra került a potenciális teljesítményütemek miatt. Az ilyen jellegű állítások komolytalanok, ha nem optimalizálja hiperoptimalizálással a webhely / alkalmazás összes többi aspektusát. A border-box használatával a böngésző kitöltést és szegélyeket ad hozzá a rendelkezésre álló helykészleten belül. A „Normál mód” lehet használni, ha a doboz méretét tartalom mezőbe állítja.

Többoszlopos

Az internetet nagyban inspirálta az írásbeli forma és típus. Sajnos a pergamen szakaszában elakadtunk. Ezen kérdések egy része régóta várt Paged-Media és CSS Regions specifikációkkal jár. Ennek ellenére az első lépéseket a magazinszerűbb elrendezés felé tették, amikor a böngészők elkezdték a CSS többoszlopos megvalósítását. Az effektus létrehozására szolgáló kód meglehetősen egyszerű:

p {
-webkit-oszlop-szám: 2;
-moz-oszlopszám: 2;
oszlopszám: 2;
}

Az A List Apart blogjából többet megtudhat a CSS3 többoszlopos specifikációról, valamint egy olyan JavaScript-tartalékról, amelyet bármely böngészőhöz használhat támogatás nélkül.

Számítások

A méretek kiszámítása nehéz lehet. Régen nem volt módunk semmiféle egységszámításra, nemhogy vegyes egységszámításra. Ez mind megváltozott a calcnak köszönhetően. Párnázott effektus létrehozása, amely nem befolyásolja a kezdeti elemek szélességét, vagy valami olyasmit használ, mint a doboz méretezése: border-box; a közelmúltig csak extra elemeket tartalmazó elemek hozzáadásával volt lehetséges.

.padded {
margó: 0 auto;
pozíció: rokon;
szélesség: -webkit-calc (100% - (20px * 2));
szélesség: -moz-calc (100% - (20px * 2));
szélesség: számított (100% - (20px * 2));
}

A calc () gondoskodik a megfelelő szélesség kiszámításáról a .padded szülőszélessége és a meghatározott 20px párnázás mínusz alapján. Ezt megszoroztam 2-vel az elemem mindkét oldalán, az elemet a relatív pozicionálás, valamint a bal és a jobb margó automatikus felhasználásával központosítottam.

Stílus

Átláthatóság

Az elem megfelelő stílusának megszerzése mindig is attól függött, hogy milyen típusú eszközök állnak rendelkezésünkre a CSS-ben. Az átlátszóság az egyik első támogatási változat, amellyel a 2000-es évek elején és közepén találkozhatna.

A HTML5 és a fokozottabb szabványosítási erőfeszítések megjelenésével a böngészők az opacitás tulajdonság szabványos megvalósításával rendelkeznek, és az új Színmodul specifikációnak megfelelően alfa csatornás támogatást kaptak. Ez magában foglalja az RGBA és a HSLA irányelveket.

a {
szín: rgba (0,255,0,0,5);
háttér: rgba (0,0255,0,05);
határ: rgba (255,0,0,0,5);
}

Használhat RGBA vagy HSLA színeket bárhol, ahol HEX értékeket talál. A szórakoztató színek kibővített listája meghatározott névvel rendelkezik, amelyeket közvetlenül a specifikációban nézhet meg. Ezek jól jönnek, ha dinamikus keveréket szeretne létrehozni az elemek között.

Szűrők

A CSS szűrők rendkívül izgalmasak. Elképesztő, hogy dinamikusan megváltoztathatja az oldal elemeinek kinézetét és hangulatát harmadik féltől származó plug-inek nélkül, és jelentősen csökkenti a Photoshopban töltött időt.

img src = "market.webp">
img {
-webkit-filter: szürkeárnyalatos (100%);
}

A CSS-szűrőket jelenleg csak a WebKit böngészők támogatják, ezért használatuknak additív jellegűnek kell lennie, nem pedig függőnek. Bővebben itt olvashat.

Képcsere

A szöveg cseréje képekkel már régóta létezik. Sajnos még mindig vannak hátrányai a hozzáférhetőség szempontjából a legújabb és legfejlettebb képpótló technikáknak. De nemrég kettő került napvilágra, amelyek rendkívül okosak és egyedülállóak saját jogaikban. Az elsőt Scott Kellman írta:

h1 class = ’hide-text’> Saját webhely logója / h1>
.hide-text {
szöveg-francia: 100%;
white-space: nowrap;
túlcsordulás: rejtett;
}

A másodikat Nicolas Gallagher írta:

.hide-text {
betűtípus: 0/0 a;
szöveg-árnyék: nincs;
szín: átlátszó;
}

Adaptív videó

Kihívást jelenthet a média megfelelő méretezése az érzékeny környezetben. Mivel egyre több weboldal tiszteletben tartja az adaptív dizájnt, elengedhetetlen az elemek méretének és képarányának megfelelő kezelése.

A beágyazott videók az egyik legnagyobb kihívást jelentő médiatípusok, amelyekkel a harmadik féltől származó szolgáltatások szolgáltatják a tartalmat. Egy tipikus YouTube-beágyazás így néz ki:

iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

Az iframe elem ezután tartalmaz Flash objektumot vagy beágyazási elemet. Valami olyasmit használ, mint iframe {maxwidth: 100%; } nem fog működni, mert a beágyazott elemek nem méretezik át megfelelően, ha a szélesség változik. Tehát meg kell csinálnunk néhány trükköt.

div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

Az iframe más elembe csomagolása megadja nekünk azt az irányítást, amelyre szükségünk van ahhoz, hogy megfelelő reagálási funkcionalitást adjunk a videóhoz.

.video {
pozíció: rokon;
aljzat: 56,25%;
magasság: 0;
túlcsordulás: rejtett;
}
.video iframe,
.video objektum,
.video embed {
pozíció: abszolút;
felső: 0;
bal: 0;
szélesség: 100%;
magasság: 100%;
}

A .video burkolat betét aljának beállítása: 56,25%; a varázslat ebben a módszerben. A párnázás használata azt jelenti, hogy a felhasznált százalék a szülő szélességén alapul; Az ’56 .25% ’16: 9 képarányt hoz létre. Ha akarja, maga végezze el a matematikát. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (ez a mi százalékunk).

Funkcionalitás

Könnyen kiválasztható elemek

Számos JavaScript könyvtár (például a jQuery) népszerűségével az ECMAScript bizottság és a W3C szabványok tudomásul vették, hogy a fejlesztők egyik alapvető eleme hiányzott natív módon - jó elemválasztás. Az olyan módszerek, mint a getElementByID () és a getElementByClassName (), gyorsak voltak, de nem voltak olyan rugalmasak és robusztusak, mint a fejlesztői közösségből érkező választó motorok; A querySelectorAll () a szabványtestület módja volt ennek a rugalmasságnak egy részét utánozni egy natív választó módszerben.

var items = document.querySelectorAll (’# header .item’);

A querySelectorAll () több és vegyes választót is átadhat. További információ erről.

Új tömbök létrehozása

A tömb fölött történő iteráció olyan dolog, ami fárasztóvá válik az írásra. A () ciklusok írása és átírása nem szórakoztató. A JS 1.6-os verziójában a map () metódus landolt, támogatva az egyszerű átdolgozást és egy másik tömb létrehozását.

var people = [’Heather’, ’James’, ’Kari’, ’Kevin’];
var welcome = emberek.map (függvény (név) {
return ’Szia’ + név + ’!’;
});

Ha ezt a kódot futtatnánk, ha a console.log-ot (üdvözli) látnánk, akkor az üdvözlő új tömböt jelentene [’Szia Heather!’, ’Szia James!’, ’Szia Kari!’, ’Szia Kevin!’ ].

Tisztítsa meg a dokumentum- és ablakobjektumokat

A harmadik féltől származó JavaScript könyvtárak hajlamosak a natív dokumentum- és ablakobjektumokkal való elrontásra. Ez problémát jelenthet más harmadik fél könyvtárai és a fejlesztő, beleértve őket is. Bármelyik félként győződjön meg arról, hogy mindkét objektum tiszta verziójával dolgozik, új példány létrehozásával. A legjobb módszer erre egy iframe elem létrehozása, beillesztése a DOM-ba és az objektumok új példányainak tárolása.

var iframe = document.createElement (’iframe’);
iframe.style.display = "nincs";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);

Bár nagy fejlesztések történtek a webes veremben, továbbra is rendkívül fontos a technológiai csomagunk kibővítése és továbbfejlesztése, hogy megfeleljünk a projektünk elrendezésében, stílusában és funkcionalitásában felmerülő kihívásoknak. A jó ökoszisztéma fenntartása érdekében ösztönöznünk kell a szabványügyi testületeket és a böngésző gyártókat, hogy folytassák az új specifikációk és az innovatív funkciók megvalósításának előrehaladását, miközben saját ismereteinket megosztjuk más fejlesztőkkel és tervezőkkel. Több betekintés, kevesebb feltörés.

Darcy Clarke díjnyertes fejlesztő, a Themify WordPress témavállalat és a napi ügyletek összesítője, a DealPage társalapítója, valamint a jQuery Team tagja. A Polar Mobile-nál dolgozik vezető UX fejlesztőként.