Was ist der Unterschied zwischen Breite/Höhe in CSS und Breite/Höhe HTML Attributen?

Einige HTML-Elemente akzeptieren width und height als Attribute. Andere nicht. Zum Beispiel

<!-- valid, works, is a good idea -->
<img width="500" height="400" src="..." alt="...">
<iframe width="600" height="400" src="..."></iframe>
<svg width="20" height="20"></svg>

<!-- not valid, doesn't work, not a good idea -->
<div width="40" height="40"></div>
<span width="100" height="10"></span>

Diese Attribute werden manchmal als präsentationsbezogene Attribute bezeichnet. Das Wichtigste, was man über sie wissen muss, ist, dass sie von jeder anderen Styling-Information überschrieben werden. Das macht sie ideal als Fallback.

Wenn also CSS geladen wird und eine Deklaration wie diese hat

img {
  width: 400px;
}

... wird dies width="500" im <img>-Tag darüber überschreiben. Präsentationsbezogene Attribute sind die schwächsten Arten von Styling, daher werden sie von jedem CSS überschrieben, selbst von Selektoren mit sehr geringer Spezifität.

Was vielleicht ein wenig verwirrend ist, ist, dass präsentationsbezogene Attribute eine hohe Spezifität zu haben scheinen. Diese Inline-Styles zum Beispiel sind sehr stark

<img style="width: 500px; height: 400px;" src="..." alt="...">

Durch die Verwendung eines Inline-Styles (der auf jedem Element funktioniert, nicht nur auf ausgewählten wenigen) sind wir vom schwächsten Weg, Breite und Höhe anzuwenden, zu einem der stärksten übergegangen. Reguläres CSS wird dies nicht überschreiben, unabhängig von der Stärke des Selektors. Wenn wir sie aus CSS überschreiben müssen, benötigen wir !important Regeln.

img {
  width: 400px !important;
}

Zur Wiederholung: Präsentationsbezogene Attribute bei Elementen, die sie akzeptieren (z. B. <img>, <iframe>, <canvas>, <svg>, <video>), sind eine gute Idee. Sie sind Fallback-Größen- und Größeninformationen, während die Seite geladen wird. Sie sind besonders nützlich für <svg>, die sich möglicherweise riesig und auf unangenehme Weise dimensionieren, wenn sie einen viewBox haben und keine Breiten- und Höhenattribute. Browser führen sogar spezielle Magie mit Bildern durch, bei denen die Breite und Höhe verwendet werden, um den korrekten, vom Seitenverhältnis abgeleiteten Platz in einer Situation mit flüssigen Bildern zu reservieren, was großartig für ein reibungsloses Ladeerlebnis der Seite ist.

Aber präsentationsbezogene Attribute sind auch schwach und werden normalerweise im CSS überschrieben.