Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

CSS : Positionnement et mise en page

S'assurer du suivi de bordures

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Parfois, la gestion visuelle d'un élément est disposée sur deux colonnes. Explorez la propriété traitant l'aspect de cet élément de manière indépendante.
03:09

Transcription

Si on prend en compte la décoration de certains éléments qui peuvent être insérés au sein de colonnes, il est important de voir comment va être géré leur suivi. Regardez ici, il y a dans cet exemple qui a été porté donc avec une portabilité Firefox également qui va styler de manière spéciale certains paragraphes qui auront la classe spéciale avec une bordure par exemple, de 2 pixels une couleur d'arrière-plan avec transparence, une image d'arrière-plan également qui est un damier et en fait, comportant 2 cases opaques grises et 2 cases transparentes donc qui vont être répétées, qui vont faire un petit pattern sous l'ensemble de cette couleur et puis une ombre portée de 6 pixels simplement sur le côté avec une petite couleur transparente. Donc voilà, ici, l'idée c'est de voir si la box-decoration-break va être clonée, donc va être continuée. C'est-à-dire que dès l'instant où un paragraphe va être coupé on va pouvoir ou non passer le suivi sur cette decoration. Alors, pour mieux capter la situation regardons du côté du paragraphe, on voit qu'on a 2 paragraphes qui ont cette spécialité placée mais seul le premier va avoir la demande de clonage de cette decoration. Alors, si je regarde du côté de Chrome, eh bien on s'aperçoit que les décorations sont bien portées sur l'ensemble des éléments ici. Donc, on a bien la bordure qui est portée sur les 2. On a l'ombre portée sur les 2, les transparences donc voilà, je vais pas vous le refaire, ça a été fait sur l'ensemble des deux. Sauf qu'ici la bordure est ouverte sur cet élément-là. Pourquoi ? Parce qu'il continue de l'autre côté. Si je regarde du côté d'Internet Explorer pareil, même situation. Du côté d'Edge, même situation. Donc si on regarde du côté d'Opera, Eh bien on se retrouve exactement dans la même situation. Par contre, si on vient du côté de Firefox, eh bien là on s'aperçoit que le break a été pris en considération c'est-à-dire qu'ici, je me retrouve avec les blocs qui ne sont pas avec decoration donc avec suivi on a l'ouverture sur la bordure par contre ici, on a les blocs qui sont traités de manière indépendante. Alors les discussions sont partagées sur le sujet parce que c'est vrai que là, visuellement, on comprend que c'est la même suite. Ici, on se demande si c'est pas 2 blocs séparés, si c'est 2 notes séparées. C'est vrai que les avis sont partagés sur l'élément. Il faudrait peut-être avoir plutôt un break-after: columns pour dire attention ici, il faut que tout cet élément reste unique et ensemble et ne soit pas coupé. Alors, par contre, donc je suis dans Firefox, si je regarde sur la prévisualisation avant impression, on se retrouve exactement dans la même situation, c'est-à-dire que sur l'impression, automatiquement l'élément envoyé a bien la bordure en top et en bottom pour les 2 blocs qui se suivent. Voilà ! Donc box-decoration-break, pensez à regarder ce qui l'en est, si vous en avez cette utilité. Sachez que pour l'instant, y compris sur Mozilla Developper, aucune information n'a été donnée pour ce qu'il allait être de l'avenir d'Internet Explorer, Opera, donc forcement Edge, seulement pour l'instant Firefox supporte cette fonctionnalité.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !