Statecraft — frontend interview prep

FromTo

32 changes · 0 breaking

01Basic Selectors & PropertiesCSS 1

Type, class, and ID selectors. Font, color, text, margin, padding, border properties.

p { color: black; font-size: 16px; }
.highlight { background: yellow; }

02Cascade & InheritanceCSS 1

The cascade algorithm and basic inheritance were defined from the start.

03Positioning (absolute, relative, fixed)CSS 2 / 2.1

Removed reliance on table layouts for positioning elements.

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

04Pseudo-elements & Pseudo-classesCSS 2 / 2.1

:hover, :focus, :first-child, ::before, ::after, ::first-line, ::first-letter.

a:hover { text-decoration: underline; }
p::first-line { font-weight: bold; }

05Media TypesCSS 2 / 2.1

@media print, screen, etc. for targeting different output devices.

@media print { .sidebar { display: none; } }

06Generated ContentCSS 2 / 2.1

content property on ::before/::after for inserting text or characters.

.external::after { content: " ↗"; }

07z-index & Stacking ContextsCSS 2 / 2.1

Specified z-index behavior and how stacking contexts are formed.

08Border RadiusCSS 3 (modules)

Native rounded corners — no image hacks required.

.card { border-radius: 0.5rem; }

09Box Shadow & Text ShadowCSS 3 (modules)

Drop shadows directly in CSS.

.card { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

10CSS GradientsCSS 3 (modules)

linear-gradient, radial-gradient as background images without image files.

background: linear-gradient(135deg, #6366f1, #8b5cf6);

11Transitions & AnimationsCSS 3 (modules)

Smooth property interpolation and @keyframes multi-step animations.

transition: opacity 0.3s ease;
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

12Transforms (2D)CSS 3 (modules)

translate, rotate, scale, skew without JavaScript.

.hover { transform: translateY(-4px) scale(1.02); }

13Media QueriesCSS 3 (modules)

Responsive design based on viewport width, orientation, and device features.

@media (max-width: 768px) { .sidebar { display: none; } }

14Web Fonts (@font-face)CSS 3 (modules)

Embed custom fonts without relying on system fonts.

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
}

15Selectors Level 3CSS 3 (modules)

:nth-child, :last-child, :not(), attribute selectors [attr^=], [attr$=].

li:nth-child(odd) { background: #f5f5f5; }

16Opacity & RGBA/HSLA ColorsCSS 3 (modules)

Transparent colors and element-level opacity.

color: rgba(99, 102, 241, 0.8);
background: hsla(240, 80%, 60%, 0.5);

17Flexible Box LayoutCSS Flexbox

One-dimensional layout system replacing float-based and table-based layouts.

.row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

18Alignment & JustificationCSS Flexbox

justify-content, align-items, align-self gave unprecedented alignment control.

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

19--custom-property syntaxCSS Custom Properties

Define reusable, inheritable values in the cascade — not Sass preprocessing.

:root { --primary: #6366f1; }
.button { background: var(--primary); }

20Runtime themingCSS Custom Properties

Custom properties change at runtime via JavaScript — enabling live theme switching.

document.documentElement.style.setProperty('--primary', '#ef4444');

21Two-dimensional LayoutCSS Grid

Control both rows and columns simultaneously — the first true CSS layout system.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

22Named Template AreasCSS Grid

Human-readable grid layouts using named areas.

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

23The fr UnitCSS Grid

Fractional unit distributes available space proportionally.

grid-template-columns: 1fr 2fr 1fr; /* 25% 50% 25% */

24@layer declarationCascade Layers (@layer)

Explicit ordering groups that override specificity for managing large codebases.

@layer reset, base, components, utilities;
@layer components {
  .button { color: white; } /* specific selector in low layer */
}
@layer utilities {
  .text-red { color: red; } /* wins — later layer */
}

25Third-party containmentCascade Layers (@layer)

Import external CSS into a layer to contain its specificity.

@import url("bootstrap.css") layer(third-party);

26container-type & @containerContainer Queries

Style elements based on their container's size — not the viewport. Game-changer for component design.

.wrapper { container-type: inline-size; }
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: 1fr 2fr; }
}

27Container query units (cqi, cqb)Container Queries

Size relative to the container, like vw/vh are to the viewport.

.card-img { width: 50cqi; }

28Relational / Parent Selector:has() Selector

:has() selects elements based on their descendants — the long-awaited "parent selector".

/* Style a card that contains an image */
.card:has(img) { padding: 0; }
/* Disable submit when form has invalid input */
form:has(:invalid) .submit { opacity: 0.5; }
/* Style a label whose sibling input is focused */
.field:has(input:focus) label { color: var(--primary); }

29@starting-styleModern CSS (2024)

Define entry animations for elements being inserted into the DOM or transitioning from display: none.

.dialog {
  transition: opacity 0.3s;
  @starting-style { opacity: 0; }
}

30CSS Nesting (native)Modern CSS (2024)

Nest selectors inside parent rules without a preprocessor.

.card {
  background: white;
  &:hover { background: #f5f5f5; }
  & .title { font-size: 1.25rem; }
}

31light-dark() FunctionModern CSS (2024)

Concise color selection based on the user's color scheme preference.

.el { color: light-dark(#1f2937, #f9fafb); }

32CSS Anchor PositioningModern CSS (2024)

Position elements relative to other arbitrary elements — native popovers and tooltips.

.tooltip { position: absolute; position-anchor: --trigger; }