The browser support for CSS Nesting is nearly identical to that of the CSS Nesting selector (&).
For example, the fix in #41821 won't work in older browsers.
Since CSS Nesting and the CSS Nesting selector (&) are functionally related features, wouldn’t it be more consistent to address CSS Nesting as well?
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 1707bc172..8590db99a 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1745,10 +1745,10 @@ td.gantt_selected_column .gantt_hdr,.gantt_selected_column_container {
display: inline-flex;
align-items: center;
vertical-align: middle;
+}
- svg {
- flex-shrink: 0;
- }
+.icon svg, .icon-only svg {
+ flex-shrink: 0;
}
a.icon:hover svg, a.icon-only:hover svg {
diff --git a/app/assets/stylesheets/wiki_syntax.css b/app/assets/stylesheets/wiki_syntax.css
index 068bae969..de266e62c 100644
--- a/app/assets/stylesheets/wiki_syntax.css
+++ b/app/assets/stylesheets/wiki_syntax.css
@@ -25,24 +25,21 @@ body { font-family: var(--fonts-main); font-size: 0.75rem; color: #444; }
pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace; }
table th {
padding-top: 1em;
-
- img {
- border: 1px solid #bbb;
- opacity: 0.7;
- }
-
- .syntax-pre {
- display: inline-block;
- border: 1px solid #bbb;
- width: 18px;
- height: 18px;
-
- &:before {
- content: "pre";
- font-size: 0.625rem;
- color: #666;
- }
- }
+}
+table th img {
+ border: 1px solid #bbb;
+ opacity: 0.7;
+}
+table th .syntax-pre {
+ display: inline-block;
+ border: 1px solid #bbb;
+ width: 18px;
+ height: 18px;
+}
+table th .syntax-pre:before {
+ content: "pre";
+ font-size: 0.625rem;
+ color: #666;
}
table td { background-color: #f5f5f5; height: 2em; vertical-align: middle;}
table td code { font-size: 1.2em; }
If this discussion should be handled in a separate issue, I’m happy to do so.