Tärkeät HTML-, CSS- ja JavaScript-tekniikat

Kirjoittaja: Monica Porter

Luomispäivä: 22 Maaliskuu 2021

Päivityspäivä: 17 Saattaa 2024

Tärkeät HTML-, CSS- ja JavaScript-tekniikat - Luova

Sisältö

Layout
Clearfix
Laatikon mitoitus
Monisarakkeet
Laskelmat
Tyyli
Läpinäkyvyys
Suodattimet
Kuvan vaihto
Reagoiva video
Toiminnallisuus
Elementtien helppo valinta
Uusien taulukoiden luominen
Puhdista asiakirja- ja ikkunaobjektit
Piditkö tästä? Lue nämä!

Tämä artikkeli ilmestyi ensimmäisen kerran .net-lehden numerossa 234 - maailman myydyimmässä verkkosivujen suunnittelijoille ja kehittäjille suunnatussa lehdessä.

Tekniikka on ytimessään tapa suorittaa tehtävä, ja koska olemme kehittäjiä ja suunnittelijoita, meillä on paljon tehtäviä. Tästä huolimatta unohdamme usein kuinka paljon tämä maisema on muuttunut. Vuodesta 2002 vuoteen 2010 yhteisömme oli mätä koodin ja resurssien paisumisen vuoksi, mikä haittaa suorituskykyä ja ylläpidettävyyttä. Tämän voittamiseksi loimme joukon vinkkejä, temppuja ja hakkereita, jotka kutsumme "tekniikaksi". Suoritimme edelleen tehtäviä, ei vain tehokkaimmalla tavalla.

Viime vuosina 360-luvulla paremmat standardit ja standardien toteutus ovat heränneet eloon, mikä antaa meille mahdollisuuden kehittää yhteisöinä uudempia ja edistyneempiä "tekniikoita". Tätä uutta maisemaa pidetään "modernina verkkona".

Kun ”Web 2.0” muuttui pysähtyneeksi ja hämmentäväksi, niin myös ”moderni verkko” tulee. Anna sille aikaa. Toistaiseksi voimme käyttää termiä ja käyttää sitä väärin, kunhan on olemassa yhteinen käsitys siitä, mitä se edustaa.

Vuonna 2010 HTML5-spesifikaatio laskeutui tarjoamalla upouuden, osittain standardoidun verkkoympäristön. Selaimet, kuten Opera, Firefox, Chrome ja Safari, omaksuivat tämän uuden aallon ja työnsivät kehitystiiminsä uusiin standardien käyttöönoton ja API-etsinnän rajoihin. Jos haluat antaa käsityksen siitä, kuinka "selaimet" nämä selaimet ovat, tarkista www.html5readiness.comin visualisoinnit HTML5-tuen muuttamisesta.

Älä ole huolissasi tuen puutteesta Internet Explorerissa. Voimme torjua tätä Google Chrome -kehyksen ansiosta. Koska Google esitteli sen vuonna 2010, siitä on tullut Internet Explorerin tukimekanismi. Kaikkiin IE-versioihin voidaan kohdistaa Chrome-kehyksellä, joka kehottaa uutta käyttäjää lataamaan laajennuksen, joka tekee valituista verkkosivustoista kevyen Chrome-version IE: n sisällä. Chrome Frame otetaan käyttöön lisäämällä seuraava meta> -tunniste sivustollemme head> -tagiin.

meta http-equiv = "X-UA-yhteensopiva" content = "chrome = 1" />

Täältä voimme pyytää IE-käyttäjiä lataamaan laajennuksen, ellei sitä vielä ole asennettu, JavaScriptin avulla:

script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
käsikirjoitus>
window.onload = function () {
CFInstall.check ({
tila: "overlay",
kohde: "http://www.omaverkkotunnus.com"
});
};
/ script>

kohde voidaan asettaa lähettämään käyttäjä tiettyyn linkkiin laajennuksen asentamisen jälkeen. Varoituksen sana: vaikka Chrome Frame tarjoaa meille menetelmän kehittää tiukasti todella moderneille selaimille, emme saa unohtaa, että käyttäjällä on mahdollisuus olla lataamatta laajennusta, jos hän ei halua. Jos he eivät tee sitä ja sinun on tarjottava tukea yhdelle tai muulle IE: n eri versiolle, joudut viettämään vielä jonkin aikaa selvittämään, mitä voit ja mitä et voi tarjota kokemuksissasi, selainten kautta.

