Conseils CSS_CSS/HTML

Lorsque vous utilisez CSS pour créer un site Web, vous devez avoir rencontré divers problèmes de mise en page et vous avez peut-être finalement été dépassé. Le but de cet article est de faciliter votre processus de conception et de vous fournir une référence rapide lorsque vous êtes bloqué.

En cas de doute, vérifiez d'abord
Lors du débogage, vérifier d'abord votre code peut souvent éviter bien des problèmes. Un XHTML/CSS mal formé peut provoquer de nombreuses erreurs de mise en page.
Écrivez et testez votre code CSS dans le navigateur le plus avancé avant de le tester dans d'autres navigateurs, et non l'inverse.
Si vous écrivez et testez dans un navigateur défectueux, votre code doit s'appuyer sur le mauvais affichage de ce navigateur défectueux, puis le tester dans un navigateur conforme aux normes et constater que l'affichage donne un résultat "inhabituel". Parfois, vous sera très frustré. Au lieu de cela, vous devez d’abord peaufiner votre code, puis essayer de l’adapter aux navigateurs de niveau inférieur. De cette façon, votre code est conforme aux normes dès le départ et vous n'avez pas à vous soucier de la prise en charge d'autres navigateurs. Bien entendu, les navigateurs conformes aux standards actuels sont sans aucun doute Mozilla, Safari ou Opera.

Assurez-vous que l'effet souhaité existe réellement.
De nombreuses extensions CSS spécifiques au navigateur n'existent pas dans les normes officielles. Si vous spécifiez des styles pour les filtres ou les barres de défilement, vous utilisez du code privé qui n'aura aucun effet dans aucun navigateur autre que IE. Si le validateur vous indique que le code n'est pas défini, il est fort probable que vous utilisiez des styles privés, ce qui rendra difficile l'obtention de résultats cohérents dans différents navigateurs.

Si vous devez utiliser des objets flottants dans votre mise en page, n'oubliez pas d'utiliser l'attribut clear en temps opportun.
Faire flotter des objets peut sembler facile, mais c'est difficile, et ce n'est pas toujours ce que vous voulez. Si vous constatez que les flotteurs dépassent les limites du conteneur ou n'apparaissent pas comme prévu, vérifiez que vos attentes sont correctes. Concernant ce problème, veuillez consulter le tutoriel d'Eric Meyer

Fusion de marge : un remplissage ou une bordure peut être utilisé pour l'éviter.
Vous pourriez être submergé par un espace blanc supplémentaire (ou indésirable). Si vous utilisez des marges, la fusion des marges peut être la source du problème. L'explication d'Andy Budd peut aider.

Évitez d'appliquer un remplissage/bordure et une largeur fixe au même élément en même temps.
Le modèle de bloc d'IE5 est faux et il casse les choses. Il existe des solutions de contournement pour cela, mais il est préférable de contourner ce problème et de spécifier un remplissage pour l'élément parent lorsque la largeur de l'élément enfant est fixe.

Évitez le scintillement du contenu de style non spécifié sous IE.
Si vous comptez uniquement sur @import pour saisir des feuilles de style externes, vous constaterez tôt ou tard qu'IE a un problème de "scintillement". Le texte HTML non formaté apparaît brièvement avant l'application des styles CSS. Cela peut être évité.

Ne vous attendez pas à ce que min-width soit utile dans IE.
IE ne le prend pas en charge, mais il traite la largeur comme une largeur minimale, donc grâce à certaines techniques de filtrage IE, le même effet final peut être obtenu.

Utilisez les filtres CSS en dernier recours Les techniques et filtres CSS vous permettent d'appliquer sélectivement (ou de ne pas appliquer) certains éléments. Dans la mesure du possible, vous devez trouver des solutions multi-navigateurs standard pour obtenir l’effet souhaité plutôt que de recourir à des filtres à chaque instant. Considérez-le comme un outil qui vous sauve des vies lorsque vous êtes désespéré. Une tonne de conseils de filtrage CSS peuvent être trouvés ici. [Annotation : Ne confondez pas les filtres ici avec les filtres dans IE. Étant donné que chaque navigateur a différents niveaux de prise en charge des normes CSS, les utilisateurs ont trouvé de nombreuses techniques pour bloquer les feuilles de style ou les règles que le navigateur ne peut pas interpréter ou interprète mal. C'est ce qu'on appelle un filtre ou une astuce CSS. ]

Si des ancres sont utilisées, soyez particulièrement prudent lorsque vous appliquez des styles de liens hypertexte.
Si vous utilisez des ancres traditionnelles () dans votre code, vous remarquerez que les pseudo-classes :hover et :active fonctionnent également avec. Pour éviter cela, vous pouvez utiliser id, ou utiliser la syntaxe peu connue : :link:hover, :link:active

Rappelez-vous les règles des liens "LoVe/HAte" (amour/haine)
Spécifiez les pseudo-classes d'hyperliens dans l'ordre suivant : Link, Visited, Hover, Actve. Toute autre commande est inappropriée. Si :focus est utilisé, l'ordre doit être LVHFA ("Lord Vader's Handle Formerly Anakin", a suggéré Matt Haughey).

Souvenez-vous des frontières « TRouBLED » .
L'ordre abrégé de la bordure, de la marge et du remplissage est : dans le sens des aiguilles d'une montre en partant du haut, c'est-à-dire Haut, Droite, Bas, Gauche. Par exemple, margin : 0 1px 3px 5px ; signifie que la marge supérieure est nulle, la marge droite est 1px, et ainsi de suite.

Spécifiez l'unité pour les valeurs non nulles.
Lorsque vous spécifiez des polices, des marges ou des tailles avec CSS, vous devez spécifier les unités utilisées. Certains navigateurs gèrent mal les unités non spécifiées. Zéro est zéro, que ce soit px ou em ou autre, il n'a pas besoin d'unité. Par exemple : padding : 0 2px 0 1em

Testez différentes tailles de police.
Les navigateurs avancés comme Mozilla et Opera permettent la mise à l'échelle des polices quelles que soient les unités que vous utilisez.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.