Helpers

Let's take a look at some other changes that affect helpers you might be using.

Aspect Ratios

ratio

• ratio-{VAL}
  • VAL: 1x1 4x3 16x9 21x9

Try it

The responsive embed helpers have been renamed to ratio helpers with some new class names. Instead of the word by, you use an x. There used to be a class called embed-responsive-class which is gone.

There are some aspect ratio classes to help with setting the proportions of elements. These are designed to go in a container class that wraps elements like <iframe> <embed> <video>
<object> but will work with other elements like <div> or <img>.

Visually Hidden

• Removed: sr-only sr-only-focusable
• visually-hidden visually-hidden-focusable

There were two clases called sr-only and sr-only-focusable that have been removed.

Instead, there is a new class called visually-hidden that hides elements, but shows them to screen readers.

visually-hidden-focusable - is another version that does the same thing, but shows the elements when they're focusable.