We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Spletno mesto bo delovalo z omejenimi zmožnostmi, medtem ko na njem izvajamo vzdrževalna dela za vas. Če članki ne rešijo vaše težave in želite zastaviti vprašanje, naša skupnost za podporo čaka na vas na @FirefoxSupport na Twitterju in na /r/firefox na Redditu.

Avatar for Username

Iskanje po podpori

Izogibajte se prevarantski tehnični podpori. Nikoli vam ne bomo naročili, da pokličete telefonsko številko ali nam pošljete osebne podatke. Sumljivo dejavnost prijavite z gumbom »Prijavi zlorabo«.

Več o tem

Ta tema je arhivirana. Postavite prosim novo vprašanje, če potrebujete pomoč.

::before and ::after pseudo-elements override my safety css. How can I override them back?

  • 4 odgovori
  • 0 ima to težavo
  • 1 ogled
  • Zadnji odgovor od cor-el

MarjaE
MarjaE
more options

Animation triggers my migraines.

Man websites use transition and animation timing functions such as "ease in-out" to animate the interface. I try to block this. Among other tools I use userContent,css, including the following:

  • {animation-timing-function: step-start !important}
  • {transition-timing-function: step-start !important}

This works to de-animate regular css elements, but not ::before and ::after pseudo-elements.

The current css standards do not apply user css to pseudo-elements. I've written to the WCAG about the issue.

https://bugzilla.mozilla.org/show_bug.cgi?id=1865572

https://github.com/w3c/wcag3/issues/40

But I really really need some way to de-animate these, because they trigger my migraines. Aside from css fixes, I often reduce the frame rate in about:config, but can't always do that, disable smooth scrolling, disable animated gifs and animated pngs, disable autoplay, block various non-scrolling elements using either css or uBlock Origin, etc.

Animation triggers my migraines. Man websites use transition and animation timing functions such as "ease in-out" to animate the interface. I try to block this. Among other tools I use userContent,css, including the following: *{animation-timing-function: step-start !important} *{transition-timing-function: step-start !important} This works to de-animate regular css elements, but not ::before and ::after pseudo-elements. The current css standards do not apply user css to pseudo-elements. I've written to the WCAG about the issue. https://bugzilla.mozilla.org/show_bug.cgi?id=1865572 https://github.com/w3c/wcag3/issues/40 But I really really need some way to de-animate these, because they trigger my migraines. Aside from css fixes, I often reduce the frame rate in about:config, but can't always do that, disable smooth scrolling, disable animated gifs and animated pngs, disable autoplay, block various non-scrolling elements using either css or uBlock Origin, etc.

Izbrana rešitev

::after and ::before are global selectors, they only apply to specific pseudo-elements like which are mentioned in the MDN article. 

*, ::before, ::after {animation-timing-function: step-start !important}
*, ::before, ::after {transition-timing-function: step-start !important}
Preberite ta odgovor v kontekstu 👍 0

Vsi odgovori (4)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Did you try a selector like ::after and ::before ?

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors

zeroknight
zeroknight
more options

The bug you linked mentions you can use the ::after and ::before selectors for targeting pseudo-elements which works for me.

MarjaE
MarjaE Lastnik vprašanja
more options

Uh, no.

I'm using global css, not domain-specific or element-specific css, because I need to de-animate *every* transition without having to diagnose and code for each website, with migraines from the still-animated transitions.

I'm not a programmer, and I can't read most of the online css manuals, so I may have missed something.

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Izbrana rešitev

::after and ::before are global selectors, they only apply to specific pseudo-elements like which are mentioned in the MDN article. 

*, ::before, ::after {animation-timing-function: step-start !important}
*, ::before, ::after {transition-timing-function: step-start !important}

Spremenil cor-el