HTML/CSS Whitelist & Tweaks

Posted 9 years, 6 months ago (Edited 6 years, 11 months ago) by lulu

I'M NOT A FRONT END DEVELOPER omg i should really hire one but i'm literally never going to get around to it i'm so sorry 

Anyway if you see anything in the source that could be fixed to make skinning profiles easier or if you need any specific IDs or classes on elements make a post and I'll see if I can add it in for you (it's basically entirely dependent on whether it breaks current profiles or not).

Also, if you wanna use certain tags / attributes and you've noticed that they're blacklisted just post here and I'll see whether I can add it in for you, ye o/

trashguts

could image-rendering be whitelisted so we can scale images as nearest-neighbor instead of bilinear for pixel art? idk if this thread is still being checked but. worth a shot dlskfjasdk

Anolee

Wishlist:

Fontawesome
Support for more fontawesome icons please. :'> There are some that don't work.
Examples of broken ones: https://fontawesome.com/icons/cat-space?style=solid and https://fontawesome.com/icons/hand-sparkles?style=solid
It would be superduper if we could use the whole gallery they offer. ♥

ID jumps
I wish I could use ID's to jump to sections. Especially useful if you have (coded) tabs. (Not TH tabs.)
For context I have this HTML design where I have nav tabs you can switch between, and each tab is an AU. I would LOVE to be able to link to specific AU tabs by doing https://toyhou.se/000001.-character-#IDofTab
Currently it does not work :'o (Unless I'm doin something wrong? <o<)
Edit: Also unsure if it would work at all, cause of the "active" class needing to be applied by clicking the button. HM....

Thank you for your hard work lulu ♥

Pepperly

Seconding CSS Grid; a neat code I was messing with worked on th.circlejourney.net and then I pasted it here and everything died, lmao. 

Harrie

CSS variables and font awesome layering would be great to have! 

moif

I would love love love to have backdrop filter whitelisted. It can create some really cool affects on top of images that would just be amazing to have.

Skykristal

^ I was just about to recommend the same. You can make such cool things with backdrop, would be wonderful to have it here 

CheriiUsagi

I would suggest onMouseOver and onMouseOut (old school but handy for those without premium and doesn't affect the general layout of Toyhouse itself), for custom layout hover colors. It worked so well on th.circlejourney.net, but when I tried it here, it failed. It seems blacklisted?

Example code here (replacing the O with 0):

<a href="https://toyhou.se" target="_blank" class="btn" style="background:#000000;color:#FFFFFF;box-shadow:none;" onMouse0ver="this.style.backgroundColor='#000000'" onMouse0ut="this.style.backgroundColor='#C0C0C0'">PAIN</a>

Example below (cuts out the onMouseOver and onMouseOut):

PAIN

Edit: It seems you can do bad things with this (Twitter situation). Preferably just whitelist the background color and text color portion. Then nobody will be able to run any other code.

Battalia

EDIT: Okay so apparently most of my issues can be boiled down to the fact that the shorthand animation property doesn't work, and it should work. I didn't realize this until after writing this out and having a realization moment. If that can be fixed that would be great
It would also be great to have the background-blend-mode property, which you can currently accomplish the same thing through layering elements and mix-blend-mode but it'd be a lot easier to just have background-blend-mode.

I would LOVE to have background-blend-mode and the assortment of animated properties that aren't currently whitelisted, including but not limited to skew x & y and transform x & y. I don't really know why these are disallowed other than potentially because background-blend-mode is relatively new, though it's similar to background-filter above. (also I have managed to create a workaround for this using z-index and absolute positioning but it'd be nice to just, y'know, have the property)
Honestly I ask because I made this epic animated profile and only one type of animation works. Would really be nice to jazz up profiles with lil cosmetics like this.
Also it seems like the animation shorthand has some issue, because writing out a rotate animation in longhand works but not in shorthand (tested to work outside TH though)

Lupe

Hi there! Tried searching the forums and I couldn't find anything on the matter, but would it be possible to whitelist the html map element? I was trying to map links to an image and it didn't seem to be able to use it. Thank you and I'm sorry in advance if this has been covered elsewhere.

junijwi

I would love if we could get svg shapes whitelisted! the svg tag itself works, but rect/polygon/line and such are filtered out.

Tags are

<rect /> <circle /> <ellipse /> <line /> <polyline /> <polygon /> <path />

and their attributes are

x, y, cx, cy, rx, ry, width, height, stroke, stroke-width, fill, points, x1, x2, y1, y2, d

junijwi

First, thanks for all your hard work!! Really appreciate the addition of svg (at least, I think it was added, seems to be working now)!

If possible, can we get "background-repeat: space" and "background-repeat: round"? Would looove that so much ;v; thanks!

Harrie

The update to font-awesome 6 is very exciting, thank you so much!!

But, unfortunately there are some icons that are wildly different between versions. Having both versions should be possible in theory because they use different classes, but I'm not sure about the logistics of that? EDIT: I've tested it on my own site now, it is possible to have both versions running together.

What I am sure of though is if mask/-webkit-mask properties & the currentColor keyword were whitelisted, it would then be possible to use any svg icon with the current text colour, allowing people to recreate the old icons if needed.

Even if it is possible to have both versions of FA at the same time, FA is missing a lot of useful icons (no chicken... Nor zodiacs n the like) so the ability to have theme friendly custom icons would be great & these can be used for many other things as well!

And, while I'm asking for things to be whitelisted, i have to echo the requests to whitelist CSS grid, as well as the :empty pseudo class, image-rendering, and backface-visibility.