refactor: ♻️ add @supports at rules for non-Baseline 2024 CSS

alistair3149 · alistair3149 · commit 072e4365e908 · 2025-06-10T02:05:15.000-04:00
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -24,8 +24,7 @@
 				"available": "2024",
 				"ignoreSelectors": [
 					"nesting"
-				],
-				"severity": "warning"
+				]
 			}
 		]
 	}
diff --git a/resources/skins.citizen.styles/common/common.less b/resources/skins.citizen.styles/common/common.less
@@ -8,8 +8,11 @@ body {
 	min-height: ~'calc( 100vh - env( safe-area-inset-bottom,0 ) - env( safe-area-inset-top,0 ) )';
 	min-height: 100dvh;
 	color: var( --color-base );
-	accent-color: var( --accent-color-base );
 	background: var( --color-surface-0 );
+
+	@supports ( accent-color: var( --accent-color-base ) ) {
+		accent-color: var( --accent-color-base );
+	}
 }
 
 // Apply border-box universally unless overwritten
@@ -30,9 +33,11 @@ body {
 	color: var( --color-placeholder );
 }
 
-::selection {
-	color: var( --color-inverted-primary );
-	background-color: var( --color-progressive );
+@supports selector( ::selection ) {
+	::selection {
+		color: var( --color-inverted-primary );
+		background-color: var( --color-progressive );
+	}
 }
 
 input,
diff --git a/resources/skins.citizen.styles/common/progressbar.less b/resources/skins.citizen.styles/common/progressbar.less
@@ -67,12 +67,11 @@
 html.citizen-loading::after {
 	position: fixed;
 	top: 0;
-}
 
-@media ( display-mode: standalone ) {
 	// Standalone PWA has no loading affordance
 	// So we provide one
-	html.citizen-loading::after {
+	/* stylelint-disable-next-line plugin/use-baseline */
+	@media ( display-mode: standalone ) {
 		--delay-progress-bar: 0ms;
 	}
 }
diff --git a/resources/skins.citizen.styles/common/typography.less b/resources/skins.citizen.styles/common/typography.less
@@ -37,10 +37,12 @@ p:not( .mw-empty-elt ) {
 
 blockquote {
 	font-style: italic;
-	/* NOTE: This only works for Chromium browsers for now */
-	text-wrap: pretty;
 	.mixin-citizen-font-styles( 'body' );
 
+	@supports ( text-wrap: pretty ) {
+		text-wrap: pretty;
+	}
+
 	cite {
 		font-style: normal;
 		.mixin-citizen-font-styles( 'small' );
diff --git a/resources/skins.citizen.styles/common/viewTransition.less b/resources/skins.citizen.styles/common/viewTransition.less
@@ -1,4 +1,5 @@
 @supports ( view-transition-name: none ) {
+	/* stylelint-disable-next-line plugin/use-baseline */
 	@view-transition {
 		navigation: auto;
 	}
diff --git a/resources/skins.citizen.styles/components/Menu.less b/resources/skins.citizen.styles/components/Menu.less
@@ -5,14 +5,17 @@
 		--transform-origin-offset-start: var( --space-xs );
 		--transform-origin-offset-end: ~'calc( 100% - var( --space-xs ) )';
 		margin: var( --space-xs );
-		user-select: none;
 		border: var( --border-width-base ) solid var( --border-color-base );
 		border-radius: var( --border-radius-medium );
 		box-shadow: var( --box-shadow-drop-xx-large );
 		transform: scale( 0 );
 		contain: content;
 		.mixin-citizen-frosted-glass( citizen-menu__card-backdrop );
 
+		@supports ( user-select: none ) {
+			user-select: none;
+		}
+
 		&-content {
 			max-width: inherit;
 			max-height: inherit;
@@ -72,7 +75,10 @@
 	height: var( --size-icon );
 	min-height: var( --size-icon );
 	contain: strict;
-	content-visibility: auto;
+
+	@supports ( content-visibility: auto ) {
+		content-visibility: auto;
+	}
 
 	&::before {
 		display: block;
@@ -100,6 +106,18 @@
 	}
 }
 
+@supports ( user-select: none ) {
+	.citizen-menu__card {
+		user-select: none;
+	}
+}
+
+@supports ( content-visibility: auto ) {
+	.citizen-ui-icon {
+		content-visibility: auto;
+	}
+}
+
 .mw-portlet {
 	// Hide selected item
 	.selected {
diff --git a/resources/skins.citizen.styles/components/PageHeader.less b/resources/skins.citizen.styles/components/PageHeader.less
@@ -35,7 +35,6 @@
 .firstHeading {
 	margin-block: 0;
 	line-height: 2rem; /* Reduced line height to make the heading more compact */
-	word-break: break-word;
 	overflow-wrap: break-word;
 }
 
diff --git a/resources/skins.citizen.styles/components/Sections.less b/resources/skins.citizen.styles/components/Sections.less
@@ -50,7 +50,10 @@
 	.citizen-section {
 		&-heading {
 			cursor: pointer;
-			user-select: none;
+
+			@supports ( user-select: none ) {
+				user-select: none;
+			}
 		}
 
 		&-indicator {
diff --git a/resources/skins.citizen.styles/skinning/interface-edit-section-links.less b/resources/skins.citizen.styles/skinning/interface-edit-section-links.less
@@ -12,10 +12,16 @@
 	display: flex;
 	align-items: center;
 	margin-left: var( --space-sm );
-	-webkit-user-select: none;
-	user-select: none;
 	.mixin-citizen-font-styles( 'small' );
 
+	@supports ( user-select: none ) {
+		user-select: none;
+	}
+
+	@supports ( -webkit-user-select: none ) {
+		-webkit-user-select: none;
+	}
+
 	.cdx-button--icon-only {
 		span:not( .citizen-ui-icon ) {
 			display: none;
diff --git a/resources/skins.citizen.styles/skinning/interface-message-box.less b/resources/skins.citizen.styles/skinning/interface-message-box.less
@@ -11,8 +11,6 @@
 	padding: var( --space-sm ) var( --space-md );
 	overflow: hidden;
 	color: var( --color-emphasized );
-	word-wrap: break-word;
-	/* Standard property is `overflow-wrap` */
 	overflow-wrap: break-word;
 	background-color: var( --color-surface-2 );
 	border: var( --border-width-base ) solid var( --border-color-base );
diff --git a/resources/skins.citizen.styles/skinning/interface-subtitle.less b/resources/skins.citizen.styles/skinning/interface-subtitle.less
@@ -28,9 +28,15 @@
 
 #citizen-tagline-user > span + span::before {
 	margin: 0 var( --space-xxs );
-	-webkit-user-select: none;
-	user-select: none;
 	content: '·';
+
+	@supports ( user-select: none ) {
+		user-select: none;
+	}
+
+	@supports ( -webkit-user-select: none ) {
+		-webkit-user-select: none;
+	}
 }
 
 span.subpages {
diff --git a/resources/skins.citizen.styles/skinning/interface-user-message.less b/resources/skins.citizen.styles/skinning/interface-user-message.less
@@ -12,8 +12,6 @@
 	padding: var( --space-sm ) var( --space-md );
 	overflow: hidden;
 	color: var( --color-emphasized );
-	word-wrap: break-word;
-	/* Standard property is `overflow-wrap` */
 	overflow-wrap: break-word;
 	background-color: var( --background-color-warning-subtle );
 	border: var( --border-width-base ) solid var( --border-color-base );
diff --git a/skinStyles/extensions/MultimediaViewer/mmv.less b/skinStyles/extensions/MultimediaViewer/mmv.less
@@ -171,13 +171,14 @@
 			padding: ~'calc( var( --mmv-error-icon-size ) + var( --space-xxl ) )' 0 0 0;
 			margin: var( --space-md ) 4.5rem;
 			line-height: var( --line-height-small );
-			word-break: break-word;
+			overflow-wrap: break-word;
 			background-size: var( --mmv-error-icon-size );
 
 			.mw-mmv-error {
 				&-text {
 					font-size: var( --font-size-xxx-large );
 					font-weight: var( --font-weight-semi-bold );
+					color: ~'hsl( var( --color-progressive-hsl__h ), 35%, 65% )';
 				}
 
 				&-description {
diff --git a/skinStyles/extensions/PortableInfobox/ext.PortableInfobox.styles.less b/skinStyles/extensions/PortableInfobox/ext.PortableInfobox.styles.less
@@ -41,7 +41,13 @@
 .client-js .pi-collapse {
 	.pi-header:first-child {
 		// So that clicking the header won't highlight the entire section
-		user-select: none;
+		@supports ( user-select: none ) {
+			user-select: none;
+		}
+
+		@supports ( -webkit-user-select: none ) {
+			-webkit-user-select: none;
+		}
 	}
 }
 
diff --git a/skinStyles/extensions/SemanticMediaWiki/ext.smw.style.less b/skinStyles/extensions/SemanticMediaWiki/ext.smw.style.less
@@ -304,7 +304,7 @@ a.smw-ask-action-btn-lblue:active {
 
 .mw-json .value,
 .mw-json-single-value {
-	word-break: break-word;
+	overflow-wrap: break-word;
 }
 
 .ns-112.action-submit .error {
diff --git a/skinStyles/lib/leaflet/leaflet.less b/skinStyles/lib/leaflet/leaflet.less
@@ -101,9 +101,16 @@
 		min-height: 32px;
 		padding: 0 var( --space-xs );
 		cursor: pointer;
-		user-select: none;
 		border-radius: var( --border-radius-base );
 
+		@supports ( user-select: none ) {
+			user-select: none;
+		}
+
+		@supports ( -webkit-user-select: none ) {
+			-webkit-user-select: none;
+		}
+
 		&:hover {
 			background: var( --background-color-quiet--hover );
 		}

Original file line number	Diff line number	Diff line change
`@@ -24,8 +24,7 @@`
`24`	`24`	`"available": "2024",`
`25`	`25`	`"ignoreSelectors": [`
`26`	`26`	`"nesting"`
`27`		`- ],`
`28`		`- "severity": "warning"`
	`27`	`+ ]`
`29`	`28`	`}`
`30`	`29`	`]`
`31`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -67,12 +67,11 @@`
`67`	`67`	`html.citizen-loading::after {`
`68`	`68`	`position: fixed;`
`69`	`69`	`top: 0;`
`70`		`-}`
`71`	`70`
`72`		`-@media ( display-mode: standalone ) {`
`73`	`71`	`// Standalone PWA has no loading affordance`
`74`	`72`	`// So we provide one`
`75`		`- html.citizen-loading::after {`
	`73`	`+ /* stylelint-disable-next-line plugin/use-baseline */`
	`74`	`+ @media ( display-mode: standalone ) {`
`76`	`75`	`--delay-progress-bar: 0ms;`
`77`	`76`	`}`
`78`	`77`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`@supports ( view-transition-name: none ) {`
	`2`	`+ /* stylelint-disable-next-line plugin/use-baseline */`
`2`	`3`	`@view-transition {`
`3`	`4`	`navigation: auto;`
`4`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,6 @@`
`35`	`35`	`.firstHeading {`
`36`	`36`	`margin-block: 0;`
`37`	`37`	`line-height: 2rem; /* Reduced line height to make the heading more compact */`
`38`		`- word-break: break-word;`
`39`	`38`	`overflow-wrap: break-word;`
`40`	`39`	`}`
`41`	`40`