Welcome to Codidact Meta!
Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.
Comments on What class attributes can we (usefully) use in HTML tags?
Post
What class attributes can we (usefully) use in HTML tags?
Following up on Markup documentation? and What html tags can we use in posts?:
I see that the site supports <section> tags in posts, and that these can have a class attribute.
Recently I saw an answer on Software that uses these for an impressive visual effect: code examples with lightly shaded red and green backgrounds, to indicate working and non-working code examples. (Coincidentally, I saw an old feature request on meta.SO get reopened just today for something similar...)
Apparently (and following a little experimentation), with Markdown source like
<section class='notice is-success'>
### Pleasant meal
`['eggs', 'bacon', 'sausage', 'baked beans']`
</section>
<section class='notice is-warning'>
### Iffy meal
`[food for x in ('ham', 'eggs', 'cheese') for food in (x, 'spam')]`
</section>
<section class='notice is-danger'>
### Dangerous meal
`eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))`
</section>
We can get a result like:
Pleasant meal
['eggs', 'bacon', 'sausage', 'baked beans']
Iffy meal
[food for x in ('ham', 'eggs', 'cheese') for food in (x, 'spam')]
Dangerous meal
eval(b'[%s]'%__import__('base64').b85decode('Cv$LNZ6_=s'*42))
(For these examples, the blank line above the ### lines is necessary in order to get the expected <h3> formatting. Also, a blank line is needed after the </section> tag to make this paragraph work properly.)
There is nowhere to define custom CSS for this, so I assume it is working based off CSS classes already defined in the page.
Are these uses reliable and intentional? What other classes can we use that have interesting or practical CSS effects (perhaps with other tags besides <section>)?
2 comment threads