How to prevent motion sickness with few lines of CSS.

#webdev #css #a11y #productivity

Motion sickness occurs due to a difference between actual and expected motion. Symptoms commonly include nausea, vomiting, cold sweat, headache, dizziness, tiredness, loss of appetite, and increased salivation. Complications may rarely include dehydration, electrolyte problems, or a lower esophageal tear.

The cause of motion sickness is either real or perceived motion. This may include from car travel, air travel, sea travel, space travel, or reality simulation. Risk factors include pregnancy, migraines, and Meniere’s disease. The diagnosis is based on symptoms.

Treatment may include behavioral measures or medications. Behavioral measures include keeping the head still and focusing on the horizon. Three types of medications are useful: antimuscarinics such as scopolamine, H1 antihistamines such as dimenhydrinate, and amphetamines such as dexamphetamine. Side effects, however, may limit the use of medications. A number of medications used for nausea such as ondansetron are not effective for motion sickness.

Nearly all people are affected with sufficient motion and most people will experience motion sickness at least once in their lifetime. Susceptibility, however, is variable, with about one-third of the population being highly susceptible while most other people are affected under extreme conditions. Women are more easily affected than men. Motion sickness has been described since at least the time of Homer (ca. 8th century BC).

Please 🙏 include this small snippet in your CSS bundle to protect people from motion sikness.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Tis media query (@media (prefers-reduced-motion: reduce)) is called reduced motion media query.

This snippet adds some animation limitations for all the elements in the page. Added !important directive, so anyone can't override it with online ne styles.

Thanks for reading this article.💕

Follow me for more articles🏃