Remedy picture & source display [#45]

jensimmons · Feb 1, 2021 · 59aee67 · 59aee67
1 parent 5b79a04
commit 59aee67
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git 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
@@ -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