Indipendentemente dal fatto che utilizzando CSS possiamo "travestire" un elemento HTML in modo che questo sembri e si comporti (mimesi) come un altro, esistono casi specifici in cui è certamente meglio sfruttare direttamente l'elemento HTML necessario, piuttosto che forzarne un altro ad agire allo stesso modo. Tuttavia, esistono altrettanti casi in cui un elemento HTML non è abbastanza malleabile per il compito richiesto. E' questo il caso, ad esempio, dell'elemento button.
Gli elementi button possono essere stilizzati, ma sono difficilmente de-stilizzabili. Ad esempio, se hai mai utilizzato qualcosa come Normalize.css, avrai sicuramente notato il grande numero di regole utili a convertire button in una componente cross-browser: padding, borders, colori, hovering, focus, e cosi via. Inoltre, se il pulsante in questione non deve comportarsi tale è possibile trattarne il suo testo come se fosse, ad esempio, un elemento inline (come uno "span" o un "a").
Tuttavia, non è possibile utilizzare display: inline; su di un button senza contraddire le specifiche HTML standard, le quali affermano che un button deve comportarsi come un elemento "inline-block"
Un codice CSS come quello presentato su CodePen da Micah Godbolt non è quindi totalmente conforme alle specifiche:
]button {
margin: 0;
padding: 0;
color: green;
white-space: normal;
display: inline;
background: none;
outline: none;
border: none;
text-align: left;
}In questo caso il button si comporta come un link, senza però essere un link. Se l'utente clicca sul pulsante, un JavaScript inline azionerà un alert.
<button onClick={alert('clicked')}> I'm a button and I want to
look like normal link but i keep wrapping and breaking</button>La soluzione presentata da Matt Mastracci consiglia di includere un elemento "span" con gli attributi HTML "role" e "tabindex" rispettivamente impostati su "button" e "0", più il gestore degli eventi specifico:
più un JavaScript aggiuntivo che permette al pulsante di essere attivato attraverso le azioni della testiera, come Space ed Enter.
Scott O'Hara ha provato a fornire un'alternativa, utilizzando sia la proprietà "display" settata al valore "contents", sia la proprietà CSS "all" settata ad "unset". In questa pagina potete vedere i risultati dei test, che utilizzano sia la proprietà "display" con ogni valore possibile, sia all:unset, testandola con svariate versioni dei browser Firefox e Chrome per Mac e Windows.
