Nauðsynleg HTML, CSS og JavaScript tækni

Höfundur: Monica Porter

Sköpunardag: 22 Mars 2021

Uppfærsludagsetning: 17 Maint. 2024

Nauðsynleg HTML, CSS og JavaScript tækni - Skapandi

Efni.

Skipulag
Clearfix
Box-límvatn
Fjölsúlur
Útreikningar
Stíll
Gagnsæi
Síur
Ímyndaskipti
Móttækilegt myndband
Virkni
Auðveldlega að velja þætti
Búa til nýja fylki
Hreinsaðu skjal og glugga hluti
Líkaði þetta? Lestu þessar!

Þessi grein birtist fyrst í tölublaði 234 í .net tímaritinu - mest selda tímarit heims fyrir hönnuði og forritara.

Tækni, í kjarna hennar, er leið til að framkvæma verkefni og þar sem við erum framsækin verktaki og hönnuð höfum við mörg verkefni. Að því sögðu gleymum við oft hversu mikið þetta landslag hefur breyst. Frá 2002 til 2010 var samfélagið okkar rotið með kóða og auðlindatilfinningu og hindraði árangur og viðhald. Til að vinna bug á þessu bjuggum við til slatta af ráðum, brögðum og hakki sem við kölluðum „tækni“. Við vorum enn að vinna verkefni, bara ekki á sem skilvirkastan hátt.

Síðustu árin hafa verið gerð 360, betri staðlar og staðlaðar útfærslur lifna við, sem gerir okkur sem samfélag kleift að þróa nýrri og fullkomnari „tækni“. Þetta nýja landslag er það sem er álitinn „nútíma vefur“.

Eins og ‘Web 2.0’ varð stöðnun og ruglingslegt, þá verður ‘nútíma vefurinn’ líka. Gefðu því tíma. Sem sagt, í bili getum við notað og misnotað hugtakið svo framarlega sem það er sameiginlegur skilningur á því hvað það táknar.

Árið 2010 lenti HTML5 forskriftin og gaf glænýtt, hálf staðlað vefumhverfi. Vafrar eins og Opera, Firefox, Chrome og Safari tóku þessari nýju bylgju og ýttu dev teymum sínum að nýjum takmörkum staðlaútfærslu og API könnunar. Til að gefa þér hugmynd um hvernig „um borð“ þessir vafrar eru, skoðaðu sjónarmið www.html5readiness.com um breyttan HTML5 stuðning.

Ekki hafa áhyggjur af skorti á stuðningi í Internet Explorer. Við getum barist gegn þessu þökk sé Google Chrome Frame. Síðan Google kynnti það árið 2010 var það orðið stuðningsaðferð fyrir Internet Explorer. Hægt er að miða á allar útgáfur af IE með Chrome Frame, sem hvetur nýjan notanda til að hlaða niður viðbót sem gerir valin vefsíður með léttri útgáfu af Chrome, inni í IE. Til að innleiða Chrome Frame bætum við við eftirfarandi meta> tagi í hausnum> tag tagsins.

meta http-equiv = "X-UA-samhæft" content = "chrome = 1" />

Héðan getum við hvatt notendur IE um að hlaða niður viðbótinni, ef ekki er þegar uppsett, með JavaScript:

skriftargerð = "texti / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / skrift>
handrit>
window.onload = aðgerð () {
CFInstall.check ({
háttur: „yfirborð“,
áfangastaður: „http://www.yourdomain.com“
});
};
/ handrit>

Hægt er að stilla áfangastað til að senda notandann í ákveðinn hlekk eftir að viðbótin er sett upp. Orð við varúð: þó Chrome Frame gefi okkur aðferð til að þróa stranglega fyrir sannarlega nútíma vafra, megum við ekki gleyma því að notandinn hefur möguleika á að hlaða ekki viðbótinni niður ef hann vill það ekki. Ef þeir gera það ekki og þú verður að veita stuðning við eina eða aðrar mismunandi útgáfur af IE, verður þú að eyða meiri tíma í að finna út hvað þú getur og getur ekki veitt, með reynslu þinni, yfir vafra.

