working arond the container-type safari bug

dutchcelt · Jan 23, 2024 · ad6c2fd · ad6c2fd
1 parent 60a6708
commit ad6c2fd
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 26 deletions.
diff --git a/src/system-layout.css b/src/system-layout.css
@@ -1,22 +1,21 @@
 @layer --system {
-	@container --system (width > 1rem) {
-		body {
-			--viewport-padding: minmax(var(--system-spacing-page-inline), 1fr);
-			--content-width: minmax(
-				calc(var(--system-dimension-min-width) - (var(--system-spacing-page-inline) * 2)),
-				var(--system-dimension-content-width)
-			);
+	body {
+		--viewport-padding: minmax(var(--system-spacing-page-inline), 1fr);
+		--content-width: minmax(
+			calc(var(--system-dimension-min-width) - (var(--system-spacing-page-inline) * 2)),
+			var(--system-dimension-content-width)
+		);
 
-			display: grid;
-			grid-template-columns:
-				[--viewport-start] var(--viewport-padding) [--content-start] var(--content-width) [--content-end] var(
-					--viewport-padding
-				)
-				[--viewport-end];
-			margin: unset;
-		}
+		grid-template-columns:
+			[--viewport-start] var(--viewport-padding) [--content-start] var(--content-width) [--content-end] var(
+				--viewport-padding
+			)
+			[--viewport-end];
+	}
 
-		body > :is(header, footer) {
+	@container --system (width > 1rem) {
+		header:is(body > header),
+		footer:is(body > footer) {
 			display: grid;
 			grid-template-columns: subgrid;
 			grid-column: --viewport-start / --viewport-end;
@@ -29,7 +28,7 @@
 			}
 		}
 
-		body > header {
+		header:is(body > header) {
 			background: var(--system-surface-color);
 
 			& > :is(h1, h2, h3),
@@ -52,11 +51,11 @@
 			}
 		}
 
-		body > :is(header, main, footer):not(:has(*)) {
+		:is(header, main, footer):not(:has(*)) {
 			display: none;
 		}
 
-		body > main {
+		main:is(body > main) {
 			/* Center main in page */
 			grid-column: --content-start / --content-end;
 			container: --content / inline-size;
@@ -76,14 +75,10 @@
 			}
 		}
 
-		body > header > nav {
+		header:is(body > header) > nav {
 			display: flex;
 			column-gap: var(--system-spacing-column-gap);
 			margin-block-start: var(--system-spacing-single);
 		}
-
-		body > :is(header, main, footer):not(:has(*)) {
-			display: none;
-		}
 	}
 }
diff --git a/src/system-selectors.css b/src/system-selectors.css
@@ -5,8 +5,6 @@
 		box-sizing: border-box;
 	}
 	html {
-		container-name: var(--system-enhanced, --system);
-		container-type: var(--system-enhanced, inline-size);
 		font-family: var(--system-font-family-body);
 		/**
 		 * DO NOT EDIT! 
@@ -18,6 +16,12 @@
 	}
 
 	body {
+		/* Container needs to be on body due to a bug on Safari :( */
+		container-name: var(--system-enhanced, --system);
+		container-type: var(--system-enhanced, inline-size);
+
+		display: var(--system-enhanced, grid);
+		margin: var(--system-enhanced, unset);
 		color: var(--system-canvas-text);
 		background-color: var(--system-canvas);
 	}