Obsah
- Rozložení
- Clearfix
- Velikost krabice
- Více sloupců
- Výpočty
- Styl
- Průhlednost
- Filtry
- Výměna obrazu
- Responzivní video
- Funkčnost
- Snadný výběr prvků
- Vytváření nových polí
- Vyčistěte objekty dokumentu a okna
- Líbilo se vám to? Přečtěte si tyto!
Tento článek se poprvé objevil v čísle 234 časopisu .net - světově nejprodávanějšího časopisu pro webové designéry a vývojáře.
Technika je ve svém jádru způsob, jak provést úkol, a protože jsme vývojáři a designéři frontendu, máme spoustu úkolů. To znamená, že často zapomínáme, jak moc se tato krajina změnila. Od roku 2002 do roku 2010 byla naše komunita zkažená nafouknutím kódu a zdrojů, což bránilo výkonu a udržovatelnosti. Abychom to překonali, vytvořili jsme spoustu tipů, triků a hacků, které jsme nazvali „technika“. Stále jsme plnili úkoly, ale ne nejúčinnějším způsobem.
Když jsme udělali 360, v posledních několika letech došlo k oživení lepších standardů a implementací standardů, což nám jako komunitě umožnilo vyvíjet novější a pokročilejší „techniky“. Tato nová krajina je považována za „moderní web“.
Vzhledem k tomu, že „web 2.0“ stagnoval a byl matoucí, stal se tak i „moderní web“. Dej tomu čas. To znamená, že prozatím můžeme tento výraz používat a zneužívat, pokud existuje společné chápání toho, co představuje.
V roce 2010 přistála specifikace HTML5, která poskytuje zcela nové, polostandardizované webové prostředí. Prohlížeče jako Opera, Firefox, Chrome a Safari přijaly tuto novou vlnu a posunuly své vývojové týmy k novým limitům implementace standardů a průzkumu API. Chcete-li získat představu o tom, jak jsou tyto prohlížeče integrovány, podívejte se na vizualizace www.html5readiness.com týkající se změny podpory HTML5.
Nedělejte si starosti s nedostatečnou podporou v aplikaci Internet Explorer. Proti tomu můžeme bojovat díky Google Chrome Frame. Od té doby, co ji Google představil v roce 2010, se stala mechanismem podpory go-to pro Internet Explorer. Na všechny verze IE lze cílit pomocí Chrome Frame, který nového uživatele vyzve ke stažení pluginu, který vykresluje přihlášené weby s odlehčenou verzí Chrome v IE. Chcete-li implementovat Chrome Frame, přidáme následující značku meta> do značky head> na našem webu.
meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />
Odtud můžeme vyzvat uživatele IE, aby si stáhli zásuvný modul, pokud již není nainstalován, pomocí JavaScriptu:
script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / skript>
skript>
window.onload = funkce () {
CFInstall.check ({
režim: "překrytí",
cíl: „http://www.vasedomena.com“
});
};
/ skript>
cíl lze nastavit tak, aby po instalaci modulu plug-in poslal uživatele na určitý odkaz. Slovo opatrnosti: i když Chrome Frame nám dává způsob, jak se vyvíjet striktně pro skutečně moderní prohlížeče, nesmíme zapomenout, že uživatel má možnost si plugin nestáhnout, pokud nechce. Pokud tomu tak není, a vy jste povinni poskytnout podporu pro jednu nebo jiné různé verze IE, budete muset strávit nějaký čas hledáním toho, co můžete a nemůžete poskytnout, se svými zkušenostmi, cross-browser.
S tímto kódem, který poskytuje podstatně vyrovnanější podmínky pro vývoj v moderním webovém zásobníku, můžeme v pohodě postupovat vpřed. Možná si vzpomenete, že musíte vytvořit řadu hacků specifických pro daný prohlížeč, abyste si mohli svůj web správně strukturovat do různých prohlížečů, vytvořit nesčetné množství prázdných prvků, které se použijí s vašimi nakrájenými obrázky, nebo dokonce napsat příliš podrobný nebo nadbytečný kód JavaScript, abyste získali nejjednodušší funkce pro práci. Všechny tyto bolesti jsou v určitém smyslu stejné problémy, kterých se dnes obáváme. Stále bojujeme za větší kontrolu a lepší nástroje pro boj s rozvržením, stylem a funkčností, ale na úrovni, která je vyspělá.
Rozložení
Clearfix
Plovoucí prvek byl zaveden zpět v CSS 2.1, ale nikdy se neukázalo jako úplné řešení, v které jsme doufali. Jedním z největších problémů bylo udržení rozměrů nadřazeného prvku, když byl podřízený prvek vznášen. Abychom to vyřešili, byla vytvořena technika clearfix.
Vezměte následující HTML:
div>
div> ... / div>
div> ... / div>
/ div>
Tuto techniku napsal Nicolas Gallagher:
.clearfix: dříve,
.clearfix: po {
obsah: " ";
displej: tabulka;
}
.clearfix: po {
jasné: oba;
}
.clearfix {
* zvětšení: 1;
}
Pokud k zahájení svých projektů použijete HTML5Boilerplate, pak už máte tuto verzi techniky clearfix zapečenou.
Velikost krabice
Po celá léta vývojáři debatovali, která implementace modelu boxu má větší smysl. Režim Quirks vs Standards opravdu znamenal: „Měly by se rozměry prvku změnit po nastavení, když se použijí ohraničení a výplně, nebo ne“.
Nyní je široce dohodnuto, že má větší smysl, aby okraje a výplň vzaly z dostupného prostoru v prvku a nepřidávaly šířku nebo výšku prvku. Debata se stala irelevantní s rozsáhlou implementací box-sizingu. Prohlížeč vezme podněty od vás místo naopak.
Popularizovali Chris Coyier a Paul Irish, všeobjímající techniku lze implementovat pomocí následujících nástrojů:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Používání selektoru * v CSS bylo diskutováno kvůli potenciálním výkonovým hitům. Tyto druhy tvrzení jsou frivolní, pokud neděláte hyperoptimalizaci všech ostatních aspektů vašeho webu / aplikace. Použití rámečku ohraničení způsobí, že prohlížeč přidá polstrování a ohraničení uvnitř sady dostupného prostoru. „Režim standardů“ lze použít nastavením velikosti rámečku na rámeček obsahu.
Více sloupců
Web byl velmi inspirován písemnou formou a typem. Bohužel jsme se zasekli ve fázi pergamenu. Některé z těchto problémů se dostávají do popředí s dlouho očekávanými specifikacemi regionů Paged-Media a CSS. To znamená, že první kroky k dalšímu rozvržení připomínajícímu časopis byly učiněny, když prohlížeče začaly implementovat CSS více sloupců. Kód pro generování tohoto efektu je poměrně přímočarý:
p {
-webkit-column-count: 2;
-moz-počet sloupců: 2;
počet sloupců: 2;
}
Další informace o specifikaci více sloupců CSS3 a záložní JavaScript, který můžete použít pro libovolný prohlížeč bez podpory, se dozvíte z blogu A List Apart.
Výpočty
Výpočet rozměrů může být obtížný. V dávných dobách jsme neměli možnost dělat jakýkoli druh jednotkových výpočtů, natož smíšené jednotkové výpočty. To vše se změnilo díky kalkulačce. Vytvoření polstrovaného efektu, který neovlivní počáteční šířku elementů nebo nevyužije něco jako box-sizing: border-box; bylo donedávna možné pouze přidáním dalších prvků.
. polstrovaný {
okraj: 0 auto;
pozice: relativní;
width: -webkit-calc (100% - (20px * 2));
width: -moz-calc (100% - (20px * 2));
width: calc (100% - (20px * 2));
}
calc () se postará o správný výpočet šířky na základě rodičovské šířky .padded a minus definované výplně 20px. Vynásobil jsem to o 2 pro obě strany mého prvku, centrování prvku pomocí relativního umístění a levého a pravého okraje auto.
Styl
Průhlednost
Získání správného stylu prvku vždy záviselo na druhu nástrojů, které jsme měli k dispozici v CSS. Transparentnost je jednou z prvních variant podpory, na kterou byste narazili počátkem až polovinou 2000.
S příchodem HTML5 a cílenějším úsilím o standardy mají prohlížeče standardní implementaci vlastnosti krytí a mají odhalenou podporu alfa kanálu podle nové specifikace Color Module. To zahrnuje pokyny RGBA a HSLA.
a {
barva: rgba (0,255,0,0,5);
pozadí: rgba (0,0,255,0,05);
hranice: rgba (255,0,0,0,5);
}
Barvy RGBA nebo HSLA můžete použít všude, kde najdete hodnoty HEX. K dispozici je také rozšířený seznam zábavných barev s definovanými názvy, které si můžete prohlédnout přímo ve specifikaci. Ty se hodí, když chcete vytvořit dynamickou směsici mezi prvky.
Filtry
Filtry CSS jsou nesmírně vzrušující. Schopnost dynamicky měnit vzhled a chování prvků na stránce bez nutnosti použití doplňků třetích stran je úžasná a pomůže vám výrazně zkrátit čas strávený ve Photoshopu.
img src = "market.webp">
obr {
-webkit-filter: stupně šedi (100%);
}
Filtry CSS jsou aktuálně podporovány pouze v prohlížečích WebKit, takže jejich použití by mělo být aditivní povahy, nikoli závislé. Přečtěte si více zde.
Výměna obrazu
Nahrazování textu obrázky již existuje dlouho. Bohužel stále existují nevýhody nejnovějších a nejsofistikovanějších technik nahrazování obrázků z hlediska přístupnosti. Nedávno však vyšly najevo dva, kteří jsou mimořádně chytří a jedineční svými vlastními právy. První napsal Scott Kellman:
h1 class = ‘hide-text’> Logo mého webu / h1>
.hide-text {
odsazení textu: 100%;
prázdné znaky: nowrap;
přepad: skrytý;
}
Druhý napsal Nicolas Gallagher:
.hide-text {
písmo: 0/0 a;
textový stín: žádný;
barva: průhledná;
}
Responzivní video
Zajistit správné škálování médií v responzivním prostředí může být náročné. S tím, jak stále více webů respektuje adaptivní design, je nezbytné správně zacházet s rozměry a poměrem prvků.
Vložené video je jedním z nejnáročnějších typů médií, kvůli kterému se hádají kvůli způsobu, jakým služby třetích stran obsluhují obsah. Typické vložení na YouTube vypadá asi takto:
iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Prvek iframe pak obsahuje objekt Flash nebo prvek pro vložení. Použití něčeho jako iframe {maxwidth: 100%; } nebude fungovat, protože vnořené prvky nezmění správně velikost při změně šířky. Musíme tedy udělat nějaký trik.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Zabalení iframe do jiného prvku nám dá kontrolu, kterou potřebujeme k přidání správné funkce odezvy do videa.
.video {
pozice: relativní;
polstrované dno: 56,25%;
výška: 0;
přepad: skrytý;
}
.video iframe,
.video objekt,
.video embed {
pozice: absolutní;
nahoře: 0;
vlevo: 0;
šířka: 100%;
výška: 100%;
}
Nastavení polstrování spodní části obálky videa.: 56,25%; je kouzlo v této metodě. Použití odsazení znamená, že použité procento bude založeno na šířce rodiče; „56,25%“ vytvoří poměr stran 16: 9. Pokud chcete, udělejte si matematiku sami. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (to je naše procento).
Funkčnost
Snadný výběr prvků
S popularitou řady knihoven JavaScriptu (například jQuery) vzala komise ECMAScript a standardy W3C na vědomí, že jedna z klíčových částí vývojářů funkcí nativně postrádala - dobrý výběr prvků. Metody jako getElementByID () a getElementByClassName () byly rychlé, ale ne tak flexibilní a robustní jako selektory pocházející z vývojářské komunity; querySelectorAll () byl způsob, jak tělo standardu napodobovat část této flexibility v nativní metodě selektoru.
var items = document.querySelectorAll ('# header .item');
querySelectorAll () lze předat více a smíšené selektory. Přečtěte si o tom více.
Vytváření nových polí
Iterace nad polem je něco, co se stalo únavným psát. Psaní a přepisování pro smyčky () není zábavné. V JS verze 1.6 přistála metoda map () poskytující podporu pro snadný způsob iterace a vytvoření nového pole z jiného.
var people = ['Heather', 'James', 'Kari', 'Kevin'];
var welcomes = people.map (funkce (jméno) {
vrátit ‚Ahoj‘ + jméno + ‘!‘;
});
Spuštěním tohoto kódu, pokud bychom byli na console.log (vítá), uvidíte vítání, je nové pole [„Hi Heather!“, „Hi James!“, „Hi Kari!“, „Hi Kevin!“ ].
Vyčistěte objekty dokumentu a okna
Knihovny JavaScriptu třetích stran jsou náchylné k problémům s nativními objekty dokumentů a oken. To může být problémem pro jiné knihovny třetích stran a vývojáře včetně nich. Jako kterákoli ze stran zajistěte, abyste pracovali s čistou verzí obou objektů vytvořením jejich nové instance. Nejlepší způsob, jak toho dosáhnout, je vytvoření prvku iframe, jeho vložení do modelu DOM a uložení nových instancí těchto objektů.
var iframe = document.createElement ('iframe');
iframe.style.display = "žádný";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Ačkoli došlo k velkým vylepšením webového zásobníku, je nadále nesmírně důležité pokračovat v doplňování a propracovávání naší technologické sady, abychom vyhověli výzvám, kterým čelíme v rámci uspořádání, stylu a funkčnosti našeho projektu. Abychom udrželi dobrý ekosystém růstu, musíme povzbudit normalizační orgány a dodavatele prohlížečů, aby pokračovali v pokroku s novými specifikacemi a implementacemi inovativních funkcí a zároveň sdíleli své vlastní znalosti s dalšími vývojáři a designéry. Více poznatků, méně hacků.
Darcy Clarke je oceněný vývojář, spoluzakladatel tematické společnosti WordPress Themify a agregátor denních obchodů DealPage a člen týmu jQuery. Pracuje ve společnosti Polar Mobile jako senior vývojář UX.
Líbilo se vám to? Přečtěte si tyto!
- Jak vytvořit aplikaci
- Stáhněte si nejlepší písma zdarma
- Zdarma štětce Photoshopu, které musí mít každá kreativa
- Výukové programy pro Illustrator: úžasné nápady, které můžete vyzkoušet ještě dnes!
- Skvělé příklady doodle umění
- Skvělý výběr výukového programu Wordpress
- Nejlepší webová písma zdarma pro designéry
- Stáhněte si zdarma textury: vysoké rozlišení a ihned připravené k použití
