Viktiga HTML-, CSS- och JavaScript-tekniker

Författare: Monica Porter

Skapelsedatum: 22 Mars 2021

Uppdatera Datum: 17 Maj 2024

Video: Del 1/15 (HTML) - Lär dig webbutveckling med Distansakademin & Linus Rudbeck

Innehåll

Layout
Clearfix
Box-dimensionering
Flera kolumner
Beräkningar
Stil
Genomskinlighet
Filter
Bildbyte
Responsiv video
Funktionalitet
Välj enkelt element
Skapa nya matriser
Rengör dokument- och fönsterobjekt
Gillade detta? Läs dessa!

Den här artikeln publicerades först i nummer 234 av tidningen .net - världens bästsäljande tidning för webbdesigners och utvecklare.

En teknik, i sin kärna, är ett sätt att utföra en uppgift och eftersom vi är frontendutvecklare och designers har vi många uppgifter. Med det sagt glömmer vi ofta hur mycket detta landskap har förändrats. Från 2002 till 2010 var vårt samhälle ruttnat med kod och resursuppblåsning, vilket hindrade prestanda och underhållsförmåga. För att övervinna detta skapade vi en massa tips, knep och hack som vi kallade ”teknik”. Vi utförde fortfarande uppgifter, bara inte på det mest effektiva sättet.

Under de senaste åren har vi gjort en 360-tal som har fått bättre standarder och standardimplementeringar, vilket gör det möjligt för oss som samhälle att utveckla nyare och mer avancerade "tekniker". Detta nya landskap är det som anses vara det ”moderna nätet”.

Eftersom 'Web 2.0' blev stillastående och förvirrande kommer också den 'moderna webben' att göra det. Ge det tid. Med detta sagt kan vi för närvarande använda och missbruka termen så länge det finns en gemensam förståelse för vad den representerar.

Under 2010 landade HTML5-specifikationen och gav en helt ny, halvstandardiserad webbmiljö. Webbläsare som Opera, Firefox, Chrome och Safari anammade den här nya vågen och pressade sina utvecklingslag till nya gränser för standardimplementeringar och API-utforskning. För att ge dig en uppfattning om hur 'ombord' dessa webbläsare är, kolla www.html5readiness.coms visualiseringar av att ändra HTML5-stöd.

Var inte orolig för bristen på stöd i Internet Explorer. Vi kan bekämpa detta tack vare Google Chrome Frame. Sedan Google introducerade det 2010 har det blivit den snabba stödmekanismen för Internet Explorer. Alla versioner av IE kan riktas in med Chrome Frame, som uppmanar en ny användare att ladda ner ett plugin-program som gör utvalda webbplatser med en lätt version av Chrome inuti IE. För att implementera Chrome Frame lägger vi till följande meta> tagg i vår webbplats huvud> tagg.

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

Härifrån kan vi be IE-användare att ladda ner plugin-programmet, om det inte redan är installerat, med JavaScript:

skript typ = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / skript>
skript>
window.onload = funktion () {
CFInstall.check ({
läge: "overlay",
destination: "http://www.yourdomain.com"
});
};
/ skript>

destination kan ställas in för att skicka användaren till en viss länk efter installation av plugin-programmet. Ett försiktighetsord: även om Chrome Frame ger oss en metod att utveckla strikt för riktigt moderna webbläsare, får vi inte glömma att användaren har möjlighet att inte ladda ner plugin-programmet om de inte vill. Om de inte gör det, och du måste tillhandahålla support för en eller andra olika versioner av IE, måste du spendera lite mer tid på att ta reda på vad du kan och inte kan ge, med dina erfarenheter, webbläsare.

Med den här koden som ger ett betydligt mer lika villkor att utveckla på den moderna webbstacken, kan vi gå framåt med våra sinnen på lätthet. Du kanske kommer ihåg att du måste skapa ett antal webbläsarspecifika hack för att få din webbplats strukturerad rätt webbläsare, skapa ett oräkneligt antal tomma element som ska användas med dina skivade bilder eller till och med skriva alltför omfattande eller redundant JavaScript-kod för att få enklaste funktionaliteten att arbeta. Alla dessa smärtor är i viss mening samma problem som vi oroar oss för idag. Vi kämpar fortfarande för mer kontroll och bättre verktyg för att bekämpa layout, stil och funktionalitet men på en nivå som är mogen.

Layout

Clearfix

Flytande element introducerades tillbaka i CSS 2.1 men visade sig aldrig vara den kompletta lösningen vi hade hoppats på. Ett av de största problemen var att upprätthålla ett förälderselements dimensioner när ett underordnat element svävades. För att ta itu med detta skapades clearfix-tekniken.

Ta följande HTML:

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

Denna teknik skrevs av Nicolas Gallagher:

.clearfix: före,
.clearfix: efter {
innehåll: " ";
display: tabell;
}
.clearfix: efter {
tydlig: båda;
}
.clearfix {
* zoom: 1;
}

Om du använder HTML5Boilerplate för att starta dina projekt har du redan den här versionen av clearfix-tekniken inbakad.

Box-dimensionering

Under åratal diskuterade utvecklare vilken implementering av boxmodeller som var mer meningsfull. Quirks vs Standards-läget menade verkligen: ”skulle ett elements dimensioner förändras, efter att de har ställts in, när gränser och stoppning tillämpas eller inte”.

Det är nu allmänt överens om att det är vettigare att gränser och vaddering tar bort från det tillgängliga utrymmet i ett element och inte lägger till elementets bredd eller höjd. Debatten har gjorts irrelevant med det omfattande genomförandet av box-dimensionering. Webbläsaren tar sina ledtrådar från dig istället för vice versa.

Populärt av Chris Coyier och Paul Irish, kan en heltäckande teknik implementeras med följande:

* {
-webkit-box-dimensionering: border-box;
-moz-box-dimensionering: border-box;
box-dimensionering: border-box;
}

Att använda * -väljaren i CSS har diskuterats på grund av potentiella prestationsträffar. Sådana påståenden är oseriösa om du inte hyperoptimerar alla andra aspekter av din webbplats / app. Genom att använda border-box kommer webbläsaren att lägga till padding och ramar inuti det tillgängliga utrymmet. ”Standardläge” kan användas genom att ställa in storlek på rutan på innehållsrutan.

Flera kolumner

Nätet inspirerades starkt av skriftlig form och typ. Tyvärr fastnade vi i pergamentfasen. Några av dessa frågor kommer till en topp med efterlängtade specifikationer för Paged-Media och CSS Regions. Som sagt tog de första stegen mot mer tidskriftsliknande layouter när webbläsare började implementera CSS-flerkolumner. Koden för att generera denna effekt är ganska enkel:

p {
-webkit-kolumnräkning: 2;
-moz-kolumnantal: 2;
kolumnräkning: 2;
}

Du kan lära dig mer om CSS3-specifikationen med flera kolumner samt en JavaScript-reserv som du kan använda för vilken webbläsare som helst utan stöd, från A List Apart's blogg.

Beräkningar

Att beräkna mått kan vara svårt. Tidigare hade vi inget sätt att göra någon form av enhetsberäkningar, än mindre blandade enhetsberäkningar. Allt har förändrats tack vare calc. Skapa en vadderad effekt som inte påverkar de ursprungliga elementens bredd eller använder något som box-dimensionering: border-box; var fram till nyligen endast möjligt genom att lägga till extra innehållande element.

.padded {
marginal: 0 auto;
position: relativ;
bredd: -webkit-calc (100% - (20px * 2));
bredd: -moz-calc (100% - (20px * 2));
bredd: calc (100% - (20px * 2));
}

calc () tar hand om rätt breddberäkning baserat på .paddeds överordnade bredd och minus en definierad 20px-stoppning. Jag multiplicerade detta med 2 för vardera sidan av mitt element, centrerar elementet med relativ positionering och en vänster och höger marginal auto.

Stil

Genomskinlighet

Att få rätt stil för ett element har alltid varit beroende av vilken typ av verktyg vi har haft tillgängliga för oss i CSS. Transparens är en av de första supportvarianterna du skulle stöta på i början till mitten av 2000-talet.

Med tillkomsten av HTML5 och mer fokuserade standarder har webbläsare en standardimplementering av opacitetsegenskapen och har utsatt för alfakanalsstöd enligt den nya specifikationen för färgmodul. Detta inkluderar RGBA och HSLA riktlinjer.

en {
färg: rgba (0,255,0,0.5);
bakgrund: rgba (0,0255,0,05);
gräns: rgba (255,0,0,0,5);
}

Du kan använda RGBA- eller HSLA-färger överallt där du hittar HEX-värden. Det finns också en utökad lista med roliga färger med definierade namn som du kan kolla in direkt i specifikationen. Dessa kommer till nytta när du vill skapa en dynamisk blandning mellan element.

Filter

CSS-filter är extremt spännande. Att ha förmågan att dynamiskt ändra utseendet och känslan av element på en sida utan att det behövs plugin-program från tredje part är fantastiskt och kommer att bidra till att avsevärt minska din tid i Photoshop.

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

CSS-filter stöds för närvarande endast i WebKit-webbläsare, så deras användning bör vara av additiv karaktär, inte beroende. Läs mer här.

