Forklarer Detaljer og Sammendrag Elementer

Mange JavaScript-biblioteker er utviklet for å gi oss flere interaktive widgets på nettsteder. På samme måte har HTML5 også tolket en rekke populære interaktive komponenter, noe som gjør dem til innfødte webfunksjoner. I dette innlegget skal vi se på et slikt element som heter

(og ved å gjøre det

element) som gir oss en interaktiv widget som ligner på et trekkspill.

Ved hjelp av
og

element kan brukes hvor som helst innenfor rammen av . For å gi et enkelt eksempel, kan vi legge til det på denne måten:

     Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Voluptas, impedit.

Eksemplet ovenfor viser

element som inneholder et avsnitt, som fremhever dens likhet med andre HTML-seksjonselementer. Det definerer en semantisk seksjon som igjen kan inneholde barnelementer, for eksempel bilder sammen med

element, form elementer som og

</code>, og selv nesting andre arrays av <code><details></code>.</p><p>Den eneste signifikante forskjellen ville være i hvordan nettlesere viser dette elementet på forsiden. Støttende nettlesere som Chrome, Safari og den nyeste versjonen av Opera vil vise den med en liten trekant og a <b>Detalj</b> linje på siden.</p><img src="//accentsconagua.com/img/images_13/explaining-the-details-and-summary-elements.jpg"><p>De <code><details></code> element fungerer som en trekkspill widget ved at innholdet i det vil i utgangspunktet bli skjult. Bytting av pilen, eller klikke hvor som helst som horisontalt justerer seg med pilen, vil avsløre det skjulte innholdet. Vi kan også markere den ved hjelp av <b>Tab</b> nøkkel og enten <b>Rom</b> eller <b>Tast inn</b> nøkkelen til å bytte den.</p><img src="//accentsconagua.com/img/images_13/explaining-the-details-and-summary-elements.gif"><p><b>Merk</b>: AccesibleCulture dekket tilgjengeligheten grundig i skjermlesere og detaljer / sammendrag.</p><h3>Den åpne staten</h3><p>Etter å ha åpnet detaljelementet, hvis du nå ser på kilden med dev-verktøy, finner du at nettleseren har lagt til <code>åpen</code> attributt mens den er i denne tilstanden. Vi kan faktisk legge til <code>åpen</code> tilskrive inn i<code><detail></code> manuelt for å vise innholdet som standard som standard.</p><pre><details open>     <p>Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Voluptas, impedit.</p> </details></pre><h3>Sammendrag Element</h3><p>De <code><details></code> elementet går sammen med et element som kalles <code><summary></code>; disse to er ment å brukes sammen, men bruker <code><summary></code> elementet er helt valgfritt.</p><p>Så hva skjer når du bruker det? <br></p><pre><details open>     <summary>Hei Verden</summary>     <p>Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Voluptas, impedit.</p> </details></pre><p>Gitt ovenstående eksempel, standard <b>Detalj</b> vil bli erstattet med <b>Hei Verden.</b></p><img src="//accentsconagua.com/img/images_13/explaining-the-details-and-summary-elements_2.jpg"><h3>nesting</h3><p>Som nevnt, <code><details></code> elementet kan inneholde andre nestede <code><details></code> elementer, slik som:</p><pre><details>     <summary>Hei Verden</summary>     <p>Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Voluptas, impedit.</p>     <details>         <summary>Hei Hvordan har du det?</summary>         <p>Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Voluptas, impedit.</p>     </details> </details></pre><p>Dette presenterer ett visuelt problem (som ikke ville være tilfelle med, si nestede lister) nettleserens standard styling. Som du kan se nedenfor, er det nestede elementet justert til venstre sammen med forelder som forvirrer det sanne hierarkiet:</p><img src="//accentsconagua.com/img/images_13/explaining-the-details-and-summary-elements_3.jpg"><p>Dette er likevel enkelt adressert ved å legge til noen enkle stiler. Så, la oss se hvordan vi stiler disse elementene.<br></p><h2>Styling Detaljer Med CSS</h2><p>De <code><details></code> og <code><summary></code> elementene kan styles akkurat som alle andre blokkelementer; velg dem gjennom elementvelgeren, en klasse eller et id og stakk en haug med egenskaper for å stilte den.</p><pre>detaljer polstring: 15px; bakgrunnsfarge: # f6f7f8; margin-bunn: 20px; </pre><p>I tillegg kan du bruke attributtvelgeren til å angi stiler for åpen tilstand.</p><pre>detaljer [åpen] / * stilen går her * /</pre><p>De <code><summary></code> elementet kan også styles Når du snakker om hvilke, hvis du svinger over et klikkbart element som en knapp eller et anker, blir markøren normalt en pointer. Men det er ikke tilfellet for <code><summary></code> element som er <i>også</i> klikkbare. Markøren vil i stedet bli til <code>tekst</code> markør, som føles litt unaturlig, derfor kan du revidere standardstilen, definere markøren som <code>pekeren</code> som så.</p><pre>oppsummering markør: pointer; </pre><h3>Styling the Triangle</h3><p>Og nå for spørsmålet du har vært døende for å spørre: kan du stile den lille triangelen? Det er ingen standard ennå, men Webkit har et pseudo-element til dette formålet,  <code>:: - WebKit-detaljer-markør</code>. Gjennom dette kan vi tilpasse standard pilestiler som farge, bakgrunnsfarge, samt pilens størrelse.</p><pre>oppsummering :: - webkit-detaljer-markør farge: #fff; bakgrunnsfarge: # 000; </pre><p>Dessverre erstatter du pilen direkte gjennom <code>:: - WebKit-detaljer-markør</code> er ikke mulig - i det minste, på tidspunktet for skriving. Det eneste levedyktige kurset er å erstatte det ved å bruke <code>::før</code> eller <code>::etter</code>.</p><pre>oppsummering :: - webkit-detaljer-markør display: none;  sammendrag: før innhold: "\ 2714"; / * det nye ikonet * / farge: # 696f7c; margin-høyre: 5px; </pre><h2>Nettleserstøtte</h2><p>Nettleserstøtte for disse to elementene har vært bedre forbedret de siste to årene. Tilbake i 2011 og 2012 var Chrome den eneste nettleseren som kunne gjenopprette <code><details></code> og<code><summary></code> - selv om implementeringen led av noen tilgjengelighetsproblemer. Safari og Opera har bare nylig blitt med i klubben.</p><p>Så, så langt som å støtte Firefox og Internet Explorer, er det et par muligheter for polyfill for å etterligne funksjonaliteten, for eksempel en utviklet av Mathias Bynens, jQuery Details. Selv om denne polyfillen tilsynelatende er avhengig av jQuery, er filstørrelsen mye mindre enn jQuery UI-bibliotekets motpart.</p><p>Når du er implementert, stil det akkurat som alltid.</p><pre>sammendrag: før innhold: "\ 25B8"; / * unicode karakter av den lille trekanten * / farge: # 000; margin-høyre: 5px; </pre><p>Ytterligere informasjon om nettleserstøtte finnes på caniuse.com.</p><img src="//accentsconagua.com/img/images_13/explaining-the-details-and-summary-elements.png"><h2>Bruk saker og eksempler</h2><p>Du vil sannsynligvis allerede ha sett disse elementene i naturen. Mens du handler på nettet, kan du for eksempel finne noen nettsteder som pakker produktets lange beskrivelser i et trekkspill. Ellers kan de bruke det i sidelinjen for å filtrere resultater, for eksempel Payless, for eksempel.</p><img src="//accentsconagua.com/img/images_13/explaining-the-details-and-summary-elements_4.jpg"><p>De <code><details></code> og <code><summary></code> elementet er også perfekt egnet for å organisere FAQ-elementer og funksjonslisteelementer som vanligvis finnes i et pristabelloppsett. Jeg har opprettet en demo som du kan se her som du er fri til å misbruke.<br></p><h2>Konklusjon</h2><p>Som Aaron Lumsden sa i dette innlegget </p><blockquote>"nettsteder blir stadig mer data-drevne og app-like"</blockquote><p>så dette nye elementet er veldig verdsatt. I dag, kanskje med advent av webkomponenter, vil det være mindre avhengig av JavaScript-biblioteker å bygge en nettside eller en webapps når man legger til en enkel widget som en Accordion.</p><p>Så har du noen gang brukt <code><details></code> og <code><summary></code> på nettstedet ditt?</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">Webdesign</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">Utforsk Amazon Web Services</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">Utløpt 10 dager med freebies fra 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="/">no.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av.
			</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="Søke...">
							<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>

Forklarer Detaljer og Sammendrag Elementer

Ved hjelp av og

Ved hjelp av
og