Kun tämä koodi tarjoaa huomattavasti tasavertaisemmat toimintaedellytykset modernille verkkopinolle kehittymiselle, voimme edetä mielellämme helposti. Saatat muistaa, että sinun on luotava useita selainkohtaisia hakkerointeja saadaksesi sivustosi jäsennellyn oikean selaimen, luomalla lukemattoman määrän tyhjiä elementtejä, joita käytetään viipaloiduissa kuvissasi, tai jopa kirjoittanut liian yksityiskohtaisen tai turhan JavaScript-koodin saadaksesi yksinkertaisin toiminnallisuus toimimaan. Kaikki nämä kivut ovat jossain mielessä samat ongelmat, joista huolestumme tänään. Taistelemme edelleen hallinnan parantamisesta ja paremmista työkaluista ulkoasun, tyylin ja toimivuuden torjumiseksi, mutta kypsällä tasolla.

Layout

Clearfix

Kelluva elementti otettiin takaisin CSS 2.1: een, mutta se ei koskaan osoittautunut toivotuksi täydelliseksi ratkaisuksi. Yksi suurimmista ongelmista oli vanhemman elementin ulottuvuuksien säilyttäminen, kun lapsielementtiä kellutettiin. Tämän korjaamiseksi luotiin clearfix-tekniikka.

Ota seuraava HTML:

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

Tämän tekniikan on kirjoittanut Nicolas Gallagher:

.clearfix: ennen,
.clearfix: {jälkeen
sisältö: " ";
näyttö: taulukko;
}
.clearfix: {jälkeen
Tyhjennä molemmat;
}
.clearfix {
* zoomaus: 1;
}

Jos käytät HTML5Boilerplate-aloitusta projektiisi, sinulla on jo tämä versio clearfix-tekniikasta.

Laatikon mitoitus

Vuosien ajan kehittäjät keskustelivat siitä, mikä laatikkomallin toteutus oli järkevämpää. Quirks vs Standards -tila tarkoitti todella: "Pitäisikö elementin mitat muuttua asettamisen jälkeen, kun reunoja ja pehmusteita käytetään vai ei".

Nyt on yleisesti sovittu, että on järkevämpää, että reunat ja pehmusteet ottavat pois elementin sisällä olevasta tilasta eivätkä lisää elementin leveyttä tai korkeutta. Keskustelusta on tehty merkityksetön laatikkokokoamisen laajamittaisen täytäntöönpanon vuoksi. Selain ottaa sinulta vihjeet päinvastoin.

Chris Coyierin ja Paul Irishin suosiman kaiken kattavan tekniikan voidaan toteuttaa seuraavilla tavoilla:

* {
-webkit-box-koon: border-box;
-moz-box-sizing: reunuslaatikko;
laatikon mitoitus: reunuslaatikko;
}

* -Valitsimen käytöstä CSS: ssä on keskusteltu mahdollisten suorituskykyosumien vuoksi. Tämäntyyppiset väitteet ovat kevyitä, jos et optimoi hyper-kaikkia muita verkkosivustosi / sovelluksesi näkökohtia. Reunaruudun käyttäminen saa selaimen lisäämään täytteet ja reunat käytettävissä olevan tilan sisällä. ”Standarditilaa” voidaan käyttää asettamalla laatikkokoko sisällön laatikkoon.

Monisarakkeet

Verkko innostui suuresti kirjoitetusta muodosta ja tyypistä. Valitettavasti jäimme kiinni pergamenttivaiheeseen. Jotkut näistä asioista ovat kärjessä kauan odotettujen Paged-Media- ja CSS Regions -määritysten kanssa. Ensimmäiset askeleet kohti aikakauslehtien muotoisempaa asettelua otettiin kuitenkin, kun selaimet alkoivat toteuttaa CSS-monisarakkeita. Koodi tämän vaikutuksen luomiseksi on melko yksinkertainen:

p {
-webkit-sarake-määrä: 2;
-moz-sarakemäärä: 2;
sarakemäärä: 2;
}

Voit oppia lisää CSS3: n monisarakkeisista määrityksistä sekä JavaScript-varavarmuudesta, jota voit käyttää millä tahansa selaimella ilman tukea, A List Apartin blogista.

Laskelmat

