Zwei Fragen bezüglich HTML5 und Performance

[Cicèro]

Hey :)


Ich hätte mal zwei Fragen, die mich seit heute Mittag schon etwas quälen und habe auch keine Antwort auf meine Frage gefunden. Vielleicht kann mir hier ja jemand helfen. Ich beschäftige mich jetzt seit fast einem Jahr mit HTML und CSS und habe bis jetzt immer ausschließlich nur mit Div's gearbeitet. Sprich: <Div id="header">,<Div id="footer"> etc.

Doch jetzt kommt meine erste Frage. Mit HTML 5 kamen neue Tags dazu, die diese divs ersetzen sollen, wie header, footer, article etc. und meine Frage lautet, ob diese Tags einen Vorteil bzw. Nachteil mit sich bringen, bis auf den Teil, mit denen sich diese Tags den Quellcode leichter anzuschauen ermöglichen.



Und meine zweite Frage wäre, ob man ein Performance Unterschied bemerkt, wenn man z.B. den header-tag mit einem ID direkt in CSS ansprechen würde, mit einer Klasse oder nur allgemein alle header?



Mit freundlichen Grüßen
Cicèro

 

[Tronjer]

Doch jetzt kommt meine erste Frage. Mit HTML 5 kamen neue Tags dazu, die diese divs ersetzen sollen, wie header, footer, article etc. und meine Frage lautet, ob diese Tags einen Vorteil bzw. Nachteil mit sich bringen, bis auf den Teil, mit denen sich diese Tags den Quellcode leichter anzuschauen ermöglichen.

Der Vorteil liegt in der Semantik. Die neuen Tags machen es für Suchmaschinen einfacher, die Bedeutung von Webinhalten zu verstehen und diese zu klassifizieren.

Und meine zweite Frage wäre, ob man ein Performance Unterschied bemerkt, wenn man z.B. den header-tag mit einem ID direkt in CSS ansprechen würde, mit einer Klasse oder nur allgemein alle header?

Bezüglich Performance wirst du da keinen Unterschied bemerken, aber mit IDs sollte man trotzdem sparsam umgehen. Dafür gibt es zwei Gründe. Der erste liegt darin, dass IDs unique sind, und wenn man sie versehentlich mehrfach auf einer Seite verwendet, wirft das Validierungsfehler. Der zweite Grund hat etwas mit CSS Specifities zu tun. CSS-Selektoren sind keinesfalls gleichwertig, sondern besitzen eine Gewichtung, die sich in Zahlenwerten ausdrücken lässt. Für HTML-Elemente und Pseudo-Elemente liegt dieser Wert bei 1, für Klassen und Pseudoklassen bei 10, für IDs bei 100 und für Inline-Styles bei 1000. Die 1000 lässt sich nur noch mit !important überschreiben. Wenn du ein Div per CSS über ID und Klasse ansprichst und beiden die selben Attribute mit unterschiedlichen Werten gibst, wird die ID stärker gewichtet. In kleinen Projekten mit wenigen Hundert Zeilen CSS ist so etwas noch nachvollziehbar, aber in größeren, welche über die Zeit wachsen, verliert man irgendwann den Überblick.

 

[Cicèro]

Eine Frage noch. Wenn ich jetzt für meine Website doch so ein header-tag benutzen sollte. Was sehen die Personen, die eine ältere Browserversion benutzen, die keine HTML Tags verstehen?
Würde der noch weiterlaufen? Ich denke nicht, oder?

 

[Tronjer]

Du kannst die neuen Tags für ältere Browser theoretisch per JavaScript im HTML anmelden und und im CSS als Blockelemente definieren. Oder du verwendest entsprechende Frameworks, die das bereits integriert haben, wie bsw. Boilerplate in Verbindung mit Modernizr oder Bootstrap.