CSS 3. On revoit les bases : la propriété « background » Par Paul O’Brien La propriété CSS background vous permet d'appliquer à tout élément de votre choix des couleurs ou des images de fond.
Mais il y a plein de petits bugs et de défauts qui peuvent surprendre le développeur non averti. D'abord c'est quoi un fond ? Le fond d'un élément, c'est à la fois sa largeur et sa hauteur totales, y compris le remplissage et les bordures qui lui ont été appliqués. Jardin Zen css: La beauté de la conception CSS. Alors, de quoi s'agit-il ? Il faut sans cesse montrer la puissance de CSS. Le Jardin Zen vise à exciter, inspirer et encourager la participation. Cibler le Nième élément en CSS2. CSS3 apporte son lot de sélecteurs très évolués permettant de cibler des éléments tels que le Nième enfant, les éléments pairs ou impairs, le dernier, etc… Mais réservés aux navigateurs récents (exit donc IE6, IE7 et même IE8 en général).
Contrairement à ce que l’on croit, CSS2 n’est pas exempt de sélecteurs avancés très intéressants, et surtout compatibles depuis Internet Explorer 7. Parmi ces éléments, le sélecteur d’adjacence directe, qui s’écrit avec un “+" et qui cible un élément selon son frère précédent. Ainsi, h1 + p va cibler un paragraphe uniquement s’il est le frère qui suit un élément h1. Tous sauf le premier Le sélecteur d’adjacence prend tout son intérêt dans une suite d’éléments identiques, par exemple une liste. Tous sauf les N premiers Par extension, il est tout à fait envisageable d’écrire li + li + li pour cibler les éléments qui ont au-moins 2 éléments de liste avant eux, donc tous sauf les deux premiers.
Mise en page CSS avancée grâce à la propriété display. L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients.
Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet. Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align. Fort de ce constat, et vu la puissance qu'offre les cellules de tableaux en terme d'alignement vertical de leurs contenus, la spécification CSS admet logiquement l'attribution de ce comportement à tout élément qui en nécessiterait. Initiation au positionnement en CSS (Partie 1) Pour éviter l'usage inconsidéré des tableaux de mise en page, l'utilisation correcte de chaque élément (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS est dorénavant indispensable.
La théorie des floats « OnFaitDuWeb.com. Les éléments flottants ou floats font partie des outils de positionnement les plus utilisés en CSS et pourtant ils sont souvent une source de tracas majeur pour les développeurs web.
Le problème du float est celui de la plupart des autres propriétés de positionnement qui « sortent de l’ordinaire », c’est-à-dire qui ne correspondent pas au positionnement par défaut. Parce qu’il applique de nouvelles règles de positionnement, un élément flottant ne peut pas être manipulé de la même façon qu’un positionnement normal si l’on souhaite avoir le résultat désiré. En clair, vous ne pouvez pas exiger d’une cafetière qu’elle vous fasse un café si vous mettez des feuilles de thé dans le filtre sous prétexte que, ben, cette technique a toujours bien marché dans la théière.
Pour que la propriété float fonctionne correctement, il faut l’utiliser avec les bons éléments. Initiation au positionnement CSS (partie 2) Le positionnement des éléments en CSS est sans aucun doute l'un des aspects les plus intéressants de cette technologie, mais également l'un des plus ardus.
Positions, flux et autres flottants sont pourtant des notions essentielles à une bonne maîtrise de la mise en page. Si de plus en plus d'intégrateurs semblent aujourd'hui acquérir les bases du comportement de ces propriétés, les choix des techniques demeurent couramment discutables, tout au plus hasardeux. Voyons ces méthodes de positionnement en détails afin de ne plus se laisser aller à des choix arbitraires incohérents. Sommaire du document Parce qu'une révision des bases ne fait jamais de tort… La section qui suit se contente d'introduire brièvement les notions de positionnements disponibles en CSS. Notion de flux Le flux d'un document pourrait se définir comme étant le comportement naturel d'affichage des éléments d'une page web. Les éléments de type block (h1, p, ul, ol, dl, table, blockquote, etc.)
Comment centrer verticalement sur tous les navigateurs ? Ce tutoriel présente des solutions pour centrer verticalement des éléments de tailles variables dans des conteneurs de hauteur fixe ou fluide.
Les techniques exposées sont compatibles avec tous les navigateurs actuels, à partir d'Internet Explorer 8 et n'utilisent ni <table>, ni JavaScript. Note : ce tutoriel a été initialement rédigé en mai 2010. Il a subi une grosse refonte en mars 2016 pour se mettre à jour. Des CSS dynamiques grâce au langage LESS. Vous avez toujours voulu utiliser des variables, des fonctions, ou encore faire de l'héritage avec le langage CSS ?
C'est devenu possible grâce au langage LESS, aux frameworks Sass et xCSS. Cet article concernera uniquement le langage LESS et le compilateur LessPHP. Pour convertir une syntaxe LESS (format .less) à un format CSS valide, il faudra utiliser un compilateur comme LessCSS ou LessPHP. LessCSS permet une compilation de votre fichier .less avec Javascript, tandis qu'avec LessPHP la compilation se fera côté serveur avec PHP. L'avantage de ce dernier est au niveau de la compatibilité (vous aurez par exemple aucun problème si un intenaute désactive Javascript). Installation Vous devez obligatoirement travailler dans un environnement PHP. LESS « The Dynamic Stylesheet language. Using The Best Ampersand Available. I really like one of the typographic tricks Mark Boulton makes in his "Better Typography" presentation.
(Slideshow of the presentation here. Around slide #109) He suggests "using the best ampersand available". This just means that on some typefaces, the ampersand character can be a little lackluster and it can make a big improvement in style and readability to swap it out for another typeface. His (great) example is from SimpleBits: