Wesentlech HTML, CSS a JavaScript Techniken

Auteur: Monica Porter

Denlaod Vun Der Kreatioun: 22 Mäerz 2021

Update Datum: 17 Mee 2024

Videospiller: Programista od zera. Czego trzeba się nauczyć by robić strony. #1

Inhalt

Layout
Clearfix
Box-Gréisst
Multi-Sailen
Berechnungen
Stil
Transparenz
Filteren
Bild Ersatz
Reaktiounsfäeger Video
Funktionalitéit
Liicht Elementer auswielen
Schafen nei Arrays
Propper Dokument a Fënster Objete botzen
Liked dëst? Liest dës!

Dësen Artikel erschéngt als éischt an der Ausgab 234 vum .net Magazin - de beschte verkaafte Magazin vun der Welt fir Webdesigner an Entwéckler.

Eng Technik, am Kär, ass e Wee fir eng Aufgab ze maachen an als Frontend Entwéckler an Designer hu mir vill Aufgaben. Dat gesot, mir vergiessen dacks wéi vill dës Landschaft geännert huet. Vun 2002 bis 2010 war eis Gemeinschaft verrot mat Code a Ressource bloat, wat d'Performance an d'Ënnerhaltbarkeet behënnert. Fir dëst ze iwwerwannen, hu mir eng Rëtsch Tipps, Tricks an Hacks erstallt, déi mir "Technik" genannt hunn. Mir hunn nach ëmmer Aufgaben gemaach, just net op déi effizientst Manéier.

Eng 360 maachen, déi lescht Joeren hu besser Standarden an Standardsimplementéierungen am Liewe gesprongen, et erméiglecht eis als Gemeinschaft méi nei a méi fortgeschratt 'Techniken' z'entwéckelen. Dës nei Landschaft ass wat als 'modernt Web' gëllt.

Wéi 'Web 2.0' stagnant a verwirrend gouf, wäert och dat 'modernt Web'. Gitt et Zäit. Dat gesot, fir elo kënne mir de Begrëff benotzen a mëssbrauchen soulaang et e gemeinsamt Verständnis vu wat et duerstellt.

Am Joer 2010 ass d'HTML5 Spezifikatioun gelant, e fuschneie, semi-standardiséierte Web Ëmfeld. Browser wéi Opera, Firefox, Chrome a Safari hunn dës nei Welle ugeholl an hunn hir Dev Teams op nei Grenze vun de Standard Implementéierungen an der API Exploratioun gedréckt. Fir Iech eng Iddi ze ginn, wéi 'onboard' dës Browser sinn, kuckt op www.html5readiness.com d'Visualiséierunge vun der HTML5 Ënnerstëtzung z'änneren.

Maacht Iech keng Suergen iwwer de Mangel u Support am Internet Explorer. Mir kënnen dëst bekämpfen dank Google Chrome Frame. Zënter Google et am Joer 2010 agefouert huet ass et de Go-to Support Mechanismus fir Internet Explorer ginn. All Versioune vun IE kënne mat Chrome Frame gezielt ginn, wat en neie Benotzer opfuerdert e Plug-in erofzelueden deen ofgewielte Websäiten mat enger liicht Versioun vu Chrome, bannent IE, mécht. Fir Chrome Frame z'implementéiere füügt mir folgend Meta> Tag bäi eisem Site> Head> Tag.

meta http-equiv = "X-UA-Kompatibel" Inhalt = "Chrom = 1" />

Vun hei aus kënne mir IE Benotzer opfuerderen de Plugin erofzelueden, wann net scho installéiert, mat JavaScript:

Skriptart = "Text / Javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / Skript>
Skript>
window.onload = Funktioun () {
CFInstall.check ({
Modus: "iwwerlageren",
Destinatioun: "http://www.yourdomain.com"
});
};
/ Skript>

Destinatioun kann agestallt ginn fir de Benotzer op e gewësse Link ze schécken no der Installatioun vum Plug-in. E Wuert virsiichteg: och wann Chrome Frame eis eng Method gëtt fir sech wierklech fir modern Browser z'entwéckelen, däerfe mir net vergiessen datt de Benotzer d'Méiglechkeet huet de Plug-in net erofzelueden wa se net wëllen. Wann se et net maachen, an Dir sidd gefuerdert Ënnerstëtzung fir eng oder aner verschidde Versioune vun IE ze bidden, musst Dir e bësse méi Zäit verbréngen fir erauszefannen wat Dir kënnt a wat net mat Ären Erfahrungen, Cross-Browser..

