</code><h1>Testing out a <code>content-warning</code> attribute</h1>
<p>I thoroughly enjoyed the film, especially
when it was revealed that<br>
<b content-warning="spoiler">Taye Diggs
had been the bad guy all along</b>.</p>
<article content-warning="child abuse">
<p>… article contents …</p>
</article>
<figure content-warning="violence gore">
<img src="https://image.tmdb.org/t/p/original/jJKiJPDe7yWsxLNj9HWFx9UApsc.jpg" width="400" alt="A screen capture form Army of Darkness">
</figure>
body {
padding: 0 1rem;
}
figure {
display: inline-block;
}
[content-warning] {
position: relative;
}
[content-warning]::after {
content: "Content warning: " attr(content-warning) " (click to reveal)";
background: #ebebeb;
position: absolute;
inset: 0;
font-weight: normal;
font-size: .75rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
[content-warning][revealed]::after {
display: none;
}
View Compiled
const $content_warnings = document.querySelectorAll('[content-warning]');
function cwClick(e) {
let $el = e.target;
while ( ! $el.matches('[content-warning]') &&
! $el.matches('html') ){
$el = $el.parentNode;
}
$el.setAttribute('revealed','');
$el.removeAttribute('tabindex');
}
function checkEnter(e){
if ( e.keyCode == 13 ){
cwClick(e);
}
}
$content_warnings.forEach($cw => {
$cw.setAttribute('tabindex','0');
$cw.addEventListener('click', cwClick, false);
$cw.addEventListener('keydown', checkEnter, false);
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.