diff --git a/CHANGELOG.md b/CHANGELOG.md index 2ee4606..ce66ca1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## UNRELEASED +- [Remedy] New: Proper display handling for `picture` and `source` elements - [Remedy] New: Add basic `[hidden]` remedy to fix unintentional `display` overrides - [Remedy] Fix: Audio without `[controls]` remains hidden by default diff --git a/css/remedy.css b/css/remedy.css index f9a9a74..ebb461d 100644 --- a/css/remedy.css +++ b/css/remedy.css @@ -134,6 +134,23 @@ img, svg, video, canvas, audio, iframe, embed, object { audio:not([controls]) { display:none; } +/* @docs +label: Responsive Images + +note: | + These new elements display inline by default, + but that's not the expected behavior for either one. + This can interfere with proper layout and aspect-ratio handling. + + 1. Remove the unnecessary wrapping `picture`, while maintaining contents + 2. Source elements have nothing to display, so we hide them entirely + +category: embedded elements +*/ +picture { display: contents; } +source { display: none; } + + /* @docs label: Aspect Ratios