Os avisos de conteúdo são avisos que precedem conteúdo potencialmente sensível. Isso é para que os usuários possam se preparar para se envolver ou, se necessário, desengajar para seu próprio bem-estar. Os avisos de gatilho são avisos de conteúdo específicos que tentam alertar os usuários sobre conteúdo que pode causar sintomas fisiológicos e psicológicos intensos para pessoas com estresse pós-traumático ou transtorno de ansiedade (TEPT).
Nesta postagem do blog, veremos como criar um componente para ocultar conteúdo por trás de um aviso. Estou usando a palavra “componente” amplamente aqui, porque na verdade é apenas HTML e CSS. Sinta-se à vontade para envolvê-lo em um React, Vue, Web Component (feito esse último para você) ou o que quer que flutue em seu barco.
A estrutura HTML
Funcionalmente falando, é muito fácil: queremos mostrar que há conteúdo oculto e queremos divulgar por que ele está oculto. A partir daí, o leitor pode decidir se deseja expandir o conteúdo ou não.
Este é o caso de uso perfeito para um bom e velho <details>combo <summary>. Aqui está como parece:
<details class="ContentWarning">
<summary><strong>⚠️ Content warning:</strong> Food</summary>
<img
src="https://images.unsplash.com/photo-1561758033-d89a9ad46330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGJ1cmdlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60"
alt="Juicy burger and fries on a wooden board"
/>
</details>Nesse estágio, eu diria que é basicamente bom o suficiente, pois verifica todas as caixas. Ele oculta o conteúdo, alerta sobre os riscos e fornece uma maneira de acessar o conteúdo. Também funciona sem JavaScript, o que é fantástico. O que mais perguntar?
Polvilhe alguns estilos
Porque confiamos em <details>e <summary>, os estilos são puramente cosméticos e não servem para muita funcionalidade. Portanto, sinta-se à vontade para personalizá-los da maneira que achar melhor.
.ContentWarning {
border: 1px solid rgb(0 0 0 / 0.3);
border-radius: 0.2em;
}
/**
* 1. Remove the default arrow that comes with the `<summary>` element
* 2. Make the toggle feel clickable with a hand cursor
* 3. Increase the hitbox of the toggle for ease of action
* 4. Give the toggle a striped background to make it stand out
*/
.ContentWarning > summary {
list-style: none; /* 1 */
cursor: pointer; /* 2 */
padding: 1em; /* 3 */
--stripe-color: rgb(0 0 0 / 0.1); /* 4 */
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 0.5em,
var(--stripe-color) 0.5em,
var(--stripe-color) 1em
); /* 4 */
}
/**
* 1. Tweak the stripes color on hover/focus to indicate that interacting with
* the toggle will disclose the sensitive content
*/
.ContentWarning > summary:hover,
.ContentWarning > summary:focus {
--stripe-color: rgb(150 0 0 / 0.1); /* 1 */
}Eu omiti voluntariamente alguns estilos para simplificar, então você pode ver o resultado no seguinte CodePen:
Indo além
Como você deve ter notado, esta é uma solução muito subengenharia – que eu pessoalmente gosto. Mas poderíamos ir mais longe. Aqui estão algumas opções:
- Poderíamos fornecer um pouco mais de contexto sobre por que o conteúdo não é exibido por padrão. Por exemplo, o Twitter afirma “O autor do Tweet sinalizou este Tweet como mostrando conteúdo sensível”.
- Em vez de usar o padrão de divulgação, poderíamos desfocar o conteúdo. Estou um pouco em cima do muro com essa abordagem porque a) exigiria JavaScript eb) sinto que o desfoque é cosmético ou precisa ser sutil o suficiente para que você possa adivinhar o conteúdo por trás; o que anularia o propósito de um aviso de conteúdo. Por outro lado, evitaria que o conteúdo subisse e descesse devido à mudança de altura.
- Poderíamos fornecer uma opção para não marcar mais o conteúdo desta categoria como sensível. Uma vez armazenado no armazenamento local ou algo assim, isso pularia todo o widget se o tema não fosse considerado sensível pelo leitor.