There are numerous valid reasons why you might want a scrolling element to start out scrolled to the bottom and remain there until the user scrolls back up. While this can be achieved using JavaScript to adjust scroll positions, there is now a CSS solution with the anchor-overflow property, which is an excellent CSS trick.
Another method, as covered by Kitty Giraudel in CSS-only bottom-anchored scrolling area, involves setting flex-direction: column-reverse; and placing the HTML in reverse order without any additional elements. This ensures that the content visually pinned at the bottom is placed at the top of the element.
However, there is an accessibility concern highlighted by Kitty regarding the disconnect between visual and DOM order, which may confuse screen-reader users. While this primarily affects users with vision impairments, it’s essential to consider. CSS is working on a solution with the reading-order property to align the reading order for both sighted and screen-reader users.
By using reading-order: flex-visual, we can ensure that sighted users and screen-reader users consume our content consistently.
Exploring new CSS features can lead to innovative solutions, as seen with lenticular cards and creative uses of box-shadow. The possibilities unlocked by CSS functions like pow(), sqrt(), and trig functions offer exciting opportunities for developers to explore unconventional design techniques.
For those interested in container queries, Ahmad Shadeed’s An Interactive Guide to CSS Container Queries provides practical examples of how container queries can be utilized effectively in web design.
