Obsah
- Rozloženie
- Clearfix
- Veľkosti balenia
- Viacstĺpce
- Výpočty
- Štýl
- Transparentnosť
- Filtre
- Výmena obrazu
- Responzívne video
- Funkčnosť
- Ľahký výber prvkov
- Vytvára sa nové pole
- Vyčistite objekty dokumentu a okna
- Páčilo sa vám to? Prečítajte si tieto!
Tento článok sa prvýkrát objavil v čísle 234 časopisu .net - najpredávanejšieho časopisu na svete pre webových dizajnérov a vývojárov.
Technika je vo svojej podstate spôsob, ako vykonať úlohu, a keďže sme vývojoví a dizajnéri, máme veľa úloh. To znamená, že často zabúdame, ako veľmi sa táto krajina zmenila. Od roku 2002 do roku 2010 bola naša komunita prehnitá kódom a nafúknutými prostriedkami, čo bránilo výkonu a udržiavateľnosti. Aby sme to prekonali, vytvorili sme množstvo tipov, trikov a hackov, ktoré sme nazvali „technika“. Stále sme plnili úlohy, len nie najefektívnejším spôsobom.
Ak urobíme 360 rokov, v posledných rokoch sa dočkali oživenia lepších štandardov a ich implementácie, čo nám ako komunite umožnilo vyvíjať novšie a pokročilejšie „techniky“. Táto nová krajina sa považuje za „moderný web“.
Pretože „Web 2.0“ stagnoval a bol mätúci, stal sa ním aj „moderný web“. Daj tomu čas. To znamená, že zatiaľ môžeme tento výraz používať a zneužívať, pokiaľ bude existovať spoločné chápanie toho, čo predstavuje.
V roku 2010 pristála špecifikácia HTML5, ktorá poskytuje úplne nové, pološtandardizované webové prostredie. Prehliadače ako Opera, Firefox, Chrome a Safari prijali túto novú vlnu a posunuli svoje vývojové tímy k novým limitom implementácie štandardov a prieskumu API. Ak chcete získať predstavu o tom, ako sú tieto prehliadače „integrované“, pozrite si vizualizácie www.html5readiness.com týkajúce sa zmeny podpory HTML5.
Nerobte si starosti s nedostatočnou podporou v programe Internet Explorer. Proti tomu môžeme bojovať vďaka prehliadaču Google Chrome Frame. Odkedy ho spoločnosť Google predstavila v roku 2010, stal sa mechanizmom podpory pre Internet Explorer. Na všetky verzie prehliadača IE je možné zacieliť program Chrome Frame, ktorý nového používateľa vyzve na stiahnutie doplnku, ktorý vykresľuje prihlásené weby pomocou odľahčenej verzie prehliadača Chrome v prehliadači IE. Na implementáciu doplnku Chrome Frame sme do hlavy> značky nášho webu pridali nasledujúcu značku meta>.
meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />
Odtiaľto môžeme vyzvať používateľov IE, aby si stiahli doplnok, ak ešte nie sú nainštalovaní, pomocou JavaScriptu:
script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / skript>
skript>
window.onload = funkcia () {
CFInstall.check ({
režim: "prekrytie",
cieľ: „http://www.vasadomena.com“
});
};
/ skript>
cieľ je možné nastaviť tak, aby po inštalácii doplnku poslal používateľa na určitý odkaz. Slovo opatrnosti: aj keď nám Chrome Frame ponúka metódu vyvinutú výhradne pre skutočne moderné prehliadače, nesmieme zabúdať, že používateľ má možnosť tento doplnok nestiahnuť, ak nechce. Ak to neurobia a budete musieť poskytnúť podporu pre jednu alebo ďalšie rôzne verzie IE, budete musieť stráviť nejaký čas hľadaním toho, čo môžete a čo nemôžete poskytnúť, so svojimi skúsenosťami s rôznymi prehliadačmi.
Vďaka tomuto kódu, ktorý poskytuje podstatne vyrovnanejšie podmienky pre vývoj na modernom webovom zásobníku, sa môžeme v pohode posunúť vpred. Možno si spomeniete, že ste museli vytvoriť niekoľko hackov špecifických pre daný prehliadač, aby ste zaistili, že váš web bude správne štruktúrovaný naprieč prehliadačmi, vytvárať nespočetné množstvo prázdnych prvkov, ktoré sa majú použiť s vašimi nakrájanými obrázkami, alebo dokonca napísať príliš podrobný alebo nadbytočný kód JavaScript, aby ste získali najjednoduchšia funkčnosť. Všetky tieto bolesti sú v určitom zmysle rovnaké problémy, s ktorými sa dnes trápime. Stále bojujeme za viac kontroly a lepšie nástroje na boj s rozložením, štýlom a funkčnosťou, ale na vyspelej úrovni.
Rozloženie
Clearfix
Plávajúci prvok bol zavedený späť v CSS 2.1, ale nikdy sa nestalo úplným riešením, v ktoré sme dúfali. Jedným z najväčších problémov bolo zachovanie rozmerov nadradeného prvku, keď bol podradený prvok vznášaný. Aby sme to vyriešili, bola vyvinutá technika clearfix.
Použite nasledujúci kód HTML:
div>
div> ... / div>
div> ... / div>
/ div>
Túto techniku napísal Nicolas Gallagher:
.clearfix: pred,
.clearfix: po {
obsah: „“;
displej: tabuľka;
}
.clearfix: po {
jasné: oboje;
}
.clearfix {
* zväčšenie: 1;
}
Ak na spustenie svojich projektov použijete HTML5Boilerplate, potom už máte túto verziu techniky clearfix napečenú.
Veľkosti balenia
Po celé roky vývojári debatovali, ktorá implementácia modelu skrinky má zmysel. Režim Quirks vs Standards skutočne znamenal: „ak by sa rozmery prvku po nastavení zmenili, či sa použijú orámovania a výplne, alebo nie“.
Teraz je všeobecne dohodnuté, že má väčší zmysel, aby okraje a výplne uberali z dostupného priestoru v prvku a neprispievali k šírke alebo výške prvku. Diskusia sa stala irelevantnou z dôvodu rozsiahleho zavádzania box-sizingu. Prehliadač vezme podnety od vás, nie naopak.
Popularizovaný Chrisom Coyierom a Paulom Irishom, všeobjímajúcu techniku je možné implementovať nasledujúcim spôsobom:
* {
-webkit-box-dimenzovanie: border-box;
-moz-box-dimenzovanie: border-box;
box-sizing: border-box;
}
O použití selektora * v CSS sa diskutovalo kvôli možným zásahom do výkonu. Tieto typy tvrdení sú neseriózne, ak nepoužívate nadmernú optimalizáciu všetkých ostatných aspektov svojho webu / aplikácie. Použitím orámovania urobíte z prehliadača pridanie výplní a okrajov do sady dostupného priestoru. „Režim štandardov“ je možné použiť nastavením veľkosti polí na obsah.
Viacstĺpce
Web bol veľmi inšpirovaný písomnou formou a typom. Bohužiaľ sme uviazli vo fáze pergamenu. Niektoré z týchto problémov sa blížia k očakávaným špecifikáciám oblastí Paged-Media a CSS Regions. To znamená, že prvé kroky k viac časopiseckému rozloženiu boli podniknuté, keď prehliadače začali implementovať viacstĺpce CSS. Kód na generovanie tohto efektu je pomerne jednoduchý:
p {
-webkit-počet stĺpcov: 2;
-moz-počet stĺpcov: 2;
počet stĺpcov: 2;
}
Viac informácií o špecifikácii viacstĺpcov CSS3, ako aj o záložných jazykoch JavaScriptu, ktoré môžete použiť v ľubovoľnom prehľadávači bez podpory, sa dozviete z blogu A List Apart.
Výpočty
Výpočet rozmerov môže byť ťažký. Za starých čias sme nemali možnosť robiť nijaké výpočty jednotiek, natož zmiešané výpočty jednotiek. To všetko sa zmenilo vďaka kalkulačke Vytvorenie polstrovaného efektu, ktorý neovplyvní pôvodnú šírku prvkov, ani nevyužije niečo ako box-sizing: border-box; bolo donedávna možné iba pridaním prvkov obsahujúcich ďalšie prvky.
. vyplnené {
okraj: 0 auto;
poloha: relatívna;
width: -webkit-calc (100% - (20px * 2));
šírka: -moz-calc (100% - (20px * 2));
šírka: calc (100% - (20px * 2));
}
calc () sa stará o správny výpočet šírky na základe rodičovskej šírky .padded a mínus definovaná výplň 20px. Vynásobil som to o 2 pre každú stranu môjho prvku, centrovanie prvku pomocou relatívneho umiestnenia a ľavého a pravého okraja auto.
Štýl
Transparentnosť
Získanie správneho štýlu prvku vždy záviselo od druhu nástrojov, ktoré sme mali k dispozícii v CSS. Transparentnosť je jednou z prvých variantov podpory, s ktorými by ste sa mohli stretnúť na začiatku až v polovici 21. storočia.
S príchodom HTML5 a cielenejšieho úsilia v oblasti štandardov majú prehliadače štandardnú implementáciu vlastnosti nepriehľadnosti a majú odhalenú podporu alfa kanálov podľa novej špecifikácie farebného modulu. Patria sem pokyny pre RGBA a HSLA.
a {
farba: rgba (0,255,0,0,5);
pozadie: rgba (0,0255,0,05);
hranica: rgba (255,0,0,0,5);
}
Farby RGBA alebo HSLA môžete použiť všade, kde nájdete hodnoty HEX. K dispozícii je tiež rozšírený zoznam zábavných farieb s definovanými názvami, ktoré si môžete pozrieť priamo v špecifikácii. Tieto sa hodia, keď chcete vytvoriť dynamické spojenie medzi prvkami.
Filtre
Filtre CSS sú mimoriadne vzrušujúce. Schopnosť dynamicky meniť vzhľad a štýl prvkov na stránke bez potreby doplnkov tretích strán je úžasná a pomôže vám výrazne skrátiť čas strávený vo Photoshope.
img src = "market.webp">
img {
-webkit-filter: odtiene sivej (100%);
}
Filtre CSS sú momentálne podporované iba v prehliadačoch WebKit, takže ich použitie by malo mať aditívny charakter, nie závislé. Viac sa dočítate tu.
Výmena obrazu
Nahrádzanie textu obrázkami existuje už dlho. Bohužiaľ stále existujú nedostatky v prístupnosti najnovších a najsofistikovanejších techník výmeny obrázkov. Lenže nedávno vyšli najavo dvaja, ktorí sú mimoriadne šikovní a jedineční svojimi vlastnými právami. Prvý napísal Scott Kellman:
h1 class = ‘hide-text’> Logo môjho webu / h1>
.skryť text {
odsadenie textu: 100%;
biely priestor: nowrap;
prepad: skrytý;
}
Druhú napísal Nicolas Gallagher:
.skryť text {
písmo: 0/0 a;
tieň textu: žiadny;
farba: priehľadná;
}
Responzívne video
Správne škálovať médiá v responzívnom prostredí môže byť náročné. Pretože čoraz viac webových stránok rešpektuje adaptívny dizajn, je nevyhnutné správne zaobchádzať s rozmermi prvkov a pomerom strán.
Vložené video je jedným z najnáročnejších typov médií, ktoré sa dajú vyriešiť kvôli spôsobu, akým služby tretích strán poskytujú obsah. Typické vloženie na YouTube vyzerá asi takto:
iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Prvok iframe potom obsahuje objekt Flash alebo vložený prvok. Použitie niečoho ako iframe {maxwidth: 100%; } nebude fungovať, pretože vnorené prvky nemajú pri zmene šírky správnu veľkosť. Musíme teda urobiť nejaké triky.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Zabalenie prvku iframe do iného prvku nám dá kontrolu, ktorú potrebujeme na to, aby sme videu pridali správnu responzívnu funkčnosť.
.video {
poloha: relatívna;
polstrované dno: 56,25%;
výška: 0;
prepad: skrytý;
}
.video iframe,
.video objekt,
.video vložiť {
pozícia: absolútna;
hore: 0;
vľavo: 0;
šírka: 100%;
výška: 100%;
}
Nastavenie polstrovania spodnej časti obálky videa.: 56,25%; je v tejto metóde kúzlo. Použitie výplne znamená, že použité percento bude založené na šírke rodiča; „56,25%“ vytvorí pomer strán 16: 9. Ak chcete, urobte si matematiku sami. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (to je naše percento).
Funkčnosť
Ľahký výber prvkov
S popularitou množstva knižníc JavaScriptu (napríklad jQuery) si výbor ECMAScript a štandardy W3C všimli jednu z hlavných častí vývojových funkcií, ktorá vývojárom natívne chýbala - dobrý výber prvkov. Metódy ako getElementByID () a getElementByClassName () boli rýchle, ale nie také flexibilné a robustné ako selektory pochádzajúce z komunity vývojárov; querySelectorAll () bol spôsob tela normy, ktorý napodobňoval časť tejto flexibility v natívnej selektorovej metóde.
var items = document.querySelectorAll ('# header .item');
querySelectorAll () je možné odovzdať viac a zmiešané selektory. Prečítajte si o tom viac.
Vytvára sa nové pole
Iterácia nad poľom je niečo, čo sa stalo únavným pri písaní. Písanie a prepisovanie pre slučky () nie je sranda. V JS verzie 1.6 pristála metóda map () poskytujúca podporu ľahkého spôsobu iterácie a vytvorenia nového poľa z iného.
var people = [‘Heather’, ‘James’, ‘Kari’, ‘Kevin‘];
var víta = people.map (funkcia (meno) {
vrátiť ‘Ahoj‘ + meno + ‘!‘;
});
Ak by sme spustili tento kód, mali by sme súbor console.log (víta), ktorý by ste videli, víta, je nové pole [„Hi Heather!“, „Hi James!“, „Hi Kari!“, „Hi Kevin!“ ].
Vyčistite objekty dokumentu a okna
Knižnice JavaScriptu tretích strán sú náchylné na rušenie natívnych objektov dokumentov a okien. To môže robiť problém iným knižniciam tretích strán a vývojárom vrátane nich. Ako ktorákoľvek zo strán vytvorením ich novej inštancie zabezpečte, že pracujete s čistou verziou oboch objektov. Najlepšie to urobíte vytvorením prvku iframe, jeho vložením do DOM a uložením nových inštancií týchto objektov.
var iframe = document.createElement (‘iframe‘);
iframe.style.display = "žiadny";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Aj keď došlo k veľkým vylepšeniam webového zásobníka, je naďalej nesmierne dôležité pokračovať v dotváraní a prepracovávaní našej technologickej sady, aby sme splnili výzvy, ktorým čelíme v rámci usporiadania, štýlu a funkčnosti nášho projektu. Aby sme udržali dobrý ekosystém rastu, musíme povzbudiť orgány pre normalizáciu a dodávateľov prehliadačov, aby pokračovali v pokroku s novými špecifikáciami a implementáciami inovatívnych funkcií a zároveň zdieľali svoje vlastné vedomosti s ostatnými vývojármi a dizajnérmi. Viac poznatkov, menej hackov.
Darcy Clarke je ocenený vývojár, spoluzakladateľ tematickej spoločnosti WordPress Themify a agregátor denných ponúk DealPage a člen tímu jQuery. V spoločnosti Polar Mobile pracuje ako senior vývojár UX.
Páčilo sa vám to? Prečítajte si tieto!
- Ako zostaviť aplikáciu
- Stiahnite si najlepšie bezplatné písma
- Zadarmo štetce Photoshopu, ktoré musí mať každá kreatíva
- Výukové programy k aplikácii Illustrator: úžasné nápady, ktoré môžete vyskúšať dnes!
- Skvelé príklady umenia čmáranice
- Vynikajúci výber tutoriálu pre Wordpress
- Najlepšie bezplatné webové písma pre návrhárov
- Stiahnite si bezplatné textúry: vysoké rozlíšenie a ihneď pripravené na použitie
