Skip to content

Commit

Permalink
fix(core): Ungroup placeholder css rules to prevent browsers from r…
Browse files Browse the repository at this point in the history
…emoving all rules

When rules are grouped using the comma operator and one selector is invalid / unknown then the whole group is invalidated[1].
In this case `::-ms-input-placeholder` is unknown to Firefox and Chrome, so the `::placeholder` rule is never applied.
[1]: https://www.w3.org/TR/selectors-3/#grouping

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
  • Loading branch information
susnux committed Jun 7, 2023
1 parent 4e8ffe9 commit 672d44c
Show file tree
Hide file tree
Showing 5 changed files with 21 additions and 8 deletions.
2 changes: 1 addition & 1 deletion core/css/inputs.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion core/css/inputs.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 17 additions & 4 deletions core/css/inputs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -826,9 +826,22 @@ label.infield {
overflow: hidden;
}

::placeholder,
::-ms-input-placeholder,
::-webkit-input-placeholder {
// when rules are grouped using the comma operator and one selector is invalid / unknown then the whole group is invalidated.
// https://www.w3.org/TR/selectors-3/#grouping
// In this case `::-ms-input-placeholder` is unknown to Firefox and Chrome
@mixin placeholder-style {
color: var(--color-text-maxcontrast);
font-size: var(--default-font-size);
font-size: var(--default-font-size);
}

::placeholder {
@include placeholder-style;
}

::-ms-input-placeholder {
@include placeholder-style;
}

::-webkit-input-placeholder {
@include placeholder-style;
}
2 changes: 1 addition & 1 deletion core/css/server.css

Large diffs are not rendered by default.

Loading

0 comments on commit 672d44c

Please sign in to comment.