Autor/in: Dennis Stricker
It’s #FrontendFriday – DOM vs Virtual DOM vs Shadow DOM
Hallo Liebe FrontendFriday Leser.
Um euch am Anfang maximal zu verwirren, gleich mal eine schöne Einstiegsfrage:
Was ist der Unterschied zwischen DOM und HTML DOM?
Es grenzt an Haarspalterei, aber es gibt tatsächlich einen Unterschied. DOM allein stehend ist ein W3C-Standard, welcher definiert, wie auf ein Dokument zugegriffen werden kann. Der W3C-DOM-Standard wird mit Core DOM (für alle Dokumententypen), XML DOM und HTML-DOM in drei Teile aufgeteilt. Das HTML DOM ist somit das Objektmodell und die Schnittstelle für das HTML, welches jedes HTML-Element als Objekt mit allen Eigenschaften, Methoden und Ereignissen definiert. Somit ist das HTML DOM der Standard, um HTML-Elemente zu ändern, hinzuzufügen oder zu löschen. Im folgenden Beitrag wird stellvertretend für den HTML DOM der DOM ausdruck verwendet.
It’s #FrontendFriday – Antike HTML-Elemente
Vor langer, langer Zeit im Erdmittelalter existierten sie, die antiken HTML-Elemente. Diese schon fast vergessenen Elemente sind für browserübergreifende Anforderungen besonders interessant, denn sie werden fast von allen Browsern (teils sogar IE9) unterstützt! Der folgende Beitrag soll den Leser für die Verwendung nativer Dino-Elemente sensibilisieren.
Das HTML “dl” Element
Das HTML Description List Element sieht den Inhalt einer Liste von Begriffspaaren sowie Beschreibungen vor und wird normalerweise für die Implementierung von Schlüsselwertpaaren genutzt. Die Liste kann “dt” sowie “dd” Elemente enthalten.
Das HTML “dt” Element
Das HTML Definition Term Element identifiziert einen Begriff innerhalb einer Description List und kommt in der Regel als Kindelement eines “dl” Elements vor.
Das HTML “dd” Element
Das Kindelement muss innerhalb einer Description List auftreten und einem “dt” Element folgen. “dd” steht für das HTML Description Element.
- Sheldon Cooper
- “Ich mag Züge”
- Albert Einstein
- “Comments must start with a space”
Das HTML “datalist” Element
Das “datalist” Element enthält eine Liste von “option” Elementen, die mögliche Optionen für den Wert eines anderen Elementes repräsentieren und wird in im Verbund mit einem “input” Tag verwendet.
Das HTML “details” und “summary” Tags
Mit dem “details” Tag können dem User zusätzliche Informationen sichtbar gemacht werden. Das Ganze wird im Verbund mit dem HTML “summary” Element verwendet.
Klick mich
Herzlichen Glückwunsch! Du hast einen Trojaner erhalten.
Das HTML “hr” Element
Der Horizontal Ruler ist zur Darstellung von thematischen Brüchen gedacht und wird als waagerechte Linie dargestellt.
Heute ist Freitag
Morgen ist Samstag
Das HTML “optgroup” Element
In einem Webformular erstellt das “optgroup” HTML Element eine Gruppe von Optionen innerhalb eines “select” Elements.
Das HTML “address” Tag
Dieses Tag kann zur Darstellung von Kontaktinformationen genutzt werden.
Fazit:
Es gibt eine Reihe von kaum benutzten HTML Tags. In diesem Beitrag sind einige aufgezählt. Die meisten Entwickler heutzutage benutzen die “self-build-div-jquery-Konstrukte”, obwohl es native HTML Elemente dafür gibt. Folgend einige Gründe warum man lieber auf native HTML Elemente zurückgreifen sollte:
Native HTML Elemente werden von allen Browsern, mobile eingeschlossen, unterstützt. Nur HTML kein CSS oder JS.
Semantisches HTML ist W3C Konform und meiner Meinung nach schöner. Stichwort “Clean Code”.
Sie funktionieren ohne Frameworks/Libraries von Drittanbietern und sind somit performanter und einfacher wartbar.
Quellen:
Alle Beschreibungen aus:
https://developer.mozilla.org/de/
Wow, es gibt sogar ein Progress Tag
Das HTML “progress” Element wird benutzt, um den Fortschritt einer Aufgabe zu visualisieren.
Welche Rolle spielt das Human Interface Design (HMI) für die autonome Logistik?
Der Hype rund um das autonome Fahren beschäftigt mittlerweile auch die Logistikbranche. Führende Automobilzulieferer investieren bereits zweistellige Milliardensummen in dieses Zukunftsfeld. So präsentierte sich z.B. die ZF Friedrichshafen AG letztes Jahr auf der IAA für Nutzfahrzeuge in Hannover mit intelligenter, vernetzter Fahrzeugtechnik, die logistische Prozesse effizienter und sicherer machen soll. Hierzu gehören unter anderem Vorgänge wie das „autonome Satteln“ oder das anspruchsvolle Ab-, Auf- sowie Umsetzen von Containern. Aber auch das Überwachen von Vorgängen über Echtzeitvisualisierungen und die Interaktion mit den Fahrzeugen über spezielle Human Interface Designs (HMIs) sowie Augmented Reality Lösungen spielen hier eine Rolle.Mehr
It’s #FrontendFriday – Einheiten in CSS
CSS bietet eine Reihe unterschiedlicher, typografischer Einheiten. Grundsätzlich wird zwischen relativen und absoluten Maßeinheiten unterschieden. Solche Größen bemessen Elemente eines Layouts, Abstände sowie Schriftgrade. Vor allem im Bereich des „Responsive Webdesigns“ ist das grundlegende Verständnis, über die Funktionsweise der CSS-Längenangaben, entscheidend. Der folgende Beitrag konzentriert sich nur auf die in CSS (Cascading Style Sheets) verwendete Einheiten für virtuelle Medien. Buchschriftsätze sind zusätzlich aus dem Betrachtungsfokus ausgenommen.
Browser Cache richtig löschen – aber wie?
In Ausnahmefällen kann es vorkommen, dass geänderte Inhalte einer neuen Version einer Webapplikation nicht direkt sichtbar sind. Die Erklärung dafür ist fast immer dieselbe: Weil der Browser Cache nicht geleert wurde. Dieser Beitrag liefert eine kurze Anleitung und geht dem Thema „Browser Cache leeren“ auf den Grund.Mehr
