This content originally appeared on DEV Community 👩💻👨💻 and was authored by Stas Melnikov
Hey folks!
I'd like to talk about how to use the scroll-behavior property safe for users, to reduce CSS with the hidden attribute and to create alternative for resize: none.
But before embarking on reading I leave the link on my Substack newsletter about CSS. You know what to make 😎
Also, thank you so much, my sponsors: Ben Rinehart, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis. I didn't write this article without their support.
The scroll-behavior property without the prefers-reduced-motion media feature can lead to dizziness or headache
The scroll-behavior property can lead to dizziness or headache when smooth scrolling😩 But if you use it with the prefers-reduced-motion media feature smooth scrolling will display only if users allow it in OS settings💡
don't make that
html {
scroll-behavior: smooth;
}
instead you can use that
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
The hidden attribute removes the need to define display: none
When using the hidden attribute browsers add display: none behind the scenes. It can used when adding display: none/display: block to elements that to be hidden or shown like popups, modal, etc. Just define all CSS with :not([hidden])💡
don't make that
<div class="modal">modal is hidden</div>
<div class="modal modal--is-open">modal is open</div>
modal {
display: none;
padding: 1rem;
/* remaining CSS */
}
.modal--is-open {
display: block;
}
instead you can use that
<div class="modal" hidden>modal is hidden</div>
<div class="modal">modal is open</div>
.modal:not([hidden]) {
padding: 1rem;
/* remaining CSS */
}
Please, stop using resize: none
We used to use resize: none to disable textarea resizing. We end up typing data with a lot of discomfort😒 But we can use resize: vertical and limit height resizing to avoid unlimited expansion when touching the display with your finger💡
don't make that
.textarea {
resize: none;
}
instead you can use that
.textarea {
resize: vertical;
min-height: 5rem;
max-height: 15rem;
}
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Stas Melnikov
Stas Melnikov | Sciencx (2022-09-28T18:19:49+00:00) The 3 Short September CSS tips. Retrieved from https://www.scien.cx/2022/09/28/the-3-short-september-css-tips/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.