Hoppa till innehållet

Fick reduced‑motion att hålla vad den lovar efter att ha hittat elva selektorer som fortfarande animerade under inställningen, eftersom en universell transition‑none‑regel förlorar på specificitet mot varje regel som har en klass.

elva selektorer som fortfarande rörde sig trots reduced‑motion

Situation. Webbplatsen respekterade inställningen för minskad rörelse med en enda regel som stängde av alla övergångar. Den såg fullständig ut, den passerar lintern utan anmärkning, och under en emulerad inställning för minskad rörelse animerades fortfarande elva selektorer.

Uppgift. Inställningen måste respekteras i praktiken, och orsaken till att den uppenbara regeln misslyckades måste göras till något som nästa person inte kan upprepa.

Handling. Orsaken är specificitet. En universell regel hamnar längst ned i kaskaden och förlorar mot varje regel som bär en klass, så en generell transition‑none slås ut av varje genomtänkt animation på sidan — vilket är varje animation som är värd att stänga av. Åtgärden var strukturell snarare än en lapp: allt som rör sig ligger nu i en del av stilmallen som kommer sent, och en linter underkänner en transform med övergång var som helst annars. Distinktionen som regeln gör är avsiktlig och snävare än den uppenbara: minska rörelse, inte färg. En färgtoning är inte rörelse, och att stänga av den får gränssnitt att kännas trasiga för människor som inte bad om det, så en övergång som listar färgegenskaper godkänns och en övergång på rörelse gör det inte. Rörelse måste också uttryckas som en övergång snarare än som en keyframe‑animation, eftersom den förra är trivial att avbryta och den senare inte är det. Två närliggande fällor kom ur samma arbete och är dokumenterade med mätningar: ett menyornament hade hunnit trettioen grader in i en vridning på sextio grader innan det var halvt synligt, och eftersom formen är periodisk ser en halv vridning identisk ut för en tredjedel av kostnaden; och fem olika egenskaper gör var för sig ett element till innehållande block för allt som är positionerat relativt visningsområdet, vilket i tysthet hade krympt ett stängningslager till en bråkdel av skärmen.

Resultat. Inställningen respekteras i praktiken snarare än i avsikt, och elva aktiva animationer som en generell regel såg ut att ha täckt är nu faktiskt täckta. Den allmänna lärdomen är den som står överst i det dokumentet: en regel som förlorar på specificitet fallerar i tysthet, och varje rapport kallar det något annat.

En del av en längre historik — och den finns i sin helhet här.

Varje post är skriven på samma sätt: situationen, uppgiften, vad vi gjorde och vad som förändrades.

Se hela historiken