Expliquer les éléments «Détails» et «Résumé»

De nombreuses bibliothèques JavaScript sont développées pour nous fournir des widgets interactifs supplémentaires sur les sites Web. De même, HTML5 a également interprété un certain nombre de composants interactifs populaires pour en faire des fonctionnalités Web natives. Dans ce post, nous allons examiner un élément appelé

(et ce faisant, le

élément) qui nous donne un widget interactif semblable à un accordéon.

En utilisant
et

l'élément peut être utilisé n'importe où dans le cadre du . Pour donner un exemple simple, nous pouvons l’ajouter de la manière suivante:

     Lorem ipsum dolor sit amet, consectetur elipisicing elit. Voluptas, impedit.

L'exemple ci-dessus montre le

élément contenant un paragraphe, soulignant sa similarité avec d'autres éléments de sectionnement HTML. Il définit une section sémantique qui peut à son tour contenir des éléments enfants, tels que des images avec le

élément, éléments de forme comme et

</code>, et même imbriquer d'autres tableaux de <code><details></code>.</p><p>La seule différence significative serait dans la façon dont les navigateurs affichent cet élément sur le front-end. Les navigateurs compatibles tels que Chrome, Safari et la dernière version d’Opera l’afficheront avec un petit triangle et un <b>Détail</b> ligne sur le côté.</p><img src="//accentsconagua.com/img/images_13/explaining-the-details-and-summary-elements.jpg"><p>le <code><details></code> element fonctionne comme un widget accordéon en ce sens que son contenu sera initialement masqué. Le fait de basculer la flèche ou de cliquer n'importe où alignant horizontalement la flèche révélera le contenu masqué. Nous sommes également en mesure de le mettre en évidence à l'aide du <b>Languette</b> clé et la <b>Espace</b> ou la <b>Entrer</b> clé pour le basculer.</p><img src="//accentsconagua.com/img/images_13/explaining-the-details-and-summary-elements.gif"><p><b>Remarque</b>: AccessibilitéCulture a couvert l’accessibilité de manière approfondie dans les lecteurs d’écran et les détails / résumé.</p><h3>L'état ouvert</h3><p>Après avoir ouvert l’élément details, si vous regardez maintenant la source avec les outils de développement, vous constaterez que le navigateur a ajouté le <code>ouvrir</code> attribuer alors qu'il est dans cet état. Nous pouvons réellement ajouter le <code>ouvrir</code> attribuer dans le<code><detail></code> manuellement pour afficher le contenu ouvert par défaut.</p><pre><details open>     <p>Lorem ipsum dolor sit amet, consectetur elipisicing elit. Voluptas, impedit.</p> </details></pre><h3>L'élément Résumé</h3><p>le <code><details></code> navires élément avec un élément appelé <code><summary></code>; ces deux sont destinés à être utilisés en conjonction, mais en utilisant le <code><summary></code> l'élément est totalement optionnel.</p><p>Alors, que se passe-t-il quand vous l'utilisez?? <br></p><pre><details open>     <summary>Bonjour le monde</summary>     <p>Lorem ipsum dolor sit amet, consectetur elipisicing elit. Voluptas, impedit.</p> </details></pre><p>Étant donné l'exemple ci-dessus, la valeur par défaut <b>Détail</b> sera remplacé par le <b>Bonjour le monde.</b></p><img src="//accentsconagua.com/img/images_13/explaining-the-details-and-summary-elements_2.jpg"><h3>Nidification</h3><p>Comme mentionné, le <code><details></code> L'élément peut contenir d'autres éléments imbriqués. <code><details></code> éléments, comme si:</p><pre><details>     <summary>Bonjour le monde</summary>     <p>Lorem ipsum dolor sit amet, consectetur elipisicing elit. Voluptas, impedit.</p>     <details>         <summary>Salut comment ca va?</summary>         <p>Lorem ipsum dolor sit amet, consectetur elipisicing elit. Voluptas, impedit.</p>     </details> </details></pre><p>Cela pose un problème visuel (ce qui ne serait pas le cas avec, par exemple, les listes imbriquées) le style par défaut du navigateur. Comme vous pouvez le voir ci-dessous, l'élément imbriqué est aligné à gauche avec le parent qui masque la vraie hiérarchie:</p><img src="//accentsconagua.com/img/images_13/explaining-the-details-and-summary-elements_3.jpg"><p>Ceci est néanmoins facilement résolu en ajoutant des styles simples. Voyons comment nous appelons ces éléments.<br></p><h2>Détails de style avec CSS</h2><p>le <code><details></code> et <code><summary></code> les éléments peuvent être stylés comme n'importe quel autre élément de bloc; sélectionnez-les dans le sélecteur d'élément, une classe ou un identifiant et empilez une pile de propriétés pour la nommer.</p><pre>détails padding: 15px; couleur de fond: # f6f7f8; marge inférieure: 20 px; </pre><p>De plus, vous pouvez utiliser le sélecteur d'attribut pour spécifier des styles pour l'état ouvert..</p><pre>détails [open] / * le style va ici * /</pre><p>le <code><summary></code> L'élément peut aussi être stylé. En parlant de cela, si vous survolez un élément cliquable tel qu'un bouton ou une ancre, le curseur se transformera normalement en un pointeur. Mais ce n'est pas le cas pour le <code><summary></code> élément qui est <i>également</i> cliquable. Au lieu de cela, le curseur se transformera en <code>texte</code> le curseur, ce qui semble légèrement naturel, vous pouvez donc modifier le style par défaut en définissant le curseur comme <code>aiguille</code> ainsi.</p><pre>summary curseur: pointeur; </pre><h3>Styliser le triangle</h3><p>Et maintenant, pour la question que vous aviez envie de poser: pouvez-vous nommer le petit triangle? Il n'y a pas encore de standard, mais Webkit a utilisé un pseudo-élément à cette fin.,  <code>:: - webkit-details-marker</code>. Grâce à cela, nous sommes en mesure de personnaliser les styles de flèche par défaut tels que la couleur, la couleur d'arrière-plan, ainsi que la taille de la flèche..</p><pre>summary :: - webkit-details-marker color: #fff; couleur de fond: # 000; </pre><p>Malheureusement, remplacer la flèche directement à travers le <code>:: - webkit-details-marker</code> n'est pas possible - du moins, au moment de la rédaction. Le seul moyen viable consiste à le remplacer en utilisant le <code>::avant</code> ou <code>::après</code>.</p><pre>summary :: - webkit-details-marker display: none;  summary: before content: "\ 2714"; / * la nouvelle icône * / color: # 696f7c; marge droite: 5px; </pre><h2>Prise en charge du navigateur</h2><p>La prise en charge du navigateur pour ces deux éléments a été bien améliorée ces deux dernières années. En 2011 et 2012, Chrome était le seul navigateur capable de rendre <code><details></code> et<code><summary></code> - bien que la mise en œuvre ait souffert de certains problèmes d'accessibilité. Safari and Opera a récemment rejoint le club.</p><p>Donc, en ce qui concerne Firefox et Internet Explorer, il existe deux options de remplissage multiple pour imiter les fonctionnalités, comme celle développée par Mathias Bynens, jQuery Details. Bien que ce polyfill repose apparemment sur jQuery, la taille du fichier est beaucoup plus petite que celle de la bibliothèque de la bibliothèque jQuery UI..</p><p>Une fois implémenté, style comme toujours.</p><pre>résumé: avant contenu: "\ 25B8"; / * Caractère unicode du petit triangle * / color: # 000; marge droite: 5px; </pre><p>Vous trouverez plus d’informations sur le support du navigateur sur caniuse.com.</p><img src="//accentsconagua.com/img/images_13/explaining-the-details-and-summary-elements.png"><h2>Cas d'utilisation et exemples</h2><p>Vous aurez probablement déjà vu ces éléments à l'état sauvage. Lors de vos achats en ligne, par exemple, certains sites Web regroupent les longues descriptions de leurs produits dans un accordéon. Sinon, ils pourraient l’utiliser dans la barre latérale pour filtrer les résultats, comme Payless, par exemple..</p><img src="//accentsconagua.com/img/images_13/explaining-the-details-and-summary-elements_4.jpg"><p>le <code><details></code> et <code><summary></code> Les éléments sont également parfaitement adaptés à l’organisation des éléments de la FAQ et des éléments de la liste de fonctions généralement présents dans un tableau de prix. J'ai créé une démo que vous pouvez voir ici et que vous pouvez abuser.<br></p><h2>Conclusion</h2><p>Comme Aaron Lumsden l’a dit dans cet article </p><blockquote>"Les sites Web deviennent de plus en plus axés sur les données et les applications"</blockquote><p>donc ce nouvel élément est très apprécié. Un jour, peut-être qu'avec l'avènement des composants Web, la création d'un site Web ou d'une application Web dépendra moins des bibliothèques JavaScript lors de l'ajout d'un simple widget, tel qu'un accordéon..</p><p>Alors, avez-vous déjà utilisé <code><details></code> et <code><summary></code> dans votre site web?</p>


<div class="rek-block">
	<center>	
			<ins class="adsbygoogle"
			style="display:inline-block;width:580px;height:400px"
			data-ad-client="ca-pub-3810161443300697"
			data-ad-slot="9434875811"></ins>
	   <script>
	   (adsbygoogle = window.adsbygoogle || []).push({});
	   </script>
	</center>
</div>


<div class="h-alltags">
<a href="articles/webdesign">Création de sites web</a>
</div>

		</div>

</div>
</div>




</div>


<div class="next_posts clearfix">
	<div class="n_post">
        
		<div class="next_posts-h1 left_nh1"><a href="/articles/code/explore-amazon-web-services.html">Explorez les services Web Amazon</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_9/explore-amazon-web-services_4.png');"></div>	
			
        				
	</div>		
	<div class="n_post">
        
		<div class="next_posts-h1 right_nh1"><a href="/articles/design/expired-10-days-of-freebies-from-envato-tuts.html">Expired 10 jours de cadeaux de Envato Tuts +</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_4/expired-10-days-of-freebies-from-envato-tuts.png');"></div>
					
        
	</div>
</div>


<footer>
	<div class="container">
			<div class="footer-langs">
					<ul class="site-langs-list">
							<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>					
							<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
							<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
							<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
							<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
							<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
							<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
							<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
					</ul>
				</div>
				
			<div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
			</div>
	</div>
</footer>

<div class="search">
	<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
	<div class="modal">
			<div class="modal-content">
							<span class="close-button">×</span>

							<input class="searchmain" type="text" id="search-input" placeholder="Chercher...">
							<ul class="searchli" id="results-container"></ul>

						</div>
</div>


<link rel="stylesheet" href="css/flags.css">

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
  "popup": {
	"background": "#edeff5",
	"text": "#838391"
  },
  "button": {
	"background": "#4b81e8"
  }
},
"theme": "classic",
"position": "bottom-right"
})});
</script>


	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<script src="js/scripts.min.js"></script>	
	<script src="js/common.js"></script>
	<link rel="stylesheet" href="css/fontawesome-all.min.css">

	<script>
			var modal = document.querySelector(".modal");
			var trigger = document.querySelector(".search");
			var closeButton = document.querySelector(".close-button");

			function toggleModal() {
						modal.classList.toggle("show-modal");
			}

			function windowOnClick(event) {
						if (event.target === modal) {
										toggleModal();
						}
			}

			trigger.addEventListener("click", toggleModal);
			closeButton.addEventListener("click", toggleModal);
			window.addEventListener("click", windowOnClick);
</script>



    <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>

<script>
        SimpleJekyllSearch({
          searchInput: document.getElementById('search-input'),
          resultsContainer: document.getElementById('results-container'),
          json: '/search.json',
          searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
        })
</script>

<script src="jquery.unveil2.min.js"></script>
<script>
	$('img').unveil();
</script>

</body>
</html>

Expliquer les éléments «Détails» et «Résumé»

En utilisant et

En utilisant
et