This page needs a newer browser to run its tools. You can still read everything here.

CSS Module 23

Debugging, performance, accessibility, tooling and print interview questions

Interview questions on debugging, performance, accessibility, tooling and print: warm-ups, then what each harder question tests and how a good answer starts.

9 questions: 3 warm-ups and 6 with model answers · Levels: Fresher to senior

Warm-up questions

Short questions with short answers, each answered in full.

Fresher

Why do people debug layouts with outline instead of border?

Answered in the lesson Debugging CSS systematically
Fresher

What does the visually hidden pattern do, and why not use display: none or opacity: 0 instead?

Answered in the lesson Accessible CSS: focus, motion, contrast and reflow
Fresher

What does a print stylesheet usually change, and how can you check it without printing?

Answered in the lesson Print stylesheets and paged media

Questions with model answers

What each question tests, the first step of a good answer and the follow-ups to expect.

Fresher to mid

Users report that a product page scrolls sideways on phones, but nothing on the screen looks wider than the page. Walk through how you find the cause and fix it without hiding any content.
What it tests

A repeatable method for horizontal overflow, which boxes can and cannot widen a page, overflowing text, and fixing causes instead of clipping symptoms.

First step

Reproduce it at 360 px in device mode and measure it: the root element's scrollWidth is larger than its clientWidth. Then list everything that ends past the right edge, leaving out boxes inside a box that scrolls or clips sideways, and fixed boxes. Check text too: a long code can spill out of a paragraph whose box still fits.
Follow-ups
- Why not put overflow-x: hidden on the body and move on?
- The cause is a third-party widget you cannot change. What then?
- How do you stop the bug from coming back?
From the lesson Debugging CSS systematically
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.
Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
Pro pass · 1 week₹79$2.99
30 days₹179$5.99
1 year₹1,699$45
One payment; nothing renews unless you choose to. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
Choose a pass I have a licence key
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

After a release of 50 commits that changed CSS in 40 files, the checkout's two-column layout collapses into one column, but only on screens between 900 and 1,100 px wide. Nobody knows which change did it. How do you find the cause quickly and prove the fix?
What it tests

Reproducing a width-dependent bug, reading the width range as a clue, bisecting commits and then rules, bugs that need two changes, and verifying a fix.

First step

Pin the width first: reproduce at 1,000 px and find, in 10 px steps, where the layout breaks and recovers. Round numbers point to a media or container query. Without a lead, run git bisect between the previous release and this one: about 6 checks for 50 commits.
Follow-ups
- git bisect names a commit that only renames a class. Now what?
- The bug appears only when two of the commits are combined. How do you notice, and what do you do?
- How do you make sure this layout cannot break unnoticed again?
From the lesson Debugging CSS systematically
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

Your checkout passes an automated accessibility audit with no violations, yet a keyboard user at 125 % zoom reports that they cannot finish an order. What do you test by hand, and which CSS causes do you expect to find?
What it tests

What automated rules cannot see, a manual plan for keyboard, zoom, reflow and forced colours, and tracing each failure back to its CSS.

First step

Reproduce it at the same zoom with the keyboard only, from the first field to the confirmation. At every Tab, check that you can see the focus, that the focused field is not under a sticky header or banner, and that nothing needs sideways scrolling or is cut off.
Follow-ups
- How would you turn these checks into automated tests?
- The designers want no focus ring after a mouse click. What do you propose?
- How do you check forced colours without a Windows computer?
From the lesson Accessible CSS: focus, motion, contrast and reflow
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Fresher to mid

A landing page has an auto-playing carousel of customer quotes, parallax backgrounds and tooltips that appear on hover. Which WCAG 2.2 success criteria are at risk, and how do you fix each with CSS and as little script as possible?
What it tests

The motion criteria 2.2.2 and 2.3.3, the reduced-motion preference as a default, and the three conditions of content on hover or focus (1.4.13).

First step

Sort them by criterion. The carousel moves by itself for more than five seconds, so 2.2.2 needs a way to pause it. Parallax is motion the reader did not ask for: write it inside prefers-reduced-motion: no-preference. The tooltips must also open on focus and stay while the pointer moves onto them.
Follow-ups
- Is prefers-reduced-motion enough on its own for the carousel?
- How can a tooltip be dismissed without moving the pointer?
- What should a reduced-motion version of the parallax look like?
From the lesson Accessible CSS: focus, motion, contrast and reflow
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Fresher to mid

Customers say an invoice that fits on one screen prints on two pages, the second holding only a line of the app's footer, and that the green "Paid" badge is missing on paper. Diagnose both problems and fix them with CSS.
What it tests

Page chrome in print, how backgrounds and text colours are adjusted when printing, print-color-adjust, @page, and checking the result as a PDF.

First step

Print to PDF and look at each page. The app's toolbar, navigation and footer are printing, and the footer line spills onto a page of its own. The badge is a background colour, which browsers leave out by default when printing, so its white text is lost too.
Follow-ups
- The invoice must also print on US letter. What do you check?
- How do you test the printed result automatically?
- Why not set print-color-adjust: exact on the whole page?
From the lesson Print stylesheets and paged media
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

A 30-page report printed from the browser has table rows cut in half, headings stranded at the foot of pages and a wide chart squeezed onto a portrait page. How do you fix each with CSS, and which fixes can you rely on in every browser?
What it tests

The break properties and their support, repeated table headers, keeping headings with text, named landscape pages, and testing page breaks.

First step

Sort them by property. Rows: break-inside: avoid on tr, widely available, with the headings in a thead so they repeat. Headings: break-after: avoid works only in Chromium, so keep each heading and its first paragraph in one box with break-inside: avoid. The chart: a named landscape page.
Follow-ups
- How do you keep a heading with its paragraph in Firefox?
- How would you add page numbers?
- When is a PDF generated on a server the better choice?
From the lesson Print stylesheets and paged media
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes

All CSS interview questions · The CSS track

Warm-up questions

Why do people debug layouts with outline instead of border?

What does the visually hidden pattern do, and why not use display: none or opacity: 0 instead?

What does a print stylesheet usually change, and how can you check it without printing?

Questions with model answers

Users report that a product page scrolls sideways on phones, but nothing on the screen looks wider than the page. Walk through how you find the cause and fix it without hiding any content.

After a release of 50 commits that changed CSS in 40 files, the checkout's two-column layout collapses into one column, but only on screens between 900 and 1,100 px wide. Nobody knows which change did it. How do you find the cause quickly and prove the fix?

Your checkout passes an automated accessibility audit with no violations, yet a keyboard user at 125 % zoom reports that they cannot finish an order. What do you test by hand, and which CSS causes do you expect to find?

A landing page has an auto-playing carousel of customer quotes, parallax backgrounds and tooltips that appear on hover. Which WCAG 2.2 success criteria are at risk, and how do you fix each with CSS and as little script as possible?

Customers say an invoice that fits on one screen prints on two pages, the second holding only a line of the app's footer, and that the green "Paid" badge is missing on paper. Diagnose both problems and fix them with CSS.

A 30-page report printed from the browser has table rows cut in half, headings stranded at the foot of pages and a wide chart squeezed onto a portrait page. How do you fix each with CSS, and which fixes can you rely on in every browser?