Arts numériques

Quelques nouveautÃ©s incontournables de css3

Stéphane Noel — 2012-04-15T18:51:53Z

Cet article est vouÃ© Ã devenir obsolÃ¨te dans les mois ou annÃ©es qui viennent avec l'implÃ©mentation de css3 dans les navigateurs contemporains. Certaines nouvelles dÃ©claration sont prometteuses, rendant accessible par css des effets graphiques qui demandaient jusqu'il y a peu de passer par des images, des hacks, du javascript ou du surcodage.

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 de la diffusion (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.

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.

DÃ©gradÃ© de couleur en background

Il est dÃ©sormais possible de placer un dÃ©gradÃ© en background. Techniquement, le code affecte l'attribut background-image :

body { background-image:linear-gradient(90deg,red,yellow); }

Le premier argument est l'orientation (ici 90 degrÃ©s pour un dÃ©gradÃ© horizontal), puis la liste des couleurs par lesquelles passe le dÃ©gradÃ©, ici du rouge au jaune.
Il est possible d'Ãªtre plus prÃ©cis dans le points de passage des couleurs :

body { background-image:linear-gradient(90deg, red 0%, yellow 10%, blue 50%, purple 100%); }

Il est aussi possible de faire des dÃ©gradÃ©s radiaux, en forme de cercle donc :

body { background-image:radial-gradient(90deg, red 0%, yellow 10%, blue 50%, purple 100%); }

Et il est possible enfin de produire des dÃ©gradÃ©s rÃ©pÃ©titifs.

body { background-image:repeating-linear-gradient(90deg,white 0px,white 10px, black 15px, black 25px, white 30px); }

Voir la page de documentation sur le site de la fondation Mozilla.

Appliquer des filtres sur des images

Il est possible d'appliquer des filtres sur les images. Cette option est trÃ¨s gourmande en ressources, et donc a utiliser avec parcimonie, mais promet de beaux dÃ©veloppements : l'attribut filter a pour le moment un nombre limitÃ© d'effets mais rien n'empÃªche Ã l'avenir de la complÃ©ter.
Actuellement il est possible d'utiliser : blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() ;

Selon les cas, on trouvera entre parenthÃ¨ses un pourcentage (en % ou valeur entre 0 et 1), un chiffre en longueur (em ou px par exemple) et parfois des paramÃ¨tres plus complexes (dans le cas du drop shadow par exemple.

#truc img { filter: blur(5px); }

CombinÃ© avec une dÃ©claration css en survol (:hover), c'est enfin une solution pour Ã©viter de devoir utiliser deux images.

Voir la page de rÃ©fÃ©rence sur le site Mozilla.

Border-radius

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;

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.

Lire les deux articles sur ce site concernant l'historique et la mise en pratique des typos embarquÃ©es.
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; } }

Lire les deux articles sur le concept de media queries et la mise en pratique sur ce site.

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

Utilisation de id en html et css

Stéphane Noel — 2009-10-06T12:11:09Z

Nous avons jusqu'Ã prÃ©sent modifiÃ© le comportement visuels de certains tags (ou balises) Ã l'aide des css. Mais on peut Ãªtre plus fin dans la maniÃ¨re de modifier ces comportements, grÃ¢ce aux classes et balises, et Ã la sÃ©lection hiÃ©rarchique.

Styler des Ã©lÃ©ments particuliers

en CSS, on peut atteindre des Ã©lÃ©ments par leur nom de balise ;

p { font-size:10px; }

Mais c'est vite trop peu pour faire une mise en page prÃ©cise...
Par exemple, la navigation de votre site, si elle est sÃ©mantiquement bien codÃ©e, sera une liste de liens. On accÃ¨dera Ã ses Ã©lÃ©ments en utilisant la dÃ©claration css de ul et li. Mais si on a d'autres listes dans la page web, ce qui est souvent le cas, on manque alors de prÃ©sision : on voudrait que seul les liens de la navigation soient en grand, sur fond de couleur qui change en survol. C'est en fait possible grÃ¢ce aux classes et id.

Id = identifiant

On peut associer un attribut "id" Ã n'importe quelle balise. Il suffit de crÃ©er cet attribut et de lui donner un nom unique. "id" signifie "identifiant", et se code comme suit :

 Un Ã©lÃ©ment

