Share
CSS est un langage relativement simple à apprendre. La maîtriser, d'autre part, peut s'avérer un peu plus difficile. La compensation des diverses incohérences de navigateur peut provoquer une migraine. Dans cet article, nous allons démystifier cinq des problèmes les plus graves que vous rencontrerez lors de la création d'applications Web..
Nous avons tous fait ça. Vous pensez à vous-même, "Wow, ce texte aurait fière allure s'il était rouge vif." (vraiment ??) Malheureusement, lorsque vous ajoutez le style nécessaire, votre texte reste noir. Comment venir?
Il peut y avoir plusieurs raisons pour lesquelles vos styles ne prennent pas effet. Inutile de dire que cela peut être un problème - en particulier pour les développeurs CSS débutants. Commencez par consulter votre fichier CSS et assurez-vous qu’il n’ya pas de fautes de frappe. J'ai passé de nombreuses heures à démonter mes documents pour découvrir que j'avais mal orthographié un mot. Mais, si vous n'avez pas frappé votre tête contre le mur à un moment ou à un autre, vous n'êtes pas autorisé à vous appeler un développeur web! Très probablement, vous avez affaire à un problème de spécificité. Essayez d'ajouter "!important"À côté du style qui ne prend pas effet. Si cela fonctionne soudainement, cela signifie que vous avez définitivement un problème de" poids ". Par bonne pratique, ne laissez jamais"! important "dans votre feuille de style. Utilisez-le simplement une façon de déboguer. Prenons l'exemple suivant:
#wrap #myStyle color: black;
Comme il y a plus de spécificité ici, la couleur restera noire. En incluant l'identifiant supplémentaire, "#wrap", ce sélecteur a plus de poids. Par conséquent, le premier style sera ignoré au profit de celui-ci.
Comment pouvons-nous résoudre ce problème? Vous devriez d’abord vérifier si le second style peut être complètement effacé. Si ce n'est pas le cas, vous devrez simplement ajouter plus de spécificité à votre sélecteur d'origine.. Nous verrons bientôt le concept de spécificité ". Essayons d'ajouter:
#wrap p # myStyle color: red;
Maintenant, le texte va enfin virer au rouge. En ajoutant le sélecteur "p" supplémentaire, nous avons ajouté un point supplémentaire, remplaçant ainsi tout autre style..
Peut-être plus que toute autre chose, le positionnement peut s'avérer un sujet de confusion inutilement déroutant pour les concepteurs débutants à CSS. Le meilleur moyen d'apprendre est d'abord de s'attaquer au positionnement absolu. Supposons que nous ayons un document HTML et CSS vierge. Si nous devions ensuite placer absolument une image sur la page - disons 100 pixels du haut et 100 pixels du bord gauche de la fenêtre - nous pourrions écrire le style suivant…
img position: absolute; en haut: 100px; à gauche: 100px;
Les éléments absolument positionnés sont positionnés par rapport aux éléments parents les plus proches.. Dans ce cas, s'il n'y a pas d'éléments relativement positionnés sur la page, l'image sera positionnée par rapport à la fenêtre..
Maintenant, imaginons que nous ayons enveloppé une image relativement positionnée.
Afin de définir un contexte de positionnement, nous devons ajouter "position: relative" au style de notre div parent.
div # wrapper position: relative; fond: gris; / * Juste pour voir les frontières. * / Height: 600px; / * Parce que l'image est positionnée de manière absolue, nous devons forcer la hauteur. marge: auto;
Maintenant, lorsque nous positionnerons absolument l'image, elle sera positionnée "par rapport à" la division "wrapper". Gardez à l'esprit que si nous supprimions cette propriété, l'image serait à nouveau placée par rapport à la fenêtre du navigateur. La propriété "position" est la clé ici.
Chris Coyier passe en revue quelques exemples pratiques qui montrent exactement comment et quand utiliser le positionnement. Inclut une démo et un code source téléchargeable.
Visitez l'article
"Faisons la lumière sur les mystères obscurs du positionnement CSS. Si vos compétences en CSS sont limitées, voire modérées, vous apprendrez ce dont vous avez besoin pour maîtriser le positionnement."
Visitez l'article
Pour ceux qui ne sont pas familiers avec le "bogue Double-Margin", si vous faites flotter un élément et que vous procédez ensuite pour ajouter des marges dans le même sens que le flottant, Internet Explorer 6 doublera à tort la valeur. En effet, une marge gauche de "100px" devient "200px" dans IE6. Nous examinerons trois solutions différentes..
Changer l'affichage en ligne. La solution la plus simple, découverte par Steve Clason, consiste à modifier la propriété display de votre élément..
#floatElement display: inline; float: gauche; marge gauche: 100px;
Utiliser les commentaires conditionnels. Heureusement, changer l'affichage corrigera ce mauvais bug. Cependant, si, pour une raison quelconque, vous avez besoin d'une méthode différente? Internet Explorer vous permet de cibler différentes versions de navigateur à l'aide de "commentaires conditionnels". Ajoutez ce qui suit dans la balise head de votre document:
En termes simples, ce code dit: "Si un visiteur de votre page utilise Internet Explorer 6 ou une version antérieure inférieure, importez une feuille de style appelée" ie6.css ". En conséquence, les navigateurs modernes ignoreront cette instruction. IE 6 et inférieur, d’autre part, dans notre fichier ie6.css, nous aurons besoin d’ajouter du style de remplacement.
#floatElement float: left; marge gauche: 50px;
Comme nous savons qu'IE 6 doublera les marges des éléments flottants, si nous réduisions la valeur de la marge de 50%, cela corrigera notre document. Cette méthode est particulièrement appropriée lorsque de nombreux styles ciblent directement IE6. Il est important de contenir tous vos "hacks" dans un emplacement centralisé.
Mettre en œuvre le Hack Underscore. Il existe de nombreuses façons de cibler les anciennes versions d'Internet Explorer directement à partir de notre feuille de style principale. Généralement, je préfère utiliser des commentaires conditionnels. Cependant, si je n'ai besoin de changer qu'une seule propriété, j'utiliserai souvent le hachage de soulignement. Considérez ceci comme suit:
#floatElement float: left; marge gauche: 100px; _margin-left: 50px;
Les navigateurs modernes parcourent ces propriétés. Quand ils viennent au trait de soulignement, ils sautent complètement le style. D'un autre côté, IE6 ignorera le trait de soulignement et implémentera les nouvelles marges. Nous nous retrouvons avec les navigateurs modernes en ajoutant "100px" à la marge de gauche. IE 6, respectivement, ajoutera seulement "50px".
Dustin propose une explication rapide pour surmonter ce bug. Assurez-vous de consulter ses tutoriels connexes.
Visitez l'article
Assurez-vous de consulter cet article facile à lire si vous êtes encore un peu confus.
Visitez l'article
Absolument! Pourtant, très peu de gens connaissent l'équation exacte. Vous êtes probablement nombreux à utiliser la méthode "Continuez à ajouter d'autres identificateurs jusqu'à ce que cela fonctionne". Concrètement, cela fonctionnera très bien. Mais vous devriez savoir comment calculer le poids de vos sélecteurs tout de même..
D'abord, associons chaque type de sélecteur à une valeur.
Essayons de calculer le poids du style suivant…
body #wrap div # sidebar ul li a.selected styleing aléatoire…
En vous référant à notre calculatrice ci-dessus, nous allons disséquer ce sélecteur. L'élément body reçoit un point. Ensuite, nous avons un identifiant (#wrap). Cela ajoutera 100 points au décompte. En continuant, nous avons "div # sidebar". Combien de points pensez-vous que cela vaut? Si vous deviniez 100 points, vous auriez tort. Vous devez prendre en compte l'élément "div" dans votre poids. La bonne réponse est 101 points. Les éléments "ul", "li" et "a" gagnent un point par morceau. Enfin, la classe "sélectionnée" reçoit 10 points supplémentaires. En additionnant tout, nous arrivons à une somme de 215.
Je vous recommande de passer quelques minutes et de mémoriser ce système de points. Cela vous épargnera beaucoup de temps perdu lorsque vous vous retrouverez dans un dilemme de spécificité!
Pour une explication approfondie de la spécificité, je vous recommande vivement de lire cet article de haut en bas..
Visitez l'article
Apprenez l'art de la spécificité dans un cadre amusant "Star Wars". Ceci est une lecture incontournable.
Visitez l'article
Une étape obligatoire lorsque vous travaillez sur un site consiste à l'examiner dans tous les navigateurs modernes: Firefox, Internet Explorer, Safari et Opera. La deuxième étape consiste à tester votre site dans l’ancienne version d’IE. Je vous recommande de télécharger IE Tester, qui vous permettra de visualiser votre site dans IE 5 - IE 8. La dernière étape consiste à vérifier tous les navigateurs moins courants. Visitez BrowserShots.org pour voir des instantanés de votre site dans tous les navigateurs disponibles..
Détestez-vous avoir à basculer entre IE et Firefox lors du test de votre site? Pourquoi ne pas télécharger IE Tab?
Visitez l'article
Des questions déroutantes que j'ai manquées? Je suis sûr qu'il y en a beaucoup. Laissez un commentaire et je vais essayer de les incorporer à la deuxième partie. J'espère transformer ces articles de style "Question and Answer" en une série continue.
Accentsconagua
