Share
Travailler avec CSS peut sembler être une bataille constante. Les navigateurs changent toujours de la même manière qu'ils lisent le code (* toux * Internet Explorer * toux *), et il semble qu'il y ait beaucoup de petits «pièges» CSS. Bien que ce soit un langage incroyablement puissant, il peut facilement être utilisé incorrectement, ce qui condamnera votre développement à une vie d'imperfections..
C’est probablement le problème numéro un du développement Web, car vous devez disposer de mises en page identiques, quel que soit le navigateur utilisé par le visiteur du site pour naviguer sur la page. Ce fait peut parfois sembler être le fléau de votre existence: il existe des différences fondamentales dans la manière dont Internet Explorer affiche une page par rapport à Firefox. Bien que ce ne soit pas aussi mauvais qu'eux utilisé être, il y a encore toute une différence entre les navigateurs.
Il est facile pour les développeurs Web de mettre en page la page dans leur navigateur préféré sans se soucier de son apparence dans les autres principaux navigateurs, car vous ne verrez probablement pas les différences. (Je suis un délinquant majeur. Je crée parfois le site dans Firefox et j'oublie de vérifier dans IE jusqu'à ce que ce soit fait!) Bien qu'il existe des méthodes éprouvées pour vous aider à protéger vos mises en page pour un rendu de navigateur différent, la Le meilleur moyen de vous assurer que tout semble constant consiste à utiliser simplement Browsershots. Browsershots donne un aperçu précis de ce à quoi votre site ressemble sous différentes plates-formes et navigateurs, vous permettant de vous assurer que rien ne semble génial dans un navigateur..
Bien qu'un bon nombre d'entre nous, développeurs Web, possédons de grands écrans d'ordinateur - et en sont fiers -, une bonne partie des visiteurs de votre site ne le pourraient peut-être pas. Vous pouvez consulter vos programmes d'analyse pour connaître les résolutions du navigateur de vos visiteurs et leur étendue (Google Analytics le fait merveilleusement bien). Cependant, il y a un monde de différence dans la conception d'une conception dans une résolution 1024x768 par opposition à une résolution de 800x600. Il peut rendre un beau design presque inutile.
Je suis récemment tombé sur cette réalisation alors que je peaufinais le design de Trendfo. Une grande partie des visiteurs du site utilisaient des navigateurs plus petits, ce qui bloquait partiellement certaines annonces, ce qui me donnait moins de clics et, finalement, moins de revenus provenant du site..
La comptabilisation des petits navigateurs signifie que tout de vos visiteurs sont heureux et trouvent l'information dont ils ont besoin.
Si vous développez une mise en forme CSS à partir de rien, vous voudrez peut-être vous demander pourquoi. Tout comme rien n’est nouveau sous le soleil, il en va de même avec CSS. Il existe de nombreux frameworks CSS comme le framework Blueprint et le framework 960 CSS. Celles-ci sont créées pour vous aider à réaliser des présentations à toute épreuve, sans avoir à tout recommencer à zéro. Ces dispositions sont compatibles avec tous les navigateurs et ont été rigoureusement testées. Vraiment, à moins que vous ne fassiez quelque chose de totalement radical qui nécessite des tonnes de code personnalisé, utilisez simplement un framework CSS.
Pourquoi réinventer la roue?
Il peut être assez facile de ne pas penser à l'avenir lorsque nous développons des sites Web. Souvent, nous appelons nos classes CSS quelque chose de différent à chaque fois que nous développons un site, par opposition à la création d'une classe CSS simple que nous pouvons réutiliser de manière répétée tout au long de notre conception, sans devoir déterrer ce que nous utilisions auparavant. Cela garantira que la conception de notre site reste constante tout au long des modifications apportées à sa conception..
Vous pouvez utiliser une classe générique telle que:
(Note de l'éditeur: les doubles 'droits' sont le résultat d'un bug dans notre visionneuse de code, le code correct est bien sûr .right float: right.)
.right float: right
Pour que les choses flottent dans la bonne direction quand vous le souhaitez. Ainsi, vous pouvez styler un ID DIV comme:
J'utilise généralement au moins trois classes génériques lors de la conception d'un site:
.clear clear: both .right float: right .left float: left
Je parie que vous ne saviez pas que la validation de votre code HTML pourrait également affecter votre code CSS, n'est-ce pas? Eh bien, ça peut. Tout d’abord, vous ne pouvez pas valider votre CSS tant que vous n’avez pas un code HTML valide. Deuxièmement, votre code HTML pourrait être à l’origine de vos problèmes au lieu de votre code CSS. Nous pensons souvent que notre CSS modifie la mise en page alors qu'en fait c'est un peu de HTML malformé qui rend la mise en page géniale. Une DIV non fermée ici, une classe CSS mal étiquetée… ça pourrait être n'importe quoi. Assurez-vous que votre code HTML est vérifié avant même d'essayer de diagnostiquer un problème de CSS.
J'avais l'habitude d'ennuyer constamment un ami pour lui demander de l'aide pour résoudre les problèmes de CSS lorsque j'essayais de démêler mes conceptions. Il me demandait patiemment à chaque fois "Le CSS valide-t-il? Sinon, quelles sont les erreurs?" J'ai vite appris à valider le code CSS avant de demander l'aide de Thomas plus tard, et la validation corrigeait habituellement le problème pour moi..
Si vous avez du code CSS valide, vous avez beaucoup plus de chances d'avoir un CSS bien plus compatible entre les navigateurs et moins susceptible de casser..
Souvent, les nouveaux concepteurs utilisent des images d'arrière-plan surdimensionnées dans leurs présentations. Par exemple, en utilisant une image d’arrière-plan de 3 000 pixels x 5 000 pixels pour comptabiliser possible taille du navigateur. Au lieu d'utiliser une très grande image, ils pourraient utiliser une image répétitive très petite avec une touche de magie CSS. La différence est énorme: au lieu de charger une image de 200 Ko, vous pouvez charger une image de seulement quelques octets et la faire répéter par le CSS en arrière-plan..
Si vous avez une image de fond très volumineuse, vous perdez deux manières:
Parfois, les grandes images de fond sont inévitables, en particulier avec la tendance récente à concevoir des mises en page Web illustratives. Cependant, utiliser des images répétitives ou des couleurs unies en arrière-plan est une bien meilleure pratique..
Quand les gens découvrent une technologie pour la première fois, ils sont enthousiasmés par cette technologie et veulent l’utiliser partout, même si cela peut aller à l’encontre de ce qui fonctionnera le mieux pour le projet..
En tant que développeurs Web, nous pouvons parfois être tentés par le désir de la technologie de faire quelque chose de avancé et de spécifique, alors qu'en réalité, nous pouvons utiliser une technologie différente beaucoup plus facilement. Par exemple, il est parfois beaucoup plus facile d'utiliser un tableau pour organiser les données que de créer une mise en page complexe basée sur CSS avec des DIV flottantes, etc. Nous devons nous rappeler que la raison pour laquelle nous utilisons des technologies telles que CSS est qu’elle devrait accélérer le temps de développement. Quand il commence à nous ralentir, alors peut-être que nous allons un peu trop loin.
C'est un péché capital pour les développeurs Web et cela se produit plus souvent que vous ne le souhaitez. Si vous construisez un design, vous aurez presque toujours voulez garder votre CSS et HTML séparés. Cela garantit que, lorsque vous (remarquez que je n'ai pas dit "si") vous décidez de modifier la conception du site, vous n'avez pas à fouiller dans le code HTML de chaque présentation et à rechercher le code CSS non autorisé lié à un élément en ligne.
Au lieu d'utiliser ceci:
lien
Vous devez déplacer l'entreprise de style vers une feuille de style externe comme celle-ci:
lien
CSS en ligne devrait presque toujours être évité. Il est facile à utiliser et idéal pour les tests, mais à part cela, vous ne voudriez probablement pas que ce soit dans votre code de production..
Avez-vous déjà vu un dessin contenant 12 fichiers CSS différents? C'est un cauchemar pour quiconque tente d'apporter des modifications à votre mise en page. De plus, le temps de traitement de chaque fichier est ralenti, car le navigateur doit en faire la demande. Il est préférable d'utiliser un schéma CSS simple qui utilise 1 ou 2 fichiers. Le temps passé à analyser 12 fichiers par rapport à un seul fichier est assez important. Non seulement cela, vous allez sauver le prochain gars qui doit apporter des modifications à votre mise en page beaucoup de tracas.
Personne ne veut ouvrir 12 fichiers pour effectuer un changement simple à l'échelle du site.!
Glen Stansberry est un développeur et blogueur Web qui a eu beaucoup de difficultés à admettre avec CSS. Vous pouvez lire plus de conseils sur le développement Web sur son blog Web Jackalope.
A aimé ce post? Votez pour cela sur Digg ci-dessous. Merci!
Accentsconagua