Ici j'ai donc associÃ© l'id "navigation" Ã ma navigation. LÃ comme ailleurs, on veille Ã Ãªtre sÃ©mantique. L'identifiant va nous servir Ã accÃ©der Ã cet Ã©lÃ©ment particulier avec les css. On verra plus tard que c'est aussi utile pour accÃ©der Ã ces Ã©lÃ©ments en javascript.

#navigation { background-color:purple; font-size:12px; font-weight:bold; }

La particularitÃ© de l'id, c'est que l'on ne peut l'associer qu'Ã une seul Ã©lÃ©ment de l'arbre html. C'est normal puisqu'il s'agit d'un identifiant.
Or il est souvent utile de pouvoir crÃ©er un style que l'on appliquera Ã plusieurs Ã©lÃ©ments dans la page. Dans ce cas, on utilisera des classes.

Voir pour Ã§a l'article suivant.

Ecrire des graffittis avec jquery, php et mysql

Stéphane Noel — 2008-12-08T23:27:33Z

Un exemple simple et complet : intervenir sur une page en cliquant dessus, sauvegarder le rÃ©sultat dans une base de donnÃ©e pour pouvoir les afficher au rechargement de la page.

Ce code est perfectible : on peut imaginer pouvoir demander une image au lieu d'Ã©crire du texte, de fabriquer une texte en image avec gd2, de choisir une couleur, de naviguer dans la profondeur des messages, de recharger rÃ©guliÃ¨rement la page en ajax pour en faire un espÃ¨ce de chat...

1) La page d'initialisation de la base de donnÃ©e

On externalise cette part du code pour la rÃ©employer 2 fois.

2) La page elle-mÃªme

Contient les fonctions qui crÃ©e le formulaire et fait la requÃªte ajax, plus le listage des messages dÃ©jÃ Ã©crit au chargement.

    Add your comment on the metawall      ".stripslashes($row['contenu'])."

\n"; } } ?>

3) La page qui entre les message dans la db

Cette page est appellÃ©e par jquery. Ce code de dÃ©mo n'est pas dÃ©gradable. Son activation par cliquer-pointer est trop appuyÃ© sur le javascript pour l'Ãªtre...

4) Les styles css

Dans le fichier style.css, quelques lignes.

