CSS

10 techniques avancées et secrets de CSS2

Article par (Stilofoliophile, Strasbourg)
Mis à jour le . 57830 lectures.
Tags : css, table, ie8, IE6, ie7, after, before, avancees

A l'heure où les anciennes versions d'Internet Explorer disparaissent, il devient plus que temps de s'ouvrir aux secrets d'un langage malheureusement trop peu connu : CSS2, ou plus précisément CSS2.1.

De larges parties de CSS2 ont été occultées en raison des faiblesses d'IE6 puis d'IE7. Le marché actuel nous offre enfin la possibilité, au cas par cas, de négliger ces anciennes versions du navigateur de Microsoft. Les possibilités offertes par CSS2 sont bien plus vastes que vous ne l'imaginez…

Un monde sans Internet Explorer 6

Selon les statistiques européennes, le vénérable ancêtre IE6 ne représenterait aujourd'hui que 2% du marché. En clair, imaginer un monde sans IE6 est parfaitement envisageable et ouvre d'intéressantes perspectives en terme de design web. En voici quelques exemples…

min-width, max-width, min-height, max-height

Les propriétés de minima et maxima, reconnues dès IE7, facilitent la vie et évitent l'usage de JavaScript dans de nombreux cas de figure :

min-height

:first-child

La pseudo-classe CSS2 :first-child offre la possibilité de cibler uniquement le premier élémént au sein de son parent.
Ainsi, ul li:first-child désigne le premier enfant de <ul> s'il s'agit d'un <li>, comme en témoigne cet exemple de liste.

:hover

La pseudo-classe dynamique :hover est connue depuis la nuit des temps lorsqu'elle désigne un lien, mais peu d'intégrateurs savent qu'il est tout à fait possible de l'appliquer à n'importe quel élément de la page, par exemple p:hover {background-color: pink;}, tout simplement parce que IE6 ne comprend pas cette syntaxe.

Les illustrations de cette pseudo-classe en action sont nombreuses. Nous l'avons mis en application sur le site de la Kiwi Party (saurez-vous le retrouver ?).

hover

Sélecteur d'enfants (A > B)

Le sélecteur A > B, supporté depuis IE7, ne cible que le premier niveau de descendance d'un parent, ce qui se révèle pratique dans le cas d'élément imbriqués.

Cette astuce permet par exemple de ne cibler que les premiers blocs div principaux d'une page grâce à la syntaxe body > div {border-radius: 10px;}, ou encore d'appliquer des styles spécifiques au premier niveau d'une liste imbriquée à l'aide de #nav > li {...} par exemple.

enfants

Sélecteur d'attribut [attr]

Comme son nom l'indique, le sélecteur d'attribut cible les éléments non pas selon leur classe ou identifiant, mais selon l'attribut, voire la valeur qu'il possède.

  • img[width] : cible toutes les images disposant d'un attribut width,
  • img[width][height] : cible toutes les images disposant à la fois d'un attribut width et height,
  • input[type="submit"] : sélectionne tous les champs input dont l'attribut type a pour valeur "submit",
  • a[href^="https"] : concerne tous les liens dont l'attribut href débute par la chaîne "https" (CSS3 reconnu par IE7),
  • a[href$=".pdf"] : désigne tous les liens dont l'attribut href se termine par la chaîne ".pdf" (CSS3 reconnu par IE7),
  • a[href*="alsacreations"] : cible tous les liens dont l'attribut href contient la chaîne "alsacreations" (CSS3 reconnu par IE7).

Les applications pratiques sont bien plus nombreuses qu'on ne l'imagine.

attributs

Sélecteur d'adjacence (A + B)

Ce sélecteur agit sur les éléments frères uniquement : la syntaxe A + B désigne l'élément B s'il est le frère placé immédiatement après A.

Assez mal jugé, ce sélecteur permet pourtant de cibler des éléments de manière très subtile sans avoir recours à des classes ou des identifiants.

adjacent

7- position: fixed

La valeur "fixed" de la propriété position est reconnue depuis IE7. Elle permet de figer un élément à l'écran, même si le contenu défile via l'ascenseur.

Une illustration classique consiste à réaliser un menu fixé à gauche de l'écran. Notez également que Facebook emploie cette technique pour fixer le cartouche de chat en bas de l'écran.

