CSS: layout, megjelenés és reszponzív viselkedés

Becsült olvasási idő: 12–15 perc

Kulcsfogalmak: CSS · position · z-index · grid · media query · custom property A Signal Labban a CSS adja meg a vizuális alapállapotot és azt a teret, amelyben a JavaScript később változtatásokat végez.

Selector → szabályok

.signal {
  position: absolute;
  width: 120px;
  height: 120px;
}

A selector megmondja, mely elemekre vonatkozik a szabályhalmaz.

box-sizing

* {
  box-sizing: border-box;
}

border-box esetén a megadott szélesség és magasság tartalmazza a paddinget és a bordert is. Ez kiszámíthatóbb méretezést ad.

position: relative és absolute

.stage {
  position: relative;
}

.signal {
  position: absolute;
}

Az abszolút pozicionált .signal a megfelelő pozicionált őséhez — itt a .stage-hez — igazodik. Ez kapcsolja össze a CSS layoutot a JavaScriptben számolt lokális koordinátákkal.

stage local coordinate
       ↓
signal.style.left / top
       ↓
position: absolute

translate és a középpont

.signal {
  translate: -50% -50%;
}

A left és top alapból az elem pozicionálási pontját mozgatná. A negatív 50%-os translate azt eredményezi, hogy a signal közepe kerül a pointer koordinátájára.

z-index és rétegek

A felületnek több rétege van: háttér, rács, signal, címek, kezelőszervek. A z-index a stacking contexten belüli sorrendet befolyásolja.

.title-block,
.readout,
.controls {
  position: absolute;
  z-index: 2;
}

A z-index nem univerzális „mindig legyen felül” szám. A stacking contexteket is figyelembe kell venni.

isolation

.stage {
  isolation: isolate;
}

Ez új stacking contextet hoz létre a stage számára, így a belső rétegek rendezése jobban elkülönül a külső oldaltól.

Pseudo-element

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

A ::after nem külön HTML-elem, hanem CSS-ből létrehozott generált vizuális réteg. A pointer-events: none miatt nem akadályozza az interakciót.

CSS custom properties

.stage {
  --accent-a: #ff3d81;
  --accent-b: #7b5cff;
}

.signal {
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
}

A --accent-a és társai CSS custom property-k. Ugyanazt az értéket több szabályban is felhasználhatjuk.

CSS clamp() nem ugyanaz, mint a JavaScript clamp()

A név hasonló, a szerep más környezetben jelenik meg.

font-size: clamp(3rem, 9vw, 8rem);

A CSS clamp(min, preferred, max) egy reszponzív CSS-értéket korlátoz.

A saját JavaScript clamp() függvényünk számot korlátoz:

clamp(pointerX, 0, bounds.width);

CSS Grid

.readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(84px, 1fr));
}

A Grid itt a readout belső elrendezését kezeli. A JavaScriptnek ehhez nem kell layoutot számolnia.

Responsive design és media query

@media (max-width: 760px) {
  .system-line {
    display: none;
  }
}

A media query feltétel alapján más szabályokat alkalmaz. Ez nem JavaScript-es if, hanem a CSS saját feltételes rendszere.

prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  .signal {
    box-shadow: 0 0 0 12px rgb(255 255 255 / 0.025);
  }
}

Ez felhasználói rendszerpreferenciára reagál. A reszponzivitás tehát nem csak képernyőszélességet jelent.

Inline style és stylesheet

A CSS fájl adja az alapmegjelenést. A JavaScript futás közben inline stílust ír:

signal.style.left = "200px";

Ez körülbelül ilyen DOM-állapotot eredményez:

<div id="signal" style="left: 200px"></div>

Ellenőrző kérdések

1. Miért fontos a .stage { position: relative; } a signal számára?
2. Mit csinál a translate: -50% -50%?
3. Mi a különbség a CSS és a JavaScript clamp() szerepe között?
4. Milyen inputra reagál egy media query?