Mat dësem Code gëtt e wesentlech méi Niveau gespillt Terrain op deem mir eis um modernen Web Stack entwéckele kënnen, kënne mir mat eise Gedanken einfach goen. Dir kënnt Iech drun erënneren datt Dir e puer Browser-spezifesch Hacks erstallt musst fir Äre Site strukturéiert richteg Cross-Browser ze kréien, eng Onzuel un eidel Elementer ze kreéiere fir mat Äre geschniddene Biller ze benotzen, oder souguer ze vill verbose oder iwwerflëssege JavaScript Code ze schreiwen fir de einfachst Funktionalitéit fir ze schaffen. All dës Schmerzen sinn, an iergendengem Sënn, déi selwecht Probleemer, déi mir eis haut Suergen maachen. Mir kämpfen nach ëmmer fir méi Kontroll a besser Tools fir Layout, Stil a Funktionalitéit ze bekämpfen awer op engem Niveau dat eeler ass.

Layout

Clearfix

En Element schwiewen gouf am CSS 2.1 agefouert awer ni ganz als déi komplett Léisung déi mir gehofft hunn. Ee vun de gréisste Probleemer war d'Erhale vun engem Dimensioun vun engem Elterendeelement wann e Kandelement geschwieft gouf. Fir dëst unzegoen, gouf d'Clearfix Technik erstallt.

Huelt de folgenden HTML:

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

Dës Technik gouf vum Nicolas Gallagher geschriwwen:

.clearfix: vir,
.clearfix: no {
Inhalt: "";
uweisen: Dësch;
}
.clearfix: no {
kloer: béid;
}
.clearfix {
* Zoom: 1;
}

Wann Dir HTML5Boilerplate benotzt fir Är Projeten ze starten, hutt Dir dës Versioun vun der Clearfix Technik scho gebak.

Box-Gréisst

Jorelaang hunn d'Entwéckler diskutéiert wéi eng Boxmodell Ëmsetzung méi sënnvoll war. Quirks vs Standards Modus huet wierklech gemengt: 'Sollten d'Dimensioune vun engem Element änneren, nodeems se gesat goufen, wa Grenzen a Padding ugewannt ginn, oder net'.

Et ass elo allgemeng vereinbart datt et méi Sënn mécht fir Grenzen a Padding vum verfügbaren Raum bannent engem Element ewechzehuelen, an net zu der Breet oder der Héicht vum Element bäizedroen. D'Debatt gouf irrelevant gemaach mat der breet Ëmsetzung vu Box-Sizing. De Browser wäert seng Zeechen vun Iech huelen anstatt ëmgedréint.

Populéiert vum Chris Coyier a Paul Irish, kann eng allesëmfaassend Technik mat folgendem implementéiert ginn:

* {
-webkit-Box-Gréisst: Grenz-Këscht;
-moz-Box-Gréisst: Grenz-Box;
Box-Gréisst: Grenz-Këscht;
}

D'Benotzung vum * Selector am CSS gouf debattéiert, wéinst potenziellen Performance Hits. Dës Aarte vu Fuerderunge si frivol wann Dir net all aner Aspekter vun Ärer Websäit / App hyperoptiméiert. Mat Grenzkëscht gëtt de Browser Padding a Grenzen an de verfügbare Raumset bäigefüügt. 'Standards Mode' ka benotzt ginn andeems Box-Sizing op Content-Box gesat gëtt.

Multi-Sailen

De Web war immens inspiréiert vu schrëftlecher Form an Typ. Leider si mir an der Pergamentphase hänke bliwwen. E puer vun dësen Themen kommen op de Kapp mat laang erwaarde Paged-Media an CSS Regiounen Spezifikatiounen. Dat gesot, déi éischt Schrëtt a Richtung méi zäitschrëftlech ähnlech Layouten goufen geholl wann Browser CSS Multi-Säulen implementéiert hunn. De Code fir dësen Effekt ze generéieren ass éischter einfach:

p {
-webkit-Spaltzuel: 2;
-moz-Säulenzuel: 2;
Kolonnenzuel: 2;
}

Dir kënnt méi iwwer d'CSS3 Multi-Spalte Spezifikatioun léieren, souwéi e JavaScript Fallback deen Dir fir all Browser ouni Support benotze kënnt, vum Blog vun A List Apart.