Un monde sans Internet Explorer 7

Les chiffres indiquent une part de marché inférieure à 8% pour Internet Explorer 7. Dans très peu de temps (aujourd'hui déjà dans certains cas), concevoir un site sans tenir compte de ce navigateur deviendra parfaitement concevable.

Voici un petit panel de fonctionnalités reconnues à partir d'IE8.

Contenu généré (:before, :after)

Les pseudo-élément :before et :after offrent la possibilité de générer du contenu (chaîne de caractère, image de fond ou compteurs de liste) via CSS.

Les applications pratiques sont multiples et variées :

contenu généré

display: inline-block

Supportée depuis IE6 mais de manière très partielle, la valeur "inline-block" de la propriété display permet ni plus ni moins de disposer d'éléments alignés tels des "inline" et dimensionnés tels des "block".

Ce schéma de positionnement sous-exploité résoud des équations actuellement complexes de type : centrer une liste de liens dimensionnés.

inline-block

Modèle tabulaire (display: table)

Le design tabulaire à l'aide de CSS (entendons-nous bien, je ne parle évidemment pas des balises HTML <table>) est voué à un très bel avenir proche, enfin utilisable depuis IE8.

Le modèle d'affichage tabulaire permet de réaliser de manière simplissime l'ensemble des cas de figure qui nous compliquent la vie actuellement :

table layout

Cet article, prônant les vertus de CSS2 à l'heure où tout le monde parle de CSS3 est le compte-rendu de ma présentation effectuée lors de la Kiwi Party d'Alsacréations. Les diaporamas de cette présentation sont en ligne sur Slideshare, et la vidéo est visible sur Dailymotion.

Commentaires

Victor BRITO a dit le

À noter que, dans la section sur le sélecteur d'attribut, les trois derniers exemples (a[href^="https"], a[href$=".pdf"] et a[href*="alsacreations"]) utilisent une syntaxe apparaissant en CSS 3.

Raphael a dit le

@Victor BRITO : Ah oui c'est vrai, je l'oublie tout le temps puisque ça fonctionne sur IE7 ;)

Mabelle a dit le

Merci Raphael d'avoir pris le temps d'en faire une version à mettre sur le site !

AlK a dit le

Joli article ! J'ai découvert des trucs :)

À noter que d'après quircksmode (http://www.quirksmode.org/css/contents.html) les sélécteurs « a:first-child » et « a + b » ne fonctionnent que sur de l'HTML static sur IE7 (mais « a ~ b » fonctionne).

De plus, toute petite astuce que j'utilise tous les jours, pour avoir quelque chose qui se rapproche de « display: inline-block; » sur IE, ajouter « *display:inline; zoom: 1; » (l'astérisque est là pour que la règle ne soit interprétée que sur IE).

Felipe a dit le

1/ J'écris #left, #right { min-height: 200px; } si je veux 2 blocs (souvent) de même hauteur tout en leur laissant une chance d'être zoomés jusqu'à 200% et/ou ne pas couper le contenu qu'ils accueillent.

2/ "s'il s'agit d'un <li>" est un pléonasme concernant les enfants d'une liste ;). Et ça cible aussi les premiers <li> des (sous-(sous-(sous-))) listes.

3/ C'est une bonne pratique de doubler les sélecteurs avec du :hover dedans par le même avec :focus pour ceux qui utilisent un clavier. Si c'est un effet graphique (ex: mettre en valeur une ligne de tableau pour pouvoir mieux la lire), pas grave mais ici c'est du fonctionnel (un menu) et c'est peine perdue puisque seuls les liens peuvent prendre le focus. Raison de plus d'utiliser du JS pour réaliser des menus déroulants et non pas 100% en CSS (ou mieux de ne pas utiliser de menus déroulants).

7/ Pour ceux qui se précipiteraient sur position: fixed; @notabene nous rappelle le problème que ça provoque http://www.nota-bene.org/Le-probleme-de-posit... (et y en a deux autres dans les commentaires). Je rajouterai que ça peut bien faire ramer le navigateur, pardon que ça pose des problèmes d'expérience utilisateur.

@AIK c'est un hack et çaÿmal, la seule bonne manière est d'utiliser un commentaire conditionnel

Maxiou a dit le

Bon c'est la première fois que je répond mais un grand merci à vous pour tous ces articles fort intéressants. Je suis en train d'apprendre tout ça et de retravailler mes sites aux normes, c'est très enrichissant ! Merci !

Chok71 a dit le

Super article, vivement que IE6 et 7 disparaissent. ^^
Pour ma part je fais déjà une dégradation élégante pour IE7, quand à IE6 j'évite à peine que ça soit "tout cassé"...

AlK a dit le

@Felipe : En effet. L'intérêt de ma remarque portait plus sur le fait d'avoir des éléments quasi inline-block sous IE. Le hack n'est qu'un (mauvais) moyen de l'appliquer.

Raphael a dit le

Merci pour ces premiers retours.
L'exemple du menu déroulant a été remplacé : un menu déroulant est *toujours* un mauvais exemple ;)

bzh a dit le

Hello, pourquoi ne pas avoir parlé de :last-child ?

Raphael a dit le

@bzh : parce qu'il ne s'agit pas de CSS2 mais d'un sélecteur CSS3 :)

13770 a dit le

Merci pour cet article très intéressant.

J'ai voulu faire un essai avec "fixed", ça fonctionne avec Firefox mais malheureusement pas avec Chrome, Safari, Opera, ni IE 9 !

Qu'ai-je loupé ?

Amicalement

Adelante a dit le

Très très bon article comme toujours, rien que ressortir le ":first-child" des cartons évite de générer des classes "premier_element_de_ma_liste_qui_n_est_pas_décoré_pareil" ...

D'ailleurs je pensais que :last-child faisait partie de la même famille CSS 2.1

Je ne me suis encore jamais servi des table-cell, j'utilise encore les tableaux pour présenter des listes, dans les administrations par exemple, pour leur simplicité de mise en forme. Mais si je peux changer ça...

Raphael a dit le

@13770 : si si, ça fonctionne très bien (si tu as un compte Facebook, tu peux t'en rendre compte rapidement). Il doit y avoir une petite erreur dans ton code.

@Adelante : table-cell est l'avenir proche du positionnement CSS (en attendant les nouveautés concoctées dans CSS3). Seul hic : attendre que IE6 et IE7 soient morts... ce qui ne va pas arriver rapidement au sein des grosses entreprises.

loicbocquet a dit le

oui ok "position:fixed" fonctionne dans internet explorer pour cet exemple
http://www.alsacreations.com/xmedia/tuto/exem...
sauf que le menu recouvre le texte... super :(

Raphael a dit le

@loicbocquet : ah non c'est une erreur bête de ma part, j'ai utilisé une balise HTML <section> non reconnue par IE. J'ai corrigé.

loicbocquet a dit le

ah oui là c'est mieux, je suis rassuré car ça ne marchait pas non plus dans ie8. Pour ie9 je ne sais pas vu que je suis toujours sur XP.
merci

chadom a dit le

Très bon article. Une bonne petite révision pour ma part.

Felipe a dit le

@Raphael : "un menu déroulant est *toujours* un mauvais exemple" méoué \o/

Confridin a dit le

Excellent ! Alors que tout le monde ne fait parler que de CSS3, revoir les bases ne fait pas de mal.

Bon article d'AlsaCréation, une fois de plus. ;)

Raphael a dit le

@Confridin : oui c'est toujours utile de rabâcher les choses plusieurs fois, par exemple qu'Alsacréations prend un "s" à la fin :)

David-Dante a dit le

Merci Raphael. :-)

glow a dit le

Bel article,

effectivement, maintenant nous ne sommes plus limités par ie6 mais par ie7. ce qui nous donne accès à de "nouvelles" propriétés css2. Il y'aura toujours une version d'ie qui nous fera ch**r !! en sachant que même ie9 est limité, on est pas sorti de l'auberge.

à noter que display:inline-block marche sur ie7 mais uniquement sur les éléments qui sont "inline" par défaut tel les span => on peut utiliser cette propriété très pratique

glow a dit le

n’empêche c'est triste de dire qu'en ce moment on se fait plaisir avec du "first-child" ou du "inline-block" ! css3 où es-tu ?

