Share
En matière de CSS, il existe de nombreuses ressources et supposés "conseils d'experts" sur le Web. Ce sont des "gourous" non prouvés et auto-proclamés qui n'ont aucune crédibilité dans le monde du design. Alors qu'ils peuvent avoir des points valides, comment savoir si un conseil CSS est une ressource valide ou juste un hack non testé?
Plutôt que de faire appel à des sources inconnues pour obtenir des conseils, examinons de plus près les concepteurs qui ont d’excellents antécédents en matière de conception et qui ont suivi le pas. Ces astuces CSS proviennent de certains des designers les plus respectés de la planète. Ils ont les portefeuilles sur lesquels appuyer leurs conseils. Vous saurez ainsi que chaque conseil est de la plus haute qualité..
Vous trouverez ci-dessous 10 principes excellents que tout développeur ou concepteur Web peut trouver utiles, significatifs ou stimulants. Considérez ce sage conseil de compagnons (et de femmes) qui ont parcouru le long et difficile chemin de l'excellence en design. Voici les vrai maîtres de CSS. Buvez de leurs connaissances et utilisez leur sagesse lors de votre prochaine aventure de conception.
Ce qui me dérange le plus dans l’esprit des hackers CSS, c’est qu’ils recherchent activement des solutions compliquées. Cherchez et vous serez trouvés, si vous voulez de la complexité, cela vous prendra à la gorge. Ça ne te lâchera jamais, et ça ne t'aidera pas non plus.
Peter-Paul Koch est un parrain du développement web. Alors qu'il est développeur de la vieille école et que la majeure partie de son portefeuille Web était entre 1998 et 2002, il a travaillé avec des goûts tels qu'Apple et d'autres poids lourds. Il a écrit un livre sur javascript, mais ne pensez pas une seconde, il n'a rien à dire sur CSS.
Koch a abordé quelque chose qui chaque Le concepteur et le développeur Web devraient suivre avec zèle: gardez votre CSS simple. La simplicité est une chose difficile à réaliser, en particulier dans la conception CSS. Il existe une myriade de hacks CSS que l'on peut trouver pour que tous les navigateurs se ressemblent, peu importe leur version ou leur type. Cependant, l'utilisation de nombreux hacks CSS présente un défaut fondamental.. À mesure que les navigateurs Web évoluent, il est beaucoup plus difficile de suivre les changements..
Koch fait un point intéressant sur le développement pour le Web. Internet dans son ensemble est un endroit très imprévisible et il est très mauvais d’essayer de deviner la façon dont il fonctionnera à l’avenir..
Le Web est un endroit incertain. Vous ne serez jamais sûr que vos sites Web fonctionneront exactement comme vous le souhaitez, même lorsque vous appliquez toutes les connaissances modernes issues de CSS, de l'accessibilité et de la convivialité. Au lieu de rechercher un faux confort dans des piratages qui semblent d'autant plus confortables en raison de leur complexité, vous devriez accepter l'incertitude comme principe de base..
Les navigateurs n’ont pas un support CSS parfait; particulièrement pour les personnes qui viennent juste d’apprendre le CSS, cela peut être exaspérant. Néanmoins, les hacks CSS ne sont pas la solution. L’acceptation du fonctionnement actuel du Web est la meilleure solution, car elle simplifiera la tâche de vos sites..
Peter-Paul a choisi quelque chose qui sonne vrai non seulement pour CSS, mais pour le développement Web dans son ensemble. La simplicité est la clé de l'efficacité du codage.
Jonathan Snook est un designer extrêmement populaire originaire d'Ottawa, au Canada, qui s'est fait un nom dans les standards et le design Web. Il a parlé lors de conférences prestigieuses telles que SXSW et a publié de nombreuses ressources techniques sur la conception via Sitepoint..
L'un des locataires de Jonathan pour le code CSS est de conserver les déclarations en une seule ligne.
La seconde peut paraître plus jolie mais elle ne m'aide certainement pas à trouver quoi que ce soit. Lorsque vous recherchez quelque chose dans une feuille de style, le plus important est le jeu de règles (c'est la partie avant le et). Je cherche un élément, un identifiant ou une classe. Si vous avez tout sur une ligne, la numérisation du document est beaucoup plus rapide car vous voyez simplement plus sur une page. Une fois que j'ai trouvé le jeu de règles que je cherchais, trouver la propriété que je veux est généralement assez simple car il y a rarement autant de.
Jonathan donne ensuite un exemple de déclaration d'une seule ligne qui ressemble à ceci:
Bien
taille de la police: 18px; bordure: 1px bleu uni; couleur: # 000; couleur de fond: #FFF;
Mal
h2
taille de police: 18px;
bordure: 1px bleu uni;
couleur: # 000;
couleur de fond: #FFF;
Non seulement cette approche aide-t-elle à analyser rapidement votre CSS, elle vous aide également à réduire la taille de votre fichier CSS en supprimant les espaces et les caractères inutiles.
La plupart des gens connaissent et utilisent un raccourci, mais beaucoup n'utilisent pas pleinement ces propriétés d'économie d'espace..
Roger Johansson en sait quelque chose sur la conception Web. Le concepteur de sites Web suédois travaille sur Internet depuis 1994 et possède un blog de conception de sites Web très populaire. Lorsqu'il s'agit de solutions simples et élégantes, Roger est l'un des plus compétents dans son domaine..
Johansson a écrit un article très détaillé sur l’importance de la sténographie CSS, et donne quelques exemples de son utilisation lors du codage CSS. Voici un exemple:
L'utilisation de raccourci pour ces propriétés peut économiser beaucoup d'espace. Par exemple, pour spécifier différentes marges pour tous les côtés d'une boîte, vous pouvez utiliser ceci:
marge supérieure: 1em;
marge droite: 0;
marge inférieure: 2em;
marge gauche: 0.5em;
Mais c'est beaucoup plus efficace:
marge: 1em 0 2em 0,5em;La même syntaxe est utilisée pour la propriété padding.
Bien que le raccourci CSS réduise la taille de la feuille de style, il aide également à organiser et à garder le code simple. Beautiful CSS est simple CSS.
M. Snook a un autre conseil crucial à suivre par tous les développeurs Web: autoriser les éléments de bloc à remplir l'espace de manière organique. S'il existe un thème récurrent dans le développement CSS, il ne faut pas forcer le code à faire des choses pour lesquelles il n'est pas destiné. Cela signifie éviter les piratages CSS et trouver la solution la plus simple possible.
Ma règle générale est que, si je définis une largeur, je ne définis pas de marge ni de remplissage. De même, si je mets une marge ou un remplissage, je ne mets pas de largeur. Traiter avec le modèle de boîte peut être une telle douleur, surtout si vous avez affaire à des pourcentages. Par conséquent, je règle la largeur des conteneurs, puis la marge et le remplissage des éléments qu’ils contiennent. Tout se passe généralement bien.
En règle générale, Jonathan veille à ce que vos mises en page ne se brisent pas et à l'approche la plus simple utilisée lors de la création de mises en page avec des éléments de bloc..
Flotter est probablement l’une des choses les plus importantes à comprendre avec CSS, mais savoir effacer les flottants est également nécessaire..
Trevor Davis n'est peut-être pas aussi gros qu'un nom comme Zeldman ou Snook dans le monde du design, il mérite sûrement une mention juste en raison de son excellent portefeuille de mises en page Web. Son blog est une excellente ressource pour tout développeur Web désirant approfondir ses conceptions..
Dans l'article phare de Trevor, Les 6 techniques CSS les plus importantes à connaître, il a ajouté un nugget qui permet d'éviter de nombreux maux de tête lors de l'utilisation de colonnes dans vos mises en page..
J'ai créé une page simple avec deux colonnes flottantes l'une à côté de l'autre. Vous remarquerez dans l'exemple que l'arrière-plan gris ne contient pas les colonnes flottantes. Donc, la chose la plus simple à faire est de définir l'élément conteneur sur float. Mais maintenant, vous verrez que l’arrière-plan du conteneur ne contient pas la zone de contenu..
Étant donné que le conteneur a une marge: 0 auto, nous ne voulons pas le faire flotter, car il le déplacera vers le côté où nous le ferons. Une autre façon de vider le flotteur consiste donc à insérer un élément de compensation. Dans ce cas, je viens d'utiliser un ensemble div vide pour effacer: les deux. Maintenant, il existe d'autres moyens d'effacer un flottant sans balise, mais j'ai remarqué quelques incohérences avec cette technique, alors je viens de sacrifier un div.
Parfois, il est plus facile de traiter l'exception à la règle, plutôt que d'ajouter des déclarations pour tous les autres éléments qui l'entourent.
La société SimpleBits de Dan Cederholm est le moteur d'une société de conception. Dan a travaillé avec les goûts de:
… Et de nombreuses autres sociétés Web de haut niveau. Heureusement, Dan transmet certaines des connaissances acquises sur ces blogs sur son blog chez SimpleBits. Voici une règle de base pour vos concepteurs et développeurs Web: Si Dan Cederholm dit quelque chose, vous écoutez. Pensez à lui comme à un sherpa numérique, vous guidant jusqu'au sommet de votre montagne design.
Bien qu'il puisse sembler contre-intuitif de mettre un négatif devant une déclaration (comme margin-left: -5px), c'est en fait une très bonne idée. M. Cedarholm explique qu’il est parfois plus facile d’utiliser des marges négatives sur des éléments que de devoir modifier tous les autres aspects de la conception pour l’aligner comme vous le souhaitez..
Il y a des situations où utiliser des marges négatives sur un élément peut être le moyen le plus simple de le «décaler» du reste, en traitant l'exception à la règle afin de simplifier le code..
Vous pouvez voir son exemple d'utilisation correcte de la marge négative ici.
"Comment centrer une mise en page de largeur fixe à l'aide de CSS?" Pour ceux qui savent, c'est simple. Pour ceux qui ne le font pas, il peut être frustrant de trouver les deux règles nécessaires pour effectuer le travail..
Ce n'est pas surprenant que Dan fasse cette liste deux fois. Les mises en page centrées sont une idée très simple en surface, mais pour une raison quelconque, elles ne fonctionnent pas toujours aussi facilement que celles annoncées. Centrer les mises en page avec CSS peut être une entreprise frustrante pour un débutant s'il n'a jamais essayé auparavant.
Dan a une méthode éprouvée qu'il utilise fréquemment pour obtenir un nirvana à mise en page centrée..
#récipient
marge: 0 auto;
largeur: xxxpx;
text-align: left;
De nombreuses conceptions modernes reposent sur des dispositions centrées. Par conséquent, cette méthode sera très utile aux développeurs et concepteurs Web..
Vous avez écrit des fichiers XHTML et CSS valides. Vous avez utilisé le modèle DOM (Document Object Model) standard du W3C pour manipuler des éléments de page dynamiques. Pourtant, dans les navigateurs conçus pour respecter ces normes, votre site échoue. Un DOCTYPE défectueux est susceptible de blâmer.
Jeffrey Zeldman est l’un des cofondateurs de l’excellent site de ressources A List Apart, cofondateur et administrateur de The Web Standards Project, dirige le studio de conception Happy Cog et a même écrit la livre sur la conception pour les normes Web. En bref, Zeldman est dans l’échelle supérieure des concepteurs de sites Web.
Le DOCTYPE d’une page Web est l’un des aspects les plus négligés du design. L’utilisation du bon DOCTYPE est cruciale, et Zeldman explique pourquoi.
L'utilisation d'un DOCTYPE incomplet ou obsolète ou d'aucun DOCTYPE à tous jette ces mêmes navigateurs en mode "Quirks", le navigateur supposant que vous avez écrit du code et du code obsolètes et invalides conformément aux normes déprimantes de la fin des années 1990..
Zeldman souligne l'importance d'utiliser a) un DOCTYPE, et souligne que vous devez ajouter une URL dans la déclaration de la manière suivante:
Si vous rencontrez des problèmes inexpliqués avec vos mises en page, il y a de fortes chances que DOCTYPE soit le problème..
Le centrage des éléments est une tâche fréquente lors de la conception de sites Web. Mais pour les débutants en CSS, il est difficile de savoir centrer par exemple tout un site Web dans des navigateurs autres que IE..
Wolfgang Bartelme est un concepteur de sites Web avec Bartelme Design, une firme de conception de sites Web. Bartelme possède l'un des blogs les plus élégants et crée continuellement d'excellents travaux d'icônes et de design. Il a réalisé le travail de conception pour la plate-forme de blogs Squarespace, ainsi que pour le populaire événement logiciel MacHeist.
Wolfgang a créé un tutoriel qui aide à la tâche complexe de centrer des éléments avec CSS. Les éléments centrés sont extrêmement utiles, mais sont parfois difficiles à réaliser compte tenu de la conception. Le tutoriel de Bartelme assure un alignement centré en choisissant le bon DOCTYPE et en ajoutant son CSS voodoo. Le code n'a rien d'extraordinaire et fait le travail, et s'inscrit directement dans la recherche de la simplicité en CSS.
Trenton Moss connaît la convivialité du Web. Il a sa propre entreprise de convivialité Web qui forme les gens à la formation à la convivialité et à la rédaction Web. Il écrit également pour des sites tels que Sitepoint. Trenton donne d'excellents conseils basés sur son expérience d'expert en convivialité Web.
C'est un simple fait que les conceptions changent avec le temps, notamment en ce qui concerne l'affichage du texte sur les sites Web. La meilleure chose qu'un concepteur Web puisse faire est de planifier pour l'avenir afin de s'assurer qu'au lieu de devoir modifier manuellement la façon dont le texte est affiché, il est préférable d'utiliser CSS pour modifier l'apparence du texte. Trenton Moss nous montre comment y parvenir en utilisant une commande CSS simple et sous-utilisée appelée text-transfom..
L'une des commandes CSS les moins connues, mais vraiment utiles, est la commande text-transform. Les trois valeurs les plus courantes de cette règle sont: text-transform: majuscule, text-transform: minuscule et text-transform: capitalize. La première règle transforme tous les caractères en majuscules, la seconde en petits caractères, et la troisième transforme la première lettre de chaque mot en majuscule..
En utilisant CSS pour afficher l'apparence du texte sur le site, cela permet de changer à l'avenir et de garder les choses cohérentes dans le temps..
Cette commande est extrêmement utile pour garantir la cohérence du style sur l’ensemble du site Web, en particulier s’il comporte plusieurs éditeurs de contenu. Supposons, par exemple, que votre guide de style indique que les mots dans les en-têtes doivent toujours commencer par des lettres majuscules. Pour vous assurer que c'est toujours le cas, utilisez text-transform: capitalize. Même si les rédacteurs de site oublient la capitalisation, leur erreur ne sera pas affichée sur le site..
Bien que la transformation de texte soit une petite chose à ajouter à une présentation CSS, elle peut faire toute la différence dans le futur lorsque des modifications doivent être apportées..
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.
Accentsconagua