HTML & CSS の面接質問

The matrix() function is a shorthand that combines all 2D transform operations (translate, rotate, scale, skew) into a single 6-value transformation matrix.

Syntax:

transform: matrix(a, b, c, d, tx, ty);

Equivalent transformations:

/* These are equivalent */
transform: translate(10px, 20px) rotate(30deg) scale(1.5);

transform: matrix(
  1.299, 0.75,   /* a, b */
 -0.75,  1.299,  /* c, d */
  10,    20      /* tx, ty */
);

> Note: matrix() is mostly used internally by browsers and animation libraries. Prefer individual transform functions for readability.

↥ back to top

display: contents makes an element act as if it is not there for layout purposes — it disappears from the box tree, but its children remain and participate in the parent\'s layout as if they were direct children.

Use case — unwrapping a semantic element for layout:

<ul class="grid-list">
  <li class="group">       <!-- this wrapper breaks grid layout -->
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
  </li>
</ul>

/* Without display: contents — the <li> is a grid item, not the <a> elements */
.grid-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* With display: contents — <li> box is removed, <a> elements become grid items */
.group {
  display: contents;
}

Important caveats:

• The element itself becomes invisible to layout — padding, border, background, and margin on it have no visual effect.
• The element is still in the DOM and accessible to JavaScript.
• Accessibility warning: Applying display: contents to certain semantic elements ( , , ) can strip their ARIA roles in some browsers, breaking accessibility.

/* Safe use: purely structural wrapper with no semantic role */
.layout-wrapper { display: contents; }

/* Unsafe use: strips button role in some browsers */
button { display: contents; } /* ❌ avoid */

↥ back to top

# 17. MISCELLANEOUS

Example:

.bouncing-ball {
  animation: bounce 1s ease-in-out infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-60px); }
}

↥ back to top

1) UI or User Interface: is how a product or website is laid out and how you interact with it: Where the buttons are, how big the fonts are, and how menus are organized are all elements of UI.

2) UX or User Experience: is how you feel about using a product or a website. So, your love for the way the new Apple Watch looks or your excitement that there\'s finally a tablet-sized iPhone to watch those Corgi videos you’re obsessed with are reflections of UX. So the new look of the Facebook news feed involves a change to UI, and the way you navigate that new page is the UX.

↥ back to top

Breakpoints define the viewport widths at which your layout changes. Common breakpoints are loosely aligned with device categories, but should be based on your content rather than specific devices.

Bootstrap 5 breakpoints (widely used reference):

Example:

/* Extra small — default (mobile-first) */
.grid {
  display: block;
}

/* Small (≥ 576px) */
@media (min-width: 576px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Medium (≥ 768px) */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large (≥ 992px) */
@media (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

↥ back to top

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Example:

img {
  -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
  filter: brightness(200%);
}

Filter Functions

↥ back to top

Mobile-first design means writing base CSS for the smallest screen first and then progressively enhancing the layout for larger screens using min-width media queries.

Why it is recommended:

1. Performance: Mobile devices receive only the base styles; larger screens load additional styles on top. Unused CSS is minimised for the most bandwidth-constrained devices.
2. Progressive enhancement: Forces you to prioritise core content and functionality before adding enhancements.
3. Simpler CSS: Overriding simple mobile styles upward is usually less complex than overriding complex desktop styles downward.
4. SEO & Google: Google uses mobile-first indexing, so mobile-friendly pages rank better.

Example — mobile-first layout:

/* Base (mobile): single-column layout */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
}

.sidebar {
  order: 2; /* Sidebar below content on mobile */
}

/* Tablet (≥ 768px): two-column layout */
@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 2fr;
    padding: 2rem;
  }

  .sidebar {
    order: 0; /* Restore natural order */
  }
}

/* Desktop (≥ 1200px): three-column layout */
@media (min-width: 1200px) {
  .layout {
    grid-template-columns: 250px 1fr 200px;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
  }
}

↥ back to top

The transform-origin property specifies the point around which a transformation is applied. By default it is set to 50% 50% (the center of the element).

Syntax:

transform-origin: x-axis y-axis z-axis;

Values:

Example:

/* Rotate around the top-left corner */
.rotate-top-left {
  transform-origin: top left;
  transform: rotate(45deg);
}

/* Rotate around a custom point */
.rotate-custom {
  transform-origin: 20px 80%;
  transform: rotate(45deg);
}

/* Default: rotate around center */
.rotate-center {
  transform-origin: 50% 50%; /* default */
  transform: rotate(45deg);
}

↥ back to top

Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.

Examples:

• Lazy loading of images - Images on the page are not loaded all at once. JavaScript will be used to load an image when the user scrolls into the part of the page that displays the image.
• Prioritizing visible content (or above-the-fold rendering) - Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the DOMContentLoaded/load event to load in other resources and content.
• Async HTML fragments - Flushing parts of the HTML to the browser as the page is constructed on the back end.

↥ back to top

prefers-color-scheme detects whether the user has requested a light or dark color theme in their OS or browser settings. It enables CSS-only dark mode support.

Example:

/* Default (light) theme */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #f5f5f5;
  --link-color: #0066cc;
}

/* Dark theme via media query */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --card-bg: #2a2a2a;
    --link-color: #66aaff;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.card {
  background-color: var(--card-bg);
  padding: 1rem;
  border-radius: 8px;
}

