Project

General

Profile

Actions
Copy link

Defect #41957

closed

Remove nesting selectors because are not support in old browsers

Added by Kevin Zhang about 1 month ago. Updated about 1 month ago.

Status:
Closed
Priority:
Normal
Assignee:
Marius BĂLTEANU
Category:
UI
Target version:
6.0.2
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:
Fixed
Affected version:
6.0.1

Description

database manager version
mysql Ver 8.0.26 for Linux on x86_64 (Source distribution)

Ruby version
ruby 3.2.3 (2024-01-18 revision 52bb2ac0a6) [x86_64-linux]

Redmine version
6.0.1

Google Chrome version
109.0.5414.120

sidebar and filter form not correct displayed in old browsers (chrome, safari) because of nesting selector in application.css not supported

svg {
  &.icon-svg {
    stroke: #169;
    fill: none;
    stroke-width: 1.5;
    vertical-align: middle;
  }

  &.s20 {
    width: 1.25rem;
    height: 1.25rem;
  }

  &.s18 {
    width: 1.125rem;
    height: 1.125rem;
  }

  &.s14 {
    width: 0.875rem;
    height: 0.875rem;
  }

  &.s12 {
    width: 0.75rem;
    height: 0.75rem;
  }
}

Files

Download all files
filter form not displayed.jpg (228 KB) filter form not displayed.jpg Kevin Zhang, 2024-12-09 10:43
application-css.png (114 KB) application-css.png Kevin Zhang, 2024-12-09 10:43
browsers compatible.png (180 KB) browsers compatible.png Kevin Zhang, 2024-12-09 10:43
Actions
Copy link
 #2

Updated by Holger Just about 1 month ago

  • Status changed from New to Confirmed

This feature is apparently available since Chrome 112 (released 2023-04-04). See

Note that in addition to the rules quoted here, there are also other rules (e.g. those added in r23130 for #41321) which require Chrome >= 120 (released 2023-12-05). To solve this, we could re-formulate these rules to not require nesting or we could document minimum browser requirements. As our rules are not that complicated, it may be worthwhile to remove the & nesting here to still allow "medium-old" browsers.

Actions
Copy link
 #3

Updated by Marius BĂLTEANU about 1 month ago

  • Assignee set to Marius BĂLTEANU
  • Target version set to 6.0.2

I agree, I will include this change in 6.0.2

Actions
Copy link
 #4

Updated by Marius BĂLTEANU about 1 month ago

  • Subject changed from & nesting selector not support in old browsers to Remove nesting selectors because are not support in old browsers
Actions
Copy link
 #5

Updated by Marius BĂLTEANU about 1 month ago

  • Status changed from Confirmed to Resolved
  • Resolution set to Fixed
Actions
Copy link
 #6

Updated by Marius BĂLTEANU about 1 month ago

Fixes committed and merged to 6.0-stable branch.

Actions
Copy link
 #7

Updated by Marius BĂLTEANU about 1 month ago

  • Status changed from Resolved to Closed
Actions
Copy link
 #8

Updated by Katsuya HIDAKA about 1 month ago

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.

Actions
Copy link
 #9

Updated by Marius BĂLTEANU about 1 month ago

Katsuya HIDAKA wrote in #note-8:

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?

[...]

If this discussion should be handled in a separate issue, I’m happy to do so.

Committed, thanks!

Actions
Copy link

Also available in: Atom PDF