Væsentlige HTML-, CSS- og JavaScript-teknikker

Forfatter: Monica Porter

Oprettelsesdato: 22 Marts 2021

Opdateringsdato: 17 Kan 2024

Væsentlige HTML-, CSS- og JavaScript-teknikker - Kreativ

Indhold

Layout
Clearfix
Box-størrelse
Multi-kolonner
Beregninger
Stil
Gennemsigtighed
Filtre
Udskiftning af billede
Responsiv video
Funktionalitet
Nemt at vælge elementer
Oprettelse af nye arrays
Rengør dokument- og vinduesgenstande
Kan du lide dette? Læs disse!

Denne artikel opstod først i nummer 234 af .net magazine - verdens bedst sælgende magasin til webdesignere og udviklere.

En teknik er i sin kerne en måde at udføre en opgave på, og da vi er frontend-udviklere og designere, har vi mange opgaver. Når det er sagt, glemmer vi ofte, hvor meget dette landskab har ændret sig. Fra 2002 til 2010 var vores samfund rådnet med kode og ressourceopblæsning, hvilket hindrede ydeevne og vedligeholdelse. For at overvinde dette skabte vi en række tip, tricks og hacks, vi kaldte 'teknik'. Vi udførte stadig opgaver, bare ikke på den mest effektive måde.

Gennem de 360 år har de sidste par år set bedre standarder og standardimplementeringer komme til live, hvilket gør det muligt for os som samfund at udvikle nyere og mere avancerede 'teknikker'. Dette nye landskab er det, der betragtes som det 'moderne web'.

Da 'Web 2.0' blev stillestående og forvirrende, vil også det 'moderne web' gøre det. Giv det tid. Når det er sagt, kan vi indtil videre bruge og misbruge udtrykket, så længe der er en fælles forståelse af, hvad det repræsenterer.

I 2010 landede HTML5-specifikationen og leverede et helt nyt, semi-standardiseret webmiljø. Browsere som Opera, Firefox, Chrome og Safari omfavnede denne nye bølge og skubbede deres dev-teams til nye grænser for standardimplementeringer og API-udforskning. For at give dig en idé om, hvordan 'ombord' disse browsere er, skal du tjekke www.html5readiness.com's visualiseringer af ændring af HTML5-understøttelse.

Vær ikke bekymret over den manglende support i Internet Explorer. Vi kan bekæmpe dette takket være Google Chrome Frame. Siden Google introducerede det i 2010, er det blevet en go-to-supportmekanisme for Internet Explorer. Alle versioner af IE kan målrettes med Chrome Frame, som beder en ny bruger om at downloade et plug-in, der gengiver tilvalgte websteder med en letvægtsversion af Chrome inde i IE. For at implementere Chrome Frame tilføjer vi følgende meta> tag inden for vores websides head> tag.

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

Herfra kan vi bede IE-brugere om at downloade plug-in'en, hvis den ikke allerede er installeret, ved hjælp af JavaScript:

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

destination kan indstilles til at sende brugeren til et bestemt link efter installation af plug-in. Et forsigtighedsord: selvom Chrome Frame giver os en metode til at udvikle sig strengt til virkelig moderne browsere, må vi ikke glemme, at brugeren har muligheden for ikke at downloade plug-in'en, hvis de ikke vil. Hvis de ikke gør det, og du er forpligtet til at yde support til en eller anden version af IE, bliver du nødt til at bruge lidt mere tid på at finde ud af, hvad du kan og ikke kan levere med dine oplevelser, cross-browser.

Med denne kode, der giver et betydeligt mere ensartet spilleregler, som vi kan udvikle os på den moderne webstak, kan vi bevæge os fremad med vores lethed. Du husker muligvis at skulle oprette et antal browserspecifikke hacks for at få dit websted struktureret til højre på tværs af browsere, skabe et utalligt antal tomme elementer, der skal bruges med dine skårne billeder, eller endda skrive alt for detaljeret eller overflødig JavaScript-kode for at få enkleste funktionalitet til at arbejde. Alle disse smerter er på en eller anden måde de samme problemer, som vi bekymrer os om i dag. Vi kæmper stadig for mere kontrol og bedre værktøjer til at bekæmpe layout, stil og funktionalitet, men på et niveau, der er modent.

Layout

Clearfix

Flydende et element blev introduceret tilbage i CSS 2.1, men viste sig aldrig at være den komplette løsning, vi havde håbet. Et af de største problemer var at opretholde et overordnet elements dimensioner, når et underordnet element blev flydt. For at løse dette blev clearfix-teknikken oprettet.

Tag følgende HTML:

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

Denne teknik blev skrevet af Nicolas Gallagher:

