CSS pour le futur
Le langage CSS a été mis en place au milieu des années 90’ et a connu plusieurs versions depuis. La version qui sert de base au codage actuel, la "2.1" a été officiellement adoptée en 2007 et n’est toujours pas implémentée partout.
CSS3 n’est pas encore officiellement adopté partout mais plusieurs navigateurs tirent vers l’avant cette norme de description css en reconnaissant certaines déclarations.
Voici celles qui nous paraissent rapidement utilisable.
un site web de test pour plusieurs des déclarations ci-dessous : css3 generator.
Box shadow
La déclaration "box-shadow", comme son nom le laisse entendre, permet de mettre une ombre portée à un élément de type block.
Voici un exemple rapide :
box-shadow: 0 0 40px #BDBAB2;Plusieurs paramètres sont à donner :
1) décalage horizontal vers la droite (ici 0)
2) décalage vertical vers le bas (ici 0)
3) étendue du dégradé (ici 40px)
4) la couleur (ici #BDBAB2)
Pour rendre la déclaration compatible avec de vieilles versions de safari et firefox et quelques autres logiciels, on devra déclarer plusieurs fois le box shadow en le précédent de préfixes - moz- et -webkit-, et ce pour encore quelques années.
Donc voici un code complet
box-shadow: 0 0 40px #BDBAB2;
-moz-box-shadow: 0 0 40px #BDBAB2;
-webkit-box-shadow: 0 0 40px #BDBAB2;Un article plus complet sur Alsacréations
Un autre sur mamouthland
Text shadow
Il est aussi possible de donner des ombres aux éléments de texte eux-mêmes.
text-shadow:1px 1px 2px #666;De nouveau, les paramètres gèrent le décalage en x et y, puis la dose de flou et la couleur.
Note : Internet explorer ne reconnait pas la transparence de texte.
Voir le lien vers alsacréations pour plus d’info.
Transparences des blocs
On peut donner à des éléments une transparence en réglant le paramètre opacity :
opacity:0.5;Opacity prendre une valeur entre 0 (transparent) et 1 (opaque).
Comme Microsoft veut imposer ses propres normes, il existe un bidouille pour rendre l’opacité fonctionnelle avec explorer :
opacity:0.5;
filter : alpha(opacity=50);Transparence de couleur
On peut aussi rendre partiellement transparente une couleur en lui associant une valeur en rgba :
color:rgba(255,0,0,0.5);les trois premiers paramètres sont les valeurs du rouge, vert et bleu entre 0 et 255, puis l’opacité de la couleur entre 0 et 1.
Fantastique, mais toujours pas reconnu en Explorer
Voir l’article sur le sujet sur alsacréations.
Box borders
Les coins d’un bloc peuvent enfin être arrondis avec css3, sans devoir utiliser des images de fond...
Les bords arrondis sont reconnus par tous les navigateurs contemporains (Explorer 9 les accepte).
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;Remarquez les deux déclarations permettant la reconnaissance par les vieux navigateurs Safari et Firefox.
Sachez qu’il est possible de préciser les arrondis de chaque coins séparément, comme ceci par exemple :
border-radius: 5px 10px 0 5px;Display : flex
La déclaration "display" a reçu plusieurs nouveaux modes avec css3. Le mode flex est un de ceux qui apporte des solutions pratiques aux graphistes qui ont été attendues longtemps.
Le display flex s’applique à un élément parent, et agit sur le premier niveau de ses enfants. Par exemple, une liste ul et ses enfants li. Ou encore, une section et ses articles enfants.
Display : flex peut remplacer dans de nombreux cas de figure la disposition en float. Mais il a beaucoup d’avantage en plus.
Par exemple, les enfants d’un élément en display:flex vont par défaut se placer en ligne horizontale, en répartissant leur largeur. Ils vont aussi occuper le même espace vertical quand ils sont sur la même ligne.
On peut aussi les justifier facilement à gauche ou à droite, changer leur ordre, décider s’ils peuvent occuper une seule ligne ou plusieurs...
Voir un didacticiel assez complet et en français sur flex chez Alsacreations
Polices embarquées
Les polices utilisables dans une page web sont par défaut celle qui sont présentes dans le système de l’ordinateur utilisé. Il est possible depuis longtemps de charger une police personnelle, mais c’est seulement avec css3 et les polices open source que cette solution est viable.
L’utilisation de polices personnalisées reste complexe cependant pour deux raisons :
il est nécessaire de posséder les droits d’utilisation de ces polices. On peut utiliser aujourd’hui pas mal de polices ouvrant ces droits, mais n’importe qui d’un peu malin peut, comme pour une image, télécharger la police depuis votre site et ensuite l’utiliser sur son ordinateur, ce qui est problématique.
Les navigateurs ou nouveau médias (tablette, smartphone) ne suivent pas les mêmes standards. Pour faire face à tous ceux-ci, il faut pas moins de 4 fichiers : TrueType pour Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+, EOT pour Internet Explorer 4+, WOFF pour Firefox 3.6+, Internet Explorer 9+, Chrome 5+ et SVG pour iPad and iPhone
Fabriquer ces fichiers et les déclarer dans la css est encore un peu compliqué donc. Conseil final : suivez la procédure sur le site web de fontSquirrel. Ils mettent à disposition un nombre élevé de "fontface kits", ou kits tout fait pour l’utilisation de ces polices.
Voir le site des fontface kits sur le site fontsquirrel
Medias queries
Les medias queries permettent d’adapter un comportement css à certaines configuration de la page. Typiquement, pour réduire les tailles de polices pour les petits écrans, ou repèrer si on est sur une tablette ou un smartphone. Impossible de couvrir le sujet dans cet article en forme d’overview, voici un exemple simple :
@media screen and (max-height:600px){
#general {
width:400px;
}
}Voir un article à ce sujet sur le site de Mamouthland
Sélecteurs
On peut aussi sélectionner des éléments de manière plus précise qu’en css 2.1 : le premier paragraphe d’un bloc, ou le troisième, etc.
Un article au sujet des nouveaux sélecteurs sur le site de Jérôme Debray