Conseils CSS_Échange d'expériences

Traduction : onestab [2004.03.09]
Texte original : mezzoblue CSS Crib Sheet

Lorsque vous utilisez CSS pour créer un site Web, vous devez avoir rencontré diverses mises en page problèmes et risquent de finir par être épuisés. 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é.

Si vous avez quelque chose à ajouter, veuillez poster vos commentaires ici

Cet article est disponible dans d'autres langues : français, allemand, espagnol et hongrois. D'autres traductions sont les bienvenues.

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 devra s'appuyer sur le mauvais affichage de ce navigateur défectueux, puis le tester dans un navigateur conforme aux normes, voir Vous serez frustré lorsque les résultats apparaissent « désactivés ». 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, vous utilisez probablement des styles privés et vous ne vous attendez pas à des résultats cohérents entre les navigateurs.
Si vous devez utiliser des objets flottants dans votre mise en page, n'oubliez pas d'utiliser l'attribut clear le cas échéant.
Les éléments flottants semblent faciles mais difficiles à contrôler, et ils sont difficiles à contrôler. 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 : vous pouvez utiliser un remplissage ou une bordure 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. Andy Budd Cette explication peut vous aider à comprendre. Je voudrais ajouter quelques informations supplémentaires à la structure de PJblog. Si vous utilisez Flash, veuillez vérifier si les marges sont définies dans le fichier Xml
Évitez d'appliquer un remplissage/bordure et une largeur fixe au même élément en même temps.
Le modèle de bloc incorrect d'IE5 est le coupable et rend les choses compliquées. Bien qu'il existe des remédiations, 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 utilisez @import pour saisir une feuille de style externe, 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. C'est évitable
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 min-width, donc grâce à certaines techniques de filtrage IE, la même chose peut être obtenue au final effet. C'est très frustrant. Je n'arrive pas à réaliser ce skin maintenant
Lorsque vous êtes désespéré, essayez de réduire la largeur
En raison d'une erreur d'arrondi. , parfois 50 % plus 50 % équivaut à 100,1 %, ce qui brise la mise en page dans certains navigateurs. Essayez de réduire de 50 % à 49 %, voire 49,9 %. De plus, si vous utilisez une bordure, pensez à ajouter sa largeur. Si un cadre de 500 px est ajouté avec une bordure de 1 px, alors il fera 502 px.
L'affichage est-il anormal dans IE ?
Il s'agit peut-être du bug Peekaboo, surtout lorsque la souris passe sur le lien hypertexte, celui-ci s'affichera normalement.Voir La position est tout pour la méthode de réparation.
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 :hover et :active Les pseudo-classes agiront également en conséquence. Pour éviter cela, vous pouvez utiliser id, ou utiliser la syntaxe peu connue : :link:hover, :link:active
Rappelez-vous "LoVe/HAte" (Love/ Haine) Règles de lien
Spécifiez les pseudo-classes d'hyperliens dans l'ordre suivant : Lien, Visité, Survol, Actif. Toute autre commande est inappropriée. Si :focus est utilisé, l'ordre doit être LVHFA ("Lord Vader's Handle Formerly Anakin", suggéré par 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 de 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 à utiliser (la seule exception est la hauteur de ligne, qui étrangement ne nécessite pas d'unités). Certains navigateurs gèrent mal les unités non spécifiées. Zéro est zéro, que ce soit px ou em. Toutes les autres valeurs non nulles doivent avoir des unités explicitement spécifiées. Par exemple : padding : 0 2px 0 1em
Testez différentes tailles de police.
Les navigateurs avancés comme Mozilla et Opera vous permettent de modifier la taille de la police quelles que soient les unités de police que vous utilisez. Les tailles de police par défaut de certains utilisateurs sont forcément différentes des vôtres, alors faites de votre mieux pour les adapter.
Utilisez des styles intégrés lors des tests et passez à une entrée externe lors de la publication.
L'intégration de feuilles de style dans votre code source HTML peut éliminer de nombreuses erreurs causées par la mise en cache lors des tests, notamment sur certains navigateurs Mac. Mais avant de publier, n'oubliez pas de déplacer la feuille de style vers un fichier externe et de l'introduire avec @import ou .
L'ajout de bordures évidentes facilite le débogage de la mise en page.
Les règles globales comme div {border: solid 1px #f00;} peuvent détecter temporairement les problèmes de mise en page pour vous. L’ajout de bordures à des éléments spécifiques peut vous aider à détecter les problèmes de chevauchement ou d’espaces difficiles à trouver. Cette méthode est très pratique, tout le monde doit l'essayer
N'utilisez pas de guillemets simples dans le chemin de l'image.
Lorsque vous définissez une image d'arrière-plan, respectez les guillemets doubles. Même si cela peut sembler inutile, si vous ne le faites pas, IE5/Mac s'étouffera. Cela semble être le plus facile à négliger
Ne "prenez pas de place" pour les futures feuilles de style (telles qu'un appareil portable ou des feuilles de style d'impression).
Mac IE5 ne s'intéresse pas aux feuilles de style vides, ce qui va augmenter le temps de chargement de la page. Il est recommandé qu'il y ait au moins une règle (même un commentaire) dans la feuille de style pour éviter que MacIE ne s'étouffe.

Il existe également quelques suggestions qui, bien que non spécifiques à certaines fonctionnalités, méritent d'être notées lors du processus de développement :

Organisez bien vos fichiers CSS
Commentez correctement le CSS dans les blocs, regroupez les sélecteurs CSS similaires, développez des habitudes de dénomination et un format d'espace cohérents (pour des considérations multiplateformes, il est recommandé d'utiliser des caractères d'espacement au lieu de tabulations.) et un ordre approprié.
Nommez la classe et l'ID en fonction de la fonctionnalité (et non de l'apparence)
Supposons que vous créiez une classe .smallblue et que vous prévoyiez plus tard de changer la taille du texte en rouge, ceci. le nom de la classe n'a plus aucune signification. Au lieu de cela, vous pouvez utiliser des noms plus descriptifs comme .copyright et .pullquote.
Sélecteurs combinés
Garder le CSS court est très important pour réduire le temps de téléchargement. Veuillez essayer de réduire la redondance en regroupant les sélecteurs , en utilisant l' héritage et en utilisant le raccourci .
Pensez à l'accessibilité lorsque vous utilisez des techniques de remplacement d'images
Nous avons trouvé du FIR traditionnel dans les lecteurs d'écran, ainsi que dans les navigateurs qui désactivent l'affichage des images. ça se passera mal. Il existe d'autres solutions à cela, qui doivent être utilisées avec prudence en fonction de la situation spécifique.