Categories
Webstandards

Feuilles de style et background-image multiples

Je pense qu’il y a une fonctionnalité qui serait utile à beaucoup de monde: la possibilité d’appliquer plusieurs images de fond à un élément HTML. Les applications sont multiples: compositions complexes à l’aide de PNGs transparents, boîtes arrondies extensibles, boîtes ombrées et plus généralement blocs de formes complexes. On éviterait l’usage de <div> inutiles pour arriver à nos fins.

Malheureusement, cette possibilité n’est pas prévue pour le moment. Personne n’y a pensé je crois puisque rien de tel n’apparait dans le module background de CSS3.

L’idée serait d’utiliser la propriété background plusieurs fois dans un élément de la manière suivante:

 .exemple{ background: url(image1.png) no-repeat top; background: url(image2.png) no-repeat bottom; } 

Le navigateur se chargerait d’afficher les images dans l’ordre de leur déclaration, les fonds déclarés en dernier se superposant aux précédentes. De même, la dernière couleur de fond se substituerait aux couleurs prédéfinies.

Enfin bon, ce n’est qu’une idée, peut-être que ça va à l’encontre de règles préexistantes. Mais si ce n’est pas le cas, cette fonctionnalité donnerait plus de liberté aux webdesigners sans avoir à utiliser du code non sémantique.

6 replies on “Feuilles de style et background-image multiples”

Le ::outline de CSS permettra de faire ce genre de chose puisqu’il permet de créer une <div> virtuelle englobante, exit donc les <div>s imbriquées, puisque les CSS pourront en spécifier autant qu’il est besoin.

Comments are closed.