Grundlegende HTML-, CSS- und JavaScript-Techniken

Autor: Monica Porter

Erstelldatum: 22 Marsch 2021

Aktualisierungsdatum: 17 Kann 2024

Inhalt

Layout
Clearfix
Box-Dimensionierung
Mehrspaltig
Berechnungen
Stil
Transparenz
Filter
Bildersetzung
Reaktionsschnelles Video
Funktionalität
Einfache Auswahl von Elementen
Neue Arrays erstellen
Bereinigen Sie Dokument- und Fensterobjekte
Mochte dies? Lese das!

Dieser Artikel erschien erstmals in Ausgabe 234 des .net-Magazins - dem weltweit meistverkauften Magazin für Webdesigner und -entwickler.

Eine Technik ist im Kern eine Möglichkeit, eine Aufgabe auszuführen, und als Frontend-Entwickler und Designer haben wir viele Aufgaben. Trotzdem vergessen wir oft, wie sehr sich diese Landschaft verändert hat. Von 2002 bis 2010 war unsere Community mit aufgeblähtem Code und Ressourcen überfüllt, was die Leistung und Wartbarkeit beeinträchtigte. Um dies zu überwinden, haben wir eine Reihe von Tipps, Tricks und Hacks erstellt, die wir als "Technik" bezeichnet haben. Wir haben immer noch Aufgaben erledigt, nur nicht auf die effizienteste Weise.

In den letzten Jahren wurden bei einer 360-Grad-Prüfung bessere Standards und Standardimplementierungen zum Leben erweckt, sodass wir als Community neuere und fortschrittlichere „Techniken“ entwickeln können. Diese neue Landschaft wird als „modernes Web“ bezeichnet.

Mit dem Stagnieren und Verwirren von „Web 2.0“ wird auch das „moderne Web“ stagnieren. Gib der Sache Zeit. Das heißt, wir können den Begriff vorerst verwenden und missbrauchen, solange ein gemeinsames Verständnis dessen besteht, was er darstellt.

Im Jahr 2010 landete die HTML5-Spezifikation und bot eine brandneue, semi-standardisierte Webumgebung. Browser wie Opera, Firefox, Chrome und Safari haben diese neue Welle angenommen und ihre Entwicklerteams an neue Grenzen der Standardimplementierung und API-Erkundung gebracht. Um Ihnen eine Vorstellung davon zu geben, wie „integriert“ diese Browser sind, lesen Sie die Visualisierungen von www.html5readiness.com zum Ändern der HTML5-Unterstützung.

Machen Sie sich keine Sorgen über die mangelnde Unterstützung in Internet Explorer. Wir können dies dank Google Chrome Frame bekämpfen. Seit der Einführung durch Google im Jahr 2010 ist es der bevorzugte Unterstützungsmechanismus für Internet Explorer. Alle Versionen von IE können mit Chrome Frame als Ziel ausgewählt werden. Dadurch wird ein neuer Benutzer aufgefordert, ein Plug-In herunterzuladen, mit dem angemeldete Websites mit einer leichtgewichtigen Version von Chrome im IE gerendert werden. Um Chrome Frame zu implementieren, fügen wir das folgende meta> -Tag in das head> -Tag unserer Site ein.

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

Von hier aus können wir IE-Benutzer auffordern, das Plug-In, falls es noch nicht installiert ist, mithilfe von JavaScript herunterzuladen:

script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
Skript>
window.onload = function () {
CFInstall.check ({
Modus: "Overlay",
Ziel: "http://www.yourdomain.com"
});
};
/ script>

Das Ziel kann so eingestellt werden, dass der Benutzer nach der Installation des Plug-Ins an einen bestimmten Link gesendet wird. Ein Wort der Vorsicht: Obwohl Chrome Frame eine Methode bietet, die ausschließlich für wirklich moderne Browser entwickelt werden darf, dürfen wir nicht vergessen, dass der Benutzer die Möglichkeit hat, das Plug-In nicht herunterzuladen, wenn er dies nicht möchte. Wenn dies nicht der Fall ist und Sie die eine oder andere Version des IE unterstützen müssen, müssen Sie mehr Zeit darauf verwenden, herauszufinden, was Sie mit Ihren Erfahrungen browserübergreifend bereitstellen können und was nicht.

Mit diesem Code, der wesentlich gleiche Wettbewerbsbedingungen für die Entwicklung auf dem modernen Web-Stack bietet, können wir beruhigt vorankommen. Möglicherweise müssen Sie eine Reihe von browserspezifischen Hacks erstellen, um Ihre Website browserübergreifend zu strukturieren, unzählige leere Elemente für Ihre geschnittenen Bilder zu erstellen oder sogar übermäßig ausführlichen oder redundanten JavaScript-Code zu schreiben, um den zu erhalten einfachste Funktionalität zu arbeiten. All diese Schmerzen sind in gewissem Sinne die gleichen Probleme, über die wir uns heute Sorgen machen. Wir kämpfen immer noch um mehr Kontrolle und bessere Werkzeuge, um Layout, Stil und Funktionalität zu bekämpfen, aber auf einer Ebene, die ausgereift ist.

Layout

Clearfix

Das Floating eines Elements wurde bereits in CSS 2.1 eingeführt, erwies sich jedoch nie als die von uns erhoffte Komplettlösung. Eines der größten Probleme bestand darin, die Dimensionen eines übergeordneten Elements beizubehalten, wenn ein untergeordnetes Element schwebte. Um dies zu beheben, wurde die Clearfix-Technik erstellt.

Nehmen Sie den folgenden HTML-Code:

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

Diese Technik wurde von Nicolas Gallagher geschrieben:

.clearfix: vorher,
.clearfix: nach {
Inhalt: "";
Anzeige: Tabelle;
}
.clearfix: nach {
Lösche beide;
}
.clearfix {
* Zoom: 1;
}

Wenn Sie HTML5Boilerplate verwenden, um Ihre Projekte zu starten, ist diese Version der Clearfix-Technik bereits integriert.

Box-Dimensionierung

Jahrelang haben Entwickler darüber diskutiert, welche Implementierung des Box-Modells sinnvoller ist. Der Modus "Macken gegen Standards" bedeutete wirklich: "Sollten sich die Abmessungen eines Elements nach dem Festlegen ändern, wenn Rahmen und Auffüllungen angewendet werden oder nicht".

Es besteht mittlerweile weitgehend Einigkeit darüber, dass es sinnvoller ist, Ränder und Polsterungen vom verfügbaren Platz innerhalb eines Elements zu entfernen und nicht die Breite oder Höhe des Elements zu erhöhen. Die Debatte wurde mit der weit verbreiteten Implementierung von Box-Sizing irrelevant gemacht. Der Browser nimmt seine Hinweise von Ihnen und nicht umgekehrt.

Von Chris Coyier und Paul Irish populär gemacht, kann eine umfassende Technik mit den folgenden Methoden implementiert werden:

* {
-webkit-box-sizing: border-box;
-Moz-Box-Größe: Border-Box;
Box-Größe: Border-Box;
}

Die Verwendung des Selektors * in CSS wurde aufgrund möglicher Leistungseinbußen diskutiert. Diese Art von Behauptungen ist leichtfertig, wenn Sie nicht alle anderen Aspekte Ihrer Website / App überoptimieren. Wenn Sie das Rahmenfeld verwenden, fügt der Browser dem verfügbaren Speicherplatz Auffüllungen und Rahmen hinzu. Der "Standardmodus" kann verwendet werden, indem die Boxgröße auf "Content-Box" gesetzt wird.

Mehrspaltig

Das Web wurde stark von schriftlicher Form und Schrift inspiriert. Leider steckten wir in der Pergamentphase fest. Einige dieser Probleme spitzen sich mit den lang erwarteten Spezifikationen für Paged-Media- und CSS-Regionen zu. Die ersten Schritte zu mehr magazinartigen Layouts wurden jedoch unternommen, als Browser mit der Implementierung von CSS-Mehrspalten begannen. Der Code zum Erzeugen dieses Effekts ist ziemlich einfach:

p {
-webkit-column-count: 2;
-moz-Spaltenanzahl: 2;
Spaltenanzahl: 2;
}

Weitere Informationen zur mehrspaltigen CSS3-Spezifikation sowie zu einem JavaScript-Fallback, den Sie für jeden Browser ohne Unterstützung verwenden können, finden Sie im Blog von A List Apart.

Berechnungen

Das Berechnen von Abmessungen kann schwierig sein. Früher hatten wir keine Möglichkeit, Einheitenberechnungen durchzuführen, geschweige denn gemischte Einheitenberechnungen. Das hat sich dank calc geändert. Erstellen eines gepolsterten Effekts, der sich nicht auf die Breite der Anfangselemente auswirkt oder so etwas wie die Boxgröße verwendet: border-box; war bis vor kurzem nur durch Hinzufügen zusätzlicher enthaltener Elemente möglich.

.padded {
Rand: 0 Auto;
Position: relativ;
width: -webkit-calc (100% - (20px * 2));
Breite: -moz-calc (100% - (20px * 2));
Breite: berechnet (100% - (20px * 2));
}

calc () sorgt für die richtige Breitenberechnung basierend auf der übergeordneten Breite von .padded und minus einer definierten 20px-Polsterung. Ich habe dies für jede Seite meines Elements mit 2 multipliziert und das Element mithilfe der relativen Positionierung und eines automatischen Links- und Rechtsrandes zentriert.

Stil

Transparenz

Der richtige Stil eines Elements war immer abhängig von der Art der Tools, die uns in CSS zur Verfügung standen. Transparenz ist eine der ersten Unterstützungsvarianten, auf die Sie Anfang bis Mitte der 2000er Jahre stoßen würden.

Mit dem Aufkommen von HTML5 und gezielteren Standardanstrengungen verfügen Browser über eine Standardimplementierung der Opazitätseigenschaft und haben die Unterstützung von Alphakanälen gemäß der neuen Farbmodulspezifikation verfügbar gemacht. Dies schließt RGBA- und HSLA-Richtlinien ein.

ein {
Farbe: rgba (0,255,0,0,5);
Hintergrund: rgba (0,0,255,0,05);
Grenze: rgba (255,0,0,0,5);
}

Sie können RGBA- oder HSLA-Farben überall dort verwenden, wo Sie HEX-Werte finden. Es gibt auch eine erweiterte Liste von lustigen Farben mit definierten Namen, die Sie direkt in der Spezifikation überprüfen können. Diese sind nützlich, wenn Sie eine dynamische Mischung zwischen Elementen erstellen möchten.

Filter

CSS-Filter sind äußerst aufregend. Die Möglichkeit, das Erscheinungsbild von Elementen auf einer Seite dynamisch zu ändern, ohne dass Plug-Ins von Drittanbietern erforderlich sind, ist erstaunlich und trägt dazu bei, die in Photoshop verbrachte Zeit erheblich zu reduzieren.

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

CSS-Filter werden derzeit nur in WebKit-Browsern unterstützt, daher sollte ihre Verwendung additiv und nicht abhängig sein. Lesen Sie hier mehr.

Bildersetzung

Das Ersetzen von Text durch Bilder gibt es schon lange. Leider gibt es in Bezug auf die Zugänglichkeit immer noch Nachteile bei den neuesten und ausgefeiltesten Bildersatztechniken. In letzter Zeit sind jedoch zwei bekannt geworden, die äußerst klug und in ihren eigenen Rechten einzigartig sind. Der erste wurde von Scott Kellman geschrieben:

h1 class = "Text ausblenden"> Logo meiner Website / h1>
.Text verstecken {
Texteinzug: 100%;
Leerraum: Nowrap;
Überlauf versteckt;
}

Der zweite wurde von Nicolas Gallagher geschrieben:

.Text verstecken {
Schriftart: 0/0 a;
Textschatten: keine;
Farbe: transparent;
}

Reaktionsschnelles Video

Es kann schwierig sein, Medien in einer reaktionsschnellen Umgebung richtig zu skalieren. Bei immer mehr Websites, die das adaptive Design respektieren, ist es wichtig, die Abmessungen und das Seitenverhältnis der Elemente richtig zu handhaben.

Eingebettetes Video war aufgrund der Art und Weise, wie Dienste von Drittanbietern den Inhalt bereitstellen, einer der schwierigeren Medientypen. Eine typische YouTube-Einbettung sieht ungefähr so aus:

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

Das iframe-Element enthält dann ein Flash-Objekt oder ein Einbettungselement. Verwenden Sie so etwas wie iframe {maxwidth: 100%; } funktioniert nicht, da die Größe der verschachtelten Elemente nicht richtig geändert wird, wenn sich die Breite ändert. Also müssen wir ein paar Tricks machen.

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

Wenn Sie den Iframe in ein anderes Element einschließen, erhalten Sie die Kontrolle, die wir benötigen, um dem Video die richtige Reaktionsfunktionalität hinzuzufügen.

.Video {
Position: relativ;
Polsterboden: 56,25%;
Höhe: 0;
Überlauf versteckt;
}
.video iframe,
.video Objekt,
.video einbetten {
Position: absolut;
oben: 0;
links: 0;
Breite: 100%;
Höhe: 100%;
}

Einstellen des Polsterungsbodens des .video-Wrappers: 56,25%; ist die Magie in dieser Methode. Polsterung bedeutet, dass der verwendete Prozentsatz auf der Breite der Eltern basiert. Mit „56,25%“ wird ein Seitenverhältnis von 16: 9 erstellt. Rechnen Sie selbst, wenn Sie wollen. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (dies ist unser Prozentsatz).

Funktionalität

Einfache Auswahl von Elementen

Angesichts der Beliebtheit einer Reihe von JavaScript-Bibliotheken (z. B. jQuery) haben das ECMAScript-Komitee und die W3C-Standards festgestellt, dass eines der Kernelemente der Funktionsentwickler nativ fehlte - eine gute Elementauswahl. Methoden wie getElementByID () und getElementByClassName () waren schnell, aber nicht so flexibel und robust wie die Selector-Engines der Entwickler-Community. querySelectorAll () war die Methode des Standardkörpers, um einen Teil dieser Flexibilität in einer nativen Auswahlmethode nachzuahmen.

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

querySelectorAll () kann an mehrere und gemischte Selektoren übergeben werden. Lesen Sie mehr dazu.

Neue Arrays erstellen

Das Iterieren über ein Array ist etwas mühsam zu schreiben. Das Schreiben und Umschreiben von () - Schleifen macht keinen Spaß. In JS Version 1.6 landete die map () -Methode und bot Unterstützung für eine einfache Möglichkeit, ein neues Array zu durchlaufen und daraus ein neues zu erstellen.

var people = ["Heather", "James", "Kari", "Kevin"];
var begrüßt = people.map (Funktion (Name) {
return ’Hi’ + name + ’!’;
});

Wenn Sie diesen Code ausführen und "console.log" (Begrüßung) verwenden, wird "Begrüßung" angezeigt. Es handelt sich um ein neues Array ["Hi Heather!", "Hi James!", "Hi Kari!", "Hi Kevin!" ].

Bereinigen Sie Dokument- und Fensterobjekte

JavaScript-Bibliotheken von Drittanbietern neigen dazu, mit nativen Dokument- und Fensterobjekten herumzuspielen. Dies kann ein Problem für andere Bibliotheken von Drittanbietern und den Entwickler einschließlich dieser sein. Stellen Sie als beide Parteien sicher, dass Sie mit einer sauberen Version beider Objekte arbeiten, indem Sie eine neue Instanz davon erstellen. Der beste Weg, dies zu tun, besteht darin, ein iframe-Element zu erstellen, es in das DOM einzufügen und die neuen Instanzen dieser Objekte zu speichern.

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

Obwohl der Web-Stack stark verbessert wurde, ist es immer noch von enormer Bedeutung, unsere Technologie-Suite weiter abzurunden und zu verfeinern, um den Herausforderungen zu begegnen, denen wir uns in Bezug auf Layout, Stil und Funktionalität unseres Projekts gegenübersehen. Um ein gutes Wachstumsökosystem aufrechtzuerhalten, müssen wir Normungsgremien und Browseranbieter ermutigen, mit neuen Spezifikationen und innovativen Funktionsimplementierungen fortzufahren und gleichzeitig unser eigenes Wissen mit anderen Entwicklern und Designern zu teilen. Mehr Einblicke, weniger Hacks.

Darcy Clarke ist ein preisgekrönter Entwickler, Mitbegründer der WordPress-Themenfirma Themify und Daily Deal Aggregator DealPage sowie Mitglied des jQuery-Teams. Er arbeitet bei Polar Mobile als leitender UX-Entwickler.