Calques et "visibility"
Les CALQUES ou encore LAYERS en anglais, sont un des moyens utilisés
en CSS pour réaliser des effets, obtenus par des superpositions de "pages"
ou plutôt de "calques".
Pour l'instant chaque navigateur a sa propre façon de traiter les calques,
mais avec l'arrivée des nouvelles versions il semblerait que les résultats
soient encourageants.
Parmi les avancées du CSS, il faut mettre en avant son lien avec le Javascript
sans oublier le DHTML son dérivé.
OUI, on peut rendre des calques momentanément visibles ou invisibles et ainsi réaliser diverses animations dans la page, c'est-à-dire rendre des éléments animés.
Obtenir le type de navigateur qu'utilise votre visiteur est une fonction connue par la majorité des surfeurs, mais souvent ignorée quant à sa source de programmation.
Visibility, propriété qui définit la visibilité ou non de la boîte. Elle possède deux valeurs différentes suivant les navigateurs : ( L'option par défaut correspond bien entendu à visible).
- "Visible" pour Internet Explorer, "show" pour Netscape
- "Hidden" pour Internet Explorer, "hide" pour Netscape.
Valeurs
visible
La boîte est visible.
hidden
La boîte est invisible, mais elle influence toujours la mise en forme.
collapse
Quand utilisée avec autre chose, "collapse" correspond à
"hidden".
Démonstration
Code dans HEAD
.invisiblehidden { visibility: hidden ; }
.visiblevisible { visibility: visible ; }
Code 1 dans Body
Code 1 avec un mot qui est invisible (FRANCE)
<p>L'équipe de <span class="invisiblehidden"><b>
FRANCE </b></span> a remporté la Coupe du monde de football
en 1998.</p>
Résultat exemple 1
Vous constatez qu'il manque le nom de l'équipe victorieuse.
L'équipe de FRANCE a remporté la Coupe du monde de football en 1998.
Code 2 dans BODY
avec un mot visible(celui qui manquait dans l'exemple 1)
<p class="invisiblehidden"> Le mot <b class="visiblevisible"> FRANCE </b> est cette fois le seul visible </p>
Résultat exemple 2
Le mot FRANCE est cette fois le seul visible
DHTML (Dynamic HTML) ou rencontre du CSS et du Javascript avec au final des applications aussi diverses que surprenantes.
En effet c'est la technique des éléments positionnés qui entre en jeu et si on y ajoute la propriété "visibility" objet de cette page, alors on en comprend mieux ce qui à priori semblait inutile.
Des éléments mobiles, qui sont affichés ou masqués, et encore des éléments qui sont activés par le clic ou même le simple survol d'un lien...