Berechnungen

Auszerechnen vun Dimensioune ka schwéier sinn. Zréck an déi al Deeg hate mir kee Wee fir eng Aart Eenheetsberechnungen ze maachen, ganz eleng gemëscht Eenheetsberechnungen. Dat ass alles geännert dank Calc. E gepolsterten Effekt ze kreéieren deen net déi initial Breet vun den Elementer beaflosst oder eppes wéi Boxgréisst benotzt: Grenzkëscht; war, bis viru kuerzem, nëmme méiglech andeems Dir extra enthält Elementer derbäi huet.

.padded {
Spillraum: 0 Auto;
Positioun: relativ;
Breet: -webkit-calc (100% - (20px * 2));
Breet: -moz-calc (100% - (20px * 2));
Breet: calc (100% - (20px * 2));
}

calc () këmmert sech ëm déi richteg Breetberechnung baséiert op .padded Elterebreet a minus eng definéiert 20px Padding. Ech multiplizéiert dëst mat 2 fir béid Säiten vu mengem Element, zentréiert d'Element mat relativer Positionéierung an enger lénkser a rietser Randauto.

Stil

Transparenz

De richtege Stil vun engem Element ze kréien war ëmmer ofhängeg vun der Aart vun Tools déi mir am CSS verfügbar haten. Transparenz ass eng vun den éischte Supportvarianten déi Dir an de fréie bis an d'Mëtt vun den 2000er lafe wäert.

Mat dem Opkommen vun HTML5 a méi fokusséierte Standardsefforten hunn Browser eng Standardimplementatioun vun der Opazitéitseigenschaft, an hunn Alpha-Kanal-Ënnerstëtzung ausgesat wéi déi nei Color Module Spezifikatioun. Dëst beinhalt RGBA an HSLA Richtlinnen.

eng {
Faarf: rgba (0,255,0,0.5);
Hannergrond: rgba (0,0,255,0,05);
Grenz: rgba (255,0,0,0.5);
}

Dir kënnt RGBA oder HSLA Faarwen benotze wou Dir HEX Wäerter fannt. Et gëtt och eng erweidert Lëscht vu lëschtege Faarwen mat definéierten Nimm, déi Dir direkt an der Spezifizéierung kucke kënnt. Dës sinn nëtzlech wann Dir eng dynamesch Mëschung tëscht Elementer schafe wëllt.

Filteren

CSS Filtere sinn extrem spannend. D'Fäegkeet dynamesch de Look an d'Gefill vun Elementer op enger Säit z'änneren ouni d'Bedierfnes fir Drëtt Partei Plug-ins ass erstaunlech, an hëlleft Är Zäit am Photoshop ze reduzéieren.

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

CSS Filtere ginn nëmmen aktuell a WebKit Browser ënnerstëtzt sou datt hir Notzung vun der additiver Natur soll sinn, net ofhängeg. Liest méi hei.

Bild Ersatz

Text mat Biller ersat gëtt et scho laang. Leider ginn et nach ëmmer Nodeeler, accessibilitéitstäteg, zu den neisten a sophistikéiertsten Ersatzstechniken. Awer zwee sinn zënter kuerzem un d'Liicht komm, déi extrem clever sinn, an eenzegaarteg an hiren eegene Rechter. Déi éischt gouf vum Scott Kellman geschriwwen:

h1 class = 'hide-text'> De Logo vun menger Websäit / h1>
.verstoppen-Text {
Text-Indent: 100%;
wäiss-Raum: Nowrap;
iwwerlaf: verstoppt;
}

Déi zweet gouf vum Nicolas Gallagher geschriwwen:

.verstoppen-Text {
Schrëft: 0/0 a;
Text-Schatten: kee;
Faarf: transparent;
}

Reaktiounsfäeger Video

Medien ze kréien an engem reaktiounsfäegen Ëmfeld korrekt ze moossen kann usprochsvoll sinn. Mat ëmmer méi Websäiten, déi adaptiven Design respektéieren, ass et wichteg Elementer Dimensiounen an Aspekt Verhältnis richteg ze verschaffen.

Embedded Video war eng vun de méi usprochsvollen Mediatypen fir sech ze wénken wéinst der Aart a Weis wéi Drëtt Partei Servicer den Inhalt zerwéieren. Eng typesch YouTube Embed gesäit sou aus:

iframe Breet = "640" Héicht = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

