Clean up deprecated CSS and fix silent CSS bugs in frontend#2012
Open
Clean up deprecated CSS and fix silent CSS bugs in frontend#2012
Conversation
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
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
paskal
force-pushed
the
fix/frontend-css-cleanup
branch
from
2e083c7 to
b76be5d
Compare
size-limit report 📦
|
There was a problem hiding this comment.
Pull request overview
This PR modernizes the frontend CSS and HTML by removing deprecated properties, fixing silent CSS bugs, and replacing obsolete browser-specific prefixes with standard equivalents.
Changes:
- Fixed three silent CSS bugs: missing comma in transition shorthand (broke color transitions), typo in transform property (broke hover animations), and double rgb() function (broke color rendering)
- Removed deprecated HTML iframe attributes and replaced with CSS equivalents
- Updated deprecated CSS properties (
clip,word-wrap) to modern standards (clip-path,overflow-wrap) - Removed obsolete
-moz-touch-enabledmedia query prefix (Firefox 58+) and IE11-era CSS variable fallbacks - Added
background: transparentto body to replace non-standardallowtransparencyiframe attribute
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/apps/remark42/templates/demo.ejs | Replaced deprecated frameborder attribute with inline border:none style |
| frontend/apps/remark42/app/utils/create-iframe.ts | Removed deprecated iframe HTML attributes (frameborder, allowtransparency, scrolling, horizontalscrolling, verticalscrolling) |
| frontend/apps/remark42/app/styles/global.css | Added background: transparent to body element and removed IE11 CSS variable fallbacks |
| frontend/apps/remark42/app/components/icon-button/icon-button.module.css | Fixed typo: transfrom → transform (fixes hover scale animation) |
| frontend/apps/remark42/app/components/comment/raw-content.css | Updated deprecated word-wrap to standard overflow-wrap |
| frontend/apps/remark42/app/components/comment/comment.css | Removed obsolete -moz-touch-enabled media query prefix |
| frontend/apps/remark42/app/components/comment/comment-votes.module.css | Fixed transition syntax: added missing comma between properties |
| frontend/apps/remark42/app/components/comment/_theme/_light/comment_theme_light.css | Removed obsolete -moz-touch-enabled media query prefix (2 occurrences) |
| frontend/apps/remark42/app/components/comment/_theme/_dark/comment_theme_dark.css | Removed obsolete -moz-touch-enabled media query prefix (2 occurrences) |
| frontend/apps/remark42/app/components/comment/_replying/comment_replying.css | Removed obsolete -moz-touch-enabled media query prefix |
| frontend/apps/remark42/app/components/comment/_editing/comment_editing.css | Removed obsolete -moz-touch-enabled media query prefix |
| frontend/apps/remark42/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.css | Updated deprecated clip: rect() to standard clip-path: inset(50%) |
| frontend/apps/remark42/app/components/auth/auth.module.css | Fixed double rgb() wrapper: rgb(rgb(var(...))) → rgb(var(...)) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #2012 +/- ##
========================================
Coverage 62.17% 62.17%
========================================
Files 132 132
Lines 3035 3035
Branches 769 769
========================================
Hits 1887 1887
+ Misses 1144 1034 -110
- Partials 4 114 +110 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
frameborder,allowtransparency,scrolling,horizontalscrolling,verticalscrolling)—all already handled by CSSallowtransparencywith spec-correctbody { background: transparent }-moz-touch-enabledmedia query prefix (removed in Firefox 58, 2018);pointer: coarsewas already the second condition in every querycomment-votes.module.css)—colour transitions on vote buttons were silently brokentransfromtypo inicon-button.module.css—hover scale animation jumped instead of easingrgb(rgb(var(…)))inauth.module.css—.titlecolour fell back to inherited instead of--secondary-text-colorclip: rect()withclip-path: inset(50%)word-wrapwithoverflow-wrap.preloadercolorScheme: 'none'increate-iframe.tsis intentionally left unchanged; tracked by #1430.