Teknikat thelbësore HTML, CSS dhe JavaScript

Autor: Monica Porter

Data E Krijimit: 22 Marsh 2021

Datën E Azhurnimit: 17 Mund 2024

Teknikat thelbësore HTML, CSS dhe JavaScript - Krijues

Përmbajtje

Paraqitja
Zgjidhje e qartë
Madhësia e kutive
Shumë kolona
Llogaritjet
Stili
Transparenca
Filtrat
Zëvendësimi i imazhit
Video e përgjegjshme
Funksionaliteti
Zgjedhja e lehtë e elementeve
Krijimi i vargjeve të reja
Pastroni dokumentin dhe objektet e dritares
Te pelqen kjo? Lexoni këto!

Ky artikull u shfaq për herë të parë në numrin 234 të revistës .net - revista më e shitur në botë për krijuesit e faqeve në internet.

Një teknikë, në thelbin e saj, është një mënyrë për të kryer një detyrë dhe, duke qenë zhvillues dhe dizajnerë përpara, kemi shumë detyra. Thënë kjo, ne shpesh harrojmë se sa shumë ka ndryshuar ky peizazh. Nga viti 2002 deri në 2010 komuniteti ynë ishte i kalbur me kod dhe burime, duke penguar performancën dhe qëndrueshmërinë. Për ta kapërcyer këtë, ne krijuam një mori sugjerimesh, trukesh dhe hakesh që i kemi quajtur ‘teknikë’. Ne ende po përmbushnim detyrat, thjesht jo në mënyrën më efikase.

Bërja e një 360, vitet e fundit kanë parë standarde dhe zbatime më të mira të standardeve, të cilat na mundësojnë ne si komunitet të zhvillojmë ‘teknika’ më të reja dhe më të përparuara. Ky peizazh i ri është ai që konsiderohet si web rrjeti modern ’.

Ndërsa ‘Web 2.0’ u bë i ndenjur dhe konfuze, kështu do të bëhet edhe web rrjeti modern ’. Jepi kohe. Kjo tha, tani për tani, ne mund të përdorim dhe abuzojmë me termin për sa kohë që ka një kuptim të përbashkët të asaj që përfaqëson.

Në vitin 2010, specifikimi HTML5 zbarkoi, duke siguruar një mjedis të ri, gjysmë të standardizuar në internet. Shfletuesit si Opera, Firefox, Chrome dhe Safari përqafuan këtë valë të re dhe shtynë ekipet e tyre dev në kufij të rinj të zbatimit të standardeve dhe kërkimit të API. Për t'ju dhënë një ide se si board në bord ’janë këta shfletues, kontrolloni vizualizimet e www.html5readiness.com për ndryshimin e mbështetjes HTML5.

Mos u shqetësoni për mungesën e mbështetjes në Internet Explorer. Ne mund ta luftojmë këtë falë Google Chrome Frame. Që kur Google e prezantoi atë në vitin 2010, ai u bë mekanizmi mbështetës për Internet Explorer. Të gjitha versionet e IE mund të synohen me Chrome Frame, gjë që e bën një përdorues të ri të shkarkojë një shtesë që jep faqet e internetit të zgjedhura me një version të lehtë të Chrome, brenda IE. Për të zbatuar Chrome Frame, ne shtojmë etiketën e mëposhtme meta> brenda etiketës kokë të faqes tonë.

përmbajtja meta http-eku = "X-UA-e pajtueshme" = "krom = 1" />

Nga këtu ne mund t'i nxisim përdoruesit e IE të shkarkojnë shtojcën, nëse nuk është instaluar tashmë, duke përdorur JavaScript:

lloji i shkrimit = "teksti / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFI instaloj.
min.js "> / skript>
skenari>
windows.onload = funksioni () {
CFInstall.check ({
modaliteti: "mbivendosje",
destinacioni: "http://www.yourdomain.com"
});
};
/ skenari>

mund të vendoset destinacioni për të dërguar përdoruesin në një lidhje të caktuar pas instalimit të shtojcës. Një kujdes: megjithëse Chrome Frame na jep një metodë për tu zhvilluar në mënyrë rigoroze për shfletuesit me të vërtetë modernë, nuk duhet të harrojmë që përdoruesi ka mundësinë e mos shkarkimit të shtojcës nëse nuk dëshiron. Nëse nuk e bëjnë këtë, dhe ju kërkohet të siguroni mbështetje për një ose versione të tjerë të IE, do të duhet të kaloni ca më shumë kohë për të gjetur se çfarë mund dhe çfarë nuk mund të siguroni, me përvojat tuaja, përmes shfletuesit.

