Sadržaj
- Izgled
- Clearfix
- Dimenzioniranje kutije
- Više stupaca
- Proračuni
- Stil
- Transparentnost
- Filteri
- Zamjena slike
- Odzivni videozapis
- Funkcionalnost
- Jednostavan odabir elemenata
- Stvaranje novih nizova
- Očistite objekte dokumenata i prozora
- Sviđa li vam se ovo? Pročitajte ovo!
Ovaj se članak prvi put pojavio u broju 234 časopisa .net - najprodavanijeg svjetskog časopisa za web dizajnere i programere.
Tehnika je u svojoj osnovi način za izvršavanje zadatka i, budući da smo sučelnici programera i dizajnera, imamo puno zadataka. Svejedno, često zaboravimo koliko se promijenio ovaj krajolik. Od 2002. do 2010. naša je zajednica bila pokvarena kôdom i napuhavanjem resursa, ometajući izvedbu i održivost. Da bismo to prevladali, stvorili smo mnoštvo savjeta, trikova i hakova koje smo nazvali ‘tehnika’. I dalje smo izvršavali zadatke, samo ne na najučinkovitiji način.
Radeći 360, posljednjih nekoliko godina zaživjeli su bolji standardi i provedbe standarda, što nam omogućava kao zajednicu da razvijemo novije i naprednije 'tehnike'. Taj je novi krajolik ono što se smatra 'modernim mrežom'.
Kako je 'Web 2.0' stagnirao i zbunjivao, tako će postati i 'moderni web'. Dati vremena. To je reklo da za sada možemo koristiti i zloupotrijebiti pojam sve dok postoji zajedničko razumijevanje onoga što on predstavlja.
2010. godine sletjela je HTML5 specifikacija, pružajući potpuno novo, polu-standardizirano web okruženje. Preglednici poput Opera, Firefox, Chrome i Safari prihvatili su ovaj novi val i gurnuli svoje razvojne timove na nova ograničenja implementacije standarda i istraživanja API-ja. Da biste dobili ideju o tome koliko su ovi preglednici "ugrađeni", provjerite vizualizacije promjene HTML5 podrške na www.html5readiness.com.
Ne brinite zbog nedostatka podrške u Internet Exploreru. Protiv toga se možemo boriti zahvaljujući Google Chrome Frameu. Otkad ga je Google predstavio 2010. godine, postao je mehanizam za potporu za Internet Explorer. Sve verzije IE-a mogu se ciljati Chrome Frameom, što novog korisnika traži da preuzme dodatak koji čini uključene web stranice s laganom verzijom Chromea unutar IE. Da bismo implementirali Chrome Frame dodajemo sljedeću meta> oznaku unutar oznake head> web stranice.
meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />
Odavde možemo potaknuti korisnike IE-a da preuzmu dodatak, ako već nije instaliran, pomoću JavaScript-a:
vrsta skripte = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
skripta>
window.onload = function () {
CFInstall.check ({
način rada: "prekrivanje",
odredište: "http://www.yourdomain.com"
});
};
/ skripta>
odredište se može postaviti tako da korisnika pošalje na određenu vezu nakon instalacije dodatka. Riječ opreza: premda nam Chrome Frame daje metodu koju ćemo strogo razviti za istinski moderne preglednike, ne smijemo zaboraviti da korisnik ima mogućnost da ne preuzme dodatak ako to ne želi. Ako to ne učine, a od vas se traži da pružite podršku za jednu ili druge različite verzije IE, morat ćete potrošiti još neko vrijeme da biste saznali što možete, a što ne možete pružiti s različitim iskustvima u više preglednika.
Ovim kodom koji pruža znatno ravnomjernije uvjete za razvoj na modernom web stogu možemo mirno kretati prema naprijed. Možda se sjećate da ste morali stvoriti niz hakova specifičnih za preglednik kako biste svoju web stranicu strukturirali u ispravnom unakrsnom pregledniku, stvorili nebrojeni broj praznih elemenata koji će se koristiti s vašim izrezanim slikama ili čak napisati pretjerano opsežan ili suvišan JavaScript kôd da biste dobili najjednostavnija funkcionalnost za rad. Sve su te boli u nekom smislu isti problemi zbog kojih se danas brinemo. Još uvijek se borimo za veću kontrolu i bolje alate za borbu protiv izgleda, stila i funkcionalnosti, ali na zreloj razini.
Izgled
Clearfix
Plutajući element uveden je još u CSS 2.1, ali nikada se nije pokazalo kao cjelovito rješenje kojem smo se nadali. Jedan od najvećih problema bilo je održavanje dimenzija nadređenog elementa kada je podređeni element plutao. Da bi se to riješilo, stvorena je tehnika clearfix.
Uzmite sljedeći HTML:
div>
div> ... / div>
div> ... / div>
/ div>
Ovu tehniku napisao je Nicolas Gallagher:
.clearfix: prije,
.clearfix: nakon {
sadržaj: "";
zaslon: tablica;
}
.clearfix: nakon {
jasno: oboje;
}
.clearfix {
* zum: 1;
}
Ako za pokretanje projekata upotrebljavate HTML5Boilerplate, tada ćete već imati ovu verziju Clearfix tehnike.
Dimenzioniranje kutije
Godinama su programeri raspravljali koja implementacija modela okvira ima više smisla. Način Quirks vs Standards doista je značio: 'trebaju li se dimenzije elementa promijeniti nakon postavljanja, kada se primjenjuju obrubi i dodaci ili ne'.
Sada se široko slaže da ima smisla da obrubi i obloge oduzimaju raspoloživi prostor unutar elementa, a ne da se dodaju širini ili visini elementa. Rasprava je postala irelevantna široko rasprostranjenom primjenom veličine kutija. Preglednik će vam se obratiti, umjesto obrnuto.
Popularizirani od Chrisa Coyiera i Paula Irishha, sveobuhvatna tehnika može se primijeniti na sljedeće načine:
* {
-webkit-box-sizing: border-box;
-moz-box-dimenzioniranje: border-box;
dimenzioniranje kutije: border-box;
}
Raspravljalo se o korištenju selektora * u CSS-u zbog potencijalnih pogodaka u izvedbi. Ovakve su tvrdnje neozbiljne ako ne hiper-optimizirate sve ostale aspekte svoje web lokacije / aplikacije. Korištenje okvira za obrub učinit će da preglednik doda dopune i obrube unutar raspoloživog prostora. 'Standardni način rada' može se koristiti postavljanjem veličine okvira na box sadržaja.
Više stupaca
Web je nadahnuo pisani oblik i vrsta. Nažalost, zapeli smo u fazi pergamenta. Neki od ovih problema dolaze na vrh s dugo očekivanim specifikacijama Paged-Media i CSS Regions. Međutim, prvi koraci prema izgledima sličnijim časopisima poduzeti su kad su preglednici počeli implementirati CSS više stupaca. Kôd za generiranje ovog učinka prilično je jednostavan:
p {
-webkit-count-count: 2;
-moz-count-count: 2;
brojanje stupaca: 2;
}
Na blogu A List Apart možete saznati više o CSS3 specifikaciji više stupaca, kao i o rezervnom JavaScriptu koji možete koristiti za bilo koji preglednik bez podrške.
Proračuni
Izračun dimenzija može biti težak. U stara vremena nismo imali načina za bilo kakvu izračun jedinice, a kamoli za mješovite izračune jedinica. To se sve promijenilo zahvaljujući calc. Stvaranje podstavljenog efekta koji ne utječe na početnu širinu elemenata ili koristi nešto poput dimenzija okvira: border-box; donedavno je bilo moguće samo dodavanjem dodatnih elemenata koji sadrže.
.padded {
marža: 0 auto;
položaj: relativan;
širina: -webkit-calc (100% - (20px * 2));
širina: -moz-calc (100% - (20px * 2));
širina: kalc (100% - (20px * 2));
}
calc () brine se o pravilnom izračunu širine na temelju nadređene širine .padded i minus definirano popunjavanje od 20px. Pomnožio sam to s 2 za obje strane elementa, centrirajući element koristeći relativno pozicioniranje i automatsku lijevu i desnu marginu.
Stil
Transparentnost
Dobivanje pravog stila elementa uvijek je ovisilo o vrsti alata koje smo imali na raspolaganju u CSS-u. Transparentnost je jedna od prvih varijanti podrške na koju biste naletjeli početkom do sredine 2000-ih.
Pojavom HTML5 i usredotočenijih napora na standardima, preglednici imaju standardnu implementaciju svojstva opacity i izložili su podršku alfa kanala prema novoj specifikaciji modula u boji. To uključuje smjernice RGBA i HSLA.
a {
boja: rgba (0,255,0,0,5);
pozadina: rgba (0,0,255,0.05);
granica: rgba (255,0,0,0.5);
}
Možete koristiti RGBA ili HSLA boje gdje god biste pronašli HEX vrijednosti. Tu je i prošireni popis zabavnih boja s definiranim imenima koje možete pogledati izravno u specifikaciji. Oni vam dobro dođu kada želite stvoriti dinamički spoj između elemenata.
Filteri
CSS filtri su izuzetno uzbudljivi. Imati mogućnost dinamičke promjene izgleda i izgleda elemenata na stranici bez potrebe za dodacima treće strane nevjerojatno je i pomoći će vam da znatno smanjite svoje vrijeme provedeno u Photoshopu.
img src = "market.webp">
img {
-webkit-filter: sive boje (100%);
}
CSS filtri trenutno su podržani samo u preglednicima WebKit, tako da njihova upotreba treba biti aditivne prirode, a ne ovisna. Više pročitajte ovdje.
Zamjena slike
Zamjena teksta slikama postoji već duže vrijeme. Nažalost, još uvijek postoje nedostaci, što se tiče pristupačnosti, najnovijih i najsofisticiranijih tehnika zamjene slika. No, nedavno su izašla na vidjelo dvoje koji su izuzetno pametni i jedinstveni po svojim pravima. Prvo je napisao Scott Kellman:
h1 class = 'hide-text'> Logotip moje web stranice / h1>
.hide-text {
uvlaka teksta: 100%;
prazan prostor: nowrap;
preljev: skriven;
}
Drugi je napisao Nicolas Gallagher:
.hide-text {
font: 0/0 a;
sjena teksta: nema;
boja: prozirna;
}
Odzivni videozapis
Dobivanje ispravnih razmjera medija u responzivnom okruženju može biti izazov. Budući da sve više web stranica poštuje prilagodljivi dizajn, neophodno je pravilno rukovati dimenzijama i omjerima elemenata.
Ugrađeni video jedna je od najizazovnijih vrsta medija za prepiranje zbog načina na koji usluge trećih strana poslužuju sadržaj. Tipični ugrađeni YouTube izgleda otprilike ovako:
iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Element iframe tada sadrži Flash objekt ili ugrađeni element. Korištenje nečega poput iframe {maxwidth: 100%; } neće raditi jer ugniježđeni elementi neće pravilno promijeniti veličinu kada se promijeni širina. Dakle, moramo napraviti trik.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Umotavanjem iframe-a u drugi element dobit ćemo kontrolu koja nam je potrebna za dodavanje odgovarajuće odgovarajuće funkcionalnosti videozapisu.
.video {
položaj: relativan;
podnožje: 56,25%;
visina: 0;
preljev: skriven;
}
.video iframe,
.video objekt,
.video embed {
položaj: apsolutni;
vrh: 0;
lijevo: 0;
širina: 100%;
visina: 100%;
}
Postavljanje donjeg dijela obloge omota .video: 56,25%; je čarolija u ovoj metodi. Korištenje podloga znači da će se upotrijebljeni postotak temeljiti na širini roditelja; ‘56 .25% ’stvorit će omjer 16: 9. Računajte sami, ako želite. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (ovo je naš postotak).
Funkcionalnost
Jednostavan odabir elemenata
S popularnošću brojnih JavaScript knjižnica (na primjer, jQuery), odbor ECMAScript i standardi W3C primili su na znanje jedan od temeljnih dijelova programera kojima nedostaje izvorno - dobar odabir elemenata. Metode poput getElementByID () i getElementByClassName () bile su brze, ali ne tako fleksibilne i robusne kao pokretački mehanizmi koji dolaze iz zajednice programera; querySelectorAll () bio je način tijela tijela za oponašanje neke od te fleksibilnosti u metodi izvornog selektora.
var items = document.querySelectorAll (’# header .item’);
querySelectorAll () može se proslijediti višestrukim i mješovitim selektorima. Pročitajte više o ovome.
Stvaranje novih nizova
Iteracija nad nizom nešto je što je zamorno pisati. Pisanje i prepisivanje za petlje () nije zabavno. U JS verziji 1.6 sletjela je metoda map () koja pruža podršku za jednostavan način prevođenja i stvaranja novog niza od drugog.
var people = ['Heather', 'James', 'Kari', 'Kevin'];
var dobrodošlice = people.map (funkcija (ime) {
povratak ‘Bok’ + ime + ’!’;
});
Pokretanje ovog koda, ako bismo htjeli console.log (pozdravlja), vidjeli biste dobrodošlicu, novi je niz ['Hi Heather!', 'Bok James!', 'Bok Kari!', 'Bok Kevine!' ].
Očistite objekte dokumenata i prozora
JavaScript knjižnice treće strane sklone su neredu s izvornim objektima dokumenata i prozora. To može predstavljati problem ostalim knjižnicama trećih strana i programeru koji ih uključuje. Kao bilo koja strana osigurajte da radite s čistom verzijom oba objekta stvaranjem nove instance. Najbolji način da to napravite je stvaranje elementa iframe, njegovo umetanje u DOM i spremanje novih primjeraka tih objekata.
var iframe = document.createElement ('iframe');
iframe.style.display = "nema";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Iako je došlo do velikih poboljšanja na web-stacku, i dalje je zaokruživanje i usavršavanje našeg tehnološkog paketa u susret izazovima s kojima se suočavamo u okviru izgleda, stila i funkcionalnosti našeg projekta. Da bismo održali dobar ekosustav rasta, moramo potaknuti tijela za standardizaciju i dobavljače preglednika da nastave napredovati s novim specifikacijama i inovativnim implementacijama značajki, istovremeno dijeleći vlastito znanje s kolegama programerima i dizajnerima. Više uvida, manje hakiranja.
Darcy Clarke nagrađivani je programer, suosnivač tematske tvrtke WordPress Themify i agregator dnevnih transakcija DealPage te član jQuery tima. Radi u Polar Mobileu kao stariji UX programer.
Sviđa li vam se ovo? Pročitajte ovo!
- Kako izraditi aplikaciju
- Preuzmite najbolje besplatne fontove
- Besplatne četke za Photoshop koje svaki kreativac mora imati
- Vodiči za ilustrator: nevjerojatne ideje koje možete isprobati već danas!
- Izvrsni primjeri doodle umjetnosti
- Sjajan odabir udžbenika za Wordpress
- Najbolji besplatni web fontovi za dizajnere
- Preuzmite besplatne teksture: visoke razlučivosti i spremne za upotrebu sada
