Sollen alle Präsentationsbilder in CSS definiert sein?

Ich habe (X) HTML & CSS kürzlich gelernt, und eines der wichtigsten Prinzipien ist, dass HTML für Struktur und CSS für die Präsentation ist.Sollen alle Präsentationsbilder in CSS definiert sein?

In diesem Sinne scheint es mir, dass eine gute Anzahl von Bildern auf den meisten Seiten nur zur Präsentation und als solche in der CSS sein soll (mit einem div oder span, um sie im HTML zu halten) - zum Beispiel Logos, Headerbilder, Hintergründe.

Während die Beispiele in meinem Buch einige Bilder in CSS stellen, sind sie immer noch häufig im HTML. (Ich spreche nur von "Präsentationsbildern", nicht von "strukturellen" Bildern, die ein wesentlicher Bestandteil des Inhalts sind, z. B. Fotos auf einer Fotoseite).

Sollen alle solche Bilder in CSS sein? Oder gibt es technische oder logische Gründe, sie im HTML zu behalten?

Danke, Grant-

Quelle

2010-06-16 Grant Crofton

Schöne Frage. Ich habe mich von Zeit zu Zeit selbst gefragt. Im Allgemeinen halte ich alles im CSS, wenn es nicht seitenspezifisch ist (außer Bildschaltflächen/Links), obwohl ich nicht weiß, wie man mit Dingen wie Logografiken umgeht. – strager

Logos sind nicht präsentativ. Sie kommunizieren Informationen. – Quentin

Es ist ein fairer Punkt, Logos sind wahrscheinlich in den meisten Fällen nicht nur Präsentation. Aber ich denke, der Punkt der Fragen ist immer noch gültig. –

Wenn ein Bild ist "Inhalt" sagen in einem Zeitungsartikel, das redaktionelle Bild, dann verwenden Sie img-Tag. Wenn es Teil Ihrer Benutzeroberfläche ist, Thema oder Haut oder was auch immer der Name ist, dann stellen Sie es ja CSS.

Literaturhinweise

Designing with Web Standards (Zeldman)
Bullet Proof Web Design (Dan Cederholm)
CSS Mastery (Andy Clark, Andy Budd, Cameron Moll)

Quelle

2010-06-16 10:43:40 redben

Ich nehme an, dass mit "UI" nur der dekorative Teil der Benutzeroberfläche gemeint ist. Wenn zum Beispiel Bilder als Links verwendet werden, sollten diese in HTML sein. Nur Bilder, die rein dekorativ und unbedeutend für den Inhalt sind, sollten in CSS eingefügt werden. – PauliL

Ich denke, das eigentliche Problem wird dann entscheiden, was Inhalt ist. Zum Beispiel mache ich eine Geschenkeliste für eine Hochzeit, die einige Bilder von Gegenständen enthält - nicht ein Kernstück des Inhalts, aber auch mehr als nur Dekoration. Jedenfalls bestätigt das ziemlich genau, was ich ursprünglich dachte, und scheint der populäre Vorschlag zu sein, also bekommst du die Antwort! –

Ein Grund, diese Bilder in CSS setzen könnte verschiedenen Browser von der gleichen Website, nur durch eine Änderung der CSS zu dienen sein: zum Beispiel, wenn Sie eine mobile/embedded/Tasche erfassen Browser können Sie ihnen den gleichen HTML aber mit einem CSS geben, das keine Bilder enthält.

Quelle

2010-06-16 10:29:31 ChrisW

Sie können jedoch '' none; 'auf einem Bild mit CSS anzeigen. – strager

Die src-Eigenschaft eines img-Tags ist gemäß HTML 4.01/XHTML 1.0 DTD erforderlich. Deshalb sollte es immer im HTML enthalten sein.

Sie können es im CSS für Skining-Zwecke angeben, aber die meisten Bilder sind in den meisten Fällen statisch und nicht veränderlich, daher ist das Einfügen in CSS ein unnötiger Schritt.

Quelle

2010-06-16 10:31:03

Aber wie wäre es, den img-Tag komplett zu belassen und nur einen Bereich zu haben, der mit einem Bild in CSS gefüllt wurde? Da bestimmte Bilder nur zur Dekoration dienen, scheint dies der HTML/CSS-Split zu sein. Auf diese Weise können Sie, wie von ChrisW vorgeschlagen, je nach Art des Betrachters ein anderes Bild oder kein Bild haben. –

