Skip to content

Instantly share code, notes, and snippets.

@passcod
Last active May 18, 2021
Embed
What would you like to do?
Twitter but alt

Twitter but alt

UserCSS to replace images with their alt text on twitter.

Version 1.0.0

Variants

  • A-theme: images with alt text are replaced, images without are left alone
  • B-theme: images with alt text are replaced, images without are removed (blanked)
  • C: tweets with images with no alt text are blanked, others are left alone. made for dark theme, replace the background colour if you use another.

Themes

  • dark
  • dim
  • light

dinosaur comic tweet with the usercss applied

/* ==UserStyle==
@name Twitter but alt
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Twitter but with ALT-ed images replaced by their alt text. Variant A-dark
@author @passcod
@homepageURL https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */
@-moz-document domain("twitter.com") {
[data-testid="tweetPhoto"]:not([aria-label="Image"]) {
background: black;
margin: 0 !important;
}
[data-testid="tweetPhoto"]:not([aria-label="Image"]) > * {
opacity: 0;
}
[data-testid="tweetPhoto"]:not([aria-label="Image"])::after {
content: attr(aria-label);
color: white;
font-family: sans-serif;
padding: 1ch;
max-height: 100%;
max-width: 100%;
overflow-y: auto;
}
}
/* ==UserStyle==
@name Twitter but alt
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Twitter but with ALT-ed images replaced by their alt text. Variant A-dim
@author @passcod
@homepageURL https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */
@-moz-document domain("twitter.com") {
[data-testid="tweetPhoto"]:not([aria-label="Image"]) {
background: #15202b;
margin: 0 !important;
}
[data-testid="tweetPhoto"]:not([aria-label="Image"]) > * {
opacity: 0;
}
[data-testid="tweetPhoto"]:not([aria-label="Image"])::after {
content: attr(aria-label);
color: white;
font-family: sans-serif;
padding: 1ch;
max-height: 100%;
max-width: 100%;
overflow-y: auto;
}
}
/* ==UserStyle==
@name Twitter but alt
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Twitter but with ALT-ed images replaced by their alt text. Variant A-light
@author @passcod
@homepageURL https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */
@-moz-document domain("twitter.com") {
[data-testid="tweetPhoto"]:not([aria-label="Image"]) {
background: white;
margin: 0 !important;
}
[data-testid="tweetPhoto"]:not([aria-label="Image"]) > * {
opacity: 0;
}
[data-testid="tweetPhoto"]:not([aria-label="Image"])::after {
content: attr(aria-label);
color: black;
font-family: sans-serif;
padding: 1ch;
max-height: 100%;
max-width: 100%;
overflow-y: auto;
}
}
/* ==UserStyle==
@name Twitter but alt
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Twitter but with ALT-ed images replaced by their alt text. Variant B-dark
@author @passcod
@homepageURL https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */
@-moz-document domain("twitter.com") {
[data-testid="tweetPhoto"] {
background: black;
margin: 0 !important;
}
[data-testid="tweetPhoto"] > * {
opacity: 0;
}
[data-testid="tweetPhoto"]:not([aria-label="Image"])::after {
content: attr(aria-label);
color: white;
font-family: sans-serif;
padding: 1ch;
max-height: 100%;
max-width: 100%;
overflow-y: auto;
}
}
/* ==UserStyle==
@name Twitter but alt
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Twitter but with ALT-ed images replaced by their alt text. Variant B-dim
@author @passcod
@homepageURL https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */
@-moz-document domain("twitter.com") {
[data-testid="tweetPhoto"] {
background: #15202b;
margin: 0 !important;
}
[data-testid="tweetPhoto"] > * {
opacity: 0;
}
[data-testid="tweetPhoto"]:not([aria-label="Image"])::after {
content: attr(aria-label);
color: white;
font-family: sans-serif;
padding: 1ch;
max-height: 100%;
max-width: 100%;
overflow-y: auto;
}
}
/* ==UserStyle==
@name Twitter but alt
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Twitter but with ALT-ed images replaced by their alt text. Variant B-light
@author @passcod
@homepageURL https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */
@-moz-document domain("twitter.com") {
[data-testid="tweetPhoto"] {
background: white;
margin: 0 !important;
}
[data-testid="tweetPhoto"] > * {
opacity: 0;
}
[data-testid="tweetPhoto"]:not([aria-label="Image"])::after {
content: attr(aria-label);
color: black;
font-family: sans-serif;
padding: 1ch;
max-height: 100%;
max-width: 100%;
overflow-y: auto;
}
}
/* ==UserStyle==
@name Twitter no no alt
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Twitter but with tweets that don't have alt blanked
@author @passcod
@homepageURL https://gist.github.com/passcod/826450295861677a68d9487e0515f1f5
==/UserStyle== */
@-moz-document domain("twitter.com") {
[data-testid="tweetPhoto"][aria-label="Image"] {
background: black;
height: 1000%;
width: 1000%;
margin: -20rem 0 0 -20rem !important;
}
[data-testid="tweetPhoto"][aria-label="Image"] > * {
opacity: 0;
}
article [data-testid=tweet] * {
overflow: unset !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment