Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

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?

Parent

What class attributes can we (usefully) use in HTML tags?

+5
−0

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>)?

History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.
Why should this post be closed?

2 comment threads

Blank lines between HTML & Markdown (1 comment)
Wow. I had no idea you could do that. I'm going to guess that you can use classes that are part of ... (1 comment)
Post
+7
−0

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.

History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.

1 comment thread

I tried and noticed also the `style` attribute is allowed (e.g. on a section tag). Is this intentiona... (7 comments)
I tried and noticed also the `style` attribute is allowed (e.g. on a section tag). Is this intentiona...
Lorenzo Donati‭ wrote over 1 year ago

I tried and noticed also the style attribute is allowed (e.g. on a section tag). Is this intentional?

ArtOfCode‭ wrote over 1 year ago

It shouldn't be - it's not in this list of allowed attributes. Have you got an example I can use?

Lorenzo Donati‭ wrote over 1 year ago · edited over 1 year ago

I entered this [section style="color:red; font-size:80pt"] Big Honking Title![/section] (I had to change angular brackets in square ones otherwise the code didn't show in the comment) in a question edit form and the preview nicely complied :-)

IDK if the attribute would have been rejected when actually posting the question, though.

ArtOfCode‭ wrote over 1 year ago

Yeah, the preview isn't entirely accurate as to what it allows. If you try posting that you should find it gets stripped out.

Lorenzo Donati‭ wrote over 1 year ago

Oh, well, it would have been nice to set the color of the text, but I agree it could be prone to abuse.

ArtOfCode‭ wrote over 1 year ago
Lorenzo Donati‭ wrote over 1 year ago

Thanks! :-D ;-)