Viktige HTML-, CSS- og JavaScript-teknikker

Forfatter: Monica Porter

Opprettelsesdato: 22 Mars 2021

Oppdater Dato: 7 Kan 2024

Innhold

Oppsett
Clearfix
Box-størrelse
Flerkolonner
Beregninger
Stil
Åpenhet
Filtre
Bildebytte
Responsiv video
Funksjonalitet
Velg enkelt elementer
Opprette nye matriser
Rengjør dokument- og vindusobjekter
Likte dette? Les disse!

Denne artikkelen dukket først opp i nummer 234 av .net magazine - verdens mest solgte magasin for webdesignere og utviklere.

En teknikk, i kjernen, er en måte å utføre en oppgave på, og som frontendutviklere og designere har vi mange oppgaver. Når det er sagt, glemmer vi ofte hvor mye dette landskapet har endret seg. Fra 2002 til 2010 var samfunnet vårt råttent med kode og ressursoppblåsthet, noe som hindret ytelse og vedlikeholdsevne. For å overvinne dette skapte vi en rekke tips, triks og hacks vi kalte 'teknikk'. Vi utførte fremdeles oppgaver, bare ikke på den mest effektive måten.

Gjennom en 360 har de siste årene sett bedre standarder og standardimplementeringer komme til livs, slik at vi som samfunn kan utvikle nyere og mer avanserte 'teknikker'. Dette nye landskapet er det som regnes som det 'moderne nettet'.

Som ‘Web 2.0’ ble stillestående og forvirrende, vil også det ‘moderne nettet’ gjøre det. Gi det tid. Når det er sagt, kan vi for øyeblikket bruke og misbruke begrepet så lenge det er en felles forståelse av hva det representerer.

I 2010 landet HTML5-spesifikasjonen, og ga et helt nytt, semi-standardisert webmiljø. Nettlesere som Opera, Firefox, Chrome og Safari omfavnet denne nye bølgen og presset sine dev-team til nye grenser for standardimplementeringer og API-utforskning. For å gi deg en ide om hvordan «ombord» disse nettleserne er, kan du sjekke www.html5readiness.coms visualiseringer av endring av HTML5-støtte.

Ikke vær bekymret for mangelen på støtte i Internet Explorer. Vi kan bekjempe dette takket være Google Chrome Frame. Siden Google introduserte det i 2010, har det blitt en støttemekanisme for Internet Explorer. Alle versjoner av IE kan målrettes med Chrome Frame, som ber en ny bruker om å laste ned en plugin-modul som gjengir tilvalgte nettsteder med en lett versjon av Chrome, inne i IE. For å implementere Chrome Frame legger vi til følgende meta> tag i nettstedets head> tag.

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

Herfra kan vi be IE-brukere om å laste ned programtillegget, hvis det ikke allerede er installert, ved hjelp av JavaScript:

skripttype = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / skript>
skript>
window.onload = funksjon () {
CFInstall.check ({
modus: "overlegg",
destinasjon: "http://www.yourdomain.com"
});
};
/ skript>

destinasjon kan settes til å sende brukeren til en bestemt kobling etter installering av plugin-modulen. Et forsiktighetsord: selv om Chrome Frame gir oss en metode for å utvikle oss strengt tatt for virkelig moderne nettlesere, må vi ikke glemme at brukeren har muligheten til ikke å laste ned plugin-modulen hvis de ikke vil. Hvis de ikke gjør det, og du må gi støtte for en eller annen forskjellig versjon av IE, må du bruke litt mer tid på å finne ut hva du kan og ikke kan gi, med dine erfaringer, nettleser.

Med denne koden som gir et betydelig mer jevnlig vilkår for å utvikle oss på den moderne webstakken, kan vi bevege oss fremover med ro. Du husker kanskje å måtte lage et antall nettleserspesifikke hack for å få nettstedet ditt til å struktureres i riktig nettleser, og lage et utall antall tomme elementer som skal brukes med dine oppskårne bilder, eller til og med skrive altfor omfattende eller overflødig JavaScript-kode for å få enkleste funksjonalitet å jobbe. Alle disse smertene er på en eller annen måte de samme problemene vi bekymrer oss for i dag. Vi kjemper fortsatt for mer kontroll og bedre verktøy for å bekjempe layout, stil og funksjonalitet, men på et nivå som er modent.

Oppsett

Clearfix

Flytende element ble introdusert tilbake i CSS 2.1, men viste seg ikke å være den komplette løsningen vi hadde håpet. Et av de største problemene var å opprettholde dimensjonene til et foreldreelement når et underordnet element ble fløt. For å løse dette ble clearfix-teknikken opprettet.

Ta følgende HTML:

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

Denne teknikken ble skrevet av Nicolas Gallagher:

.clearfix: før,
.clearfix: etter {
innhold: " ";
display: tabell;
}
.clearfix: etter {
klar: begge deler;
}
.clearfix {
* zoom: 1;
}

Hvis du bruker HTML5Boilerplate for å starte prosjektene dine, har du allerede denne versjonen av clearfix-teknikken innbakt.

Box-størrelse

I mange år har utviklere diskutert hvilken implementering av boksmodellen som var mer fornuftig. Quirks vs Standards-modus mente virkelig: ‘Skulle et elements dimensjoner endres, etter at de er satt, når grenser og polstring er påført, eller ikke '.

Det er nå enighet om at det er mer fornuftig at grenser og polstring tar bort fra den tilgjengelige plassen i et element, og ikke legger til elementets bredde eller høyde. Debatten har blitt gjort irrelevant med den omfattende implementeringen av boksstørrelse. Nettleseren tar signalene fra deg i stedet for omvendt.

Populært av Chris Coyier og Paul Irish, kan en altomfattende teknikk implementeres med følgende:

* {
-webkit-box-størrelse: border-box;
-moz-boks-størrelse: border-box;
boksstørrelse: border-box;
}

Bruk av * -velgeren i CSS har blitt diskutert på grunn av potensielle ytelsestreff. Denne typen påstander er useriøse hvis du ikke hyperoptimaliserer alle andre aspekter av nettstedet / appen din. Ved å bruke border-box vil nettleseren legge til polstring og kanter innenfor det tilgjengelige plassen. ‘Standardmodus’ kan brukes ved å sette boksstørrelse til innholdsboks.

Flerkolonner

Nettet ble sterkt inspirert av skriftlig form og type. Dessverre ble vi sittende fast i pergamentfasen. Noen av disse problemene kommer i høyden med etterlengtede spesifikasjoner for Paged-Media og CSS Regions. Når det er sagt, ble de første trinnene mot flere magasinlignende oppsett tatt da nettlesere begynte å implementere CSS-flerkolonner. Koden for å generere denne effekten er ganske grei:

p {
-webkit-kolonnetall: 2;
-moz-kolonnetall: 2;
kolonnetall: 2;
}

Du kan lære mer om CSS3-spesifikasjonen for flere kolonner, samt en JavaScript-reserve som du kan bruke til hvilken som helst nettleser uten støtte, fra A List Apart sin blogg.

Beregninger

Beregning av dimensjoner kan være vanskelig. Tilbake i gamle dager hadde vi ingen måte å gjøre noen form for enhetsberegninger, enn si blandede enhetsberegninger. Alt er forandret takket være kalk. Å lage en polstret effekt som ikke påvirker de opprinnelige elementbredden eller bruker noe som boksstørrelse: border-box; var inntil nylig bare mulig ved å legge til ekstra inneholder elementer.

.padded {
margin: 0 auto;
posisjon: relativ;
bredde: -webkit-calc (100% - (20px * 2));
bredde: -moz-calc (100% - (20px * 2));
bredde: calc (100% - (20px * 2));
}

calc () tar seg av riktig breddeutregning basert på .padded's overordnede bredde og minus en definert 20px polstring. Jeg multipliserte dette med 2 for hver side av elementet mitt, og sentrerte elementet ved hjelp av relativ posisjonering og automatisk venstre og høyre margin.

Stil

Åpenhet

Å få den rette stilen til et element har alltid vært avhengig av hva slags verktøy vi har hatt tilgjengelig for oss i CSS. Transparens er en av de første støttevariantene du vil støte på tidlig på midten av 2000-tallet.

Med fremveksten av HTML5 og mer fokusert standardinnsats har nettlesere en standardimplementering av opacity-egenskapen, og har utsatt alfakanalstøtte i henhold til den nye Color Module-spesifikasjonen. Dette inkluderer RGBA og HSLA retningslinjer.

en {
farge: rgba (0,255,0,0.5);
bakgrunn: rgba (0,0,255,0,05);
grense: rgba (255,0,0,0,5);
}

Du kan bruke RGBA- eller HSLA-farger uansett hvor du finner HEX-verdier. Det er også en utvidet liste over morsomme farger med definerte navn du kan sjekke ut rett i spesifikasjonen. Disse er nyttige når du vil skape en dynamisk blanding mellom elementene.

Filtre

CSS-filtre er ekstremt spennende. Det å ha muligheten til å endre utseendet og følelsen av elementer på en side dynamisk uten behov for tredjeparts plugin-moduler, er utrolig, og vil bidra til å redusere tiden du bruker i Photoshop kraftig.

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

CSS-filtre støttes for øyeblikket bare i WebKit-nettlesere, så bruken av dem skal være av additiv karakter, ikke avhengig. Les mer her.

Bildebytte

Å erstatte tekst med bilder har eksistert lenge. Dessverre er det fremdeles ulemper, tilgjengelighetsmessig, med de nyeste og mest sofistikerte teknikkene for erstatning av bilder. Men to har nylig kommet frem som er ekstremt smarte og unike i sine egne rettigheter. Den første ble skrevet av Scott Kellman:

h1 class = ’hide-text’> Logo for mitt nettsted / h1>
.hide-text {
tekstinnrykk: 100%;
white-space: nowrap;
overløp: skjult;
}

Den andre ble skrevet av Nicolas Gallagher:

.hide-text {
font: 0/0 a;
tekst-skygge: ingen;
farge: gjennomsiktig;
}

Responsiv video

Å få media til å skalere riktig i et responsivt miljø kan være utfordrende. Med flere og flere nettsteder som respekterer adaptiv design, er det viktig å håndtere elementets dimensjoner og størrelsesforhold riktig.

Innebygd video har vært en av de mer utfordrende mediatypene å bryte på grunn av måten tredjeparts tjenester serverer innholdet på. En typisk YouTube-innebygging ser omtrent slik ut:

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

Iframe-elementet inneholder da et Flash-objekt eller innebygd element. Bruker noe som iframe {maxwidth: 100%; } fungerer ikke fordi de nestede elementene ikke endres ordentlig når bredden endres. Så, vi må gjøre litt lureri.

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

Innpakning av iframe i et annet element vil gi oss kontrollen vi trenger for å legge til riktig responsiv funksjonalitet i videoen.

.video {
posisjon: relativ;
polstring-bunn: 56,25%;
høyde: 0;
overløp: skjult;
}
.video iframe,
.videoobjekt,
.video innebygd {
posisjon: absolutt;
topp: 0;
venstre: 0;
bredde: 100%;
høyde: 100%;
}

Innstilling av .video-innpakningens polstring-bunn: 56,25%; er magien i denne metoden. Å bruke polstring betyr at prosentandelen som brukes vil være basert på foreldrenes bredde. ‘56, 25% ’vil skape et forhold på 16: 9. Gjør matematikken selv, hvis du vil. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (dette er vår prosent).

Funksjonalitet

Velg enkelt elementer

Med populariteten til en rekke JavaScript-biblioteker (for eksempel jQuery), noterte ECMAScript-komiteen og W3C-standardene en av de viktigste delene av funksjonalitetsutviklere som manglet naturlig - godt elementvalg. Metoder som getElementByID () og getElementByClassName () var raske, men ikke like fleksible og robuste som valgmotorene som kommer fra utviklerfellesskapet; querySelectorAll () var standardorganets måte å etterligne noe av den fleksibiliteten i en innfødt selektormetode.

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

querySelectorAll () kan sendes flere og blandede velgere. Les mer om dette.

Opprette nye matriser

Iterering over en matrise er noe som har blitt slitsomt å skrive. Å skrive og skrive om for () løkker er ikke morsomt. I JS versjon 1.6 landet map () -metoden som gir støtte for en enkel måte å gjenta og lage en ny matrise fra en annen.

var folk = [’Heather’, ‘James’, ‘Kari’, ‘Kevin’];
var ønsker = people.map (funksjon (navn) {
returner ‘Hei’ + navn + ’!’;
});

Å kjøre denne koden, hvis vi skulle console.log (ønsker velkommen), vil du se velkommen er en ny matrise ['Hei Heather!', 'Hei James!', 'Hei Kari!', 'Hei Kevin!' ].

Rengjør dokument- og vindusobjekter

Tredjeparts JavaScript-biblioteker er utsatt for å rote med originale dokument- og vindusobjekter. Dette kan være et problem for andre tredjepartsbiblioteker, og utvikleren inkludert dem. Som begge parter, sørg for at du jobber med en ren versjon av begge objektene ved å opprette en ny forekomst av dem. Den beste måten å gjøre dette på er å opprette et iframe-element, sette det inn i DOM og lagre de nye forekomster av disse objektene.

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

Selv om det har vært store forbedringer i nettstakken, er det fortsatt veldig viktig å fortsette å avrunde og sofistikere teknologipakken for å møte utfordringene vi står overfor i prosjektets utforming, stil og funksjonalitet. For å opprettholde et godt vekstøkosystem, må vi oppmuntre standarder og leverandører av nettlesere til å fortsette fremdriften med nye spesifikasjoner og innovative funksjoner, mens vi deler vår egen kunnskap med andre utviklere og designere. Mer innsikt, mindre hack.

Darcy Clarke er en prisvinnende utvikler, medstifter av WordPress-temaselskapet Themify og daglig avtalsaggregat DealPage, og medlem av jQuery Team. Han jobber i Polar Mobile som senior UX-utvikler.