Spécifications CSS


11 Les effets visuels

11.1 Le débordement et le rognage

Généralement, le contenu d'une boîte de bloc est confiné entre les bords du contenu de celle-ci. Parfois, une boîte peut déborder, son contenu s'étalant en partie ou entièrement en dehors de la boîte. Des exemples :

  • Une ligne ne peut pas être coupée, ce qui rend ainsi la boîte de ligne plus large que la boîte du bloc ;
  • Une boîte de bloc est trop large pour le bloc conteneur. Ceci peut arriver quand la propriété 'width' d'un élément a une valeur telle que la boîte de bloc générée se répand au-delà des côtés du bloc conteneur ;
  • La hauteur d'un élément excède la hauteur explicite assignée au bloc conteneur (c.à.d. la hauteur de celui-ci est déterminée par la propriété 'height', et non par la hauteur du contenu) ;
  • La boîte est d'un descendant en position absolue se trouve partiellement hors de la boîte de son parent ;
  • Les marges de la boîte d'un descendant sont négatives, ce qui déplace en partie celle-ci hors de la boîte de son parent.

À chaque fois qu'un débordement survient, c'est la propriété 'overflow' qui spécifie , s'il y a lieu, la façon dont la boîte sera rognée. La propriété 'clip' spécifie la taille et la forme de la zone rognée. Quand on spécifie un rognage laissant une petite surface, des contenus qui seraient visibles autrement peuvent disparaître.

11.1.1 Le débordement : la propriété 'overflow'

'overflow'
Valeur :  visible | hidden | scroll | auto | inherit
Initiale :  visible
S'applique à :  ceux des éléments de type bloc et ceux remplacés
Héritée :  non
Pourcentage :  sans objet
Médias :  visuel

Cette propriété spécifie si le contenu d'un élément de type bloc doit être rogné quand celui-ci déborde de la boîte de cet élément (qui se comporte comme un bloc conteneur). Les significations des valeurs sont :

visible
Le contenu ne sera pas rogné, et celui-ci peut être représenté hors de la boîte du bloc ;
hidden
Le contenu sera rogné et aucun mécanisme de défilement ne devrait être fourni pour voir la partie qui aura été rognée. On spécifie la taille et la forme du reliquat du rognage avec la propriété 'clip' ;
scroll
Le contenu sera rogné et, si disponible, l'agent utilisateur fournit un mécanisme de défilement visible à l'écran (tel qu'une barre de défilement ou un dispositif panoramique), celui-ci devrait apparaître pour une boîte donnée, que le contenu de celle-ci soit rogné ou non. Ceci pour éviter l'inconvénient que représenterait des barres de défilement apparaissant et disparaissant dans un environnement dynamique. Quand cette valeur est spécifiée conjointement avec un type de média 'print' ou 'projection', la partie du contenu ayant débordé devrait aussi être imprimée ;
auto
L'interprétation de cette valeur dépend de l'agent utilisateur, cependant, celui-ci devrait fournir un mécanisme de défilement quand les boîtes débordent.

Même quand la valeur de la propriété 'overflow' est 'visible', il peut arriver que le contenu soit rogné par le système d'exploitation, pour tenir dans la fenêtre du document de l'agent utilisateur.

Exemple(s) :

Considérons le bloc de citation suivant (BLOCKQUOTE), trop grand pour tenir dans son bloc conteneur (établi par un élément DIV). En voici le document source :

<DIV>
<BLOCKQUOTE>
<P>Je n'aimais pas la pièce, et puis, je la vis
dans des conditions adverses - le rideau était levé.
<DIV class="attributed-to">- Groucho Marx</DIV>
</BLOCKQUOTE>
</DIV>

Et ici, la feuille de style régissant les tailles et le style des boîtes générées :

DIV { width : 100px; height: 100px;
      border: thin solid red;
      }

BLOCKQUOTE   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px; 
      border: thin dashed black
      }

DIV.attributed-to { text-align : right; border: none; }

La propriété 'overflow' ayant la valeur initiale 'visible', l'élément BLOCKQUOTE ne sera pas rogné lors de sa mise en forme, donnant quelque chose comme ceci :

Débordement visible.   [D]

« errata section 11.1.1 »

Si, par ailleurs, on donne la valeur 'hidden' à la propriété 'overflow' de l'élément DIV, l'élément BLOCKQUOTE sera rogné par le bloc conteneur, ainsi :

Débordement rogné   [D]

La valeur 'scroll' aurait signifié, à ceux des agents utilisateurs l'implémentant, de faire apparaître un mécanisme de défilement pour que les utilisateurs puissent accéder au contenu de la partie ayant été rognée.

11.1.2 Le rognage : la propriété 'clip'

Une zone de rognage définit la partie du contenu rendu d'un élément qui est visible. Par défaut, la zone de rognage a la même taille et forme que la boîte, ou les boîtes, de l'élément. Cependant, celle-ci peut être modifiée à l'aide de la propriété 'clip'.

'clip'
Valeur :  <forme> | auto | inherit
Initiale :  auto
S'applique à :  ceux des éléments de type bloc et ceux remplacés
Héritée :  non
Pourcentage :  sans objet
Médias :  visuel

La propriété 'clip' s'applique aux éléments dont la valeur de la propriété 'overflow' est autre que 'visible'. Les significations des valeurs sont :

auto
La zone de rognage a la même taille et emplacement que la boîte, ou les boîtes, de l'élément ;
<forme>
En CSS2, la seule valeur admise pour <forme> est : rect (<haut>, <droite>, <bas>, <gauche>) où <haut>, <droite>, <bas> et <gauche> représentent les décalages par rapport aux côtés respectifs de la boîte.

« errata id=x68 »

« errata : Voir la proposition pour une nouvelle définition des valeurs de rect() »