Mitan laskeminen voi olla vaikeaa. Vanhoina aikoina meillä ei ollut mitään tapaa tehdä minkäänlaisia yksikkölaskelmia, puhumattakaan sekoitetuista yksikkölaskelmista. Kaikki muuttui laskennan ansiosta. Pehmustetun tehosteen luominen, joka ei vaikuta alkuaineiden leveydelle tai hyödynnä esimerkiksi laatikoiden mitoitusta: reunuslaatikko; oli viime aikoihin asti mahdollista vain lisäämällä ylimääräisiä sisältäviä elementtejä.

.padded {
marginaali: 0 auto;
asema: suhteellinen;
leveys: -webkit-calc (100% - (20px * 2));
leveys: -moz-calc (100% - (20px * 2));
leveys: laskettu (100% - (20px * 2));
}

calc () huolehtii oikeasta leveyden laskemisesta .paddedin yläleveyden ja määritetyn 20 kuvapisteen pehmusteen perusteella. Kerroin tämän kahdella elementtini kummallekin puolelle keskittämällä elementin suhteellisen paikannuksen sekä vasemman ja oikean marginaalin automaattisen avulla.

Tyyli

Läpinäkyvyys

Elementin oikean tyylin saaminen on aina ollut riippuvaista siitä, millaisia työkaluja meillä on ollut CSS: ssä. Läpinäkyvyys on yksi ensimmäisistä tukimuunnelmista, joihin törmäät 2000-luvun alussa tai puolivälissä.

HTML5: n ja tarkempien standardointiponnistelujen myötä selaimilla on vakio-ominaisuus läpinäkyvyysominaisuudelle, ja niillä on alfa-kanavatuki uuden värimoduulimäärityksen mukaisesti. Tämä sisältää RGBA- ja HSLA-ohjeet.

a {
väri: rgba (0,255,0,0,5);
tausta: rgba (0,0255,0,05);
raja: rgba (255,0,0,0,5);
}

Voit käyttää RGBA- tai HSLA-värejä missä tahansa HEX-arvoissa. Siellä on myös laajennettu luettelo hauskoista väreistä, joissa on määritetyt nimet, jotka voit tarkistaa suoraan eritelmässä. Nämä ovat käteviä, kun haluat luoda dynaamisen sekoituksen elementtien välille.

Suodattimet

CSS-suodattimet ovat erittäin jännittäviä. Mahdollisuus muuttaa dynaamisesti sivun elementtien ulkoasua ja ulkoasua ilman kolmannen osapuolen laajennuksia on hämmästyttävää ja auttaa vähentämään huomattavasti Photoshopissa vietettyä aikaa.

img src = "market.webp">
img
-webkit-filter: harmaasävy (100%);
}

CSS-suodattimia tuetaan tällä hetkellä vain WebKit-selaimissa, joten niiden käytön tulee olla luonteeltaan lisäainetta, ei riippuvaa. Lue lisää täältä.

Kuvan vaihto

Tekstin korvaaminen kuvilla on ollut jo pitkään. Valitettavasti uusimpiin ja kehittyneimpiin kuvien korvaustekniikoihin liittyy edelleen haittoja, helposti saavutettavuuden kannalta. Mutta kaksi on viime aikoina tullut esiin, jotka ovat erittäin älykkäitä ja ainutlaatuisia omilla oikeuksillaan. Ensimmäisen kirjoitti Scott Kellman:

h1 class = ’hide-text’> Oma verkkosivustoni logo / h1>
.hide-text {
teksti-luetelmakohta: 100%;
valkoinen tila: nowrap;
ylivuoto piilotettu;
}

Toisen kirjoitti Nicolas Gallagher:

.hide-text {
fontti: 0/0 a;
text-shadow: ei mitään;
väri: läpinäkyvä;
}

Reagoiva video

Median oikean mittakaavan saaminen reagoivassa ympäristössä voi olla haastavaa. Koska yhä useammat verkkosivustot kunnioittavat mukautuvaa suunnittelua, on välttämätöntä käsitellä elementtien mitat ja kuvasuhde oikein.

Upotettu video on ollut yksi haastavimmista mediatyypeistä, koska kolmansien osapuolten palvelut palvelevat sisältöä. Tyypillinen YouTube-upotus näyttää tältä:

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

