This content originally appeared on DEV Community 👩💻👨💻 and was authored by Stas Melnikov
Hey folks!
I'd like to talk about why we should be careful with the animation property, in which cases you can use :not([class]) and why the background-color property is useful.
But before embarking on reading I leave the link on my Substack newsletter about CSS. If you wanna read more tips you know what to make 😎
Also, thank you so much, my sponsors: Ben Rinehart, Jesse Willard, Tatiana Ten, Konstantinos Kapenekakis. I didn't write this article without their support.
The animation property without the prefers-reduced-motion media feature can lead to dizziness or headache
Motion animation might lead to users with vestibular disorders experience dizziness and headache😩So we should wrap it in prefers-reduced-motion. It’ll help users avoid problems if they disabled animations in OS settings💡
don't make that
.example {
animation: zoomIn 1s;
}
instead you can use that
@media (prefers-reduced-motion: no-preference) {
.example {
animation: zoomIn 1s;
}
}
What does :not([class]) make useful?
How do you define basic typography styles? If you set styles via the type selector and reset via class I’ll offer to make it without resetting. Just use :not([class]) 😉
don't make that
li:not(:first-child) {
margin-block-start: 1rem;
}
.list__iten {
margin-block-start: 0;
}
instead you can use that
li:not([class]):not(:first-child) {
margin-block-start: 1rem;
}
background-color doesn’t allow controls merge with the white screen
I’m angry when controls merge with a white screen before loading pictures. Uh uh, why don’t you show me them?😡It’s easy to add background-color if you use background-image. I’ll use the app without waiting of loading pictures🙂
don't make that
.hero {
background-image: url("hero.jpg");
}
instead you can use that
.hero {
background-image: url("hero.jpg");
background-color: #ff6347;
}
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Stas Melnikov
Stas Melnikov | Sciencx (2022-11-10T18:13:41+00:00) The 3 Short November CSS tips. Retrieved from https://www.scien.cx/2022/11/10/the-3-short-november-css-tips/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.