Les valeurs <haut>, <droite>, <bas>, et <gauche> peuvent être une valeur de <longueur> ou bien 'auto'. Les valeurs négatives sont admises. La valeur 'auto' fait correspondre un bord donné de la zone de rognage à celui de la boîte générée par l'élément (c.à.d. la valeur 'auto' a la même signification que '0').

Avec des coordonnées ayant des valeurs en pixels, il faudrait faire attention à ce qu'aucun pixel ne reste visible quand la somme de <gauche> et <droite> est égale à la largeur de l'élément (et de même, pour la somme de <haut> et <bas> avec la hauteur de l'élément), et inversement, à ce qu'aucun pixel ne reste caché quand leurs sommes sont nulles.

Les ancêtres de l'élément peuvent aussi avoir des zones de rognage (quand leur propriété 'overflow' n'a pas la valeur 'visible' ; c'est l'intersection des diverses zones de rognage qui est rendue.

Si la zone de rognage excède les limites de la fenêtre du document de l'agent utilisateur, son contenu peut se trouver rogner par la fenêtre, en fonction du système d'exploitation.

Exemple(s) :

Ces deux règles :

P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }

celles-ci vont créer les zones de rognage rectangulaires, matérialisées par les lignes en pointillés dans leurs illustrations respectives suivantes :

Deux zones de rognage.   [D]

Note En CSS2, toutes les zones de rognage sont rectangulaires. Il faut s'attendre à ce que les évolutions ultérieures autorisent des formes qui ne soient pas rectangulaires.

11.2 La visibilité : la propriété 'visibility'

'visibility'
Valeur :  visible | hidden | collapse | inherit
Initiale :  inherit visible
S'applique à :  tous les éléments
Héritée :  non oui
Pourcentage :  sans objet
Médias :  visuel

La propriété 'visibility' spécifie le rendu, ou non, des boîtes générées par un élément donné. Ces boîtes, bien qu'invisibles, influencent toujours la mise en forme du document (utiliser la propriété 'display' avec la valeur 'none' pour prohiber la génération d'une boîte, et ainsi toutes influences sur la mise en forme). Les valeurs ont les significations suivantes :

visible
La boîte générée est visible ;
hidden
La boîte générée est invisible (entièrement transparente), mais celle-ci influençant toujours la mise en forme ;
collapse
Consulter le passage traitant des effets dynamiques sur les rangées et colonnes des tables. Quand on l'utilise avec autre chose, cette valeur 'collapse' correspond à 'hidden'.

On peut employer cette propriété conjointement avec des scripts pour créer des effets dynamiques.

Dans l'exemple suivant, quand on presse l'un ou l'autre bouton du formulaire, un script actionné par un utilisateur provoque l'apparition de la boîte qui lui correspond et, en même temps, la disparition de l'autre. Ces boîtes conservant leur taille et leur emplacement, l'effet produit le remplacement de l'une par l'autre (le script, écrit dans un langage hypothétique, pouvant, ou non, produire un effet avec un agent utilisateur conforme).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
   #conteneur1 { position: absolute; 
                 top: 2in; left: 2in; width: 2in }
   #conteneur2 { position: absolute; 
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="conteneur1">
   <IMG alt="Al Capone" 
        width="100" height="100" 
        src="http://www.yoyodesign.org/doc/w3c/css2//suspect1.jpg">
   <P>Nom : Al Capone</P>
   <P>Résidence : Chicago</P>
</DIV>

<DIV id="conteneur2">
   <IMG alt="Lucky Luciano" 
        width="100" height="100" 
        src="http://www.yoyodesign.org/doc/w3c/css2//suspect2.jpg">
   <P>Nom : Lucky Luciano</P>
   <P>Résidence : New York</P>
</DIV>

<FORM method="post" 
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button" 
          value="Capone" 
          onclick='show("conteneur1");hide("conteneur2")'>
   <INPUT name="Luciano" type="button" 
          value="Luciano" 
          onclick='show("conteneur2");hide("conteneur1")'>
</FORM>
</BODY>
</HTML>

Ces informations proviennent du site de http://www.yoyodesign.org

Réseaux sociaux

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher les interactions avec les réseaux sociaux sur ces pages.

 

Nuage de mots clés

6 mots clés dont 0 définis manuellement (plus d'information...).

Avertissement

Cette page ne possède pas encore de mots clés manuels, ceci est donc un exemple automatique (les niveaux de pertinence sont fictifs, mais les liens sont valables). Pour tester le nuage avec une page qui contient des mots définis manuellement, vous pouvez cliquer ici.

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher le nuage de mots clés.

 

Astuce pour imprimer les couleurs des cellules de tableaux : http://www.gaudry.be/ast-rf-450.html
Aucun commentaire pour cette page

© Ce document issu de l′infobrol est enregistré sous le certificat Cyber PrInterDeposit Digital Numbertection. Enregistrement IDDN n° 5329-873
Document créé le 12/08/06 21:37, dernière modification le Mercredi 28 Juin 2017, 14:26
Source du document imprimé : http:///www.gaudry.be/css-rf-visufx.html
St.Gaudry©07.01.02
Outils (masquer)
||
Recherche (afficher)
Recherche :

Utilisateur (masquer)
Apparence (afficher)
Stats (afficher)
15838 documents
455 astuces.
550 niouzes.
3107 definitions.
447 membres.
8121 messages.

Document genere en :
0,09 seconde

Mises à jour :
Mises à jour du site
Citation (masquer)
La télé : c'est la vision carrée d'un monde qui ne tourne pas rond.

Franck Dhumes [Extrait de Annulaire des mots]
 
l'infobrol
Nous sommes le Mardi 23 Janvier 2018, 20:38, toutes les heures sont au format GMT+1.00 Heure, heure d'hiver