Scrolling on the Web: A Primer

Scrolling is complicated. Nolan Lawson:

  • User scrolls with two fingers on a touch pad
  • User scrolls with one finger on a touch screen
  • User scrolls with a mouse wheel on a physical mouse
  • User clicks the sidebar and drags it up and down
  • User presses up, down, PageUp, PageDown, or spacebar keys on a keyboard

As it turns out, all five of these input methods have vastly different characteristics, especially when it comes to performance and cross-browser behavior. Some of them (such as touch screen scrolling) are likely to be smooth even on a page with heavy JavaScript usage, whereas others (such as keyboard scrolling) will make the same page feel laggy and unresponsive. Furthermore, some kinds of scrolling can be slowed down by DOM event handlers, whereas others won't.

Systems Smart Enough To Know When They’re Not Smart Enough

Josh Clark opens with "Our answer machines have an over-confidence problem." Perhaps you've seen the examples of search results (in any form) presenting terrifyingly wrong (or at least "controversial") "answers". Hash tag fake news.

Search, in whatever form we offer it to our users, tends that way. This our top result, dear person! Interact with it! Our algorithm predicts you won't regret it! Certainly, there is incentive to present results in that way.

Josh asks some hard questions:

  1. When should we sacrifice speed for accuracy?
  2. How might we convey uncertainty or ambiguity?
  3. How might we identify hostile information zones?
  4. How might we provide the answer’s context?
  5. How might we adapt to speech and other low-resolution interfaces?

To which I might add: can we find a business incentive to make these things happen? Can such a good job be done with all this, that it attracts users, gains their trust, and makes them good customers? I fear that fast, overconfident, context-free answers is better business, short term.

Measuring Image Widths in JavaScript (Carefully!)

Let's say you want to find an <img /> on the page and find out how wide it is in JavaScript. Maybe you need to make some choices based on that width (or height, or both) You can definitely do that. The DOM will even give you a variety of dimensions to choose from depending on what you need. There is definitely a catch though.

(more…)

Need to do Dependency-Free Ajax?

One of the big reasons to use jQuery, for a long time, was how easy it made Ajax. It has a super clean, flexible, and cross-browser compatible API for all the Ajax methods. jQuery is still mega popular, but it's becoming more and more common to ditch it, especially as older browser share drops and new browsers have a lot of powerful stuff we used to learn on jQuery for. Even just querySelectorAll is often cited as a reason to lose the jQuery dependency.

How's Ajax doing?

(more…)

CSS-Tricks Chronicle XXX

All the latest happenings around here on CSS-Tricks as well as on CodePen and ShopTalk. Recommended listening, news, upcoming conferences, things to watch for, and more. Wow, it's the 30th of these already!

Getting Started with CSS Grid

This was a blockbuster week for front-end developers as CSS Grid landed in the latest versions of Firefox and Chrome without a feature flag. That's right: we can now go and play with Grid in two of the most popular browsers right away.

But why is CSS Grid a big deal and why should we care?

Well, CSS Grid is the first real layout system for the web. (more…)

If Your Company Were a Couch…

Without even realizing it, our perceptions are cross-referenced with our memories. Our brains conjure up an emotional reaction when our eyes see familiar shapes, colors, and textures. This fun exercise uses various styles of couches to help you make decisions about the emotional response that best represents the personality of your company (or how you would like your company to be perceived).

(more…)

Linting HTML using CSS

Ire Aderinokun with some CSS selectors designed to catch problematic HTML elements, such as those with inline styles or missing/wrong attributes.

I tossed up a repo so I could make a full page demo showing off all those selectors at work. Any red you see is a problem of sorts.

speak

The speak property in CSS is for specifying how a browser should speak the content it reads, such as through a screen reader.

In other words, it's kind of like styling speech the way other CSS properties style visual elements of a webpage.

.module {
  speak: none;
}

(more…)

Using CSS Transitions on Auto Dimensions

We've all been there. You've got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You've set transition: height 0.2s ease-out. You've created a collapsed CSS class that applies height: 0. You try it out, and... the height doesn't transition. It snaps between the two sizes as if transition had never been set. After some fiddling, you figure out that this problem only happens when the height starts out or ends up as auto. Percentages, pixel values, any absolute units work as expected. But all of those require hard coding a specific height beforehand, rather than allowing it to naturally result from the size of the element content.

(more…)

An Event Apart Seattle – April 3-5, 2017

An Event Apart Seattle is coming up! Less than a month away. If you've been trying to decide, now is the time to pull the trigger before it sells out. I'll be there doing three official things. One, I'll be speaking. Two, I'll be giving a workshop on the last day. Three, I'll be on a discussion panel talking about staying on top of this field.

The workshop on the final day is called A Day Apart, and you buy tickets for the conference and the workshop separately or as a package deal.

(more…)

Simple Little Use Case for `vmin`

Viewport units are things like 10vw (10% of the viewport width) or 2vh (2% of the viewport height). Useful sometimes, as they are always relative to the viewport. No cascading or influence by parent elements.

There is also vmin, which is the lesser of vw and vh, and vmax, which is the greater. These values can be used for anything that takes a length value, just like px or em or % or whatever.

Let's take a look at a tiny design pattern that makes use of vmin.

(more…)

:user-invalid

The :user-invalid is a CSS pseudo-class that is under proposal in the CSS Selectors Level 4 working draft that selects a form element based on whether the value—as entered by a user—is valid when checked against the what is specified as an accepted value in the HTML markup after the end user has interacted with the form beyond that input. In fact, :user-invalid has been called "The User Interaction Pseudo-class" because it is unique in identifying a user action in selecting an element.

(more…)

The Document Outline Dilemma

For the past few weeks there has been lots of talk about HTML headings in web standards circles. Perhaps you've seen some of the blog posts, tweets, and GitHub issue threads. Headings have been part of HTML since the very first websites at CERN, so it might be surprising to find them controversial 25 years later. I'm going to quickly summarize why they are still worth discussing, with plenty of links to other sources, before adding my own opinions to the mix. If you're up-to-date on the debate, you can jump straight to the "Bigger Dilemma" section.

(more…)

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag