Pange avatud üksikasjade elementidele taust

Ajatempel: 10. juuni 2021 kell 8
Allikasõlm: 889488

Üks asi, mis võib selle juures olla pisut naljakas <details> element seisneb selles, et kui see on avatud, ei ole alati 100% selge, mis selle elemendi sees on ja mis mitte. Ma ei ütle seda alati või et see on eriti raske lahendada probleem, märgin selle lihtsalt nii, nagu see minu jaoks hiljuti esile kerkis.

Siin on visuaalne näide:

Ekraanipilt mõnest tekstist koos detailide elementidega. Üks neist on avatud. Pole selge, milline tekst on nende detailide sees ja mis mitte.
Mis tekst siin on a sees <details> ja mis ei ole?

Lahendus on... CSS. Stiilige <details> mõnevõrra ainulaadselt ja see probleem kaob. Isegi kui soovite, et tüpograafia oleks sama või te ei soovi eksklusiivset stiili enne <details> on avatud, on see endiselt võimalik. Alfa-läbipaistva täidise abil saate isegi veenduda, et pesa on sügavam <details> selgeks jääma.

Siin on see CSS:

details[open] { --bg: rgb(0 0 0 / 0.2); background: var(--bg); outline: 1rem solid var(--bg); margin: 0 0 2rem 0;
}

Ja demo:

Allikas: https://css-tricks.com/put-a-background-on-open-details-elements/

Ajatempel:

Veel alates CSSi trikid