Suite à un commentaire de Charly, et faute de temps ces prochaines semaines pour replonger dans les CSS,
je pose ici cette page en édition, pour inviter tous les lecteurs volontaires à corriger la syntaxe.
Cliquez ici pour "Editer cette page" afin de corriger directement le HTML.
La traduction est toujours en cours et provient d'un vieil essai de mise en forme.
Dès correction sur ce wiki, je synchroniserai. Merci à tous. - Christophe

spirale complexe

25/02/2002 - Auteur Eric Meyer - Traduction en cours par Christophe Ducamp
Seul le lien original fait office de référence. Attente d'autorisation de l'auteur en cours

Souvenez-vous : pendant que vous prêtez attention à cette démonstration d'éric meyer, il n'y a pas de Javascript ici, ni quelques fichiers PNGs utilisés, ni quelque extension propriétaire aux CSS ou tout autre langage. Tout cet exercice est réalisé en utilisant le balisage strict recommandé par le W3C et le stylisme, tous valides, plus un total de trois (3) images. Hélas, tous les navigateurs ne supportent pas CSS1, et seuls les navigateurs compatibles CSS1 pourront l'afficher pleinement et complètement. Selon mes tests, c'est Mozilla 0.8 et versions supérieures (qui signifie Nescape 6.x) et Internet Explorer 5.x pour le Macintosh.

Les Mains en L'air : Choses à examiner

Avant de démarrer, soyez certain que vous regardez cette page dans un des navigateurs mentionnés au-dessus. Autrement les descriptions qui suivent ne colleront pas à ce que vous voyez.

La première et la plus facile des choses à faire est de faire défiler la page verticalement. Notez comment les hyperliens sur la partie gauche de la page glissent sur le fond en toute fluidité, tout comme la partie centrale du contenu (cette boîte bleue à droite). L'effet visuel devrait rendre les hyperliens et le contenu principal en fonds translucides, mais avec des fonds avant opaques. En fait, ils ne le sont pas, mais c'est ce à quoi ils devraient ressembler.

Essayez de modifier la taille du texte et notez comment l'effet de composition reste similaire. Ensuite, rétrécissez en largeur la fenêtre de votre navigateur et défilez horizontalement. A nouveau, tout doit rester fluide et cohérent. Faites défiler la page de telle façoin qu'elle ne soit pas par défaut, modifiez la taille du texte et survolez à nouveau. La "composition" est encore sans couture comme jamais.

Non, je n'utilise pas un ou plusieurs PNG semi-transparents pour le lien et les fonds de contenus, non plus un truc de demi-écran GIF. La page entière est pilotée par un document HTML contenant une feuille de style encapsulée sans JavaScript, un fichier externe CSS et 4 images JPG.

Que fait le Scratch de Sam ici ?!?

Merveilleux vous vous demandiez. L'effet démontré ici est destiné à utiliser des images de fonds fixées, rien de plus. Par exemple, l'aire de contenu principale (la partie bleue) utilise les styles suivant pour le fond par défaut de coquille en spirale :

div#content {background: #468 url(shell-blue.jpg) 0 0 
  no-repeat fixed;}

La ligne au dessus est équivalente à ces styles :

div#content { 
   background-color: #468;
   background-image: url(shell-blue.jpg);
   background-position: 0 0;
   background-repeat: no-repeat;
   background-attachment: fixed;
   }

L'effet de ces règles plus longues est exactement le même; elles sont simplement éclatées en propriétés individuelles pour les fonds dans une considération mieux détaillée cher lecteur.

D'abord, regardez l'image bleutée de la coquille trouvée ici : url(shell-blue.jpg). Ensuite revenez sur cette page et je continuerai avec l'explication. C'est fait ? Très bien.

Selon les CSS, n'importe quelle image {$.LQ$}fixée{$.RQ$} en utilisant background-attachment: fixed; est fixée en respectant le viewport-- pas l'élément avec lequel l'image est associée. Ainsi je règle l'image de fond bleutée de la coquille pour qu'elle s'aligne avec le coin en haut à gauche de la fenêtre du navigateur (le "viewport") avec des valeurs données par background-position. Ainsi, l'image sera seulement visible si elle croise l'élément auquel elle est assignée. Ainsi, même le coin en haut à gauche de l'image de coquille bleutée est aligné avec le coint en haut à gauche du viewport, nous pourons seulement voir s'il croise une div qui a un id avec une valeur de content (qui, à nouveau, arrive à être la seule à contenir ce texte).