.clearfix: før,
.clearfix: efter {
indhold: " ";
display: tabel;
}
.clearfix: efter {
klart: begge;
}
.clearfix {
* zoom: 1;
}

Hvis du bruger HTML5Boilerplate til at starte dine projekter, så har du allerede denne version af clearfix-teknikken bagt ind.

Box-størrelse

I årevis diskuterede udviklere, hvilken implementering af boksmodeller der var mere fornuftig. Quirks vs Standards-tilstand betød virkelig: 'skal et elements dimensioner ændre sig, efter at de er indstillet, når grænser og polstring anvendes eller ikke'.

Det er nu bredt aftalt, at det giver mere mening for grænser og polstring at tage væk fra den tilgængelige plads i et element og ikke føje til elementets bredde eller højde. Debatten er gjort irrelevant med den udbredte implementering af boksstørrelse. Browseren tager sine signaler fra dig i stedet for omvendt.

Populeret af Chris Coyier og Paul Irish, kan en altomfattende teknik implementeres med følgende:

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

Brug af * vælgeren i CSS er blevet debatteret på grund af potentielle præstationshits. Disse slags påstande er useriøse, hvis du ikke hyperoptimerer alle andre aspekter af dit websted / din app. Brug af border-box får browseren til at tilføje polstring og kanter inden i det tilgængelige rumsæt. 'Standardtilstand' kan bruges ved at indstille boksstørrelse til indholdsboks.

Multi-kolonner

Internettet var stærkt inspireret af skriftlig form og type. Desværre sidder vi fast i pergamentfasen. Nogle af disse spørgsmål kommer i spidsen med længe ventede Paged-Media og CSS Regions specifikationer. Når det er sagt, blev de første skridt mod flere magasinlignende layout taget, da browsere begyndte at implementere CSS-multikolonner. Koden til at generere denne effekt er ret ligetil:

p {
-webkit-søjletælling: 2;
-moz-søjletælling: 2;
søjletælling: 2;
}

Du kan lære mere om CSS3-specifikationen med flere søjler samt et JavaScript-fallback, som du kan bruge til enhver browser uden support, fra A List Apart's blog.

Beregninger

Det kan være svært at beregne dimensioner. Tilbage i gamle dage havde vi ingen måde at foretage nogen form for enhedsberegninger, endsige beregninger af blandede enheder. Det hele ændres takket være calc. Oprettelse af en polstret effekt, der ikke påvirker de oprindelige elementers bredde eller bruger noget som boksstørrelse: border-box; var indtil for nylig kun mulig ved at tilføje ekstra indeholdende elementer.

.polstret {
margen: 0 auto;
position: relativ;
bredde: -webkit-calc (100% - (20px * 2));
bredde: -moz-calc (100% - (20px * 2));
bredde: calc (100% - (20px * 2));
}

calc () tager sig af den korrekte breddeberegning baseret på .padded's overordnede bredde og minus en defineret 20px polstring. Jeg gangede dette med 2 for hver side af mit element, centreret elementet ved hjælp af relativ positionering og en venstre og højre margen auto.

Stil

Gennemsigtighed

At få den rigtige stil for et element har altid været afhængig af den slags værktøjer, vi har haft til rådighed for os i CSS. Gennemsigtighed er en af de første supportvarianter, du vil støde på i begyndelsen til midten af 2000'erne.

Med fremkomsten af HTML5 og mere fokuseret standardindsats har browsere en standardimplementering af opacitetsejendommen og har udsat alfakanalstøtte i henhold til den nye Color Module-specifikation. Dette inkluderer RGBA og HSLA retningslinjer.

en {
farve: rgba (0,255,0,0.5);
baggrund: rgba (0,0,255,0,05);
grænse: rgba (255,0,0,0,5);
}

Du kan bruge RGBA- eller HSLA-farver, uanset hvor du finder HEX-værdier. Der er også en udvidet liste over sjove farver med definerede navne, du kan tjekke ud lige i specifikationen. Disse er nyttige, når du vil skabe en dynamisk blanding mellem elementer.

Filtre

CSS-filtre er ekstremt spændende. At have evnen til dynamisk at ændre udseendet og følelsen af elementer på en side uden behov for plug-ins fra tredjepart er forbløffende og vil medvirke til at reducere din tid i Photoshop kraftigt.

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

CSS-filtre understøttes i øjeblikket kun i WebKit-browsere, så deres anvendelse skal være af additiv karakter, ikke afhængig. Læs mere her.

Udskiftning af billede

Udskiftning af tekst med billeder har eksisteret i lang tid. Desværre er der stadig ulemper, tilgængelighedsmæssigt, med de nyeste og mest sofistikerede billedudskiftningsteknikker. Men to er for nylig kommet til lys, der er ekstremt kloge og unikke i deres egne rettigheder. Den første blev skrevet af Scott Kellman:

h1 class = ’hide-text’> Mit websteds logo / h1>
.hide-text {
tekstindryk: 100%;
hvid-plads: nowrap;
overløb: skjult;
}

Den anden blev skrevet af Nicolas Gallagher:

.hide-text {
skrifttype: 0/0 a;
tekst-skygge: ingen;
farve: gennemsigtig
}

Responsiv video

At få medier til at skalere korrekt i et lydhør miljø kan være udfordrende. Med flere og flere websteder, der respekterer adaptivt design, er det vigtigt at håndtere elementernes dimensioner og billedformat korrekt.

Indlejret video har været en af de mere udfordrende medietyper at kæmpe på grund af den måde, hvorpå tredjeparts tjenester serverer indholdet. En typisk YouTube-indlejring ser sådan ud:

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

Iframe-elementet indeholder derefter et Flash-objekt eller et integreret element. Brug af noget som iframe {maxwidth: 100%; } fungerer ikke, fordi de indlejrede elementer ikke ændres korrekt, når bredden ændres. Så vi er nødt til at snyde noget.

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

Indpakning af iframe i et andet element giver os den kontrol, vi har brug for, for at tilføje korrekt responsiv funktionalitet til videoen.

.video {
position: relativ;
polstring-bund: 56,25%;
højde: 0;
overløb: skjult;
}
.video iframe,
.video-objekt,
.video indlejret {
position: absolut;
top: 0;
venstre: 0;
bredde: 100%;
højde: 100%;
}

Indstilling af .video indpakningens polstring-bund: 56,25%; er magien i denne metode. Brug af polstring betyder, at den anvendte procentdel er baseret på forældrenes bredde. '56 .25% 'skaber et formatforhold på 16: 9. Gør matematikken selv, hvis du vil. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (dette er vores procent).

Funktionalitet

Nemt at vælge elementer

Med populariteten af en række JavaScript-biblioteker (fx jQuery) noterede ECMAScript-komitéen og W3C-standarderne en af de vigtigste dele af funktionalitetsudviklere, der manglede indbygget - godt elementvalg. Metoder som getElementByID () og getElementByClassName () var hurtige, men ikke så fleksible og robuste som selektormotorer, der kom fra udviklerfællesskabet; querySelectorAll () var standardorganets måde at efterligne noget af denne fleksibilitet i en native selector-metode.

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

querySelectorAll () kan sendes flere og blandede vælgere. Læs mere om dette.

Oprettelse af nye arrays

Iterering over en matrix er noget, der er blevet kedeligt at skrive. Skrivning og omskrivning af () sløjfer er ikke sjovt. I JS version 1.6 landede metoden map (), der giver support til en nem måde at gentage og oprette en ny matrix fra en anden.

var mennesker = ['Heather', 'James', 'Kari', 'Kevin'];
var velkommen = people.map (funktion (navn) {
returner 'Hej' + navn + '!';
});

At køre denne kode, hvis vi skulle konsolere.log (hilser velkommen), ville du se hilser er et nyt array ['Hej Heather!', 'Hej James!', 'Hej Kari!', 'Hej Kevin!' ].

Rengør dokument- og vinduesgenstande

Tredjeparts JavaScript-biblioteker er tilbøjelige til at ødelægge indfødte dokument- og vindueobjekter. Dette kan være et problem for andre tredjepartsbiblioteker, og udvikleren inklusive dem. Som begge parter skal du sikre dig, at du arbejder med en ren version af begge objekter ved at oprette en ny forekomst af dem. Den bedste måde at gøre dette på er ved at oprette et iframe-element, indsætte det i DOM og gemme de nye forekomster af disse objekter.

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);

Selvom der har været store forbedringer af webstakken, er det fortsat meget vigtigt at fortsætte med at afrunde og sofistikere vores teknologipakke for at imødekomme de udfordringer, vi står over for i vores projekts layout, stil og funktioner. For at opretholde et godt økosystem med vækst skal vi tilskynde standarder og browserudbydere til at fortsætte fremskridtene med nye specifikationer og innovative funktionsimplementeringer, mens vi deler vores egen viden med andre udviklere og designere. Mere indsigt, mindre hacks.

Darcy Clarke er en prisvindende udvikler, medstifter af WordPress-temafirmaet Themify og den daglige dealaggregator DealPage og medlem af jQuery-teamet. Han arbejder hos Polar Mobile som senior UX-udvikler.