Me këtë kod që siguron një fushë loje dukshëm më të barabartë mbi të cilën të zhvillohemi në rafte moderne në internet, ne mund të ecim përpara me mendjet tona të qeta. Ju mund të mbani mend që keni nevojë të krijoni një numër të hak-ve specifikë të shfletuesit për të strukturuar faqen tuaj të shfletuesit të djathtë, duke krijuar një numër të panumërt të elementeve të zbrazëta që do të përdoren me imazhet tuaja të feta, ose madje edhe të shkruani kodin tepër të folur ose të tepërt të JavaScript për të marrë më e thjeshtë e funksionalitetit për të punuar. Të gjitha këto dhimbje janë, në një farë kuptimi, të njëjtat probleme për të cilat shqetësohemi sot. Ne jemi ende duke luftuar për më shumë kontroll dhe mjete më të mira për të luftuar paraqitjen, stilin dhe funksionalitetin, por në një nivel që është i pjekur.

Paraqitja

Zgjidhje e qartë

Një element lundrues u prezantua përsëri në CSS 2.1, por asnjëherë nuk doli të ishte zgjidhja e plotë që shpresonim. Një nga problemet më të mëdha ishte ruajtja e dimensioneve të një elementi prind kur një element i fëmijës notohej. Për të adresuar këtë, u krijua teknika e sqarimit.

Merrni HTML-në e mëposhtme:

div>
div> ... / div>
div> ... / div>
/ div>

Kjo teknikë është shkruar nga Nicolas Gallagher:

.pastrim i qartë: më parë,
.pastrimi i qartë: pas {
përmbajtja: "";
ekran: tabela;
}
.pastrimi i qartë: pas {
qartë: të dy;
}
.pastruese {
* zoom: 1;
}

Nëse përdorni HTML5Boilerplate për të filluar projektet tuaja, atëherë do ta keni tashmë të pjekur këtë version të teknikës së pastrimit.

Madhësia e kutive

Për vite me radhë zhvilluesit debatuan se cili zbatim i modelit të kutisë kishte më shumë kuptim. Modaliteti quirks vs Standards me të vërtetë nënkuptonte: ‘nëse dimensionet e një elementi duhet të ndryshojnë, pasi të jenë vendosur, kur aplikohen kufijtë dhe mbushja, ose jo’.

Tani është rënë dakord gjerësisht se ka më shumë kuptim që kufijtë dhe mbushjet të hiqen nga hapësira e disponueshme brenda një elementi dhe të mos shtohen në gjerësinë ose lartësinë e elementit. Debati është bërë i parëndësishëm me zbatimin e përhapur gjerësisht të madhësive. Shfletuesi do të marrë sugjerimet nga ju në vend të anasjelltas.

Popullarizuar nga Chris Coyier dhe Paul Irish, një teknikë gjithëpërfshirëse mund të zbatohet me sa vijon:

* {
-përmasat e kuti-faqet e internetit: kuti-kufi;
-moz-kuti-madhësia: kuti-kuti;
madhësia e kutisë: kutia e kufirit;
}

Përdorimi i përzgjedhësit * në CSS është debatuar, për shkak të goditjeve të mundshme të performancës. Këto lloj pretendimesh janë joserioze nëse nuk jeni duke optimizuar hiper të gjitha aspektet e tjera të faqes në internet / aplikacionit tuaj. Përdorimi i kuti bordurash do ta bëjë shfletuesin të shtojë mbushje dhe kufij brenda hapësirës së disponueshme. Ode Modaliteti i Standardeve ’mund të përdoret duke vendosur madhësinë e kutisë në kutinë e përmbajtjes.

Shumë kolona

Rrjeti u frymëzua shumë nga forma dhe lloji i shkruar. Fatkeqësisht, ngecëm në fazën e pergamenës. Disa nga këto çështje po vijnë në qendër të vëmendjes me specifikimet e Rajoneve Paged-Media dhe CSS të shumëpritura. Thënë kjo, hapat e parë drejt paraqitjeve më të ngjashme me revistat u ndërmorën kur shfletuesit filluan zbatimin e shumë kolonave CSS. Kodi për të gjeneruar këtë efekt është mjaft i thjeshtë:

p {
-numër-kolona-numërimi: 2;
-moz-kolonë-numërim: 2;
numërimi i kolonave: 2;
}

Ju mund të mësoni më shumë rreth specifikimit me shumë kolona CSS3, si dhe një ndërrim JavaScript që mund ta përdorni për çdo shfletues pa mbështetje, nga blogu i A List Apart.

Llogaritjet

