background preloader

Les préfixes vendeurs en CSS

Les préfixes vendeurs en CSS
Afin de permettre le développement progressif et l'implémentation des modules CSS, les éditeurs de navigateurs (vendors) ont la possibilité d'introduire le support de propriétés spécifiques. Cette manière d'opérer est recommandée par le W3C depuis CSS 2.1 et valable pour les versions suivantes. Ces "propriétés propriétaires" doivent être préfixées d'un tiret et d'un code correspondant au moteur les exploitant : -o- pour Opera -moz- pour Gecko (Mozilla) -webkit- pour Webkit (Chrome, Safari, Android...) -ms- pour Microsoft (Internet Explorer) -khtml- pour KHTML (Konqueror) Le tout doit être suivi du nom de la propriété souhaitée ou anticipée. Ainsi, la fameuse propriété border-radius destinée à arrondir les angles des boîtes sans utiliser d'images ou de techniques alternatives s'est vue introduite par : -moz-border-radius sous Gecko (2.0 à 3.6) -webkit-border-radius sous WebKit Quelques inconvénients font surface : Recommandation d'usage courant

http://www.alsacreations.com/article/lire/1159-prefixes-vendeurs-css-proprietaires.html

Related:  HTML CSSPrincipesCSS

Principes du CSS – Les sélecteurs (Partie1 : CSS2) Lorsqu'on utilise du CSS, on peut se contenter des trois sélecteurs de base : Les éléments, les identifiants et les classes. Souvent, sans le savoir, vous utilisez un sélecteur simple de descendance, par un espace entre deux de ces sélecteurs - hé oui ! Mais il existe d'autres sélecteurs plus avancés, nous allons les passer en revue. Je ne traite ici que du CSS 2.1. Le CSS3 apporte de nouveaux sélecteurs très intéressants et utiles, qui sont listés dans cet article. Préambule

CSS: Centrer un objet Centrer des lignes de texte Le plus fréquent (et donc) le plus facile des types de centrage est de centrer des lignes de texte dans un paragraphe ou dans un titre. CSS possède la propriété 'text-align' pour cela: Chaque ligne d'un P ou d'un H2 est centrée entre les marges, comme ceci: Timing des animations et des transitions en CSS3 - Alsacreations L'arrivée de CSS3 il y a quelques années a pour plusieurs d'entre nous grandement révolutionné la manière dont nous intégrions un site Web. D'abord, ce furent les propriétés purement graphiques (coins arrondis, ombres portées) qui frayèrent leur chemin jusqu'en mode production. Ces propriétés étaient les mieux supportées des différents navigateurs, et elles étaient facilement imitables sur les plus anciens grâce aux outils à notre disposition (Par exemple: Css3Pie, Selectivizr, Modernizr, etc). Même la tâche redondante consistant à préfixer nos propriétés CSS3 est aujourd'hui facilitée avec Prefixr et PrefixFree.

Personnalisation d'un formulaire XHTML avec CSS Cet article vous explique comment mettre en forme un formulaire avec du CSS sans oublier les balises label, fieldset et optgroup. Article lu 8868 fois. Je vais vous présenter étape par étape le même formulaire mais avec un petit quelque chose en plus. Au final nous aurons un beau formulaire CSS. Il y aura d'abord une partie XHTML pour rappeler certaines balises souvent oubliées.

Un IDE pour créer des animations CSS3 Sencha Animator se propose de créer des animations CSS3 grâce à une interface utilisateur conviviale, proche d'un programme de dessin vectoriel. Il est possible d'intégrer des objets, de les déplacer, redimensionner, avec différents niveaux d'imbrication. Des transformations de rotation et de déformation sont disponibles ainsi que les dégradés, les flous, et les ombrages. La ligne de temps permet de s'y retrouver. L'avantage est de gagner du terrain face à des outils tels que Flash qui disposent déjà depuis de nombreuses années d'un environnement tout-en-un permettant de produire des animations sans devoir toucher à une quelconque ligne de code. Les animations en CSS3 sont récentes, et jusqu'à présent il était nécessaire de les paramétrer soi même, ce qui pouvait s'avérer intéressant pour des démonstrations technologiques mais très fastidieux dans un usage plus classique.

Lien vide Non, utiliser title n'est pas totalement fiable, il peut parfois poser des problèmes car il n'est pas systématiquement rendu comme on le voudrait. Le lien proposé par Felipe expose la meilleure solution si tu tiens aux icônes textuelles. Pour ta deuxième question sur les labels, tu peux envoyer le texte du label hors de la zone d'affichage avec du text-indent ou du clip ou ce que tu veux (sauf display:none ou visibility:hidden ou width/height:0). Certains sites mettent aussi une image à la place du texte et ça va très bien, p.ex. <label... Menu déroulant – FrogWeb Menu déroulant 2 niveauxComme il y avait pas mal de demandes je me suis amusé à faire un :menu-deroulant-2-niveaux Pour le code il y a juste à afficher le code source. Menu déroulant horizontal Pour cacher/montrer un sous menu la technique du display: none (cacher) et display: block (montrer) est souvent utilisée.

Les marges en CSS avec margin et padding Pour affecter des marges aux différents éléments d'une page web, les propriétés CSS à utiliser sont margin, pour les marges extérieures, et padding pour les marges intérieures. Quand on a dit ça, on pourrait croire que ça suffit tant ça paraît simple. En fait, ce n'est pas tout à fait vrai... Trois R Un article de Wikipédia, l'encyclopédie libre. Les trois R constituent une stratégie de gestion des produits en fin de vie et des déchets qui en découlent, visant à : Réduire la quantité de produits qui arrivent en fin de vie,Réutiliser des produits ou certaines de leurs parties qui deviendraient autrement des déchets,Recycler les matières premières.

Empêcher les flottants de dépasser de leur conteneur Par défaut dans les navigateurs, les éléments positionnés grâce à la propriété CSS float (aussi appelés flottants, ou en anglais floats) sortent du flux de leur conteneur. Autrement dit, les flottants «dépassent». C'est ainsi qu'on se retrouve avec des conteneurs qui font zéro pixel de hauteur, des colonnes qui passent à travers un pied de page, et autres résultats peu souhaitables.

Related: