refactor(webserver): migrate presentational table/iframe attributes to semantic CSS - #102
Merged
Merged
Conversation
…o semantic CSS
Retire the remaining presentational HTML in the default template --
cellspacing=/cellpadding= on every table, width= on td/th (deprecated
since HTML 4.01), width=/height= on table (height was never valid
HTML, it works via quirks mode), and frameborder=/scrolling=/
width="100%" on iframes -- keeping the quirks mode doctype untouched
so the table layout renders exactly as before.
Instead of repeating per-cell utility classes, the recurring page
regions get one semantic class on the container table and structural
child selectors in style.css. All selectors go through the
browser-inserted tbody (table.foo > tbody > tr > td) so nothing leaks
into nested tables, and selector matching is unaffected by quirks
mode:
- table.page: the 3-row skeleton of all 8 main pages (full-size
table, row alignment, 25px footer cell); the logo / navbar cell
widths fold into the existing td.logo-cell / td.navbar-cell rules.
- table.navbar-table: the trailing 10px spacers and the 190px
session-links cell via :nth-last-child, which is robust against
the leading nav-button cells.
- table.footer-bar: the bottom strip (full width, 40px, centered
50% cells) and its two iframes (full width, borderless) via a
descendant selector -- safe, the footer bar nests no tables. The
log page iframes keep their default border as before.
- table.tab: the 9 rounded-corner frames; the 24px edge cells and
the tab_top/left/right/bottom backgrounds and white content cell
are derived from row/cell position. The <caption> is a table
child, not a tbody child, so it does not disturb row counting.
- table.prefs-pane: the 7 preference panes (350px centered, 22px /
63px side columns, 25px data rows via tr:not(:first-child) --
header rows never had the height).
- table.prefs-grid / table.kadnewnode: the two 6px-spacing wrapper
tables; prefs-grid sets its column width via td:nth-child(2)
because a rowspan=3 cell makes :last-child ambiguous.
cellspacing/cellpadding zero out globally (table { border-spacing: 0 }
plus padding: 0 on th/td); the three exceptions become spacing1
(login box frame) and pad4 (search form, with a child selector
matching cellpadding's own-cells-only semantics). Genuinely one-off
dimensions (login banner, stats columns, log/stats_tree iframes)
become w*/h* utility classes next to the existing h10..h200 set,
with a `p` suffix for percentages. Pixel sizes on img stay as
attributes -- they are valid, non-presentational HTML. scrolling="no"
(obsolete, no outside-CSS equivalent) is replaced by overflow:hidden
on the body of the two framed documents, footer.php and stats.php.
Also drops the undefined doad-table/kadnewnode dead tokens.
Verified against a running amuleweb: after every intermediate step,
headless-Chromium screenshots of all 9 pages plus the two footer
frames are pixel-identical to the starting point except for dynamic
content (stats graphs, uptime, server user/file counts).
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.
Retire the remaining presentational HTML in the default template -- cellspacing=/cellpadding= on every table, width= on td/th (deprecated since HTML 4.01), width=/height= on table (height was never valid HTML, it works via quirks mode), and frameborder=/scrolling=/ width="100%" on iframes -- keeping the quirks mode doctype untouched so the table layout renders exactly as before.
Instead of repeating per-cell utility classes, the recurring page regions get one semantic class on the container table and structural child selectors in style.css. All selectors go through the browser-inserted tbody (table.foo > tbody > tr > td) so nothing leaks into nested tables, and selector matching is unaffected by quirks mode:
cellspacing/cellpadding zero out globally (table { border-spacing: 0 } plus padding: 0 on th/td); the three exceptions become spacing1 (login box frame) and pad4 (search form, with a child selector matching cellpadding's own-cells-only semantics). Genuinely one-off dimensions (login banner, stats columns, log/stats_tree iframes) become w*/h* utility classes next to the existing h10..h200 set, with a
psuffix for percentages. Pixel sizes on img stay as attributes -- they are valid, non-presentational HTML. scrolling="no" (obsolete, no outside-CSS equivalent) is replaced by overflow:hidden on the body of the two framed documents, footer.php and stats.php. Also drops the undefined doad-table/kadnewnode dead tokens.Verified against a running amuleweb: after every intermediate step, headless-Chromium screenshots of all 9 pages plus the two footer frames are pixel-identical to the starting point except for dynamic content (stats graphs, uptime, server user/file counts).