a {
  color: var(--link-color);
}

↥ back to top

:root targets the root element of the document tree, which in HTML is the element. Despite targeting the same element, :root has higher specificity than the html type selector.

Example:

/* Commonly used to declare CSS custom properties globally */
:root {
  --primary-color: #3498db;
  --font-size-base: 16px;
  --spacing-unit: 8px;
}

body {
  font-size: var(--font-size-base);
  color: var(--primary-color);
}

↥ back to top

The box-sizing CSS property sets how the total width and height of an element is calculated.

• content-box: the default width and height values apply to the element\'s content only. The padding and border are added to the outside of the box.
• padding-box: Width and height values apply to the element\'s content and its padding. The border is added to the outside of the box. Currently, only Firefox supports the padding-box value.
• border-box: Width and height values apply to the content, padding, and border.
• inherit: inherits the box sizing of the parent element.

Example:

box-sizing: content-box;
width: 100%;
border: solid rgb(90,107,204) 10px;
padding: 5px;

↥ back to top

Subgrid (CSS Grid Level 2) allows a grid item that is itself a grid container to inherit the track sizing of its parent grid rather than define its own independent tracks. This solves the long-standing problem of aligning content across nested grid items.

The problem without subgrid:

<div class="cards">        <!-- 3-column grid -->
  <div class="card">       <!-- each card is its own flex/grid, unaligned -->
    <h2>Title One</h2>
    <p>Short description</p>
    <button>Action</button>
  </div>
  <div class="card">
    <h2>Title Two With a Longer Name</h2>
    <p>A much longer description that wraps multiple lines and pushes the button down.</p>
    <button>Action</button>  <!-- buttons are misaligned across cards -->
  </div>
</div>

Solution with subgrid:

/* Parent defines 3 columns */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Each card spans all 3 rows of the parent grid\'s row tracks */
.card {
  display: grid;
  grid-row: span 3;               /* span 3 rows */
  grid-template-rows: subgrid;    /* inherit parent\'s row sizing */
  /* Now: title/description/button rows align perfectly across all cards */
}

.card h2      { align-self: start; }
.card p       { align-self: start; }
.card button  { align-self: end; margin-top: auto; }

Browser support: Chrome 117+, Firefox 71+, Safari 16+.

↥ back to top

The background-attachment property in CSS is used to specify the kind of attachment of the background image with respect to its container. It can be set to scroll or remain fixed. It can be applied to all HTML elements.

Syntax

background-attachment: scroll|fixed|local|initial|inherit;

Property Values

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url("../images/img_tree.gif");
        background-repeat: no-repeat;
        background-attachment: fixed;
      }
    </style>
  </head>
<body>
  <h1>The background-attachment Property</h1>

  <p>The background-image is fixed. Try to scroll down the page.</p>
    ...
  <p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>

Live Demo: CSS background-attachment

↥ back to top

@keyframes is an at-rule that defines the intermediate steps (waypoints) of a CSS animation sequence. Each keyframe describes how the animated element should render at a given point during the animation.

Syntax:

@keyframes animation-name {
  from { /* starting styles */ }
  to   { /* ending styles */   }
}

/* OR using percentages for multiple steps */
@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10px);  opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

Applying the animation:

.element {
  animation-name: slide-in;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

↥ back to top

animation-fill-mode controls what styles are applied to an element before the animation starts and after it ends.

Example:

.element {
  animation: fadeIn 1s ease 0.5s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Without 'forwards', the element would snap back to opacity: 0 after the animation */

↥ back to top

Web-safe fonts are fonts that are pre-installed across most operating systems and browsers, ensuring consistent rendering without requiring an external font file.

Common web-safe fonts:

p {
  font-family: Arial, Helvetica, sans-serif; /* fallback chain */
}

Always provide a generic family (serif, sans-serif, monospace) as the last fallback.

↥ back to top

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will "flex" to different sizes to fill the space.

Before the Flexbox Layout module, there were four layout modes:

• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element

Flex Container:

An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area\'s container\'s display property to flex or inline-flex. As soon as we do this the direct children of that container become flex items.

Flexbox Terminology:

↥ back to top

::placeholder styles the placeholder text of an or element — the hint text shown when the field has no value.

Example:

input::placeholder {
  color: #aaa;
  font-style: italic;
  font-size: 0.9em;
}

/* Style placeholder on focus */
input:focus::placeholder {
  opacity: 0.4;
}

> Note: Only a subset of CSS properties reliably apply to ::placeholder (color, font, opacity). Avoid using it to replace a proper element for accessibility reasons.

↥ back to top

pointer-events controls whether and how an element responds to mouse/touch/pointer interactions.

Common use cases:

/* Disable clicking on a button during loading */
.button--loading {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Make an overlay transparent to mouse events (click-through overlay) */
.tooltip-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none; /* clicks pass through to elements beneath */
}

/* Re-enable on a specific child inside a pointer-events:none parent */
.parent { pointer-events: none; }
.parent .clickable-child { pointer-events: auto; }

/* Disable hover effects on an icon inside a button */
button .icon {
  pointer-events: none; /* prevents icon from being the event target */
}

> Important: pointer-events: none only affects CSS and DOM pointer events. The element is still in the DOM, still participates in layout, and is still focusable via keyboard — so it is not equivalent to disabled for accessibility purposes.

↥ back to top