In dit artikel bekijken we enkele eenvoudige manieren om het HTML-element <details> te stylen, wat een zeer handig element is voor het onthullen en verbergen van content op een webpagina.
Het is handig om een eenvoudig onthullingselement in HTML te hebben dat geen JavaScript vereist, maar de standaardstijl van het <details> element kan voor sommigen een afschrikking zijn. Gelukkig is het vrij gemakkelijk om de stijl van dit element te wijzigen.
De inhoudsopgave hieronder is een voorbeeld van het <details> element in gebruik. We hebben er een eenvoudige rand aan toegevoegd, samen met wat padding.
Table of Contents
- Introductie van het details-element
- Achtergrondkleuren, randen en padding
- Stijlen van de marker
- Een aangepaste marker maken voor het summary-element
- De aangepaste marker verwijderen
- Een achtergrondafbeelding gebruiken als marker
- Een achtergrondafbeelding gebruiken als marker met ::after
- Het summary-element eruit laten zien als een tabblad
- De breedte van het details-element beperken
- De markerverwijzende pijl aan het verre einde van de samenvatting plaatsen
- ::after gebruiken als marker zonder achtergrondafbeelding
- Diverse Extra’s
- Hover effect op het details element
- Animatie van openen en sluiten van het details element
- Wijzigen van summary inhoud in open en gesloten toestand
- Wijzigen van de summary cursor
- Wijzigen van de toegankelijkheids focus stijlen
- Gebruik van meerdere details elementen als een akkoordlijst
- Stylen van een kopje binnen de summary
- Conclusie
Inleiding van het details Element
Hier is de basiscode voor het `
<details>
<summary>Click me!</summary>
<p>Peekaboo! Here's some hidden content!</p>
</details>
In principe kan elk HTML-content binnen het `
` element biedt de aanwijzing voor de gebruiker om op het element te klikken om meer content te onthullen, en moet de eerste child zijn van het `
` element.
Hier is een live voorbeeld van deze code:
Click me!
Peekaboo! Hier is wat verborgen content!
Laten we eens kijken naar alle manieren waarop we CSS kunnen gebruiken om het uiterlijk van ons `
Achtergrond Kleuren, Randen en Spaties
A really simple way to enhance the look of the <details> element is to add some padding along with a border or some background colors.
Het toevoegen van een rand
Zoals weergegeven in het inhoudsoverzicht hierboven, kan een eenvoudige rand veel doen om het `
details {
padding: 10px;
border: 5px solid #f7f7f7;
border-radius: 3px;
}
Dat is de eenvoudige code die we hierboven hebben gebruikt om onze ToC te stylen.
Het toevoegen van een achtergrondkleur
Laten we in plaats van een rand een achtergrondkleur toevoegen aan ons `
details {
padding: 10px;
background-color: #e4eaef;
border-radius: 5px;
}
Het resultaat is te zien in de Pen hieronder.
De achtergrondkleur geeft het element betere definitie, en de spaties helpen om wat ruimte binnenin te creëren.
We kunnen ook een andere achtergrondkleur geven aan het `
summary {
background-color: #2196F3;
color: white;
padding: 10px;
}
Merk op dat het veranderen van de tekstkleur van het <summary> element ook de kleur van de markeringspijl verandert. Dat komt omdat de markering feitelijk vastzit aan het <summary> element, net zoals markeringen (zoals kogels) vastzitten aan lijstitems. We zullen hieronder zien hoe we ze afzonderlijk kunnen stylen.
Stijlen van de Marker
Het <summary> element is ingesteld op een display van list-item. Dus de standaardpijl (▶) die erbij hoort, kan net als de standaardmarkeringen op HTML-lijstitems worden aangepast. We kunnen het teken dat wordt gebruikt veranderen en de kleur ervan onafhankelijk aanpassen.
Wijzigen van de markerkleur
Laten we de standaardmarkering een andere kleur geven. Gewoon voor de lol, laten we ook de lettergrootte van de markering verhogen. Dit kunnen we doen met het ::marker pseudo-element:
summary::marker {
color: #e162bf;
font-size: 1.2em;
}
Het resultaat wordt hieronder getoond.
Het is een mooie, eenvoudige oplossing, hoewel ::marker helaas niet ondersteund wordt in Safari, dus kijk naar andere opties hieronder als dat een beletsel is.
Wijzigen van de markeringspatronen
Standaard staat de markeringspijl vrij dicht bij de samenvattings tekst. Zijn list-style-position is ingesteld op inside. Als we dit veranderen in outside, kunnen we ruimte toevoegen tussen de samenvattings tekst en de markering door wat linkerzijde-padding toe te voegen. We moeten ook wat linkerzijde-marges toevoegen zodat de driehoek niet buiten de container hangt:
summary {
list-style-position: outside;
margin-left: 30px;
padding: 10px 10px 10px 20px;
border-radius: 5px;
}
Het resultaat wordt hieronder getoond.
I’ve exaggerated the spacing between the arrow marker and the summary text just to make it obvious. Unfortunately, using list-style-position: outside; with the <summary> element doesn’t work in Safari. Fortunately, there are other options, as we’ll see below.
Wijzigen van de markeringvorm
De marker op onze <summary> element hoeft niet een driehoek te zijn. We kunnen het vervangen door elk teken dat we willen:
summary {
list-style-type: '⬇ ';
}
Merk op dat we '⬇ ' (met een spatie naast de pijl) hebben gebruikt, wat een alternatief is voor de spatie die we eerder probeerden.
We hebben nu een pijl naar beneden in plaats van een driehoek. Maar … die pijl naar beneden verandert niet wanneer het <details> element open is. Dat komt omdat het <details> element twee toestanden heeft — gesloten en open — en we hebben alleen de marker stijl ingesteld voor de gesloten toestand. Dus laten we ook een marker instellen voor de open toestand:
details[open] > summary {
list-style-type: '⬆ ';
}
Deze keer hebben we een omhoog wijzende pijl gebruikt. Dit geeft ons het resultaat zoals hieronder getoond.
Verdomme! Nogmaals laat Safari ons teleur, omdat het list-style-type op het <summary> element ook niet ondersteunt. Geef niet op, want we zullen hieronder slimmere oplossingen bekijken.
We kunnen allerlei andere tekens proberen, zoals + en –, ✓ en Χ of ✗, ⋁ en ⋀, en zelfs plezier hebben met andere tekens zoals ★ of kleurrijke vruchten zoals 🍏 🍌 🍓 🍋 en 🍐, maar onthoud dat deze tekens misschien niet op alle systemen werken, dus wees een beetje voorzichtig, en nogmaals, list-style-type zal zeker niet werken in Safari.
Het maken van een aangepaste marker voor het summary-element
Zoals we hierboven zagen, kunnen we wel een ander teken instellen voor de standaardmarker en het stijlen met kleur en lettergrootte, maar dat kan problemen opleveren. Een beter alternatief is misschien om de marker helemaal te verwijderen en een volledig aangepaste alternatief te maken.
Verwijderen van de aangepaste marker
Net als bij lijstpuntmarkers, kunnen we de marker helemaal verwijderen:
summary {
list-style: none;
}
/* zucht, Safari weer */
summary::-webkit-details-marker {
display: none;
}
De standaard list-style: none werkt in alle browsers behalve … (kun je het raden?) … Safari. Gelukkig is er in dit geval een propriëtaire -webkit- optie.
Opmerking: een andere manier om de marker van het <summary> element te verwijderen, is door het <summary> element een display waarde te geven die niet list-item is — zoals block of flex. Dit werkt in elke browser behalve … (moet ik het wel zeggen?) … Safari.
Nu heeft ons element geen marker meer.
Geen marker geven geen visuele hint dat dit element aan te klikken is, dus het is geen goed idee om het daar bij te laten.
Een achtergrondafbeelding gebruiken als marker
We kunnen een afbeelding op de achtergrond plaatsen, zoals hieronder:
summary {
list-style: none;
padding: 10px 10px 10px 40px;
background: url(arrow.svg) no-repeat 14px 50%;
background-size: 18px;
font-weight: bold;
}
Het resultaat is hieronder weergegeven.
Het nadeel van het gebruik van een achtergrondafbeelding rechtstreeks op het <summary> element is dat we deze niet kunnen roteren wanneer het <details> element open is, omdat animaties niet direct op achtergrondafbeeldingen in CSS kunnen worden ingesteld. (We kunnen natuurlijk wel een andere afbeelding gebruiken voor de openstaande status, maar we kunnen deze nog steeds niet animeren, wat veel leuker is.) Dus als we een achtergrondafbeelding gaan gebruiken, is het beter deze te plaatsen op een element dat kan worden geroteerd en/of geanimeerd.
Gebruik van een achtergrondafbeelding als marker met ::after
Laten we de achtergrondafbeelding plaatsen binnen een ::after pseudo-element:
summary {
display: flex;
}
summary::after {
content: '';
width: 18px;
height: 10px;
background: url('arrow.svg');
background-size: cover;
margin-left: .75em;
transition: 0.2s;
}
details[open] > summary::after {
transform: rotate(180deg);
}
Hier is een live demo van deze code.
We hebben display: flex gebruikt op het <summary> element om het gemakkelijk te maken om de pijl horizontaal te positioneren.
Het mooie aan deze setup is dat we animatie aan de pijl kunnen toevoegen. (De animatie lijkt niet te werken in Safari, maar het gedrag is goed genoeg, en ik word er een beetje zat van dit browser!)
Het summary-element laten lijken op een tab
We hebben het <summary> element op volle breedte ingesteld, maar dat hoeft niet. We kunnen het er meer uitzien als een tab, met deze eenvoudige wijziging:
summary {
display: inline-flex;
}
Het voorbeeld is hieronder weergegeven.
Beperking van de breedte van het details-element
In al onze voorbeelden tot nu toe heeft het <details> element zich uitgestrekt tot de volledige breedte van zijn container, omdat het een block-level element is. We kunnen het echter een andere breedte geven als we niet zo breed willen, zoals width: 50%;. Of we kunnen het instellen op inline display zodat het net zo breed is als zijn inhoud:
details {
display: inline-block;
}
Klik op het tabblad hieronder om de smallere breedte van het <details> element te onthullen.
Probeer display: inline-block te veranderen in width: 50% in de Pen hierboven.
Plaatsen van de pijlpunt op het verste uiteinde van het samenvatting
Laten we nu iets anders doen, door de pijlpunt aan de rechterkant van het <summary> element te plaatsen. Omdat we display: flex hebben gebruikt, is het verplaatsen van de pijl naar het verste rechteruiteinde zo eenvoudig als het toevoegen van justify-content: space-between aan het <summary> element:
summary {
display: flex;
justify-content: space-between;
}
Gebruik ::after als een markering zonder achtergrondafbeelding
Er zijn andere manieren waarop we ::after zonder een echte afbeelding kunnen gebruiken. Hier is een voorbeeld dat alleen ::after gebruikt met randen:
summary::after {
content: '';
width: 0;
height: 0;
border-top: 10px solid #15171b;
border-inline: 7px solid transparent;
transition: 0.2s;
}
Hier is een live demo.
Nu hebben we een pijl die roteert tussen de gesloten en geopende toestand. We hebben ook een mooie schaduw toegevoegd aan het <details> element.
Een andere manier om ::after zonder een afbeelding te gebruiken, is door Unicode-karakters binnen de content eigenschap te plaatsen:
summary::after {
content: "\25BC";
transition: 0.2s;
}
Dit zet een driehoekvorm (▼) als ons marker, zoals te zien is in dit CodePen demo.
Er zijn duizenden Unicode symbolen, en ze zijn best leuk om te verkennen. Elk komt met een code zoals U + 25BC of U + 025BC. Om die code binnen de content eigenschap te gebruiken, neem de tekens na de + en plaats ze binnen de content aanhalingstekens, met een \ aan het begin: content: "\25BC". Als er één of meer nullen aan het begin staan, kun je ze weglaten. (Bijvoorbeeld, U + 02248 kan worden "\02248" of "\2248".)
Diverse Extra’s
Tot nu toe zijn de dingen die we hierboven hebben gedaan meer dan voldoende, maar er zijn nog andere dingen waarmee we plezier kunnen hebben, dus laten we hier gewoon een paar mee spelen.
Hover effect op het details element
We kunnen verschillende hover effecten instellen op het <details> element. Bijvoorbeeld, we zouden iets kunnen doen zoals dit:
details {
transition: 0.2s background linear;
}
details:hover {
background: #dad3b1;
}
Terwijl we daar zijn, laten we ook de <summary> tekstkleur in de open toestand overgangen:
details > summary {
transition: color 1s;
}
details[open] > summary {
color: #d9103e;
}
Het resultaat is hieronder weergegeven.
We konden ook gewoon een achtergrondwijziging instellen op het <summary> element.
Animatie van het openen en sluiten van het details element
Haha, gek genoeg! Het blijkt dat het niet mogelijk is om het openen en sluiten van het `<details>` element te animeren. Volgens MDN:
Helaas is er op dit moment geen ingebouwde manier om de overgang tussen open en gesloten te animeren.
Toch kunnen we een beetje plezier beleven door de inhoud van het `<details>` element te animeren. Bijvoorbeeld, we kunnen de inhoud laten vervagen zodra deze wordt onthuld:
details article {
opacity: 0;
}
details[open] article {
animation: fadeIn .75s linear forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Het resultaat wordt hieronder getoond.
Een ander trucje zou kunnen zijn om de inhoud te laten glijden, zoals hier:
details {
overflow: hidden;
}
details[open] article {
animation: animateUp .5s linear forwards;
}
@keyframes animateUp {
0% {
opacity: 0;
transform: translatey(100%);
}
100% {
opacity: 1;
transform: translatey(0);
}
}
Het resultaat wordt hieronder getoond.
Het is een beetje cheesie, en misschien wel overbodig, maar het is zeker de moeite waard om te proberen. Helaas werken deze animaties alleen de eerste keer dat het element wordt geklikt (tenzij de browser devtools open zijn, om een of andere rare reden!). Je hebt in feite de tussenkomst van JavaScript nodig om het effect steeds te laten werken.
Wijzigen van de samenvatting inhoud in open en gesloten toestand
In de bovenstaande demos heeft het `<select>` altijd dezelfde tekst gehad, ongeacht of het `<details>` element open of gesloten is. Maar dat kunnen we veranderen. Laten we eerst de huidige “Klik op mij” tekst op zijn plaats laten, maar ook wat extra tekst toevoegen voor elke staat met behulp van het `::after` pseudo-element:
summary::after {
content: " to show hidden content";
}
details[open] summary::after {
content: " to hide extra content";
}
Dat geeft ons het resultaat dat hieronder wordt getoond.
Wijzigen van de samenvatting cursor
De standaardcursor (of muispointer) voor het <details> element is nogal vreemd. Het is meestal een standaardpijlpictogram en een tekstpointer (of I-beam) bij het overhouden van de <summary> tekst.
Om het wat leuker te maken, laten we overschakelen naar de handcursor (of “pointer”):
summary {
cursor: pointer;
}
Dit zet de muispointer in de vorm van een hand wanneer deze overal over het <summary> element wordt gehouden, zoals hieronder getoond.
We kunnen de cursor ook op het <details> element instellen, waardoor de handcursor over het gehele <details> element wordt afgedwongen. Ik verkiez ik echter om deze alleen op het object te houden dat we bedoeld zijn aan te klikken.
Wijzigen van de toegankelijkheidsfocusstijlen
Als we een pagina via het toetsenbord navigeren, kunnen we tab naar het <details> element en deze openen door return te raken. Tijdens de focus heeft het <summary> element een standaardomlijsting. Het onderstaande beeld toont hoe dit eruitziet in verschillende browsers.
Ze zijn vrijwel gelijk: meestal een eenvoudige, donkere (blauwe of zwarte), vaste omlijsting die ongeveer 3px breed is.
Er zijn veel stijlen die we kunnen instellen voor het gefocuste <details> element, maar laten we hier iets eenvoudigs doen als bewijs van concept, waarbij de omlijsting wordt gewijzigd in een rode stippellijn:
summary:focus {outline: none;}
summary:focus-visible {outline: 3px dotted #ff0060;}
summary {padding: 10px;}
Standaard wordt de focus-omlijning niet weergegeven wanneer we op het `<summary>` element klikken. Maar als we de focusstijl wijzigen, wordt die stijl wel weergegeven voor niet-toetsenbordgebruikers (dat wil zeggen, wanneer we met de muis op het `<details>` element klikken). Dus in de bovenstaande code hebben we `outline` ingesteld op `none` en in plaats daarvan `focus-visible` gebruikt om de stijlen in te stellen, aangezien dit betekent dat de focusstijlen alleen zichtbaar zijn voor toetsenbordgebruikers (voor wie het eigenlijk nuttig is).
Het onderstaande plaatje toont onze nieuwe stijl.
Hier is een live demo.
We kunnen hier veel plezier mee hebben door animaties, achtergrondkleuren enzovoort te gebruiken wanneer het `<details>` element in focus staat. Ik laat het aan jou over om verder te experimenteren.
Het gebruik van meerdere details-elementen zoals een akkordielijst
Er zijn voorstellen om meerdere details-elementen op deze manier te coördineren, zodat er één sluit wanneer een andere geopend wordt. De HTML-specificatie stelt zelfs voor een gedeelde `name`-attribuut tussen meerdere `<details>` elementen hiervoor voor.
Er is momenteel geen manier om dit alleen met HTML en CSS te doen, maar er zijn wel enkele handige voorbeelden van het doen ervan met JavaScript (zoals hier, hier, en hier).
Het beste wat we met CSS kunnen doen, is het stijlen van het momenteel open element anders dan de anderen, met behulp van enkele van de technieken die we hierboven hebben behandeld.
Hier is een eenvoudig voorbeeld:
details {
background-color: #2196F3;
}
details[open] {
background-color: #ce0e99;
}
Stijlen van een koptekst binnen het samenvatting
Sommige ontwikkelaars, bezorgd over de structuur van hun HTML, willen graag een koptekst-element binnen het <summary> element plaatsen. Of dat nuttig is of niet is een zaak van discussie, maar de standaard weergave is niet mooi, met de koptekst op de lijn onder de pijl. Dit kan worden opgelost door de koptekst in te stellen op display: inline of display: inline-block:
summary h2 {
display: inline;
}
Je kunt een demo hiervan bekijken op CodePen.
Conclusie
Zoals we hierboven hebben geprobeerd te laten zien, zijn er veel eenvoudige manieren om het <details> element te stylen. Het instellen van randen, opvulling en achtergrondkleuren is gemakkelijk en verbetert de uitstraling al aanzienlijk. Sommige methoden voor het stylen van de standaardmarker zijn erg handig, maar aangezien Forrest’s fruit company () zoveel problemen heeft met het stylen van de marker, is het misschien beter om die optie te vermijden ten gunste van het maken van een volledig aangepaste marker-element. (Dat gezegd hebbende, het stylen van de marker breekt niet het <details> element in Safari.)
Er zijn pogingen gedaan om het openen en sluiten van het <details> element alleen met CSS te animeren, maar die zijn op zijn best smakeloos, dus het is niet de moeite waard om die konijnenhol in te gaan. Als je echt wilt dat het openen en sluiten geanimeerd is, heb je JavaScript nodig.
Om meer te weten te komen over het <details> element, kijk dan hier:
Als je andere coole manieren vindt om het <details> element te stylen, laat het me weten op Twitter, en we zullen ze hier misschien tonen.
Source:
https://www.sitepoint.com/style-html-details-element/