Sie können, aber es ist nur um das Image-Tag neu zu erfinden, um ehrlich zu sein. Sie können auch (ich denke) keinen alternativen Text verwenden, der für die Zugänglichkeit wichtig sein kann. –

Ich legte sie, wenn möglich, zu CSS. Ein Grund ist, dass ich denke, dass sie dort gehören, wie du erwähnt hast, und der andere ist die Möglichkeit, Sprites zu verwenden. Dies kann die Ladezeit Ihrer Seite erheblich reduzieren.

Quelle

2010-06-16 10:31:55

Nun, es kommt darauf an. Wenn Sie beispielsweise einige Effekte ausführen möchten, während sich die Maus über einem Bild befindet, muss es sich im HTML befinden. Wenn Sie das Bild in den HTML-Code einfügen, können Sie es freier als in CSS positionieren. Soweit ich weiß, werden CSS-Bilder auch nicht gecrawlt (Sie können Interesse daran haben, dass das Logo Ihres Unternehmens von Suchern gecrawlt wird).

Wenn Sie über Zugänglichkeit nachdenken, können die eingebetteten HTML-Bilder eine Alt- und Titelinformation haben. Wenn Sie zum Beispiel die Maus über das Logo Ihrer Firma halten, könnte der Browser das Motto Ihrer Firma anzeigen, wenn Sie ihn mit dem Attribut title = "motto" in das img-Tag einbetten. Sie können das nicht mit CSS machen.

Auch Leute werden verwendet, um Bilder in den HTML-Code und nicht in das CSS zu stellen, und Verhaltensweisen sind schwer zu ändern.

In Abhängigkeit von Ihren Bedürfnissen ist CSS nicht flexibel genug, um Ihre Anforderungen zu erfüllen und Sie sollten die Bilder in den HTML-Code einfügen. Wenn CSS jedoch Ihren Anforderungen für UI-Bilder entspricht, ist CSS die bessere Idee.

Quelle

2010-06-16 10:43:45 Matachana

können Sie Überrollen mit CSS tun. Eigentlich hast du mehr Möglichkeiten mit CSS. Bei CSS-Sprites haben Sie zum Beispiel ein Bild, das den Normal- und den Hover-Status enthält, gestapelt. In css a: hover, ändern Sie einfach die Position des Hintergrundbildes et voila. > CSS ist nicht flexibel genug ... fraglich. Es gibt viele gute Bücher über diese, "CSS Mastery" zum Beispiel – redben

Ja, wir stimmen in den Rollover. Wenn Sie den Rollover nur auf dem Bild ausführen möchten, sollten Sie img: hover verwenden und das img-Tag muss im (X) HTML vorhanden sein. Wenn Sie ein Titelattribut in ein Bild einfügen möchten, gibt es keine Möglichkeit, dies in CSS zu tun. Daher ist CSS für diese Aufgabe nicht flexibel genug. CSS ist im Allgemeinen sehr flexibel, aber für einige spezifische Aufgaben ist es nicht flexibel genug. – Matachana

Nein, was ich mit Rollover meine, ist Dinge wie Menü Rollover, nicht img-Tag verwenden. ex. item 1 dann in css hättest du so etwas wie #item {background: url (...) oben links;} a.item: schweben {background-position: bottm left;} Jetzt einen Titel auf ein Bild setzen bedeutet, dass das Bild Inhalt ist, dann sollte es in HTML mit dem Inhalt geladen werden, nicht von CSS. Dies hat nichts damit zu tun, dass CSS für bestimmte Aufgaben unflexibel ist. Zumindest denke ich das. – redben

Manchmal verhindert das Laden von UI-Bildern mit CSS auch, dass die Benutzer beim Speichern einer Seite die UI-Bilder auf ihre Laufwerke herunterladen.

Aber natürlich gibt es andere Möglichkeiten, sie zu speichern, aber nur einen Punkt hinzuzufügen.

Und Browser neigen dazu, CSS mehr als HTML zu priorisieren, daher kann das Laden von Bildern über CSS im Vergleich zu HTML etwas schneller sein.

Quelle

2010-06-16 11:40:42 Starx

Sollen alle Präsentationsbilder in CSS definiert sein?

Antwort

Verwandte Themen