Ainsi, je règle un fond fixé pour la BODY, le contenu de la DIV, et les hyperliens tous ensemble dans leurs états normal et survolé. (J'ai aussi modifié les hyperliens en éléments de niveau bloc, évitant ainsi le besoin de tableaux ou autres trucs de balisage encombrant). Dans n'importe quel cas donné d'affichage d'un élément, nous voyons ainsi une partie de l'image de fond associé croiser l'élément. Le reste de l'image de fond reste cachée.

Et cela fonctionne comme ça.

Je ne vois pas apparaître quelque composition sans couture ! I'm not seeing any seamless compositing!

Ensuite je suis prêt à parier que vous utilisez Internet Explorer pour Windows (n'importe quelle version), ou peut-être Opera (quelle que soit la version). Aucun de ces navigateurs ne supporte proprement le background-attachment: fixed pour des éléments autres que la body. Et oui, cette page utilise un DOCTYPE strict, aussi IE6 est en " mode strict." Je suppose que quand Microsoft revendique un 100% conforme CSS1, ils se réfèrent au coeur CSS1 core (un sous-ensemble réduit de CSS1) au lieu de l'intégralité des spécifications CSS1. Cela m'amène à m'interroger si la limite de leur "totale compatibilité (full support)" serait pour d'autres spécifications clés comme le HTML et le DOM.

Si vous voulez voir cette page dans toute sa grandeur, vous aurez besoin d'un des navigateurs suivants :

De toutes les façons, ce sont tous de bons navigateurs à avoir avec soi parce qu'ils ont une excellente compatibilité avec les standards.

Les pours et les contres

En dehors de cette bataille, il y a le fait que j'ai démontré quelque chose ici qu'aucun outil d'image calquée ne peut vous fournir. Les effets de composition background-attachment: fixed qui rendent ça possible sont sans égal avec le monde WYSIWYG. Plus encore, si vous regardez la source vous verrez que mes liens sur le côté gauche sont du texte pur, ce qui rend les arrangements ou la réécriture possible en un clin d'oeil. Cela permet aussi à l'utilisateur d'adapter l'affichage de ses préférences avec un minimum de problèmes.

Alors que j'utilisais ici les largeurs de pixel pour positionner mes éléments ici, j'aurais utilisé les ems ou toute autre mesure. J'ai simplement utilisé les pixels parce que je le sentais comme ça. J'ai aussi utilisé des éléments positionnés au lieu d'un tableau simplement pour les coups de pieds, mais j'aurais utilisé un tableau simplement aussi facilement. Le résultat aurait été le même, au moins dans des navigateurs conformes CSS1. La clé ici est la flexibilité incroyable que vous obtenez, et aligner les fonds n'est pas nécessaire parce que le navigateur le fait pour vous. Pas plus que de recalquer vos images, ou devoir modifier des fichiers graphiques volumineux !

En plus, créer de nouveaux styles pour les états visité et actif des hyperliens ne requiert rien de plus que deux nouvelles images de fonds et deux lignes de CSS. C'est tout ! Avec une image d'arrière-plan suffisamment optimisée (ou petite), vous pourriez obtenir chaque effet en ajoutant seulement quelques kilobytes au poids de votre page, ce qui pourrait sembler gros mais sera certainement moins que la transparence obtenue avec des images multiples découpées et les requêtes HTTP nécessaires pour les charger dans un site avec des images tranchées -- : et à nouveau je le répète : dans de tels sites, vous ne pouvez pas pas avoir l'effet de composition sans couture présenté ici.

L'inconvénient, bien sûr, est (comme toujours) les navigateurs défectueux. Il serait possible de régler les choses pour éviter tous ces problèmes majeurs, et si vous avez regardé cette page dans Explorer pour Windows, vous savez alors à quoi vous en tenir. Peut-être quelqu'un pourrait venir avec un moyen d'utiliser les techniques présentées ici qui ne s'afficheraient pas de manière horrible dans les navigateurs défecteux. Peut-être ce sera vous -- si tel était le cas, s'il vous plaît envoyez-moi un courriel pour me montrer ce que vous avez fait !

Crédits Image

Foncez vers

css/edge home