Practical programming and coding with AI

devs Tools / Paste Lab 0.4.0

CSS Doctor: Diagnose and repair HTML/CSS

Analyze HTML and CSS entirely in your browser, then diagnose cascade conflicts, overflow, sticky positioning, z-index, WordPress CSS, and more with evidence.

  • Pasted source stays in this browser
  • No source in URL, storage, or analytics
  • No arbitrary URL or JavaScript execution
21 active rules HTML · CSS · WordPress 日本語

Opening the isolated diagnostic workspace…

Workflow

From “CSS does not work” to evidence

  1. 01

    Paste a minimal reproduction

    Paste only the HTML and CSS required to reproduce the problem.

  2. 02

    Compare source and render

    A CSS AST checks structure while an isolated iframe measures layout, cascade, and focus.

  3. 03

    Preview the smallest safe change

    Review evidence, side effects, and before/after diff. Tier C guidance is never auto-applied.

Coverage

Problems CSS Doctor can investigate

Cascade and selectors

Specificity conflicts, duplicate declarations, broad selectors, and WordPress theme collisions.

Layout and responsive behavior

Horizontal overflow, fixed widths, flex minimum size, media size, sticky, stacking, and viewport units.

Accessibility and motion

Duplicate IDs, keyboard focus indicators, and reduced-motion alternatives.

Outside its scope

It does not fetch live sites, execute pasted JavaScript, or prove that code is bug-free.

Transparent rules

All 21 active rules are documented

Open the full rule reference
CSS-CASCADE-002 Specificity conflict HYBRID · Tier B CSS-CASCADE-003 Duplicate declaration STATIC · Tier A CSS-CASCADE-006 Unscoped global selector STATIC · Tier B LAYOUT-001 Document horizontal overflow RUNTIME · Tier C LAYOUT-002 Element outside the viewport RUNTIME · Tier C LAYOUT-003 Fixed width exceeds its container HYBRID · Tier B LAYOUT-004 Flex item cannot shrink HYBRID · Tier A LAYOUT-006 Unbreakable content overflow RUNTIME · Tier B LAYOUT-007 Intrinsic media overflow HYBRID · Tier A POSITION-001 Sticky element has no inset HYBRID · Tier A POSITION-002 Overflow ancestor constrains sticky RUNTIME · Tier C POSITION-003 Sticky element has no scroll range RUNTIME · Tier C STACK-001 Element is trapped in a stacking context RUNTIME · Tier C STACK-002 z-index has no effect HYBRID · Tier B VIEWPORT-001 Mobile 100vh risk HYBRID · Tier B A11Y-001 Keyboard focus is not visible RUNTIME · Tier B A11Y-004 Duplicate HTML ID STATIC · Tier C MOTION-001 Reduced-motion alternative is missing STATIC · Tier B WP-001 Leading dot in Gutenberg class field STATIC · Tier A WP-002 Unscoped WordPress block override STATIC · Tier B WP-004 WordPress theme CSS collision HYBRID · Tier B

Glossary

Terms used in the report

Cascade（カスケード）
The CSS rule system that decides which declaration wins.
Specificity（詳細度）
A selector weight used in cascade decisions.
Runtime probe（表示実測）
A measurement taken after the sanitized code is rendered.
Safety Tier（修正安全度）
A is narrow and reversible, B needs review, and C is guidance only.
Confidence（確度）
How directly the available evidence supports a finding.
Stacking context（重なりのまとまり）
A local layering context that can trap a child z-index.

FAQ

Before using CSS Doctor

Is pasted code sent to the server?

No. Analysis, rendering, patching, and ZIP creation happen in this browser. Source is excluded from analytics and JSON reports.

Can it diagnose a live URL?

No. Arbitrary URL fetching is intentionally unsupported. Paste a minimal HTML/CSS reproduction instead.

Does “no findings” mean the code is correct?

No. It only means no issue supported by the current rules was detected under the selected conditions.

Can I paste the WordPress output directly?

Review the class scope and before/after result first. The block class field uses a name without a leading dot.