Responsive video resizing

Comment icon Small gray icon for comments Comments

There are a number of options for implementing responsive images, e.g., the <picture> element, client-side polyfills, automatic cropping, et al. But what about video? Many of the examples I see in responsive layouts replace video with a static image in smaller viewports. That may be because of concerns regarding data...

Read the full post

Flexible type with :root

Comment icon Small gray icon for comments Comments

One element of responsive web design that can be tricky to solve for is typography. Ideally you want to have type that’s as fluid as possible across different viewports. A conventional way of doing this might be to start with a base font size and then change it when you...

Read the full post

Use attribute selectors with empty links

Comment icon Small gray icon for comments Comments

Here’s a quick CSS tip: if a hyperlink doesn’t have a text value, i.e., it rendered empty, insert the href value in its place: a[href]:empty::before { content: attr(href); } Why do this? Link text can be overlooked in content generated by a CMS. Rendering the text with the href value...

Read the full post