Essentiële HTML-, CSS- en JavaScript-technieken

Schrijver: Monica Porter

Datum Van Creatie: 22 Maart 2021

Updatedatum: 17 Kunnen 2024

Video: STOCKS BY REQUEST - MALAYSIA EDITION

Inhoud

Indeling
Clearfix
Box-formaat
Meerdere kolommen
Berekeningen
Stijl
Transparantie
Filters
Afbeelding vervangen
Responsieve video
Functionaliteit
Eenvoudig elementen selecteren
Nieuwe arrays maken
Reinig document- en raamobjecten
Vond dit leuk? Lees deze!

Dit artikel verscheen voor het eerst in nummer 234 van .net magazine - 's werelds best verkochte tijdschrift voor webdesigners en -ontwikkelaars.

Een techniek is in wezen een manier om een taak uit te voeren en als frontend-ontwikkelaars en ontwerpers hebben we veel taken. Dat gezegd hebbende, vergeten we vaak hoeveel dit landschap is veranderd. Van 2002 tot 2010 was onze gemeenschap verrot door een bloat van code en middelen, wat de prestaties en onderhoudbaarheid belemmerde. Om dit te verhelpen, hebben we een hele reeks tips, trucs en hacks gemaakt die we ‘techniek 'noemden. We waren nog steeds bezig met het uitvoeren van taken, alleen niet op de meest efficiënte manier.

Door een 360 te maken, zijn er de afgelopen jaren betere standaarden en standaarden geïmplementeerd, waardoor we als gemeenschap nieuwere en meer geavanceerde ‘technieken 'kunnen ontwikkelen. Dit nieuwe landschap wordt beschouwd als het ‘moderne web '.

Zoals ‘Web 2.0 'stagneerde en verwarrend werd, zo ook het‘ moderne web'. Geef het tijd. Dat gezegd hebbende, voorlopig kunnen we de term gebruiken en misbruiken, zolang er een algemeen begrip is van wat het vertegenwoordigt.

In 2010 kwam de HTML5-specificatie binnen, die een geheel nieuwe, semi-gestandaardiseerde webomgeving opleverde. Browsers zoals Opera, Firefox, Chrome en Safari omarmden deze nieuwe golf en dwongen hun ontwikkelteams tot nieuwe limieten van standaardimplementaties en API-verkenning. Om u een idee te geven van hoe ‘onboard’ deze browsers zijn, bekijkt u de visualisaties van www.html5readiness.com van veranderende HTML5-ondersteuning.

Maak u geen zorgen over het gebrek aan ondersteuning in Internet Explorer. Dit kunnen we bestrijden dankzij Google Chrome Frame. Sinds Google het in 2010 introduceerde, is het het ondersteuningsmechanisme voor Internet Explorer geworden. Alle versies van IE kunnen worden getarget met Chrome Frame, dat een nieuwe gebruiker vraagt om een plug-in te downloaden die aangemelde websites weergeeft met een lichtgewicht versie van Chrome, binnen IE. Om Chrome Frame te implementeren, voegen we de volgende meta> -tag toe aan de head> -tag van onze site.

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

Vanaf hier kunnen we IE-gebruikers vragen om de plug-in te downloaden, als deze nog niet is geïnstalleerd, met JavaScript:

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

bestemming kan worden ingesteld om de gebruiker naar een bepaalde link te sturen na het installeren van de plug-in. Een waarschuwing: hoewel Chrome Frame ons een methode geeft om strikt voor echt moderne browsers te ontwikkelen, mogen we niet vergeten dat de gebruiker de mogelijkheid heeft om de plug-in niet te downloaden als hij dat niet wil. Als dat niet het geval is, en u moet ondersteuning bieden voor een of andere verschillende versies van IE, dan zult u wat meer tijd moeten besteden aan het uitzoeken wat u wel en niet kunt bieden, met uw ervaringen, cross-browser.

Met deze code die een aanzienlijk gelijker speelveld biedt waarop we ons kunnen ontwikkelen op de moderne webstack, kunnen we met een gerust hart verder gaan. U herinnert zich misschien dat u een aantal browserspecifieke hacks moest maken om uw site in de juiste crossbrowser gestructureerd te krijgen, een ontelbaar aantal lege elementen te maken om te gebruiken met uw gesneden afbeeldingen, of zelfs overdreven uitgebreide of overtollige JavaScript-code te schrijven om de eenvoudigste functionaliteit om te werken. Al deze pijnen zijn in zekere zin dezelfde problemen waar we ons vandaag zorgen over maken. We vechten nog steeds voor meer controle en betere tools om lay-out, stijl en functionaliteit te bestrijden, maar op een volwassen niveau.

Indeling

Clearfix

Floating an element werd geïntroduceerd in CSS 2.1, maar bleek nooit de complete oplossing te zijn die we hadden gehoopt. Een van de grootste problemen was het behouden van de afmetingen van een bovenliggend element wanneer een onderliggend element werd zwevend. Om dit aan te pakken, is de clearfix-techniek gemaakt.

Neem de volgende HTML:

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

Deze techniek is geschreven door Nicolas Gallagher:

.clearfix: voor,
.clearfix: na {
inhoud: " ";
display: tafel;
}
.clearfix: na {
beiden opschonen;
}
.clearfix {
* zoom: 1;
}

Als je HTML5Boilerplate gebruikt om je projecten te starten, dan heb je deze versie van de clearfix-techniek al ingebakken.

Box-formaat

Jarenlang hebben ontwikkelaars gedebatteerd welke implementatie van het boxmodel logischer was. De modus Quirks vs Standards betekende eigenlijk: ‘moeten de afmetingen van een element veranderen, nadat ze zijn ingesteld, wanneer randen en opvulling worden toegepast, of niet '.

Men is het er nu algemeen over eens dat het logischer is dat randen en opvulling de beschikbare ruimte binnen een element wegnemen en niet bijdragen aan de breedte of hoogte van het element. Het debat is irrelevant gemaakt met de wijdverbreide implementatie van box-sizing. De browser neemt zijn aanwijzingen van u over in plaats van andersom.

Gepopulariseerd door Chris Coyier en Paul Irish, kan een allesomvattende techniek worden geïmplementeerd met het volgende:

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

Het gebruik van de * selector in CSS is besproken vanwege mogelijke prestatiehits. Dit soort claims zijn lichtzinnig als je niet alle andere aspecten van je website / app hyperoptimaliseert. Door border-box te gebruiken, zal de browser opvulling en randen toevoegen binnen de beschikbare ruimte. ‘Standards Mode 'kan worden gebruikt door box-sizing in te stellen op content-box.

Meerdere kolommen

Het web werd sterk geïnspireerd door geschreven vorm en type. Helaas bleven we steken in de perkamentfase. Sommige van deze problemen komen tot een hoogtepunt met langverwachte specificaties van Paged-Media en CSS Regions. Dat gezegd hebbende, de eerste stappen naar meer tijdschriftachtige lay-outs werden genomen toen browsers begonnen met het implementeren van CSS-multi-columns. De code om dit effect te genereren is vrij eenvoudig:

p {
-webkit-aantal kolommen: 2;
-moz-column-count: 2;
aantal kolommen: 2;
}

U kunt meer lezen over de CSS3-specificatie met meerdere kolommen, evenals een JavaScript-fallback die u voor elke browser zonder ondersteuning kunt gebruiken, op de blog van A List Apart.

Berekeningen

Het berekenen van afmetingen kan moeilijk zijn. Vroeger hadden we geen enkele manier om eenheidsberekeningen uit te voeren, laat staan gemengde eenheidsberekeningen. Dat is allemaal veranderd dankzij Calc. Creëer een opgevuld effect dat de breedte van de oorspronkelijke elementen niet beïnvloedt of gebruik zoiets als box-sizing: border-box; was tot voor kort alleen mogelijk door extra bevattende elementen toe te voegen.

.padded {
marge: 0 auto;
positie: relatief;
breedte: -webkit-calc (100% - (20px * 2));
breedte: -moz-calc (100% - (20px * 2));
breedte: calc (100% - (20px * 2));
}

calc () zorgt voor de juiste breedteberekening op basis van de ouderbreedte van .padded en minus een gedefinieerde 20px opvulling. Ik vermenigvuldigde dit met 2 voor beide zijden van mijn element, waarbij ik het element centreerde met behulp van relatieve positionering en een auto voor de linker- en rechtermarge.

Stijl

Transparantie

Het verkrijgen van de juiste stijl van een element is altijd afhankelijk geweest van het soort tools dat we tot onze beschikking hadden in CSS. Transparantie is een van de eerste ondersteuningsvarianten die u in de vroege tot midden jaren 2000 zou tegenkomen.

Met de komst van HTML5 en meer gerichte inspanningen op het gebied van standaarden, hebben browsers een standaardimplementatie van de ondoorzichtigheidseigenschap en hebben ze alfakanaalondersteuning getoond volgens de nieuwe specificatie van de kleurmodule. Dit omvat RGBA- en HSLA-richtlijnen.

een {
kleur: rgba (0,255,0,0.5);
achtergrond: rgba (0,0,255,0.05);
grens: rgba (255,0,0,0.5);
}

U kunt RGBA- of HSLA-kleuren overal gebruiken waar u HEX-waarden vindt. Er is ook een uitgebreide lijst met leuke kleuren met gedefinieerde namen die u direct in de specificatie kunt bekijken. Deze zijn handig wanneer u een dynamische mix tussen elementen wilt creëren.

Filters

CSS-filters zijn buitengewoon opwindend. De mogelijkheid hebben om het uiterlijk en het gevoel van elementen op een pagina dynamisch te wijzigen zonder dat er plug-ins van derden nodig zijn, is verbazingwekkend en zal helpen om uw tijd doorgebracht in Photoshop enorm te verminderen.

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

CSS-filters worden momenteel alleen ondersteund in WebKit-browsers, dus het gebruik ervan moet van additieve aard zijn, niet afhankelijk. Lees hier meer.

Afbeelding vervangen