Llogaritja e dimensioneve mund të jetë e vështirë. Kthehu në ditët e vjetra, ne nuk kishim si të bënim asnjë lloj llogaritje të njësive, aq më pak llogaritjet e përziera të njësive. Kjo ndryshoi e gjitha falë llogaritjes. Krijimi i një efekti të mbushur që nuk ndikon në gjerësinë e elementeve fillestare ose nuk përdor diçka si madhësia e kutisë: kutia e kufirit; ishte, deri vonë, e mundur vetëm duke shtuar elemente shtesë që përmbajnë.

. mbushur {
diferencë: 0 auto;
pozicioni: relativ;
gjerësia: -webkit-calc (100% - (20px * 2));
gjerësia: -moz-kalk (100% - (20 px * 2));
gjerësia: llogarit (100% - (20px * 2));
}

calc () kujdeset për llogaritjen e duhur të gjerësisë bazuar në gjerësinë prindërore të padad dhe minus një mbushje të përcaktuar 20px. Unë e shumëzova këtë me 2 për secilën anë të elementit tim, duke përqendruar elementin duke përdorur pozicionimin relativ dhe një automatik të margjinës së majtë dhe të djathtë.

Stili

Transparenca

Marrja e stilit të duhur të një elementi ka qenë gjithmonë e varur nga lloji i mjeteve që kemi pasur në dispozicion për ne në CSS. Transparenca është një nga variantet e para të mbështetjes që do të hasni në fillim të mesit të viteve 2000.

Me ardhjen e HTML5 dhe përpjekjeve më të fokusuara të standardeve, shfletuesit kanë një zbatim standard të pronës së errësirës dhe kanë ekspozuar mbështetjen e kanalit alfa sipas specifikimeve të reja të Modulit të Ngjyrave. Kjo përfshin udhëzimet e RGBA dhe HSLA.

një {
ngjyra: rgba (0,255,0,0,5);
sfondi: rgba (0,0,255,0.05);
kufiri: rgba (255,0,0,0,5);
}

Ju mund të përdorni ngjyrat RGBA ose HSLA kudo që të gjeni vlera HEX. Ekziston gjithashtu një listë e zgjeruar e ngjyrave argëtuese me emra të përcaktuar që mund t'i shikoni saktësisht në specifikim. Këto ju vijnë në ndihmë kur dëshironi të krijoni një përzierje dinamike midis elementeve.

Filtrat

Filtrat CSS janë jashtëzakonisht emocionues. Të kesh aftësinë për të ndryshuar në mënyrë dinamike pamjen dhe ndjesinë e elementeve në një faqe pa pasur nevojë për shtesa të palëve të treta është e mahnitshme dhe do të ndihmojë për të zvogëluar shumë kohën tuaj të kaluar në Photoshop.

img src = "market.webp">
img {
-filtër-uebkit: shkallë gri (100%);
}

Filtrat CSS mbështeten aktualisht vetëm në shfletuesit WebKit kështu që përdorimi i tyre duhet të jetë i natyrës shtesë, jo i varur. Lexoni më shumë këtu.

Zëvendësimi i imazhit

Zëvendësimi i tekstit me imazhe ka ekzistuar për një kohë të gjatë. Fatkeqësisht, ka akoma pengesa, të arritshme, për teknikat më të fundit dhe më të sofistikuara të zëvendësimit të imazheve. Por dy kanë dalë së fundmi në dritë që janë jashtëzakonisht të zgjuara dhe unike në të drejtat e tyre. E para u shkrua nga Scott Kellman:

h1 class = 'hide-text'> Logoja e Uebfaqes time / h1>
. fsheh-tekst {
teksti-indent: 100%;
hapësira e bardhë: tani
tejmbushje: e fshehur;
}

E dyta u shkrua nga Nicolas Gallagher:

. fsheh-tekst {
font: 0/0 a;
hije teksti: asnjë;
ngjyra: transparente;
}

Video e përgjegjshme

Bërja e medias për të shkallëzuar saktë në një mjedis të përgjegjshëm mund të jetë sfiduese. Me gjithnjë e më shumë faqe në internet që respektojnë dizajnin adaptiv, është thelbësore që të trajtohen si duhet dimensionet e elementeve dhe raporti i aspektit.

Videoja e integruar ka qenë një nga llojet më sfiduese të mediave për t'u grindur për shkak të mënyrës në të cilën shërbimet e palëve të treta shërbejnë përmbajtjen. Një ngulitje tipike në YouTube duket diçka si kjo:

gjerësia e iframe = "640" lartësia = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

Elementi iframe pastaj përmban një objekt Flash ose element të ngulitur. Përdorimi i diçka si iframe {maxwidth: 100%; } nuk do të funksionojë sepse elementët e vendosur brenda nuk ndryshojnë siç duhet kur ndryshon gjerësia. Pra, duhet të bëjmë ndonjë hile.

div>
gjerësia e iframe = "640" lartësia = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

Mbështjellja e iframe në një element tjetër do të na japë kontrollin që na duhet për të shtuar funksionalitetin e duhur të përgjegjshëm në video.

.video {
pozicioni: relativ;
pjesa e poshtme e mbushjes: 56.25%;
lartësia: 0;
tejmbushje: e fshehur;
}
.videoframe,
objekt video.
.videoja e ngulitur {
pozicioni: absolut;
maja: 0;
majtas: 0;
gjerësia: 100%;
lartësia: 100%;
}

Vendosja e pjesës së poshtme të mbështjellësit .video: 56.25%; është magjia në këtë metodë. Përdorimi i mbushjes nënkupton që përqindja e përdorur do të bazohet në gjerësinë e prindit; ‘56 .25% 'do të krijojë një raport aspektesh 16: 9. Bëni vetë matematikën, nëse dëshironi. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (kjo është përqindja jonë).

Funksionaliteti

Zgjedhja e lehtë e elementeve

Me popullaritetin e një numri të bibliotekave JavaScript (jQuery, për shembull), komiteti ECMAScript dhe standardet W3C vunë në dukje një nga pjesët thelbësore të zhvilluesve të funksionalitetit që nuk i ka lindur - zgjedhja e mirë e elementeve. Metoda të tilla si getElementByID () dhe getElementByClassName () ishin të shpejta, por jo aq fleksibile dhe të fuqishme sa motorët selektorë që vijnë nga komuniteti i zhvilluesve; querySelectorAll () ishte mënyra e trupit standarde për të imituar disa prej asaj fleksibiliteti në një metodë zgjedhëse vendase.

artikuj var = dokument.pyetjeSelectorAll ('# header .item');

querySelectorAll () mund të kalojë zgjedhës të shumëfishtë dhe të përzier. Lexoni më shumë për këtë.

Krijimi i vargjeve të reja

Përsëritja mbi një grup është diçka që bëhet e lodhshme për të shkruar. Shkrimi dhe rishkrimi i sytheve () nuk është kënaqësi. Në versionin JS 1.6, metoda map () zbarkoi duke siguruar mbështetje për një mënyrë të thjeshtë për të përsëritur dhe për të krijuar një koleksion të ri nga një tjetër.

var njerëz = ['Heather', 'James', 'Kari', 'Kevin'];
var mirëpret = njerëzit.map (funksioni (emri) {
kthehu 'Hi' + emër + '! ’;
});

Ekzekutimi i këtij kodi, nëse do të console.log (mirëpret) që ju do të shihni mirëpritet është një grup i ri [‘Përshëndetje Heather! ',' Përshëndetje James! ',' Përshëndetje Kari! ',' Përshëndetje Kevin! ' ]

Pastroni dokumentin dhe objektet e dritares

Bibliotekat e palëve të treta JavaScript janë të prirura të ngatërrohen me dokumente vendase dhe objekte të dritares. Ky mund të jetë një problem për bibliotekat e tjera të palëve të treta, dhe zhvilluesit duke përfshirë ato. Si secila palë, sigurohuni që po punoni me një version të pastër të të dy objekteve duke krijuar një shembull të ri të tyre. Mënyra më e mirë për ta bërë këtë është duke krijuar një element iframe, duke e futur atë në DOM dhe duke ruajtur instancat e reja të atyre objekteve.

var iframe = document.createElement ('iframe');
iframe.style.display = "asnjë";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
dokumenti. trupi. hiqni fëmijën (iframe);

Megjithëse ka pasur përmirësime të mëdha në grumbullin e uebit, vazhdimi i mbledhjes dhe sofistikimit të kompletit tonë të teknologjisë për të përmbushur sfidat me të cilat përballemi brenda paraqitjes, stilit dhe funksionalitetit të projektit tonë është ende jashtëzakonisht e rëndësishme. Për të ruajtur një ekosistem të mirë të rritjes, ne duhet të inkurajojmë organet e standardeve dhe shitësit e shfletuesve të vazhdojnë progresin me specifikime të reja dhe zbatime inovative të tipareve, ndërsa ndajnë njohuritë tona me bashkëpunëtorët dhe zhvilluesit. Më shumë njohuri, më pak hacks.

Darcy Clarke është një zhvillues i vlerësuar me çmime, bashkëthemelues i kompanisë së temave WordPress Themify dhe grumbulluesit të marrëveshjeve ditore DealPage, dhe një anëtar i Ekipit të jQuery. Ai punon në Polar Mobile si një zhvillues i vjetër i UX.