Saturs
- Izkārtojums
- Clearfix
- Kastīšu izmēru noteikšana
- Vairākas kolonnas
- Aprēķini
- Stils
- Pārredzamība
- Filtri
- Attēla nomaiņa
- Atsaucīgs video
- Funkcionalitāte
- Viegli atlasot elementus
- Jaunu masīvu izveide
- Notīriet dokumentu un logu objektus
- Patika tas? Izlasiet šos!
Šis raksts pirmo reizi parādījās žurnāla .net 234. numurā - pasaulē vislabāk pārdotajā tīmekļa dizaineru un izstrādātāju žurnālā.
Tehnika savā būtībā ir veids, kā veikt uzdevumu, un, būdami frontend izstrādātāji un dizaineri, mums ir daudz uzdevumu. Tas nozīmē, ka mēs bieži aizmirstam, cik ļoti šī ainava ir mainījusies. No 2002. līdz 2010. gadam mūsu kopiena bija satrunējusi ar kodu un resursu uzpūšanos, kavējot veiktspēju un uzturamību. Lai to pārvarētu, mēs izveidojām virkni padomu, triku un hacku, kurus mēs nodēvējām par “tehniku”. Mēs joprojām pildījām uzdevumus, tikai ne visefektīvākajā veidā.
Veicot 360 grādu, pēdējos gados ir parādījušies labāki standarti un standartu ieviešana, kas mums kā kopienai ļauj attīstīt jaunākas un progresīvākas “tehnikas”. Šī jaunā ainava ir tā, ko uzskata par “moderno tīmekli”.
Tā kā ‘Web 2.0’ kļuva nemainīgs un mulsinošs, tāpat arī ‘modernais tīmeklis’. Dodiet tam laiku. Tas nozīmē, ka pagaidām mēs varam lietot šo vārdu un to ļaunprātīgi izmantot, ja vien ir vienota izpratne par to, ko tas pārstāv.
2010. gadā HTML5 specifikācija nokļuva, nodrošinot pilnīgi jaunu, daļēji standartizētu tīmekļa vidi. Tādas pārlūkprogrammas kā Opera, Firefox, Chrome un Safari pieņēma šo jauno vilni un virzīja savas izstrādātāju komandas uz jauniem standartu ieviešanas un API izpētes ierobežojumiem. Lai sniegtu priekšstatu par to, kā šīs pārlūkprogrammas ir “iebūvētas”, pārbaudiet www.html5readiness.com HTML5 atbalsta maiņas vizualizācijas.
Neuztraucieties par atbalsta trūkumu programmā Internet Explorer. Mēs to varam apkarot, pateicoties Google Chrome Frame. Kopš Google to ieviesa 2010. gadā, tas ir kļuvis par programmas Internet Explorer atbalsta mehānismu. Visas IE versijas var atlasīt, izmantojot Chrome Frame, kas liek jaunam lietotājam IE iekšpusē lejupielādēt spraudni, kas padara izvēlētās vietnes ar vieglu Chrome versiju. Lai ieviestu Chrome Frame, mūsu vietnes tagā head> pievienojam šādu meta> tagu.
meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />
No šejienes mēs varam aicināt IE lietotājus lejupielādēt spraudni, ja tas vēl nav instalēts, izmantojot JavaScript:
skripta tips = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / skripts>
skripts>
window.onload = funkcija () {
CFInstall.check ({
režīms: "pārklājums",
galamērķis: "http://www.jūsudomens.com"
});
};
/ skripts>
galamērķi var iestatīt tā, lai pēc spraudņa instalēšanas lietotājs tiktu nosūtīts uz noteiktu saiti. Vārds piesardzīgi: lai gan Chrome Frame mums dod metodi, kā pilnveidoties patiesi modernām pārlūkprogrammām, mēs nedrīkstam aizmirst, ka lietotājam ir iespēja nelādēt spraudni, ja viņš to nevēlas. Ja viņi to nedara, un jums ir jāsniedz atbalsts vienai vai citām dažādām IE versijām, jums būs jāpavada vēl kāds laiks, lai uzzinātu, ko jūs varat un ko nevarat nodrošināt, izmantojot savu pieredzi, pārlūkprogrammā..
Ar šo kodu nodrošinot ievērojami vienlīdzīgākus spēles apstākļus, lai attīstītos mūsdienu tīmekļa kaudzē, mēs varam mierīgi iet uz priekšu. Jūs, iespējams, atcerēsities, ka jums ir jāizveido vairāki pārlūkprogrammai raksturīgi uzlaušanas gadījumi, lai jūsu vietne būtu strukturēta labajā pārlūkprogrammā, izveidojot neskaitāmu skaitu tukšu elementu, kas jāizmanto kopā ar sagrieztajiem attēliem, vai pat rakstījāt pārāk daudzbāzīgu vai lieku JavaScript kodu, vienkāršākā funkcionalitāte darbam. Visas šīs sāpes savā ziņā ir tās pašas problēmas, par kurām mēs šodien uztraucamies. Mēs joprojām cīnāmies par lielāku kontroli un labākiem rīkiem, lai apkarotu izkārtojumu, stilu un funkcionalitāti, taču tādā līmenī, kas ir nobriedis.
Izkārtojums
Clearfix
Peldošais elements tika ieviests atpakaļ CSS 2.1, taču tas nekad nav izrādījies pilnīgs risinājums, ko cerējām. Viena no lielākajām problēmām bija vecāku elementa izmēru saglabāšana, kad bērna elements tika peldēts. Lai to novērstu, tika izveidota clearfix tehnika.
Izmantojiet šādu HTML:
div>
div> ... / div>
div> ... / div>
/ div>
Šo tehniku ir uzrakstījis Nikolass Galahers:
.clearfix: iepriekš,
.clearfix: pēc {
saturs: "";
displejs: tabula;
}
.clearfix: pēc {
skaidrs: abi;
}
.clearfix {
* tālummaiņa: 1;
}
Ja jūs izmantojat HTML5Boilerplate, lai sāktu savus projektus, jums šī cepeškrāslas labojuma paņēmiena versija jau ir cepta.
Kastīšu izmēru noteikšana
Gadiem ilgi izstrādātāji diskutēja par to, kura kastes modeļa ieviešanai bija jēga. Režīms Quirks vs Standards patiešām nozīmēja: “vai elementa izmēriem vajadzētu mainīties pēc iestatīšanas, kad tiek uzliktas apmales un polsterējums”.
Tagad ir plaši atzīts, ka ir lietderīgāk, ja apmales un polsterējums atņem elementā pieejamo vietu un nepapildina elementa platumu vai augstumu. Debates ir padarītas par neatbilstošām, plaši izmantojot kastīšu lielumu. Pārlūkprogramma ņems no jums norādes, nevis otrādi.
Krisa Koijera un Pola Īrisa popularizēto visaptverošo tehniku var ieviest ar šādiem veidiem:
* {
-webkit-box-sizing: apmales kaste;
-moz-box-sizing: apmales kaste;
kastes izmērs: pierobežas kaste;
}
Par * selektora izmantošanu CSS tika apspriesta iespējamo veiktspējas rezultātu dēļ. Šāda veida pretenzijas ir nenopietnas, ja jūs neoptimizējat visus citus savas vietnes / lietotnes aspektus. Izmantojot pierobežas lodziņu, pārlūkprogramma liks pievienot polsterējumu un apmales pieejamās vietas komplektā. “Standarta režīmu” var izmantot, iestatot lodziņa lielumu uz “Content-box”.
Vairākas kolonnas
Tīmekli lielā mērā iedvesmoja rakstiskā forma un veids. Diemžēl mēs iestrēgām pergamenta fāzē. Daži no šiem jautājumiem nāk uz priekšu ar ilgi gaidītajām Paged-Media un CSS reģionu specifikācijām. Pirmie soļi ceļā uz žurnāliem līdzīgāku izkārtojumu tika sperti, kad pārlūkprogrammas sāka ieviest CSS vairāku kolonnu sistēmu. Kods šī efekta ģenerēšanai ir diezgan vienkāršs:
p {
-webkit-kolonnu skaits: 2;
-moz-kolonnu skaits: 2;
kolonnu skaits: 2;
}
Vairāk par CSS3 vairāku kolonnu specifikāciju, kā arī JavaScript rezerves versiju, kuru varat izmantot jebkuram pārlūkam bez atbalsta, varat uzzināt no A List Apart emuāra.
Aprēķini
Aprēķināt izmērus var būt grūti. Vēl senākos laikos mums nebija iespējas veikt nekādus vienību aprēķinus, nemaz nerunājot par jauktiem vienību aprēķiniem. Tas viss ir mainījies, pateicoties calc. Polsterēta efekta izveide, kas neietekmē sākotnējo elementu platumu vai izmanto kaut ko līdzīgu kastes lielumam: border-box; vēl nesen bija iespējams tikai pievienojot papildus saturošus elementus.
.padded {
margin: 0 auto;
amats: radinieks;
platums: -webkit-calc (100% - (20px * 2));
platums: -moz-calc (100% - (20px * 2));
platums: aprēķināts (100% - (20px * 2));
}
calc () rūpējas par pareizu platuma aprēķinu, pamatojoties uz .padded vecāku platumu un atņemot noteiktu 20 pikseļu polsterējumu. Es to reizināju ar 2 abām sava elementa pusēm, centrējot elementu, izmantojot relatīvo pozicionēšanu un automātisko kreiso un labo malu.
Stils
Pārredzamība
Pareiza elementa stila iegūšana vienmēr ir bijusi atkarīga no rīku veida, kas mums bija pieejami CSS. Caurspīdīgums ir viens no pirmajiem atbalsta variantiem, ar kuru jūs saskartos 2000. gadu sākumā un vidū.
Līdz ar HTML5 parādīšanos un mērķtiecīgākiem standartu centieniem pārlūkprogrammās tiek nodrošināta necaurredzamības standarta standarta ieviešana, un tie ir pakļauti alfa kanālu atbalstam saskaņā ar jauno krāsu moduļa specifikāciju. Tas ietver RGBA un HSLA vadlīnijas.
a {
krāsa: rgba (0,255,0,0,5);
fons: rgba (0,0255,0,05);
apmale: rgba (255,0,0,0,5);
}
Varat izmantot RGBA vai HSLA krāsas visur, kur atrodat HEX vērtības. Ir arī paplašināts jautru krāsu saraksts ar definētiem nosaukumiem, kurus varat pārbaudīt tieši specifikācijā. Tie ir noderīgi, ja vēlaties izveidot dinamisku maisījumu starp elementiem.
Filtri
CSS filtri ir ārkārtīgi aizraujoši. Pārsteidzoša ir iespēja dinamiski mainīt lapas elementu izskatu un izjūtu, neizmantojot trešo pušu spraudņus, un tas palīdzēs ievērojami samazināt Photoshop pavadīto laiku.
img src = "market.webp">
img {
-webkit-filter: pelēktoņi (100%);
}
CSS filtri pašlaik tiek atbalstīti tikai WebKit pārlūkprogrammās, tāpēc to izmantošanai jābūt papildinošai, nevis atkarīgai. Vairāk lasiet šeit.
Attēla nomaiņa
Teksta aizstāšana ar attēliem ir bijusi jau ilgu laiku. Diemžēl jaunākajām un izsmalcinātākajām attēlu aizstāšanas metodēm joprojām ir trūkumi, kas saistīti ar pieejamību. Bet nesen atklājās divi, kas ir ārkārtīgi gudri un unikāli pēc savām tiesībām. Pirmo rakstīja Skots Kellmans:
h1 class = ’hide-text’> Manas vietnes logotips / h1>
.hide-text {
teksta ievilkums: 100%;
baltā telpa: nowrap;
pārplūde: slēpta;
}
Otro rakstīja Nikolā Galahere:
.hide-text {
fonts: 0/0 a;
teksta ēna: nav;
krāsa: caurspīdīga;
}
Atsaucīgs video
Mediju pareiza mērogošana jutīgā vidē var būt sarežģīta problēma. Tā kā arvien vairāk vietņu ievēro adaptīvo dizainu, ir svarīgi pareizi rīkoties ar elementu izmēriem un malu attiecību.
Iegultais video ir bijis viens no sarežģītākajiem multivides veidiem, ar kuru jācīnās, pateicoties tam, kā trešo pušu pakalpojumi apkalpo saturu. Tipisks YouTube iegulšana izskatās apmēram šādi:
iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Pēc tam iframe elements satur Flash objektu vai iegultu elementu. Izmantojot kaut ko līdzīgu iframe {maxwidth: 100%; } nedarbosies, jo ligzdoto elementu izmērs netiek mainīts, mainoties platumam. Tātad, mums ir jāizdara daži triki.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Iframe ietīšana citā elementā dos mums kontroli, kas mums jāpievieno videoklipam atbilstoša adaptīvā funkcionalitāte.
.video {
amats: radinieks;
polsterējums-dibens: 56,25%;
augstums: 0;
pārplūde: slēpta;
}
.video iframe,
.video objekts,
.video embed {
pozīcija: absolūta;
augšdaļa: 0;
pa kreisi: 0;
platums: 100%;
augstums: 100%;
}
.Video iesaiņotāja polsterējuma dibena iestatīšana: 56,25%; ir šīs metodes burvība. Izmantojot polsterējumu, izmantotais procents būs atkarīgs no vecāku platuma; ‘56 .25% ’izveidos malu attiecību 16: 9. Veiciet matemātiku pats, ja vēlaties. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (tas ir mūsu procents).
Funkcionalitāte
Viegli atlasot elementus
Popularizējoties vairākām JavaScript bibliotēkām (piemēram, jQuery), ECMAScript komiteja un W3C standarti ņēma vērā vienu no funkcionalitātes izstrādātāju pamatelementiem, kam trūka dabiski - labu elementu izvēli. Tādas metodes kā getElementByID () un getElementByClassName () bija ātras, bet ne tik elastīgas un izturīgas kā selektoru motori, kas nāk no izstrādātāju kopienas; querySelectorAll () bija standartu iestādes veids, kā vietējā atlasītāja metodē atdarināt daļu no šīs elastības.
var items = document.querySelectorAll (’# header .item’);
querySelectorAll () var nodot vairākus un jauktus atlasītājus. Lasiet vairāk par šo.
Jaunu masīvu izveide
Atkārtojot masīvu, ir kaut kas nogurdinošs rakstīšanai. Rakstīt un pārrakstīt () cilpas nav jautri. JS versijā 1.6 map () metode nokļuva, nodrošinot atbalstu vienkāršam atkārtojumam un jauna masīva izveidošanai no cita.
var cilvēki = [’Hetere’, ’Džeimss’, ’Kari’, ’Kevins’];
var welcome = cilvēki.map (funkcija (nosaukums) {
atgriezties ‘Čau’ + vārds + ’!’;
});
Palaist šo kodu, ja mēs domātu console.log (welcome), jūs redzētu welcome, ir jauns masīvs [‘Hi Heather!’, ‘Hi James!’, ‘Hi Kari!’, ‘Hi Kevin!’ ].
Notīriet dokumentu un logu objektus
Trešās puses JavaScript bibliotēkas ir pakļautas sajaukšanai ar vietējo dokumentu un logu objektiem. Tas var radīt problēmas citām trešo pušu bibliotēkām un izstrādātājam, ieskaitot tās. Kā abām pusēm pārliecinieties, ka strādājat ar tīru abu objektu versiju, izveidojot jaunu to eksemplāru. Labākais veids, kā to izdarīt, ir izveidot iframe elementu, ievietot to DOM un saglabāt šo objektu jaunos gadījumus.
var iframe = document.createElement (’iframe’);
iframe.style.display = "nav";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Lai gan tīmekļa kaudzē ir veikti ievērojami uzlabojumi, joprojām ir ļoti svarīgi pilnveidot un pilnveidot mūsu tehnoloģiju komplektu, lai risinātu problēmas, ar kurām saskaramies mūsu projekta izkārtojumā, stilā un funkcionalitātē. Lai uzturētu labu izaugsmes ekosistēmu, mums jāmudina standartizācijas iestādes un pārlūku pārdevēji turpināt progresu ar jaunām specifikācijām un novatorisku funkciju ieviešanu, vienlaikus daloties savās zināšanās ar citiem izstrādātājiem un dizaineriem. Vairāk ieskatu, mazāk hakeru.
Dārsijs Klarks ir godalgots izstrādātājs, WordPress tēmu uzņēmuma Themify un dienas darījumu apkopotāja DealPage līdzdibinātājs un jQuery komandas loceklis. Viņš strādā Polar Mobile kā vecākais UX izstrādātājs.
Patika tas? Izlasiet šos!
- Kā izveidot lietotni
- Lejupielādējiet labākos bezmaksas fontus
- Bezmaksas Photoshop otas katram radošajam jābūt
- Illustrator apmācības: pārsteidzošas idejas, kuras izmēģināt šodien!
- Lieliski svētku logotipa mākslas piemēri
- Izcila WordPress apmācības izvēle
- Labākie bezmaksas web fonti dizaineriem
- Lejupielādējiet bezmaksas tekstūras: augsta izšķirtspēja un gatava lietošanai tūlīt
