CSS-Tipps_CSS/HTML

Wenn Sie CSS zum Erstellen einer Website verwenden, müssen Sie auf verschiedene Layoutprobleme gestoßen sein und waren am Ende möglicherweise überfordert. Der Zweck dieses Artikels besteht darin, Ihren Designprozess zu vereinfachen und Ihnen eine schnelle Referenz zu bieten, wenn Sie nicht weiterkommen.

Im Zweifelsfall zuerst überprüfen
Beim Debuggen kann die erste Überprüfung Ihres Codes oft viel Ärger ersparen. Fehlerhaftes XHTML/CSS kann viele Layoutfehler verursachen.
Schreiben und testen Sie Ihren CSS-Code im fortschrittlichsten Browser, bevor Sie ihn in anderen Browsern testen, nicht umgekehrt.
Wenn Sie in einem defekten Browser schreiben und testen, muss sich Ihr Code auf die schlechte Anzeige dieses defekten Browsers verlassen und ihn dann in einem standardkonformen Browser testen und feststellen, dass die Anzeige manchmal „ungewöhnlich“ ist wird sehr frustriert sein. Stattdessen sollten Sie zunächst Ihren Code aufpolieren und dann versuchen, ihn für Browser auf niedrigeren Ebenen vorzubereiten. Auf diese Weise ist Ihr Code von Anfang an standardkonform und Sie müssen sich keine Gedanken über die Unterstützung anderer Browser machen. Natürlich sind die aktuellen standardkonformen Browser zweifellos Mozilla, Safari oder Opera.

Stellen Sie sicher, dass der gewünschte Effekt tatsächlich vorhanden ist
Viele browserspezifische CSS-Erweiterungen sind in offiziellen Standards nicht vorhanden. Wenn Sie Stile für Filter oder Bildlaufleisten angeben, verwenden Sie privaten Code, der in keinem anderen Browser als dem IE Auswirkungen hat. Wenn Ihnen der Validator mitteilt, dass der Code nicht definiert ist, verwenden Sie höchstwahrscheinlich private Stile, was es schwierig macht, in verschiedenen Browsern konsistente Ergebnisse zu erzielen.

Wenn Sie in Ihrem Layout schwebende Objekte verwenden müssen, vergessen Sie nicht, rechtzeitig das Clear-Attribut zu verwenden.
Schwebende Objekte mögen einfach erscheinen, aber es ist schwierig und nicht immer das, was Sie wollen. Wenn Sie feststellen, dass Floats über die Grenzen des Containers hinausragen oder nicht wie erwartet angezeigt werden, überprüfen Sie, ob Ihre Erwartungen richtig sind. Zu diesem Problem lesen Sie bitte das Tutorial von Eric Meyer.

Ränderverschmelzung: Polsterung oder Rand können verwendet werden, um dies zu vermeiden.
Sie werden möglicherweise von zusätzlichen (oder unerwünschten) Leerräumen überwältigt. Wenn Sie Ränder verwenden, kann die Randzusammenführung die Ursache des Problems sein. Die Erklärung von Andy Budd könnte hilfreich sein.

Vermeiden Sie die gleichzeitige Anwendung von Polsterung/Rand und fester Breite auf dasselbe Element.
Das Blockmodell von IE5 ist falsch und macht Dinge kaputt. Hierfür gibt es Workarounds, aber es ist besser, dieses Problem zu umgehen und den Abstand für das übergeordnete Element anzugeben, wenn die Breite des untergeordneten Elements festgelegt ist.

Vermeiden Sie das Flackern von Inhalten mit nicht spezifiziertem Stil unter dem IE.
Wenn Sie sich bei der Eingabe externer Stylesheets nur auf @import verlassen, werden Sie früher oder später feststellen, dass der IE ein „Flacker“-Problem hat. Unformatierter HTML-Text wird kurz angezeigt, bevor CSS-Stile angewendet werden. Dies kann vermieden werden.

Erwarten Sie nicht, dass die Mindestbreite im IE nützlich ist.
IE unterstützt dies nicht, behandelt die Breite jedoch als Mindestbreite, sodass durch einige IE-Filtertechniken der gleiche Endeffekt erzielt werden kann.

Verwenden Sie CSS-Filter als letzten Ausweg CSS-Techniken und -Filter ermöglichen es Ihnen, bestimmte Elemente selektiv anzuwenden (oder nicht auf sie anzuwenden). Wo immer möglich, sollten Sie standardmäßige browserübergreifende Lösungen finden, um den gewünschten Effekt zu erzielen, anstatt ständig auf Filter zurückzugreifen. Betrachten Sie es als lebensrettendes Hilfsmittel, wenn Sie verzweifelt sind. Eine Menge Tipps zur CSS-Filterung finden Sie hier. [Anmerkung: Verwechseln Sie die Filter hier nicht mit den Filtern im IE. Da jeder Browser unterschiedliche Unterstützungsstufen für CSS-Standards bietet, gibt es viele Techniken, um Stylesheets oder Regeln zu blockieren, die der Browser nicht interpretieren kann oder falsch interpretiert. Dies wird als CSS-Filter oder Trick bezeichnet. ]

Wenn Anker verwendet werden, seien Sie beim Anwenden von Hyperlink-Stilen besonders vorsichtig.
Wenn Sie in Ihrem Code herkömmliche Anker () verwenden, werden Sie feststellen, dass die Pseudoklassen :hover und :active auch damit funktionieren. Um dies zu vermeiden, können Sie id verwenden oder die wenig bekannte Syntax verwenden: :link:hover, :link:active

Beachten Sie die Regeln für „LoVe/HAte“-Links (Liebe/Hass)
Geben Sie Hyperlink-Pseudoklassen in der folgenden Reihenfolge an: Link, Besucht, Hover, Aktiv. Jede andere Reihenfolge ist unangemessen. Wenn :focus verwendet wird, sollte die Reihenfolge LVHFA lauten („Lord Vader's Handle Formerly Anakin“, schlug Matt Haughey vor).

Denken Sie an die „GEFÄLLTEN“ Grenzen .
Die abgekürzte Reihenfolge von Rand, Rand und Innenabstand ist: im Uhrzeigersinn, beginnend von oben, also oben, rechts, unten, links. Beispiel: Rand: 0 1 Pixel 3 Pixel 5 Pixel; bedeutet, dass der obere Rand Null ist, der rechte Rand 1 Pixel und so weiter.

Geben Sie die Einheit für Werte ungleich Null an.
Bei der Angabe von Schriftarten, Rändern oder Größen mit CSS müssen Sie die verwendeten Einheiten angeben. Einige Browser verarbeiten nicht spezifizierte Einheiten schlecht. Null ist Null, egal ob px oder em oder was auch immer, es braucht keine Einheit. Zum Beispiel: padding: 0 2px 0 1em;

Testen Sie verschiedene Schriftgrößen.
Fortschrittliche Browser wie Mozilla und Opera ermöglichen die Skalierung von Schriftarten unabhängig von den von Ihnen verwendeten Einheiten.Einige Benutzer werden definitiv eine andere Standardschriftgröße als Ihre haben. Geben Sie Ihr Bestes, um diese anzupassen.

Verwenden Sie eingebettete Tests und ändern Sie die Eingaben beim Veröffentlichen.
Das Einbetten von Stylesheets in Ihren HTML-Quellcode kann beim Testen viele Caching-Fehler vermeiden, insbesondere bei einigen Mac-Browsern. Denken Sie jedoch vor der Veröffentlichung daran, das Stylesheet in eine externe Datei zu verschieben und es mit @import oder einzuführen.

Das Hinzufügen offensichtlicher Ränder ist hilfreich für das Layout-Debugging.
Globale Regeln wie div {border: solid 1px #f00;} können vorübergehend Layoutprobleme für Sie beheben. Das Hinzufügen von Rahmen zu bestimmten Elementen kann Ihnen dabei helfen, schwer zu findende Interlacing- oder Leerraumprobleme zu finden.

Verwenden Sie keine einfachen Anführungszeichen für den Bildpfad.
Halten Sie sich beim Festlegen eines Hintergrundbilds an doppelte Anführungszeichen. Obwohl es überflüssig erscheinen mag, wird IE5/Mac ersticken, wenn Sie dies nicht tun.

Lassen Sie keine „leeren Räume“ für zukünftige Stylesheets (z. B. Stylesheets für Handheld-Geräte oder zum Drucken).
Mac IE5 ist nicht an leeren Stylesheets interessiert, was die Ladezeit der Seite erhöht. Es wird empfohlen, dass das Stylesheet mindestens eine Regel (sogar einen Kommentar) enthält, um zu verhindern, dass MacIE erstickt.
Es ist auch erwähnenswert, dass es einige Theorien gibt, die während des Entwicklungsprozesses beachtet werden sollten, obwohl sie nicht spezifisch für bestimmte Funktionen sind:

Organisieren Sie Ihre CSS-Dateien gut
Kommentieren Sie CSS angemessen in Blöcken, gruppieren Sie ähnliche CSS-Selektoren in einer Gruppe, entwickeln Sie konsistente Benennungsgewohnheiten und Leerzeichenformate (aus plattformübergreifenden Gründen wird empfohlen, Leerzeichen anstelle von Tabulatoren zu verwenden) und eine geeignete Reihenfolge.

Benennen Sie die Klasse und die ID basierend auf der Funktionalität (nicht dem Erscheinungsbild)
Angenommen, Sie erstellen eine .smallblue-Klasse und planen später, den Text zu vergrößern und die Farbe Rot zu verwenden, um diese Klasse zu benennen keine Bedeutung mehr haben. Stattdessen können Sie aussagekräftigere Namen wie .copyright und .pullquote verwenden.

Selektoren kombinieren
Es ist wichtig, CSS kurz zu halten, um die Downloadzeit zu verkürzen. Versuchen Sie, Selektoren zu gruppieren, die Vererbung zu nutzen und Kurzschrift zu verwenden, um Redundanz zu reduzieren.

Berücksichtigen Sie die Affinität, wenn Sie die Bildersetzungstechnologie verwenden.
Es wurde festgestellt, dass herkömmliches FIR Probleme in Bildschirmleseprogrammen und Browsern verursacht, die die Bildanzeige deaktivieren. Es gibt andere Lösungen für dieses Problem, die je nach Situation mit Vorsicht angewendet werden sollten.