Bildbyte

Att ersätta text med bilder har funnits länge. Tyvärr finns det fortfarande nackdelar, tillgänglighetsmässigt, med de senaste och mest sofistikerade teknikerna för bildbyte. Men två har nyligen kommit fram som är extremt smarta och unika i sina egna rättigheter. Den första skrevs av Scott Kellman:

h1 class = ’hide-text’> Min webbplats logotyp / h1>
.hide-text {
textindrag: 100%;
white-space: nowrap;
överflöd: dold;
}

Den andra skrevs av Nicolas Gallagher:

.hide-text {
teckensnitt: 0/0 a;
text-skugga: ingen;
färg: transparent;
}

Responsiv video

Att få media att skala korrekt i en lyhörd miljö kan vara utmanande. Med fler och fler webbplatser som respekterar adaptiv design är det viktigt att hantera elementens dimensioner och bildförhållande ordentligt.

Inbäddad video har varit en av de mer utmanande mediatyperna att kämpa på grund av hur tredjeparts tjänster tjänar upp innehållet. En typisk YouTube-inbäddning ser ungefär så här ut:

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

Iframe-elementet innehåller sedan ett Flash-objekt eller inbäddat element. Använda något som iframe {maxwidth: 100%; } fungerar inte eftersom de kapslade elementen inte ändras ordentligt när bredden ändras. Så vi måste göra lite knep.

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

Att slå in iframe i ett annat element ger oss den kontroll vi behöver för att lägga till korrekt responsiv funktionalitet i videon.

.video {
position: relativ;
stoppning-botten: 56,25%;
höjd: 0;
överflöd: dold;
}
.video iframe,
.videoobjekt,
.video bädda in {
position: absolut;
topp: 0;
vänster: 0;
bredd: 100%;
höjd: 100%;
}

Ställa in .video-omslagets stoppning-botten: 56,25%; är magin i denna metod. Att använda stoppning betyder att procentandelen som används kommer att baseras på föräldrarnas bredd. ”56, 25%” skapar ett bildförhållande på 16: 9. Gör matte själv, om du vill. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (detta är vår procent).

Funktionalitet

Välj enkelt element

Med populariteten för ett antal JavaScript-bibliotek (till exempel jQuery) noterade ECMAScript-kommittén och W3C-standarderna en av de viktigaste delarna av funktionalitetsutvecklare som saknades naturligt - bra elementval. Metoder som getElementByID () och getElementByClassName () var snabba men inte lika flexibla och robusta som väljarmotorerna från utvecklargruppen; querySelectorAll () var standardorganets sätt att härma en del av den flexibiliteten i en inbyggd väljarmetod.

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

querySelectorAll () kan skickas flera och blandade väljare. Läs mer om detta.

Skapa nya matriser

Iterering över en matris är något som har blivit tröttsamt att skriva. Att skriva och skriva om för () loopar är inte kul. I JS version 1.6 landade map () -metoden som ger stöd för ett enkelt sätt att iterera över och skapa en ny array från en annan.

var människor = ['Heather', 'James', 'Kari', 'Kevin'];
var välkomnar = people.map (funktion (namn) {
returnera 'Hej' + namn + '!';
});

Att köra den här koden om vi skulle console.log (välkomnar) skulle du se välkomnar är en ny matris ['Hej Heather!', 'Hej James!', 'Hej Kari!', 'Hej Kevin!' ].

Rengör dokument- och fönsterobjekt

Tredjeparts JavaScript-bibliotek är benägna att röra med inbyggda dokument och fönsterobjekt. Detta kan vara ett problem för andra tredjepartsbibliotek, och utvecklaren inklusive dem. Som båda parter, se till att du arbetar med en ren version av båda objekten genom att skapa en ny instans av dem. Det bästa sättet att göra detta är att skapa ett iframe-element, infoga det i DOM och lagra de nya instanserna av dessa objekt.

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

Även om det har skett stora förbättringar av webbstacken, är det fortfarande mycket viktigt att fortsätta att avrunda och sofistikera vår tekniska svit för att möta de utmaningar vi möter inom vårt projekts layout, stil och funktionalitet. För att upprätthålla ett bra tillväxtekosystem måste vi uppmuntra standardorgan och webbläsarförsäljare att fortsätta framsteg med nya specifikationer och innovativa funktionsimplementeringar samtidigt som vi delar vår egen kunskap med andra utvecklare och designers. Mer insikter, mindre hack.

Darcy Clarke är en prisbelönt utvecklare, medgrundare av WordPress-temaföretaget Themify och den dagliga affärssammanställaren DealPage, och medlem i jQuery-teamet. Han arbetar på Polar Mobile som senior UX-utvecklare.