body { font-family:arial, sans-serif; font-size:11px; } .clicform { background-color:#fff; border:1px solid #ccc; } .clicform textarea{ heigth:4em; } .contenu { position:absolute; } .clicform textarea, .contenu { font-size:21px; font-weight:bold; color: #666; width:200px; } .validbutton { font-size:12px; }

Ajouter Ã ceci Ã©videmment la librairie http://jquery.com...

Principaux attributs en CSS

Stéphane Noel — 2008-08-17T21:59:12Z

Consultez rÃ©guliÃ¨rement la documentation complÃ¨te des dÃ©clarations css (sur yoyodesign), mais on peut Ã©tablir ici un liste courte des principales dÃ©clarations css :

font-family permet de dÃ©terminer une liste de police que l'on veut voir utiliser pour un Ã©lÃ©ment : font-family:arial, geneva, sans-serif;. Le w3c recommande de terminer la liste par une des trois polices gÃ©nÃ©riques : serif, sans-serif ou monospace.

font-size : permet de dÃ©terminer la taille de la police. En px, en em, en pt ou en %, souvent.

font-weight : determine la graisse de la police (bold ou normal, souvent).

font-style : permet de mettre la police en italique (font-style:italic).

color : dÃ©finit la couleur de la police. En hexadÃ©cimal (#ffcc00 par exemple) ou en rgb, ou encore par des noms pour certaines couleurs (blue, green, silver par exemple).

width : permet de dÃ©terminer la largeur des Ã©lÃ©ments de type "bloc". En pixel, pourcentage, em...

height : mÃªme chose pour la hauteur.

max-width, max-height : dÃ©terminent la hauteur ou largeur maximale d'un Ã©lÃ©ment, ce qui permet qu'en cas de rÃ©duction de la fenÃªtre, ils puissent s'adapter, tout en donnant une taille au-delÃ de laquelle l'Ã©lÃ©ment ne grandit plus.

margin : la marge autour d'un bloc. En px, en em, en % par exemple.

padding : la marge entre le bord du bloc et le texte.

border : le bord du bloc. On dÃ©clare souvent dans la foulÃ©e la couleur, l'Ã©paisseur et le style : "1px #000000 dotted" par exemple pour un bord pointillÃ© d'un pixel de hauteur et noir. On peut dÃ©clarer sÃ©parement le style du bloc (border-style:solid par exemple).

text-align : l'alignement du texte (left, right, justify).

text-decoration : soulignÃ©, une ligne en travers, ou rien. Souvent utilisÃ© pour enlever le soulignement des liens : a { text-decoration:none; }.

text-transform : permet de changer la casse des textes notamment : text-transform:uppercase par exemple.

display : permet de modifier le comportement d'un Ã©lÃ©ment : il peut passer de type "en ligne" (inline) Ã "bloc", mais aussi devenir invisible (display:none ;). utile pour la manipulation javascript.

visibility : autre moyen pour montrer et cacher un Ã©lÃ©ment (visibility:hidden ou visibility:visible).

background-color, background-image, background-repeat permettent de gÃ©rer les couleur et motif d'arriÃ¨re-plan.

overflow : gÃ¨re le comportement des Ã©lÃ©ments de type bloc. Si un Ã©lÃ©ment reÃ§oit une taille de 200 pixels de haut et que le texte est plus long, celui ci dÃ©passera le bloc et s'affichera tout de mÃªme. On peut donc indiquer "overflow:hidden" pour qu'il soit cachÃ© ou "overflow:auto" pour qu'un ascenceur apparaissent Ã droite...

Les Cascading style sheets

Stéphane Noel — 2008-08-17T21:58:36Z

Nous avons prÃ©cÃ©demment crÃ©Ã© une page et l'avons nourrie de contenus, encapsulÃ©s dans des balises qui permettent de comprendre la logique du document. Mais le rÃ©sultat lorsque l'on affiche cette page dans le navigateur est brut de dÃ©coffrage. Texte noir, fond blanc, liens bleus, tous les contenus empilÃ©s les uns au dessus des autres.

Les css est un langage de description des comportements visuels. De la mÃªme maniÃ¨re que h1 dit "ceci est un titre", les css vont permettre de dire au navigateur "le fond est beige clair" ou "ce titre est en 18 pixels de hauteur" par exemple.

Le W3C recommande de sÃ©parer les diffÃ©rents codes en usage dans une page web. Le HTML s'occupe de structurer l'information de la page dans un but essentiellement sÃ©mantique : un h1 est le titre principal de votre page, un p est un paragraphe, etc. A vous d'utiliser judicieusement les tags pour rendre la page la plus juste du point de vue de son contenu.
Maintenant lorsqu'il s'agit de couleur, de taille de police, de structuration visuelle de votre page, ce n'est plus du ressort du html, Ã§a concerne les css. On verra qu'on peut mettre du code css directement dans les balises, ou les concentrer dans le head de la page, mais le w3c recommande (et moi avec eux) de mettre toutes ces informations dans un fichier sÃ©parÃ©.
La premiÃ¨re spÃ©cification du langage CSS est publiÃ©e en 1996 et contient une cinquantaine de propriÃ©tÃ©s. L'idÃ©e est par la suite d'ajouter des "niveaux" : CSS 2 ajoute des propriÃ©tÃ©s en plus de la version 1, sans modifier celle-ci. CSS3, est donc un troisiÃ¨me niveau qui Ã©largit les possibilitÃ©s offertes par CSS 1 et 2.

La sÃ©paration des codes permet :
– de rÃ©duire la taille des fichiers HTML, qui ne contiennent plus que la structure et l'information. Le code est plus lisible.
– De centraliser le code css dans un fichier sÃ©parÃ©, qui peut s'appliquer Ã lâ€™entiÃ¨retÃ© d'un site plutÃ´t qu'Ã une seule page. Il en dÃ©coule un gain de productivitÃ© : un seul endroit oÃ¹ agir pour modifier le comportement visuel d'une page.
– Le code ainsi produit suit une norme plus claire, ce qui garantit une lecture plus facile Ã lire pour les navigateurs actuels et futurs. Le site est donc plus facile Ã maintenir et faire Ã©voluer.

DÃ©finitions

Voici un exemple de code css :

h2 {
color:green;
font-size:22px;
}

h2 est un sÃ©lecteur
color et font-size sont des propriÃ©tÃ©s
green et 22px sont des valeurs.

Placer le code css : 3 endroits possibles

ceci est un texte en rouge

l'attribut "style" permet en effet de dÃ©clarer le comportement css de la balise dans laquelle il est codÃ©. Cette mÃ©thode, la plus "facile", est aussi laborieuse : les autres paragraphes de la page ne changeront pas de comportement, et si il y en a 10 que l'on dÃ©sire modifier, il faudra Ã©crire 10 fois l'attribut. De plus, ce n'est pas trÃ¨s "w3c" (on mÃ©lange html et css dans le mÃªme code et alourdit la page Ã force de dÃ©finir chaque Ã©lÃ©ment individuellement).

DÃ©clarer un comportement css dans le head
La deuxiÃ¨me mÃ©thode est d'Ã©crire dans le head de la page une sÃ©rie de dÃ©claration css, comme ceci :

On commence par les balises ouvrantes et fermantes qui permettent d'indiquer au navigateur que l'on va insÃ©rer des sÃ©lecteurs css. Ensuite on fait une premiÃ¨re dÃ©claration, "h1", et entre deux accolades, on dÃ©clare un attribut (font-size ou color, on en verra d'autres) et lui donne une valeur aprÃ¨s les deux points (18px et red). On termine par le point virgule, qui sert de sÃ©parateur entre deux attributs.

Les retours Ã la ligne et les espaces ne sont pas pris en compte, on arrange le code Ã sa sauce. Les deux points, cependant, doivent rester collÃ©s Ã la dÃ©claration ( "color : red" mais pas "color : red").

Cette mÃ©thode fait gagner du temps : le sÃ©lecteur "p" indique que l'on veut que tous les paragraphes vont recevoir le comportement visuel dÃ©clarÃ© (une taille de 10px de haut et une couleur rouge, dans notre exemple). Et cela, oÃ¹ qu'ils setrouve dans la page, et quelle qu'en soit le nombre.
En outre, on l'a Ã©crit Ã un seul endroit, facile Ã retrouver, l'entÃªte de la page. Mais Ã chaque page du site on devra replacer ce code dans le head.

CrÃ©er une feuille de style sÃ©parÃ©e
Enfin, on peut lier un fichier sÃ©parÃ©, portant l'extension .css, Ã la page css. On le fait dans le head de la page, comme ceci :

Dans la page liÃ©e, on dÃ©clare les comportements css comme vu prÃ©cÃ©demment :
h2 { color: red; }
L'avantage est multiple : on sÃ©pare css et html, on peut utiliser une mÃªme page de dÃ©claration pour tout le site. Bref on gagne du temps.

Ajoutons que les 3 solutions (dans la balise, dans le head, dans une page sÃ©parÃ©e) peuvent coexister, et on peut associer plusieurs pages de dÃ©clarations css externes.

On peut utiliser principalement 3 types de sÃ©lecteurs :
– Les balises, peuvent toutes Ãªtre dÃ©clarÃ©s : body, h1, p, div, etc. Peuvent tous recevoir des comportements visuels. Sauf cellex qui n'ont pas d'existence visuelle (comme head ou br par exemple...).
– on peut dÃ©finir des classes. Une classe est un attribut de balise que l'on donne comme ceci :

un texte ici

et en lui donnant un comportement visuel comme ceci :

Remarquez le point qui prÃ©cÃ¨de le nom de la classe dans la dÃ©claration css. Il est obligatoire pour faire comprendre qu'il s'agit bien d'une classe.
On peut attribuer une classe Ã n'importe quel Ã©lÃ©ment, on peut donner une mÃªme classe Ã plusieurs Ã©lÃ©ments, on peut mÃªme donner plusieurs classe Ã un mÃªme Ã©lÃ©ment, comme ceci :

un texte ici

un texte ici

et en lui donnant un comportement visuel comme ceci :

Remarquez la diÃ¨se qui prÃ©cÃ¨de le nom de l'identifiant dans la dÃ©claration css. Elle est obligatoire pour faire comprendre au navigateur qu'il s'agit bien d'un identifiant.
Contrairement Ã la classe, on ne peut donner qu'un seul identifiant Ã un Ã©lÃ©ment, et surtout on ne put utiliser un identifiant qu'avec un seul Ã©lÃ©ment de la page. Tous les tags peuvent recevoir un id, qui est aussi utilisÃ© avec le javascript.

La devise Ã se rappeler en toutes circonstances

Une phrase dont vous avez Ã vous souvenir en toutes circonstances :
"tous les Ã©lÃ©ments Ã l'exception de span et div ont un comportement par dÃ©faut"
Les liens (la balise a), par exemple, sont par dÃ©faut bleus et soulignÃ©s. Si vous ne redÃ©finissez que leur couleur, ils seront toujours soulignÃ©s.

Extra : Pense-bÃªte html-css-javascript

Stéphane Noel — 2007-09-21T20:31:17Z

Les codes quâ€™on oublie toujours en tant que jeune codeur.