Með þessum kóða sem veitir töluvert jafnari aðstöðu til að þróa á nútíma vefstakkanum getum við haldið áfram með hugann á vellíðan. Þú gætir munað að þurfa að búa til fjölda vafra-sérstakra járnsög til að fá síðuna þína skipulagða hægri krossvafra, búa til óteljandi fjölda tómra þátta til að nota með sneiðmyndunum þínum, eða jafnvel skrifa of munnlegan eða óþarfa JavaScript kóða til að fá einfaldasta virkni til að vinna. Allir þessir verkir eru að einhverju leyti sömu vandamál og við höfum áhyggjur af í dag. Við erum enn að berjast fyrir meiri stjórn og betri verkfærum til að berjast gegn uppsetningu, stíl og virkni en á stigi sem er þroskað.

Skipulag

Clearfix

Fljótandi þáttur var kynntur aftur í CSS 2.1 en reyndist aldrei alveg vera heildarlausnin sem við vonuðumst eftir. Eitt stærsta vandamálið var að viðhalda víddum foreldraþáttar þegar barnaefni var flotið. Til að takast á við þetta var búið til clearfix tækni.

Taktu eftirfarandi HTML:

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

Þessa tækni var skrifuð af Nicolas Gallagher:

.clearfix: áður,
.clearfix: eftir {
innihald: "";
skjámynd: borð;
}
.clearfix: eftir {
skýrt: bæði;
}
.clearfix {
* aðdráttur: 1;
}

Ef þú notar HTML5Boilerplate til að koma verkefnum þínum af stað, þá ertu nú þegar með þessa útgáfu af clearfix tækninni.

Box-límvatn

Í mörg ár ræddu verktaki hvaða útfærsla kassalíkans væri skynsamlegri. Quirks vs Standards háttur þýddi í raun: „ættu stærðir frumefnis að breytast, eftir að hafa verið stillt, þegar landamæri og bólstrun er beitt, eða ekki“.

Nú er almennt sammála um að það sé skynsamlegra fyrir landamæri og bólstrun að taka frá lausu rými innan frumefnis og bæta ekki við breidd eða hæð frumefnisins. Umræðan hefur verið gerð óviðkomandi við víðtæka útfærslu á kassastærð. Vafrinn tekur vísbendingar frá þér í stað þess að öfugt.

Vinsælt af Chris Coyier og Paul Irish, allsherjar tækni er hægt að útfæra með eftirfarandi:

* {
-webkit-box-stærð: border-box;
-moz-kassi-stærð: border-box;
kassastærð: border-box;
}

Að nota * valtakkann í CSS hefur verið til umræðu vegna hugsanlegra árangursáhrifa. Þessar fullyrðingar eru tilhæfulausar ef þú ert ekki að hámarka alla aðra þætti vefsíðunnar / appsins. Með því að nota border-box verður vafrinn til að bæta við padding og border innan við það pláss sem til er. ‘Standards Mode’ er hægt að nota með því að stilla kassastærð á innihaldsreit.

Fjölsúlur

Vefurinn var mjög innblásinn af skrifuðu formi og gerð. Því miður festumst við á skorpufasa. Sum þessara mála eru að komast í höfn með langþráðum Paged-Media og CSS svæðis forskriftir. Að því sögðu voru fyrstu skrefin í átt að fleiri tímaritslíkum uppsetningum tekin þegar vafrar fóru að innleiða CSS fjölpistla. Kóðinn til að skapa þessi áhrif er frekar einfaldur:

p {
-webkit-dálkur-talning: 2;
-moz-dálkur-talning: 2;
dálkatalning: 2;
}

Þú getur lært meira um CSS3 forskriftina með mörgum dálkum, svo og JavaScript fallback sem þú getur notað fyrir hvaða vafra sem er án stuðnings, af bloggi A List Apart.

Útreikningar

Að reikna mál getur verið erfitt. Í gamla daga höfðum við enga leið til að gera neinar einingarútreikningar, hvað þá blandaða einingaútreikninga. Það hefur allt breyst þökk sé kalk. Að búa til bólstrað áhrif sem hafa ekki áhrif á upphafsþætti breiddar eða nota eitthvað eins og kassastærð: border-box; var, þar til nýlega, aðeins mögulegt með því að bæta við viðbótar innihaldsefnum.

.padded {
framlegð: 0 sjálfvirkt;
staða: ættingi;
breidd: -webkit-calc (100% - (20px * 2));
breidd: -moz-calc (100% - (20px * 2));
breidd: calc (100% - (20px * 2));
}

calc () sér um rétta breiddarútreikning byggða á foreldrabreidd .padded og mínus skilgreindri 20px padding. Ég margfaldaði þetta með 2 fyrir hvora hlið frumefnisins míns, með því að miðja frumefnið með því að nota hlutfallslega staðsetningu og vinstri og hægri spássíu.

Stíll

Gagnsæi

Að fá réttan stíl frumefnis hefur alltaf verið háð því hvers konar verkfæri við höfum haft í boði fyrir okkur í CSS. Gagnsæi er eitt fyrsta stuðningsafbrigðið sem þú myndir lenda í snemma til miðs 2000s.

Með tilkomu HTML5 og markvissari viðleitni við staðla hafa vafrar staðlaða útfærslu á ógagnsæi eigninni og hafa afhjúpað alfa rásarstuðning samkvæmt nýrri litareiningar forskrift. Þetta nær til RGBA og HSLA leiðbeininga.

a {
litur: rgba (0,255,0,0.5);
bakgrunnur: rgba (0,0,255,0,05);
landamæri: rgba (255,0,0,0.5);
}

Þú getur notað RGBA eða HSLA liti hvar sem þú finnur HEX gildi. Það er líka framlengdur listi yfir skemmtilega liti með skilgreindum nöfnum sem þú getur skoðað beint í forskriftinni. Þetta kemur sér vel þegar þú vilt búa til kraftmikla blöndu milli þátta.

Síur

CSS síur eru ákaflega spennandi. Að hafa getu til að breyta breytilegu útliti og tilfinningum þætti á síðu án þess að þurfa viðbótarforrit frá þriðja aðila er ótrúlegt og mun hjálpa til við að draga verulega úr tíma þínum í Photoshop.

img src = "market.webp">
img {
-webkit-filter: gráskala (100%);
}

CSS síur eru aðeins studdar eins og er í WebKit vöfrum svo notkun þeirra ætti að vera aukaefni, ekki háð. Lestu meira hér.

Ímyndaskipti

Skipta um texta fyrir myndir hefur verið til í langan tíma. Því miður eru enn gallar, aðgengilegir, að nýjustu og vandaðustu myndskiptatækni. En tveir hafa nýlega litið dagsins ljós sem eru ákaflega snjallir og einstakir að eigin rétti. Sá fyrri skrifaði Scott Kellman:

h1 class = ’hide-text’> Merki vefsíðu minnar / h1>
.hide-text {
texta-inndráttur: 100%;
hvítt-rými: nowrap;
flæða: falið;
}

Annað var skrifað af Nicolas Gallagher:

.hide-text {
leturgerð: 0/0 a;
textaskuggi: enginn;
litur: gegnsætt;
}

Móttækilegt myndband

Að fá fjölmiðla til að stækka rétt í svöruðu umhverfi getur verið krefjandi. Með sífellt fleiri vefsíðum sem virða aðlagandi hönnun er nauðsynlegt að meðhöndla mál og stærðarhlutföll rétt.

Innbyggt myndband hefur verið ein af krefjandi fjölmiðlategundunum til að kljást vegna þess hvernig þjónusta þriðja aðila þjónar efninu. Dæmigert YouTube innfelling lítur svona út:

iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

Iframe frumefni inniheldur þá Flash hlut eða embed element. Nota eitthvað eins og iframe {maxwidth: 100%; } virkar ekki vegna þess að hreiðurinn breytir ekki rétt þegar breiddin breytist. Við verðum því að vanda okkur.

div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

Að pakka iframe í annan þátt mun veita okkur stjórn sem við þurfum til að bæta viðeigandi móttækilegri virkni við myndbandið.

.video {
staða: ættingi;
padding-botn: 56,25%;
hæð: 0;
flæða: falið;
}
.video iframe,
.video hlutur,
.video fella {
staða: alger;
efst: 0;
vinstri: 0;
breidd: 100%;
hæð: 100%;
}

Stillir padding-botn .video umbúðanna: 56,25%; er galdurinn í þessari aðferð. Að nota bólstrun þýðir að hlutfallið sem notað er byggist á breidd foreldrisins; ‘56 .25% ’mun búa til 16: 9 hlutföll. Gerðu stærðfræðina sjálfur, ef þú vilt. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (þetta er prósentið okkar).

Virkni

Auðveldlega að velja þætti

Með vinsældum fjölda JavaScript bókasafna (til dæmis jQuery) tóku ECMAScript-nefndin og W3C staðlar mið af einum af aðalhlutum virkni verktaki skorti innfæddur - gott þáttaval. Aðferðir eins og getElementByID () og getElementByClassName () voru fljótar en ekki eins sveigjanlegar og öflugar og vélar vélarinnar sem koma frá verktaki samfélaginu; querySelectorAll () var aðferð staðalstofnunarinnar til að líkja eftir einhverjum af þeim sveigjanleika í innfæddri aðferð við val.

var items = document.querySelectorAll (’# header .item’);

querySelectorAll () er hægt að standast marga og blandaða valda. Lestu meira um þetta.

Búa til nýja fylki

Ítraður yfir fylki er eitthvað sem er orðið þreytandi að skrifa. Að skrifa og endurskrifa fyrir () lykkjur er ekki skemmtilegt. Í JS útgáfu 1.6 lenti map () aðferðin og veitti stuðning fyrir auðveldan hátt til að endurgera og búa til nýtt fylki frá öðru.

var fólk = [‘Heather’, ‘James’, ‘Kari’, ‘Kevin’];
var fagnar = people.map (aðgerð (nafn) {
skila ‘Hæ’ + nafn + ’!’;
});

Að keyra þennan kóða, ef við værum að console.log (fagnar) myndirðu sjá velkomin er nýtt fylki [‘Hæ lyng!’, ‘Hæ James!’, ‘Hæ Kari!’, ‘Hæ Kevin! ' ].

Hreinsaðu skjal og glugga hluti

JavaScript bókasöfn þriðja aðila eru tilhneigingu til að klúðra innfæddum skjölum og gluggahlutum. Þetta getur verið vandamál fyrir önnur bókasöfn þriðja aðila og verktaki þar á meðal. Vertu viss um að vinna með hreina útgáfu af báðum hlutunum með báðum aðilum með því að búa til nýtt dæmi um þá. Besta leiðin til að gera þetta er með því að búa til iframe frumefni, setja það í DOM og geyma ný dæmi um þessa hluti.

var iframe = document.createElement (’iframe’);
iframe.style.display = "enginn";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);

Þrátt fyrir að miklar endurbætur hafi verið gerðar á vefstaflinum er áfram mjög mikilvægt að halda áfram að flétta út og fágað tæknisvítuna okkar til að mæta þeim áskorunum sem við blasir. Til að viðhalda góðu vistkerfi vaxtar verðum við að hvetja staðlaaðila og söluaðila vafra til að halda áfram framförum með nýjum forskriftum og nýstárlegum útfærslum á eiginleikum um leið og við deilum eigin þekkingu með öðrum verktaki og hönnuðum. Meiri innsýn, minni járnsög.

Darcy Clarke er margverðlaunaður verktaki, annar stofnandi WordPress þemafyrirtækisins Themify og daglegur samningssamningur DealPage og er meðlimur í jQuery teyminu. Hann starfar hjá Polar Mobile sem eldri UX verktaki.