Turinys
- Išdėstymas
- „Clearfix“
- Dėžės dydis
- Keli stulpeliai
- Skaičiavimai
- Stilius
- Skaidrumas
- Filtrai
- Vaizdo pakeitimas
- Interaktyvus vaizdo įrašas
- Funkcionalumas
- Lengvai pasirenkami elementai
- Naujų masyvų kūrimas
- Išvalykite dokumentų ir langų objektus
- Jums tai patiko? Perskaitykite tai!
Šis straipsnis pirmą kartą pasirodė 234 žurnalo „.net“ žurnale - perkamiausiame pasaulyje žurnale, skirtame interneto dizaineriams ir kūrėjams.
Technika savo esme yra būdas atlikti užduotį ir, būdami frontend kūrėjai ir dizaineriai, turime daug užduočių. Beje, mes dažnai pamirštame, kiek šis kraštovaizdis pasikeitė. Nuo 2002 m. Iki 2010 m. Mūsų bendruomenė buvo supuvusi dėl kodo ir išteklių išpūtimo, trukdydama našumui ir palaikomumui. Norėdami tai įveikti, sukūrėme daugybę patarimų, gudrybių ir įsilaužimų, kuriuos pavadinome „technika“. Mes vis dar vykdėme užduotis, tik ne pačiu efektyviausiu būdu.
Per pastaruosius kelerius metus, atlikdami „360“ modelį, atsirado geresnių standartų ir jų įgyvendinimas, leidžiantis mums kaip bendruomenei sukurti naujesnes ir pažangesnes „technikas“. Šis naujas peizažas laikomas „moderniu žiniatinkliu“.
Kai „Web 2.0“ tapo sustabarėjęs ir painus, taip pat bus ir „šiuolaikinis internetas“. Duok tam laiko. Tai reiškia, kad kol kas galime vartoti šį terminą ir juo piktnaudžiauti, jei yra bendras supratimas apie tai, ką jis reiškia.
2010 m. HTML5 specifikacija nusileido, suteikdama visiškai naują, pusiau standartizuotą žiniatinklio aplinką. Naršyklės, tokios kaip „Opera“, „Firefox“, „Chrome“ ir „Safari“, priėmė šią naują bangą ir privertė savo kūrėjų komandas nustatyti naujas standartų diegimo ir API paieškos ribas. Norėdami suprasti, kaip šios naršyklės yra „integruotos“, peržiūrėkite www.html5readiness.com vizualizacijas, kaip pakeisti HTML5 palaikymą.
Nesijaudinkite dėl nepakankamo „Internet Explorer“ palaikymo. Su tuo galime kovoti „Google Chrome Frame“ dėka. Nuo tada, kai „Google“ jį pristatė 2010 m., Jis tapo „Internet Explorer“ palaikymo mechanizmu. Visos „IE“ versijos gali būti taikomos naudojant „Chrome Frame“, kuri paragina naują vartotoją IE viduje atsisiųsti papildinį, kuris pateikia pasirinktas svetaines su lengva „Chrome“ versija. Norėdami įdiegti „Chrome Frame“, į savo svetainės head> žymą pridedame šią meta> žymę.
meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />
Iš čia mes galime paraginti IE vartotojus atsisiųsti papildinį, jei jis dar neįdiegtas, naudodami „JavaScript“:
scenarijaus tipas = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / scenarijus>
scenarijus>
window.onload = funkcija () {
CFInstall.check ({
režimas: „perdanga“,
paskirties vieta: „http://www.yourdomain.com“
});
};
/ scenarijus>
paskirties vietą galima nustatyti taip, kad įdiegus papildinį vartotojui būtų siunčiama tam tikra nuoroda. Žodis atsargiai: nors „Chrome Frame“ suteikia mums būdą tobulėti tik modernioms naršyklėms, neturime pamiršti, kad vartotojas turi galimybę neatsisiųsti papildinio, jei nenori. Jei jie to nepadaro, ir jūs turite suteikti paramą vienai ar kitoms skirtingoms IE versijoms, turėsite praleisti dar šiek tiek laiko, kad sužinotumėte, ką galite ir ko negalite pateikti naudodamiesi įvairiomis naršyklėmis..
Turėdami šį kodą, suteikdami žymiai vienodesnes sąlygas tobulėti šiuolaikiniame žiniatinklio šūsnyje, galime laisvai judėti į priekį. Galite prisiminti, kad turėjote sukurti daugybę naršyklėms būdingų įsilaužimų, kad jūsų svetainė būtų struktūrizuota dešinėje kryžminėje naršyklėje, sukūrę begalę tuščių elementų, kurie bus naudojami su jūsų supjaustytais vaizdais, ar net parašę pernelyg daug ar nereikalingą „JavaScript“ kodą, kad gautumėte paprasčiausias funkcionalumas. Visi šie skausmai tam tikra prasme yra tos pačios problemos, dėl kurių šiandien nerimaujame. Mes vis dar kovojame už didesnę kontrolę ir geresnius įrankius kovai su išdėstymu, stiliumi ir funkcionalumu, tačiau jau subrendusiu lygiu.
Išdėstymas
„Clearfix“
Plūduriuojantis elementas buvo įvestas atgal į CSS 2.1, tačiau niekada nebuvo visiškai išspręstas sprendimas, kurio tikėjomės. Viena iš didžiausių problemų buvo tėvų elementų matmenų išlaikymas, kai buvo užklijuotas vaiko elementas. Norėdami tai išspręsti, buvo sukurta „clearfix“ technika.
Paimkite šį HTML:
div>
div> ... / div>
div> ... / div>
/ div>
Šią techniką parašė Nicolas Gallagheris:
.clearfix: prieš,
.clearfix: po {
turinys: " ";
rodyti: lentelę;
}
.clearfix: po {
aišku: tiek;
}
.clearfix {
* priartinimas: 1;
}
Jei naudojate „HTML5Boilerplate“, kad pradėtumėte savo projektus, jau turėsite iškepti šią „clearfix“ technikos versiją.
Dėžės dydis
Daugelį metų kūrėjai diskutavo, kuris dėžės modelio įgyvendinimas buvo prasmingesnis. „Quirks vs Standards“ režimas iš tikrųjų reiškė: „Ar elemento matmenys turėtų pasikeisti, kai jie bus nustatyti, kai bus pritaikytos kraštinės ir paminkštinimai“.
Dabar plačiai sutariama, kad yra prasmingiau, jei kraštai ir paminkštinimai atima iš laisvos vietos elemente ir nepadidina elemento pločio ar aukščio. Diskusijos tapo nereikšmingos plačiai įgyvendinant dėžių dydį. Naršyklė imsis užuominų iš jūsų, o ne atvirkščiai.
Chriso Coyierio ir Paulo Irisho išpopuliarintą visaapimančią techniką galima įgyvendinti taip:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
dėžutės dydis: rėmelis;
}
Dėl galimo našumo įvykių diskutuojama, ar CSS naudoti selektorių *. Šios pretenzijos yra lengvabūdiškos, jei neoptimizuojate visų kitų savo svetainės / programos aspektų. Naudojant „border-box“, naršyklė privers pridėti užpildą ir kraštus turimos vietos rinkinyje. „Standartinis režimas“ gali būti naudojamas nustatant dėžutės dydį į „content-box“.
Keli stulpeliai
Žiniatinklį labai įkvėpė rašytinė forma ir tipas. Deja, mes įstrigome pergamento fazėje. Kai kurios iš šių problemų kyla dėl ilgai lauktų „Paged-Media“ ir CSS regionų specifikacijų. Pirmieji žingsniai link žurnalų panašesnių išdėstymų buvo žengti, kai naršyklės pradėjo diegti CSS kelių stulpelių. Kodas sukurti šį efektą yra gana paprastas:
p {
-webkit-column-count: 2;
-moz-column-count: 2;
stulpelių skaičius: 2;
}
Iš „A List Apart“ tinklaraščio galite sužinoti daugiau apie CSS3 kelių stulpelių specifikaciją ir „JavaScript“ atsarginį variantą, kurį galite naudoti bet kurioje naršyklėje be palaikymo.
Skaičiavimai
Skaičiuoti matmenis gali būti sunku. Dar senais laikais mes neturėjome galimybės atlikti jokių vienetų skaičiavimų, jau nekalbant apie mišrius vienetų skaičiavimus. Viskas pasikeitė dėka calc. Sukurti paminkštintą efektą, kuris neturi įtakos pradiniam elementų plotiui ar naudoja kažką panašaus į langelio dydį: border-box; dar neseniai buvo įmanoma tik pridėjus papildomų elementų.
.padded {
paraštė: 0 auto;
padėtis: giminaitis;
plotis: -webkit-calc (100% - (20px * 2));
plotis: -moz-calc (100% - (20px * 2));
plotis: apskaičiuota (100% - (20px * 2));
}
„calc ()“ rūpinasi tinkamu pločio skaičiavimu pagal „.padded“ pirminį plotį ir atėmus apibrėžtą 20 taškų užpildymą. Aš tai padauginau iš 2 kiekvienai savo elemento pusei, centruodamas elementą naudodamas santykinį padėties nustatymą ir automatinį kairės ir dešinės paraštės nustatymą.
Stilius
Skaidrumas
Tinkamo elemento stiliaus įgijimas visada priklausė nuo to, kokių įrankių turėjome CSS. Skaidrumas yra vienas iš pirmųjų palaikymo variantų, su kuriuo susidurtumėte 2000-ųjų pradžioje ir viduryje.
Atsiradus HTML5 ir labiau sutelktoms standartų pastangoms, naršyklės turi standartinį neskaidrumo savybės įgyvendinimą ir turi alfa kanalo palaikymą pagal naują spalvų modulio specifikaciją. Tai apima RGBA ir HSLA gaires.
a {
spalva: rgba (0,255,0,0,5);
fonas: rgba (0,0255,0,05);
riba: rgba (255,0,0,0,5);
}
RGBA arba HSLA spalvas galite naudoti visur, kur tik rastumėte HEX reikšmes. Taip pat yra išplėstinis įdomių spalvų sąrašas su apibrėžtais pavadinimais, kuriuos galite patikrinti tiesiai specifikacijoje. Tai praverčia, kai norite sukurti dinamišką elementų mišinį.
Filtrai
CSS filtrai yra be galo įdomūs. Nuostabu yra galimybė dinamiškai pakeisti puslapio elementų išvaizdą ir savybę, nereikalaujant trečiųjų šalių papildinių. Tai labai padės sumažinti jūsų laiką, praleistą „Photoshop“.
img src = "market.webp">
img {
-webkit-filter: pilkos spalvos skalė (100%);
}
CSS filtrai šiuo metu palaikomi tik „WebKit“ naršyklėse, todėl jų naudojimas turėtų būti papildomas, o ne priklausomas. Skaitykite daugiau čia.
Vaizdo pakeitimas
Teksto pakeitimas vaizdais buvo ilgą laiką. Deja, vis dar yra naujausių ir moderniausių vaizdo pakeitimo metodų trūkumų, atsižvelgiant į prieinamumą. Tačiau neseniai išaiškėjo du, kurie yra labai protingi ir unikalūs savo teisėmis. Pirmąjį parašė Scottas Kellmanas:
h1 class = ’hide-text’> Mano svetainės logotipas / h1>
.hide-text {
teksto įtrauka: 100%;
white-space: nowrap;
perteklius paslėptas;
}
Antrąjį parašė Nicolas Gallagheris:
.hide-text {
šriftas: 0/0 a;
teksto šešėlis: nėra;
spalva: skaidri;
}
Interaktyvus vaizdo įrašas
Gauti iššūkį, norint tinkamai pritaikyti žiniasklaidą reaguojančioje aplinkoje. Kadangi vis daugiau svetainių gerbia adaptyvų dizainą, būtina tinkamai elgtis su elementų matmenimis ir formato santykiu.
Įterptasis vaizdo įrašas buvo vienas iš sudėtingiausių medijos tipų, dėl kurio reikia kovoti dėl to, kaip trečiųjų šalių paslaugos teikia turinį. Tipiškas „YouTube“ įdėjimas atrodo maždaug taip:
iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Tada „iframe“ elemente yra „Flash“ objektas arba įdėtas elementas. Naudojant kažką panašaus į iframe {maxwidth: 100%; } neveiks, nes įdėti elementai netinkamai keičiasi, kai keičiasi plotis. Taigi, mes turime šiek tiek apgauti.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Apsivynioję „iframe“ į kitą elementą gausime valdymą, kurio reikia, kad vaizdo įraše galėtume tinkamai reaguoti.
.video {
padėtis: giminaitis;
kamšalo dugnas: 56,25%;
aukštis: 0;
perteklius paslėptas;
}
.video iframe,
.video objektas,
.video embed {
pozicija: absoliuti;
viršuje: 0;
kairėje: 0;
plotis: 100%;
aukštis: 100%;
}
„Video wrapper“ apatinės dalies dugno nustatymas: 56,25%; yra šio metodo magija. Naudojant užpildą, procentas bus naudojamas pagal tėvų plotį; „56,25%“ bus sukurtas 16: 9 formato santykis. Jei norite, patys atlikite matematiką. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (tai yra mūsų procentas).
Funkcionalumas
Lengvai pasirenkami elementai
Populiarėjant daugybei „JavaScript“ bibliotekų (pvz., „JQuery“), ECMAScript komitetas ir W3C standartai atkreipė dėmesį į tai, kad vienas iš pagrindinių funkcionalumo kūrėjų elementų stokojo natūraliai - gero elementų pasirinkimo. Tokie metodai, kaip getElementByID () ir getElementByClassName (), buvo greiti, bet ne tokie lankstūs ir tvirti, kaip selektorių varikliai, kilę iš kūrėjų bendruomenės; „querySelectorAll“ () buvo standartų įstaigos būdas imituoti tam tikrą lankstumą naudojant vietinio pasirinkimo metodą.
var items = document.querySelectorAll (’# header .item’);
querySelectorAll () gali būti perduoti keli ir mišrūs selektoriai. Skaitykite daugiau apie tai.
Naujų masyvų kūrimas
Kartojimasis per masyvą yra tai, kas tapo varginanti rašyti. Rašyti ir perrašyti () kilpas nėra smagu. JS 1.6 versijoje „map“ () metodas pateko į palaikymą, kad būtų lengviau pakartoti ir sukurti naują masyvą iš kito.
var žmonės = [’Heather’, ’James’, ’Kari’, ’Kevin’];
var welcome = žmonės.map (funkcija (vardas) {
grąžinti ‘labas’ + vardas + ’!’;
});
Paleidę šį kodą, jei būtume „console.log“ (sveikiname), matytumėte, kad „sveikina“, yra naujas masyvas [‘Hi Heather!’, ‘Hi James!’, ‘Hi Kari!’, ‘Hi Kevin!’ ].
Išvalykite dokumentų ir langų objektus
Trečiųjų šalių „JavaScript“ bibliotekos yra linkusios maišytis su vietiniais dokumentų ir langų objektais. Tai gali sukelti problemų kitoms trečiųjų šalių bibliotekoms ir kūrėjui, įskaitant jas. Kaip bet kuri šalis, įsitikinkite, kad dirbate su švaria abiejų objektų versija, sukurdami naują jų objektą. Geriausias būdas tai padaryti yra sukurti „iframe“ elementą, įterpti jį į DOM ir saugoti naujas tų objektų egzempliorius.
var iframe = document.createElement (’iframe’);
iframe.style.display = "nėra";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Nors žiniatinklio paketas buvo labai patobulintas, vis dar labai svarbu tobulinti ir tobulinti mūsų technologijų rinkinį, kad būtų galima įveikti iššūkius, su kuriais susiduriame pagal savo projekto išdėstymą, stilių ir funkcionalumą. Kad išlaikytume gerą augimo ekosistemą, turime skatinti standartų įstaigas ir naršyklių pardavėjus tęsti pažangą kurdami naujas specifikacijas ir diegdami naujoviškas funkcijas, tuo pačiu dalindamiesi savo žiniomis su kitais kūrėjais ir dizaineriais. Daugiau įžvalgų, mažiau įsilaužimų.
Darcy Clarke yra apdovanojimus pelnęs kūrėjas, „WordPress“ temų kompanijos „Themify“ ir kasdienių sandorių kaupimo priemonės „DealPage“ įkūrėjas bei „jQuery“ komandos narys. Jis dirba „Polar Mobile“ kaip vyresnysis „UX“ kūrėjas.
Jums tai patiko? Perskaitykite tai!
- Kaip sukurti programą
- Atsisiųskite geriausius nemokamus šriftus
- Nemokami „Photoshop“ šepetėliai, kuriuos privalo turėti kiekvienas kūrybininkas
- „Illustrator“ pamokos: nuostabios idėjos, kurias reikia išbandyti šiandien!
- Puikūs papuoštų logotipų meno pavyzdžiai
- Puikus „WordPress“ mokymo programos pasirinkimas
- Geriausi nemokami žiniatinklio šriftai dizaineriams
- Atsisiųskite nemokamas tekstūras: didelės skiriamosios gebos ir paruoštas naudoti dabar
