CSS-Tipps_Erfahrungsaustausch

Übersetzung: onestab [2004.03.09]
Originaltext: mezzoblue CSS Crib Sheet

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

Wenn Sie etwas hinzufügen möchten, posten Sie bitte hier Ihre Kommentare

Dieser Artikel ist in anderen Sprachen verfügbar: Französisch, Deutsch, Spanisch und Ungarisch. Andere Übersetzungen sind willkommen.

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 kaputten Browser schreiben und testen, muss sich Ihr Code auf die schlechte Anzeige dieses kaputten Browsers verlassen und ihn dann in einem standardkonformen Browser testen, siehe Sie werden frustriert sein wenn die Ergebnisse „aus“ erscheinen. Stattdessen sollten Sie zunächst Ihren Code aufpolieren und dann versuchen, ihn an Browser auf niedrigeren Ebenen anzupassen. 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 und erwarten keine konsistenten Ergebnisse über alle Browser hinweg.
Wenn Sie in Ihrem Layout schwebende Objekte verwenden müssen, vergessen Sie nicht, gegebenenfalls das Attribut „clear“ zu verwenden.
Schwebende Elemente scheinen einfach, aber schwer zu kontrollieren, und sie sind schwer zu kontrollieren. 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 Eric Meyers Tutorial
Ränderzusammenführung: Sie können Abstand oder Rand verwenden, um dies zu vermeiden.
Möglicherweise werden Sie durch zusätzlichen (oder unerwünschten) Leerraum überfordert. Wenn Sie Ränder verwenden, kann das Zusammenführen von Rändern die Ursache des Problems sein. Andy Budd Diese Erklärung kann Ihnen beim Verständnis helfen. Ich möchte der Struktur von PJblog einige zusätzliche Informationen hinzufügen. Wenn Sie Flash verwenden, prüfen Sie bitte, ob in der XML-Datei Ränder festgelegt sind.
Vermeiden Sie die gleichzeitige Anwendung von Auffüllung/Rahmen und fester Breite auf dasselbe Element.
Das falsche Blockmodell von IE5 ist der Übeltäter und sorgt für Chaos. Obwohl es Abhilfemaßnahmen gibt, ist es am besten, dieses Problem zu umgehen und den Abstand für das übergeordnete Element festzulegen, wenn die Breite des untergeordneten Elements festgelegt ist.
Vermeiden Sie das Flackern von Inhalten mit nicht spezifiziertem Stil unter dem IE.
Wenn Sie @import verwenden, um ein externes Stylesheet einzugeben, 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 ist vermeidbar
Erwarten Sie nicht, dass die Mindestbreite im IE nützlich ist.
IE unterstützt es nicht, aber es behandelt Breite als Mindestbreite, so dass durch einige IE-Filtertechniken das Gleiche letztendlich erreicht werden kann Wirkung. Das ist sehr frustrierend.
Wenn Sie verzweifelt sind, versuchen Sie, die Breite zu reduzieren
Aufgrund eines Rundungsfehlers , manchmal ergeben 50 % plus 50 % 100,1 %, was in manchen Browsern das Layout beeinträchtigt. Versuchen Sie, 50 % auf 49 % oder sogar 49,9 % zu reduzieren. Wenn Sie einen Rahmen verwenden, denken Sie auch daran, dessen Breite hinzuzufügen. Wenn ein 500-Pixel-Rahmen mit einem 1-Pixel-Rahmen hinzugefügt wird, beträgt er 502 Pixel.
Ist die Anzeige im IE abnormal?
Möglicherweise handelt es sich um den Peekaboo-Fehler, insbesondere wenn die Maus über den Hyperlink fährt, wird er normal angezeigt.Die Reparaturmethode finden Sie unter Position is Everything.
Wenn Anker verwendet werden, seien Sie beim Anwenden von Hyperlink-Stilen besonders vorsichtig.
Wenn Sie traditionelle Anker () in Ihrem Code verwenden, werden Sie :hover und :active bemerken Pseudoklassen werden auch darauf reagieren. Um dies zu vermeiden, können Sie id verwenden oder die wenig bekannte Syntax verwenden: :link:hover, :link:active
Merken Sie sich „LoVe/HAte“ (Love/ Hass) Linkregeln
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 („Lord Vader's Handle Formerly Anakin“, vorgeschlagen von Matt Haughey) lauten.
Denken Sie an die „STÖRTEN“ Grenzen.
Die abgekürzte Reihenfolge von Rand, Rand und Innenabstand ist: im Uhrzeigersinn, beginnend von oben, also oben, rechts, unten, links. Beispielsweise bedeutet margin: 0 1px 3px 5px, dass der obere Rand Null ist, der rechte Rand 1 Pixel und so weiter.
Geben Sie die Einheit für Werte ungleich Null an.
Wenn Sie Schriftarten, Ränder oder Größen mit CSS angeben, müssen Sie die zu verwendenden Einheiten angeben (die einzige Ausnahme ist die Zeilenhöhe, für die seltsamerweise keine Einheiten erforderlich sind). Einige Browser verarbeiten nicht spezifizierte Einheiten schlecht. Null ist Null, egal ob px oder em. Für alle anderen Werte ungleich Null müssen Einheiten explizit angegeben werden. Zum Beispiel: padding: 0 2px 0 1em;
Testen Sie verschiedene Schriftgrößen.
Erweiterte Browser wie Mozilla und Opera ermöglichen es Ihnen, die Schriftgröße zu ändern, unabhängig davon, welche Schrifteinheiten Sie verwenden. Die Standardschriftgrößen einiger Benutzer unterscheiden sich zwangsläufig von Ihren, also tun Sie Ihr Bestes, um sie anzupassen.
Verwenden Sie beim Testen eingebettete Stile und wechseln Sie beim Veröffentlichen zu externen Eingaben.
Durch das Einbetten von Stylesheets in Ihren HTML-Quellcode können viele Fehler vermieden werden, die durch Caching während des Tests verursacht werden, 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 erleichtert das Layout-Debuggen.
Globale Regeln wie div {border: solid 1px #f00;} können vorübergehend Layoutprobleme für Sie erkennen. Das Hinzufügen von Rahmen zu bestimmten Elementen kann Ihnen helfen, schwer zu findende Überlappungs- oder Leerraumprobleme zu finden. Diese Methode ist sehr praktisch, jeder muss sie ausprobieren
Verwenden Sie im Bildpfad keine einfachen Anführungszeichen.
Halten Sie sich beim Festlegen eines Hintergrundbilds an doppelte Anführungszeichen. Obwohl es unnötig erscheinen mag, wird IE5/Mac ersticken, wenn Sie dies nicht tun. Dies scheint am einfachsten zu übersehen zu sein
Nehmen Sie keinen Platz für zukünftige Stylesheets (wie Handheld-Geräte oder Druck-Stylesheets).
Mac IE5 ist nicht an leeren Stylesheets interessiert, was die Ladezeit der Seite verlängert. Es wird empfohlen, dass das Stylesheet mindestens eine Regel (sogar einen Kommentar) enthält, um zu verhindern, dass MacIE erstickt.

Es gibt auch einige Vorschläge, die zwar nicht spezifisch für bestimmte Funktionen sind, aber während des Entwicklungsprozesses beachtet werden sollten:

Organisieren Sie Ihre CSS-Dateien gut
Kommentieren Sie CSS in Blöcken entsprechend, gruppieren Sie ähnliche CSS-Selektoren in einer Gruppe, entwickeln Sie konsistente Benennungsgewohnheiten und Leerzeichenformate (aus plattformübergreifenden Überlegungen wird empfohlen, Leerzeichen anstelle von Tabulatoren zu verwenden) und eine geeignete Reihenfolge.
Benennen Sie die Klasse und ID basierend auf der Funktionalität (nicht dem Aussehen)
Angenommen, Sie erstellen eine .smallblue-Klasse und planen später, die Textgröße in Rot zu ändern Der Klassenname hat keine Bedeutung mehr. Stattdessen können Sie aussagekräftigere Namen wie .copyright und .pullquote verwenden.
Kombinierte Selektoren
Es ist sehr wichtig, CSS kurz zu halten, um die Downloadzeit zu verkürzen. Bitte versuchen Sie, die Redundanz zu reduzieren, indem Sie Selektoren gruppieren, Vererbung verwenden und Kurzschrift verwenden.
Berücksichtigen Sie die Barrierefreiheit, wenn Sie Techniken zum Ersetzen von Bildern verwenden
Wir haben traditionelles FIR in Bildschirmleseprogrammen sowie Browsern gefunden, die die Bildanzeige deaktivieren. Etwas wird schief gehen. Hierfür gibt es andere Lösungen, die je nach Situation mit Vorsicht eingesetzt werden sollten.