Frontend Fundamentals: HTML, CSS, and Responsive Styling Questions

A stacking context is an isolated three-dimensional layer in the rendering order; elements inside it are stacked relative to each other and can’t be layered above elements from other contexts unless that context's z-index is higher. New stacking contexts form from position + z-index, opacity <1, transform, filter, mix-blend-mode, etc. Example bug: a modal backdrop appears, but a child dropdown inside the page renders above the modal because that dropdown belongs to a different stacking context with higher z-index; or the modal has a transform and thus creates a stacking context causing its close button (positioned) to sit beneath other components. Fix by adjusting z-index on the modal’s stacking context or removing unintended transforms.

Progressive enhancement builds a baseline experience that works everywhere then adds advanced features for capable browsers; graceful degradation builds full-featured experience then makes fallbacks for older browsers. Example favoring progressive enhancement: implement core form submission using standard HTML forms (works without JS), then enhance with client-side validation and AJAX for richer UX. This ensures users with JS disabled or assistive tech still complete tasks while modern users get improved interactions without sacrificing accessibility.

When supporting IE11, avoid or polyfill modern features that IE11 lacks or implements poorly:

CSS to avoid or polyfill:

• CSS variables (custom properties): polyfill is fragile; prefer precompiled tokens (Sass) for IE builds.
• Grid layout advanced features: IE11 has older Grid spec differences; prefer flexbox or carefully tested simplified grid fallbacks.
• gap in flexbox and newer features: polyfill with margins.
• :focus-visible pseudo-class: polyfill or provide focus styles by default.
• backdrop-filter, filter, and CSS containment: avoid or provide simpler visuals.

JS to avoid or polyfill:

• Arrow functions, const/let, classes, async/await, native Promises, fetch — transpile with Babel and include polyfills (core-js, regenerator-runtime) and fetch polyfill.
• ES modules: serve UMD/ES5 bundles for IE11.

Design implications:

• Layout: use robust layouts (flexbox) and test breakpoints; avoid relying on Grid for complex areas unless you provide fallback.
• Animations: prefer simple CSS transitions on transform/opacity; avoid Web Animations API unless polyfilled.
• Icons: use SVG with inline fallback or icon fonts; avoid <use> with external SVGs (IE11 has issues), inline critical icons.

Overall: build a separate legacy bundle pipeline, precompute tokens, simplify visuals, and prioritize functional parity over pixel-perfect fidelity in IE11 designs.

Block elements (e.g., <div>, <p>) occupy full available width, start on a new line, and accept width/height. Inline elements (e.g., <span>, <a>) flow within a line, size to content, and ignore width/height. Inline-block blends both: sits inline but accepts width/height. Example 1: Navigation links — using inline makes items wrap awkwardly; inline-block lets you set equal width/height for hit areas without forcing line breaks. Example 2: Card grid — using block for cards stacks them vertically; inline-block or flex/grid enables horizontal rows. For product designers this matters because it affects alignment, spacing, accessibility of touch targets, and predictable responsive behavior.

Problem: animating 100 items reflow and fade is expensive—layout, paint, and potentially JS work each frame.
Implications: big frame cost, jank, long interaction latency, memory pressure.
Alternatives balancing motion and performance:

• Staggered/limited animations: animate only visible subset (viewport) and use small stagger window (e.g., first 10–20 items).
• Use transform+opacity on promoted layers for GPU-accelerated fades; avoid animating height/layout. For reordering, animate using FLIP technique: compute first/last positions and animate transforms so layout isn’t recomputed each frame.
• Replace full-list animation with cross-fade placeholders or animated skeletons while new order settles.
• Provide motion-reduced experience: respect prefers-reduced-motion.
  Recommendation: implement FLIP for reorder (cheap transforms), restrict fades to small subset, and test frame rates. This preserves perceived motion while keeping performance acceptable.