Permanently Block tags on AO3 - Site Skin
Tutorial on how to do it: https://archiveofourown.org/works/41214669
ok so, this is INCREDIBLY COOL and could save a lot of lives.
Ti note: :has() is a new css feature (and weirdly enough, as new as it is, Ao3 allows it in skins!!) and it’s still being implemented across browsers. it works on my safari iphone, I didn’t manage to make it work on chrome (but from what I’m reading it’s available in the beta branch), and I haven’t tried it in other browsers.
but it’s definitely worth a check if it works on your device!
Also everything is very well explained in the tutorial above.
update on how it works on various browsers as of august 2022:
Desktop browsers:
it works fine on safari both on mac and on iphone
on chrome it works in the beta pre-release version. They are going to be shipping it in the next version (105, which should go out at the end of the month.) but you can also enable it by going here: chrome://flags/#enable-experimental-web-platform-features and select ‘enabled’ to the Experimental Web Platform features
on edge and opera it is scheduled in the pre-release version. still in development. it will come eventually.
on Firefox you’ll need to go in the advanced config and enable the flag
layout.css.has-selector.enabled
Mobile Browsers:
according to canIuse only safari on iphone has it fully functioning.
And Chrome for Android has it in the pre-release version which should be out soon.
I can’t find infos on firefox for android (but that one allows extensions, so you can use userscripts to hide tags)
Additional stuff to remember
- the class selector a[href*=“whatever”] looks at the url of the link. so if you have two words you’ll need to add %20 where the space should be and *s* where the / should be (for ships). so like: a[href*=“Colin%20Bridgerton*s*Penelope%20Featherington”] (the simplest way is to go to the page of the tag you want to block and copy the text)
- a “i” at the end will make it non case-sensitive (which helps btw) a[href*=“whatever” i]
- tumblr always changes “” in the curly ones. but you’ll need to use the straight ones in css if you want them to work properly
- it will search even part of the word. so “tick” will catch “ticket” “ticking” “tickling” “ticks”
- this won’t catch all the syns of the tags unfortunately. if you want a clean exlusion of a particular tag you still should use the filters
Okay, question: Should I replace letters with accents with something else? I want to filter out “Alya Césaire Bashing,” but putting in “/tags/Alya%20Césaire%20Bashing/works” doesn’t seem to work. Similarly, the | symbol doesn’t seem to be behaving normally when I tried something with it.
(Also, theoretically it should work on Firefox Mobile but when I tried to access the about:config page on Firefox it didn’t give me anything. I googled it and it should give me something, and it was very late at night when I tried it so I might have been doing something wrong.)
yeah, I can confirm that both the | and the accented letters fuck with the css. so this thing won’t work with those kind of tags.
maybe you can do it with the partial “saire%20Bashing” it should take those tags.
It absolutely works with accented characters and pipes. This is why the tutorial said to copy the link and use it, not type it yourself. Accented characters and pipes and other special characters have special encoding for urls. The link for the Alya Césaire Bashing tag is https://archiveofourown.org/tags/Alya%20C%C3%A9saire%20Bashing/works, so that accented e is encoded as %C3%A9.
For pipes, it’s something like %7C.
Seriously, copy the link, don’t try to guess how urls encode weird characters. It’ll save your a headache
(via batbirdies)
