From c26f45e55ee2f239c3f303eb30296825c0df6f1e Mon Sep 17 00:00:00 2001 From: Dmitry Verkhoturov Date: Wed, 25 Mar 2026 21:42:40 +0000 Subject: [PATCH] Clean up deprecated CSS and fix silent CSS bugs in frontend (#2012) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * frontend: remove deprecated iframe attrs and non-standard CSS Three separate cleanups: 1. remove deprecated HTML attributes from iframe creation (create-iframe.ts) - frameborder="0": deprecated since HTML5; border is already set to none via CSS - allowtransparency="true": non-standard Microsoft attribute never in any spec; transparency is handled by body { background: transparent } in CSS instead - scrolling="no": deprecated since HTML5; overflow is already hidden via CSS - horizontalscrolling/verticalscrolling: non-standard IE-era attributes with no effect in modern browsers; remove without replacement 2. replace allowtransparency with explicit CSS (global.css) - add background: transparent to body; this is the spec-correct way to make an iframe document transparent, as documented by MDN 3. drop -moz-touch-enabled media query prefix (5 comment CSS files) - -moz-touch-enabled was a Firefox-only non-standard media feature removed in Firefox 58 (2018); pointer: coarse is the standard equivalent and was already present as the second condition in every query, so removing the dead -moz prefix reduces the media query to just (pointer: coarse) note: colorScheme: 'none' in create-iframe.ts is intentionally left unchanged; it is tracked by #1430 and requires a broader color-scheme implementation * frontend: fix CSS bugs and replace deprecated properties Bugs fixed: - comment-votes.module.css: add missing comma between transition values; without it the shorthand was invalid and colour transitions on vote buttons were silently ignored - icon-button.module.css: fix "transfrom" typo (should be "transform"); the misspelling made the transition declaration a no-op, so the hover scale animation jumped instantly instead of easing - auth.module.css: remove doubly-nested rgb(rgb(var(…))) call; the outer rgb() rejected the inner rgb() result, so the .title element's colour fell back to inherited instead of the intended --secondary-text-color Deprecated properties replaced: - comment-form__markdown-toolbar.css: replace deprecated clip: rect() with clip-path: inset(50%); clip was deprecated in CSS Masking Level 1 - raw-content.css: replace word-wrap with overflow-wrap; word-wrap was renamed in CSS Text Level 3, all current browsers support overflow-wrap - global.css: remove redundant literal-colour fallback lines before var() declarations in .preloader and .preloader_view_iframe; the var() calls already have inline fallback values (e.g. var(--color6, #fff)), making the preceding duplicate property and its stylelint-disable comment unnecessary since IE11 EOL * move border:none from inline style to widget__comments-frame class --- frontend/apps/remark42/app/components/auth/auth.module.css | 2 +- .../__markdown-toolbar/comment-form__markdown-toolbar.css | 2 +- .../app/components/comment/_editing/comment_editing.css | 2 +- .../app/components/comment/_replying/comment_replying.css | 2 +- .../components/comment/_theme/_dark/comment_theme_dark.css | 4 ++-- .../components/comment/_theme/_light/comment_theme_light.css | 4 ++-- .../remark42/app/components/comment/comment-votes.module.css | 2 +- frontend/apps/remark42/app/components/comment/comment.css | 2 +- .../apps/remark42/app/components/comment/raw-content.css | 2 +- .../app/components/icon-button/icon-button.module.css | 4 ++-- frontend/apps/remark42/app/styles/global.css | 5 +---- frontend/apps/remark42/app/utils/create-iframe.ts | 5 ----- frontend/apps/remark42/templates/demo.ejs | 4 ++-- 13 files changed, 16 insertions(+), 24 deletions(-) diff --git a/frontend/apps/remark42/app/components/auth/auth.module.css b/frontend/apps/remark42/app/components/auth/auth.module.css index 594b4042..8cb18d04 100644 --- a/frontend/apps/remark42/app/components/auth/auth.module.css +++ b/frontend/apps/remark42/app/components/auth/auth.module.css @@ -35,7 +35,7 @@ font-size: 12px; text-transform: uppercase; font-weight: bold; - color: rgb(rgb(var(--secondary-text-color))); + color: rgb(var(--secondary-text-color)); text-align: center; } diff --git a/frontend/apps/remark42/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.css b/frontend/apps/remark42/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.css index 219aad1f..08f41eaf 100644 --- a/frontend/apps/remark42/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.css +++ b/frontend/apps/remark42/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.css @@ -8,7 +8,7 @@ width: 1px; height: 1px; overflow: hidden; - clip: rect(0 0 0 0); + clip-path: inset(50%); } .comment-form__toolbar-item { diff --git a/frontend/apps/remark42/app/components/comment/_editing/comment_editing.css b/frontend/apps/remark42/app/components/comment/_editing/comment_editing.css index a3343792..f1eba6a4 100644 --- a/frontend/apps/remark42/app/components/comment/_editing/comment_editing.css +++ b/frontend/apps/remark42/app/components/comment/_editing/comment_editing.css @@ -4,7 +4,7 @@ } /* it isn't mobile first, but it's fine here */ - @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) { + @media (pointer: coarse) and (max-width: 768px) { border: 8px solid; padding-bottom: 0; diff --git a/frontend/apps/remark42/app/components/comment/_replying/comment_replying.css b/frontend/apps/remark42/app/components/comment/_replying/comment_replying.css index 41dac2d4..ff1ae27f 100644 --- a/frontend/apps/remark42/app/components/comment/_replying/comment_replying.css +++ b/frontend/apps/remark42/app/components/comment/_replying/comment_replying.css @@ -4,7 +4,7 @@ z-index: 1; /* it isn't mobile first, but it's fine here */ - @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) { + @media (pointer: coarse) and (max-width: 768px) { border: 8px solid; & .comment__info { diff --git a/frontend/apps/remark42/app/components/comment/_theme/_dark/comment_theme_dark.css b/frontend/apps/remark42/app/components/comment/_theme/_dark/comment_theme_dark.css index be0a5439..fe8a5159 100644 --- a/frontend/apps/remark42/app/components/comment/_theme/_dark/comment_theme_dark.css +++ b/frontend/apps/remark42/app/components/comment/_theme/_dark/comment_theme_dark.css @@ -69,7 +69,7 @@ border-color: var(--color7); } - @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) { + @media (pointer: coarse) and (max-width: 768px) { border-color: var(--color7); } } @@ -79,7 +79,7 @@ border-color: var(--color7); } - @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) { + @media (pointer: coarse) and (max-width: 768px) { border-color: var(--color7); } } diff --git a/frontend/apps/remark42/app/components/comment/_theme/_light/comment_theme_light.css b/frontend/apps/remark42/app/components/comment/_theme/_light/comment_theme_light.css index 50f7f0f7..10d80e5c 100644 --- a/frontend/apps/remark42/app/components/comment/_theme/_light/comment_theme_light.css +++ b/frontend/apps/remark42/app/components/comment/_theme/_light/comment_theme_light.css @@ -65,7 +65,7 @@ border-color: var(--color5); } - @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) { + @media (pointer: coarse) and (max-width: 768px) { border-color: var(--color5); } } @@ -75,7 +75,7 @@ border-color: var(--color5); } - @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) { + @media (pointer: coarse) and (max-width: 768px) { border-color: var(--color5); } } diff --git a/frontend/apps/remark42/app/components/comment/comment-votes.module.css b/frontend/apps/remark42/app/components/comment/comment-votes.module.css index ea69aacb..e3f1a40b 100644 --- a/frontend/apps/remark42/app/components/comment/comment-votes.module.css +++ b/frontend/apps/remark42/app/components/comment/comment-votes.module.css @@ -21,7 +21,7 @@ padding: 2px; opacity: 0.4; color: var(--color13); - transition: opacity 0.15s color 0.15s; + transition: opacity 0.15s, color 0.15s; } .root:hover .voteButton { diff --git a/frontend/apps/remark42/app/components/comment/comment.css b/frontend/apps/remark42/app/components/comment/comment.css index d4bae72b..999c3bd6 100644 --- a/frontend/apps/remark42/app/components/comment/comment.css +++ b/frontend/apps/remark42/app/components/comment/comment.css @@ -30,7 +30,7 @@ .comment-form_type_reply { margin-left: 17px; - @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) { + @media (pointer: coarse) and (max-width: 768px) { margin-left: 0; } } diff --git a/frontend/apps/remark42/app/components/comment/raw-content.css b/frontend/apps/remark42/app/components/comment/raw-content.css index 904358d5..3f9c1a44 100644 --- a/frontend/apps/remark42/app/components/comment/raw-content.css +++ b/frontend/apps/remark42/app/components/comment/raw-content.css @@ -1,5 +1,5 @@ .raw-content { - word-wrap: break-word; + overflow-wrap: break-word; & > *:first-child { margin-top: 0; diff --git a/frontend/apps/remark42/app/components/icon-button/icon-button.module.css b/frontend/apps/remark42/app/components/icon-button/icon-button.module.css index f44a3a0f..5ea04a9d 100644 --- a/frontend/apps/remark42/app/components/icon-button/icon-button.module.css +++ b/frontend/apps/remark42/app/components/icon-button/icon-button.module.css @@ -4,13 +4,13 @@ border: 0; margin: 0; padding: 4px; - transition: transfrom 0.15s ease-out; + transition: transform 0.15s ease-out; border-radius: 2px; appearance: none; &:hover { transform: scale(1.06); - transition: transfrom 0.15s ease-in; + transition: transform 0.15s ease-in; } &:active { diff --git a/frontend/apps/remark42/app/styles/global.css b/frontend/apps/remark42/app/styles/global.css index 0778235a..64862a27 100644 --- a/frontend/apps/remark42/app/styles/global.css +++ b/frontend/apps/remark42/app/styles/global.css @@ -6,6 +6,7 @@ body { font-family: system-ui; font-size: 14px; color: rgb(var(--primary-text-color)); + background: transparent; box-sizing: border-box; } @@ -60,8 +61,6 @@ a { } .preloader { - /* stylelint-disable-next-line */ - color: #fff; color: var(--color6, #fff); position: relative; transform: translate3d(0, -10px, 0); @@ -86,8 +85,6 @@ a { .preloader_view_iframe { margin: 0 auto; - /* stylelint-disable-next-line */ - color: #888; color: var(--color13, #888); } diff --git a/frontend/apps/remark42/app/utils/create-iframe.ts b/frontend/apps/remark42/app/utils/create-iframe.ts index ff531f5d..bd577453 100644 --- a/frontend/apps/remark42/app/utils/create-iframe.ts +++ b/frontend/apps/remark42/app/utils/create-iframe.ts @@ -10,13 +10,8 @@ export function createIframe({ __colors__, styles, ...params }: Params) { setAttributes(iframe, { src: `${BASE_URL}/web/iframe.html?${query}`, name: JSON.stringify({ __colors__ }), - frameborder: '0', - allowtransparency: 'true', - scrolling: 'no', tabindex: '0', title: 'Comments | Remark42', - horizontalscrolling: 'no', - verticalscrolling: 'no', }); setStyles(iframe, { height: '100%', diff --git a/frontend/apps/remark42/templates/demo.ejs b/frontend/apps/remark42/templates/demo.ejs index 2c3f8730..2c04a4ad 100644 --- a/frontend/apps/remark42/templates/demo.ejs +++ b/frontend/apps/remark42/templates/demo.ejs @@ -39,7 +39,7 @@ } .widget__comments-frame { - border: 1px dashed #aaa; + border: none; width: 35rem; max-width: 100%; } @@ -73,7 +73,7 @@
Last comments widget page
- +
Counter widget page