Het vervangen van tekst door afbeeldingen bestaat al een hele tijd. Helaas zijn er qua toegankelijkheid nog steeds nadelen aan de nieuwste en meest geavanceerde technieken voor beeldvervanging. Maar er zijn onlangs twee aan het licht gekomen die buitengewoon slim zijn en uniek in hun eigen rechten. De eerste is geschreven door Scott Kellman:

h1 class = ’hide-text’> Logo van mijn website / h1>
.hide-tekst {
tekstinspringing: 100%;
witruimte: nowrap;
overloop verborgen;
}

De tweede is geschreven door Nicolas Gallagher:

.hide-tekst {
lettertype: 0/0 a;
text-shadow: geen;
kleur: transparant;
}

Responsieve video

Het kan een uitdaging zijn om media correct te laten schalen in een responsieve omgeving. Nu steeds meer websites een adaptief ontwerp respecteren, is het essentieel om de afmetingen en beeldverhouding van elementen correct te hanteren.

Ingesloten video is een van de meest uitdagende mediatypen geweest om te worstelen vanwege de manier waarop services van derden de inhoud aanbieden. Een typische YouTube-insluiting ziet er ongeveer zo uit:

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

Het iframe-element bevat dan een Flash-object of een insluitelement. Zoiets als iframe {maxwidth: 100%; } zal niet werken omdat de geneste elementen niet correct worden aangepast wanneer de breedte verandert. Dus we moeten wat bedrog plegen.

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

Door het iframe in een ander element te plaatsen, krijgen we de controle die we nodig hebben om de juiste responsieve functionaliteit aan de video toe te voegen.

.video {
positie: relatief;
opvulling-onderkant: 56,25%;
hoogte: 0;
overloop verborgen;
}
.video-iframe,
.video-object,
.video insluiten {
positie: absoluut;
boven: 0;
links: 0;
breedte: 100%;
hoogte: 100%;
}

De opvulbodem van de .video-wrapper instellen: 56,25%; is de magie in deze methode. Door opvulling te gebruiken, wordt het percentage dat wordt gebruikt, gebaseerd op de breedte van de ouder; ‘56,25% 'zorgt voor een beeldverhouding van 16: 9. Doe de wiskunde zelf, als je wilt. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (dit is ons percentage).

Functionaliteit

Eenvoudig elementen selecteren

Met de populariteit van een aantal JavaScript-bibliotheken (jQuery, bijvoorbeeld), namen de ECMAScript-commissie en W3C-standaarden kennis van een van de kernonderdelen van functionaliteit die ontwikkelaars native ontbraken: een goede elementenselectie. Methoden zoals getElementByID () en getElementByClassName () waren snel, maar niet zo flexibel en robuust als de selector-engines van de ontwikkelaarsgemeenschap; querySelectorAll () was de manier waarop de normalisatie-instantie een deel van die flexibiliteit nabootste in een native selector-methode.

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

querySelectorAll () kan worden doorgegeven aan meerdere en gemengde selectors. Lees hier meer over.

Nieuwe arrays maken

Itereren over een array is iets dat vermoeiend wordt om te schrijven. Het schrijven en herschrijven van () loops is niet leuk. In JS versie 1.6 landde de methode map () en bood ondersteuning voor een gemakkelijke manier om te herhalen en een nieuwe array van een andere te maken.

var people = [’Heather’, ’James’, ’Kari’, ’Kevin’];
var verwelkomt = people.map (functie (naam) {
retourneer ’Hallo’ + naam + ’!’;
});

Als we deze code zouden uitvoeren, als we console.log (welkom) zouden gebruiken, zou je zien dat verwelkomingen een nieuwe array is [‘Hallo Heather! ',‘ Hallo James!', ‘Hallo Kari! ',‘ Hallo Kevin!' ].

Reinig document- en raamobjecten

JavaScript-bibliotheken van derden zijn gevoelig voor knoeien met native document- en vensterobjecten. Dit kan een probleem zijn voor bibliotheken van andere derde partijen, en voor de ontwikkelaar die deze gebruikt. Zorg ervoor dat u als beide partijen met een schone versie van beide objecten werkt door er een nieuw exemplaar van te maken. De beste manier om dit te doen, is door een iframe-element te maken, dit in de DOM in te voegen en de nieuwe exemplaren van die objecten op te slaan.

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

Hoewel er grote verbeteringen zijn aangebracht aan de webstack, is het nog steeds enorm belangrijk om onze technologiesuite verder aan te vullen en te verfijnen om de uitdagingen aan te gaan waarmee we worden geconfronteerd binnen de lay-out, stijl en functionaliteit van ons project. Om een goed groei-ecosysteem in stand te houden, moeten we normalisatie-instellingen en browserleveranciers aanmoedigen om door te gaan met nieuwe specificaties en innovatieve functie-implementaties, terwijl we onze eigen kennis delen met collega-ontwikkelaars en ontwerpers. Meer inzichten, minder hacks.

Darcy Clarke is een bekroonde ontwikkelaar, mede-oprichter van WordPress-themabedrijf Themify en dagelijkse deal-aggregator DealPage, en lid van het jQuery-team. Hij werkt bij Polar Mobile als senior UX-ontwikkelaar.