Sitten iframe-elementti sisältää Flash-objektin tai upotetun elementin. Käyttämällä jotain iframe {maxwidth: 100%; } ei toimi, koska sisäkkäisten elementtien kokoa ei muuteta oikein, kun leveys muuttuu. Joten meidän on tehtävä joitain temppuja.

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

Iframe-kehyksen kääriminen toiseen elementtiin antaa meille hallinnan, jota tarvitsemme lisätäksesi videoon oikean reagoivan toiminnallisuuden.

.video {
asema: suhteellinen;
pehmustepohja: 56,25%;
korkeus: 0;
ylivuoto piilotettu;
}
.video iframe,
.video-objekti,
.video upota {
sijainti: absoluuttinen;
yläosa: 0;
vasen: 0;
leveys: 100%;
korkeus: 100%;
}

.Video-kääreen pehmusteen pohjan asettaminen: 56,25%; on tämän menetelmän taika. Pehmusteen käyttö tarkoittaa, että käytetty prosenttiosuus perustuu vanhemman leveydelle; ’56 .25% ’luo 16: 9-kuvasuhteen. Suorita matematiikka itse, jos haluat. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (tämä on prosenttimme).

Toiminnallisuus

Elementtien helppo valinta

Useiden JavaScript-kirjastojen (esimerkiksi jQuery) suosion myötä ECMAScript-komitea ja W3C-standardit ottivat huomioon, että yksi toiminnallisuuden kehittäjien ydinosista puuttui luonnollisesti - hyvä elementtien valinta. Menetelmät, kuten getElementByID () ja getElementByClassName (), olivat nopeita, mutta eivät yhtä joustavia ja vankkoja kuin kehittäjäyhteisöltä tulevat valitsimet; querySelectorAll () oli standardielimen tapa jäljitellä tätä joustavuutta natiivivalitsimen menetelmässä.

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

querySelectorAll () voidaan siirtää usealle ja sekoitetulle valitsimelle. Lue lisää tästä.

Uusien taulukoiden luominen

Iteroituminen matriisin yli on jotain, josta on vaikea kirjoittaa. () -Silmukoiden kirjoittaminen ja uudelleenkirjoittaminen ei ole hauskaa. JS-versiossa 1.6 map () -menetelmä laskeutui tarjoamalla helpon tavan toistaa ja luoda uusi taulukko toisesta.

var people = [’Heather’, ’James’, ’Kari’, ’Kevin’];
var welcome = ihmiset.map (funktio (nimi) {
palauta ”Hei” + nimi + ’!’;
});

Tämän koodin ajaminen, jos haluaisimme console.login (toivottaa tervetulleeksi), jonka näet tervetulleena, on uusi taulukko [”Hi Heather!”, “Hi James!”, “Hi Kari!”, ”Hi Kevin!” ].

Puhdista asiakirja- ja ikkunaobjektit

Kolmannen osapuolen JavaScript-kirjastot ovat taipuvaisia sekoittumaan alkuperäisten asiakirja- ja ikkunaobjektien kanssa. Tämä voi olla ongelma muille kolmannen osapuolen kirjastoille ja kehittäjälle mukaan lukien. Kummallakin osapuolella varmista, että työskentelet puhtaan version molemmista objekteista luomalla niistä uuden ilmentymän. Paras tapa tehdä tämä on luoda iframe-elementti, lisätä se DOM: iin ja tallentaa kyseisten objektien uudet esiintymät.

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

Vaikka verkkopinoon on tehty suuria parannuksia, teknisen ohjelmistomme täydentäminen ja kehittyneisyys vastaamaan haasteisiin, joita kohtaamme projektin ulkoasussa, tyylissä ja toiminnallisuudessa, on silti erittäin tärkeä. Hyvän kasvun ekosysteemin ylläpitämiseksi meidän on kannustettava standardointielimiä ja selainmyyjiä jatkamaan uusien spesifikaatioiden ja innovatiivisten ominaisuuksien toteuttamista samalla kun jaamme omat tietomme muiden kehittäjien ja suunnittelijoiden kanssa. Enemmän oivalluksia, vähemmän hakkereita.

Darcy Clarke on palkittu kehittäjä, WordPress-teemayrityksen Themify ja päivittäisten sopimusten koostaja DealPage -yrityksen perustaja ja jQuery-tiimin jäsen. Hän työskentelee Polar Mobilella vanhempana UX-kehittäjänä.