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.
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>)?
1 answer
Here's the list of supported tags and attributes, pulled straight from the current code:
self.tags = %w[a p span b i em strong hr h1 h2 h3 h4 h5 h6 blockquote img strike
del code pre br ul ol li sup sub section details summary ins table
thead tbody tr th td s]
self.attributes = %w[id class href title src height width alt rowspan colspan lang
start dir]
To a careful reader, that might imply there are no restrictions on what classes you can use, because the class attribute is blanket allowed.
As you've noticed, that means you can make use of the Codidact & Co-Design CSS and do some nifty things in your posts.
With great power comes great responsibility - while it's a very nice thing to have, it's very powerful and can be misused. If that starts happening we'll have to remove it.
1 comment thread
2 comment threads