D'i iframe Element enthält dann e Flash Objet oder en Embed Element. Benotzt eppes wéi iframe {maxwidth: 100%; } funktionnéiert net well déi verschachtelten Elementer net richteg änneren wann d'Breet ännert. Also, mir mussen Tricker maachen.

div>
iframe Breet = "640" Héicht = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

D'Iframe an engem aneren Element ze verpacken gëtt eis d'Kontroll déi mir brauchen fir richteg reaktiounsfäeg Funktionalitéit am Video ze addéieren.

.video {
Positioun: relativ;
padding-ënnen: 56,25%;
Héicht: 0;
iwwerlaf: verstoppt;
}
.video iframe,
.Video Objet,
.video embed {
Positioun: absolut;
uewen: 0;
lénks: 0;
Breet: 100%;
Héicht: 100%;
}

Astellung vum .video Wrapper säi Padding-Bottom: 56,25%; ass d'Magie an dëser Method. Padding benotzen heescht de Prozentsaz deen benotzt gëtt baséiert op der Breet vum Elterendeel; '56 .25% 'kreéiert en 16: 9 Aspekt Verhältnis. Maacht d'Mathematik selwer, wann Dir wëllt. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (dëst ass eise Prozent).

Funktionalitéit

Liicht Elementer auswielen

Mat der Popularitéit vun enger Zuel vu JavaScript Bibliothéiken (jQuery, zum Beispill), hunn den ECMAScript Comité an d'W3C Standards eng vun de Kärstécker vun de Funktionalitéitsentwéckler notéiert gebierteg - gutt Elementauswiel. Methode wéi getElementByID () a getElementByClassName () ware séier awer net sou flexibel a robust wéi d'Selector-Motoren aus der Entwéckler-Community; querySelectorAll () war de Standardkierper Wee fir eppes vun där Flexibilitéit an enger natierlecher Selektormethod ze imitéieren.

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

querySelectorAll () ka méi wéi a gemëscht Selekter weiderginn. Liest méi iwwer dëst.

Schafen nei Arrays

Iteréieren iwwer eng Array ass eppes wat midd ass ze schreiwen. Schreiwe a schreiwen fir () Schläifen ass net lëschteg. An der JS Versioun 1.6 ass d'Kaart () Methode gelant fir en einfachen Wee z'ënnerstëtzen an en neie Array vun engem aneren z'erstellen.

var Leit = ['Heather', 'James', 'Kari', 'Kevin'];
var welkomm = people.map (Funktioun (Numm) {
zréckgoen 'Salut' + Numm + '!';
});

Dëse Code auszeféieren, wa mir géifen console.log (wëllkomm) Dir gesitt Wëllkomm ass en neien Array ['Salut Heather!', 'Salut James!', 'Salut Kari!', 'Salut Kevin!' ].

Propper Dokument a Fënster Objete botzen

Drëtt JavaScript JavaScript Bibliothéiken sinn ufälleg fir mat natierlechen Dokument- a Fënsterobjekter ze messen. Dëst kann e Problem fir aner Drëtt Partei Bibliothéiken sinn, an den Entwéckler abegraff se. Als eng vun de Parteien, gitt sécher datt Dir mat enger propperer Versioun vu béiden Objete schafft andeems Dir eng nei Instanz vun hinnen erstellt. De beschte Wee dëst ze maachen ass andeems en en Iframe Element erstellt, en an d'DOM setzt an déi nei Instanze vun dësen Objete späichert.

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

Och wann et grouss Verbesserunge vum Web Stack gi sinn, ass weiderhin eis Technologie Suite ofzeschléissen an sophistikéiert fir d'Erausfuerderungen ze treffen déi mir am Layout, Stil a Funktionalitéit vum Projet hunn, ass ëmmer nach immens wichteg. Fir e gutt Ökosystem vu Wuesstem ze erhalen, musse mir d'Standardskierper a Browserhändler encouragéieren, weider Fortschrëtter mat neie Spezifikatiounen an innovative Feature-Implementéierungen ze maachen, wärend mir eis eege Wësse mat aneren Entwéckler an Designer deelen Méi Abléck, manner Hacks.

Den Darcy Clarke ass e preisgekréinten Entwéckler, Matgrënner vu WordPress Theme Firma Themify an deeglechen Deal Aggregator DealPage, a Member vum jQuery Team. Hie schafft bei Polar Mobile als Senior UX Entwéckler.