Improving the user experience of web applications has always been a priority of mine. I always come back to the same though I’ve had for 20 years: “users expect a web app to work — let’s make the app a joy to use.” Over the years we’ve employed JavaScript to improve the UX, but over time those strategies either become clunky or get baked into the web languages themselves. One such feature is smooth scrolling; a great UX improvement but annoying if imperfect. Did you know that you can implement smooth scrolling with just CSS?
The scroll-behavior CSS property controls the scrolling strategy for overflow elements with scrolling behavior, and only when triggered by navigation or CSSOM properties. The default scroll-behavior value is auto, which represents no visual effect — immediately scrolling to the target element with no animation. To provide users a smooth scrolling experience, you can use the smooth value:
/* slide between items */
.slideshow ul {
scroll-behavior: smooth;
}
Of course you do lose some visual control when you use a native browser API — most notably animation speed and animation curve. On the positive side you don’t need to add kilobytes of JavaScript that you need to maintain to achieve a very similar effect!
Regular Expressions for the Rest of Us
Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In…
Adding Events to Adding Events in MooTools
Note: This post has been updated. One of my huge web peeves is when an element has click events attached to it but the element doesn’t sport the “pointer” cursor. I mean how the hell is the user supposed to know they can/should click on…
[ad_2]
Source link