Raphael a dit le

@glow : "à noter que display:inline-block marche sur ie7 " -> et même sur IE6 ;)

Sifi91 a dit le

Super article! Merci!

DvN a dit le

Un monde sans IE6+7, on va en pleurer de joie;0)))

Nigel a dit le

@glow : effectivement, maintenant nous ne sommes plus limités par ie6 mais par ie7

Nous ne sommes pas du tout limité par IE6, pour chacun des points cités dans "un monde sans IE6", il existe une, voire plusieurs solutions impliquant soit du Javascript, soit une feuille de style spécifique, appliqués uniquement pour IE6.
Cela demande un peu de temps supplémentaire lors de l'intégration, j'en conviens, mais nous limiter : non.

Sans compter que certains points sont de toutes façons assez déconseillés dans un processus de conception, comme le "Sélecteur d'attribut ([attr])", qu'il faut savoir appliquer a

Nigel a dit le

...avec parcimonie (mince, j'ai appuyé sur tab+entrée malencontreusement, ça a validé mon message), car on y perd très vite le contrôle de l'affichage dans le cadre d'un site suffisamment conséquent.

Au final, si un diffuseur souhaite que son site soit lu par des utilisateurs d'IE6, grand bien lui fasse, nous pouvons intégrer sans contrainte ce que nous désirons, à condition d'appliquer le correctif IE6/7 derrière.
Le jour où IE6 disparaitra, que se passera-t-il ? Rien. On gagnera juste un petit peu de temps lors de l'intégration. Ce qui n'est pas un mal. Mais je m'insurge sur le fait qu'on puisse penser qu'IE6 nous limite techniquement parlant. ;)

Victor BRITO a dit le

@Nigel : « Mais je m'insurge sur le fait qu'on puisse penser qu'IE6 nous limite techniquement parlant. ;) »

Effectivement. Pour ma part, je n'ai pas attendu qu'on commence à ne plus tenir compte d'IE 6 en production pour des projets professionnels pour explorer les sélecteurs et autres techniques avancés de CSS 2, y compris ceux du « monde sans IE 7 ».

Raphael a dit le

@Nigel :
- Les 30 bugs d'affichage typiques d'IE6 listés sur PositionIsEverithing sont une limite : je dois passer du temps à les analyser et à les corriger,
- Les bidouilles JavaScript pour satisfaire les manquements d'IE6 sont une limite : les performances de ce navigateur sont faibles et les plomber encore plus avec des scripts JS n'est pas toujours idéal,
- le fait de devoir systématiquement donner des id et des classes à tous les éléments parce que IE6 n'arrive pas à les cibler facilement en CSS est une limite : j'ajoute inutilement du code non sémantique dans ma page HTML,
- Le temps que je dois passer à systématiquement tester sur IE6 et IE7 et produire une feuille de style dédiée pour plaire à mon client sont une limite.

Au final, oui, IE6 *est* limité. Comme toutes limites, on peut les contourner... mais avec d'autres contraintes.

webmaster a dit le

Merci Raphaël pour cette page.
Ceci dit, il n'y a pas que IE6 le problème, IE en général pose bcp de soucis.
J'ai une question par rapport au css avec wordpress,
t'as une idée pourquoi tout se décale dès que j'affiche une page du blog wordpress avec IE 9?

Tu peux regarder ceci:
http://www.creations3w.fr/blog3w/

Cordialement,
Rad.

webmaster a dit le

Merci Raphaël pour cette page.
Ceci dit, il n'y a pas que IE6 le problème, IE en général pose bcp de soucis.
J'ai une question par rapport au css avec wordpress,
t'as une idée pourquoi tout se décale dès que j'affiche une page du blog wordpress avec IE 9?

Tu peux regarder ceci:
http://www.creations3w.fr/blog3w/

Cordialement,
Rad.

xico a dit le

Excellent article, il m’a permis de réglé pas mal de problèmes sur mon template http://www.webartising.com
Merci encore et continuer votre bon boulot :)

davin_asga a dit le

C'est vraiment très sympa et pratique toutes ces petites astuces. En tout cas, j'ai hâte que la décoration du bloc de contenu généré avec en travers fonctionne sur IE.