M

MLOG

Eesti

Avastage CSS Houdini revolutsioonilised võimalused, sealhulgas kohandatud atribuudid ja workletid, et luua dünaamilisi ja suure jõudlusega veebistiililahendusi ning laiendada brauseri renderdusmootorit. Õppige looma kohandatud animatsioone, paigutusi ja värvimisefekte tõeliselt kaasaegse veebikogemuse jaoks.

CSS Houdini võimekuse avamine: kohandatud atribuudid ja workletid dünaamiliseks stiilimiseks

Veebiarenduse maailm areneb pidevalt ja koos sellega ka võimalused luua vapustavaid ja jõudsaid kasutajaliideseid. CSS Houdini on madala taseme API-de kogum, mis paljastab osi CSS-i renderdusmootorist, võimaldades arendajatel laiendada CSS-i viisidel, mis varem olid võimatud. See avab ukse uskumatule kohandamisele ja jõudluse kasvule.

Mis on CSS Houdini?

CSS Houdini ei ole üksik funktsioon; see on API-de kogum, mis annab arendajatele otsese juurdepääsu CSS-i renderdusmootorile. See tähendab, et saate kirjutada koodi, mis haakub brauseri stiilimise ja paigutuse protsessiga, luues kohandatud efekte, animatsioone ja isegi täiesti uusi paigutusmudeleid. Houdini võimaldab teil laiendada CSS-i ennast, muutes selle esiotsa arenduses murranguliseks.

Mõelge sellest kui võtmete andmisest CSS-i sisemise toimimise juurde, mis võimaldab teil selle vundamendile tugineda ja luua tõeliselt unikaalseid ja jõudsaid stiililahendusi.

Houdini peamised API-d

Houdini projekt koosneb mitmest olulisest API-st, millest igaüks on suunatud CSS-i renderdamise eri aspektidele. Uurime mõningaid kõige olulisemaid:

Kohandatud atribuutide (CSS-i muutujate) mõistmine

Kuigi kohandatud atribuudid, tuntud ka kui CSS-i muutujad, ei ole rangelt osa Houdinist (need on vanemad), on need kaasaegse CSS-i nurgakivi ja töötavad suurepäraselt koos Houdini API-dega. Need võimaldavad teil määratleda korduvkasutatavaid väärtusi, mida saab kasutada kogu stiililehel.

Miks kasutada kohandatud atribuute?

Põhisüntaks

Kohandatud atribuutide nimed algavad kahe sidekriipsuga (--) ja on tõstutundlikud.

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

Näide: Dünaamiline teema muutmine

Siin on lihtne näide, kuidas saate kohandatud atribuutide abil luua dünaamilise teemavahetaja:


<button id="theme-toggle">Toggle Theme</button>

:root {
  --bg-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.dark-theme {
  --bg-color: #333;
  --text-color: #fff;
}


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
  body.classList.toggle('dark-theme');
});

See kood lülitab body elemendil klassi dark-theme, mis uuendab kohandatud atribuutide väärtusi ja muudab veebisaidi välimust.

Süveneme workletitesse: CSS-i võimekuse laiendamine

Workletid on kerged, JavaScripti-sarnased moodulid, mis töötavad põhilõimest sõltumatult. See on jõudluse seisukohalt ülioluline, kuna need ei blokeeri kasutajaliidest keerukate arvutuste või renderdamise ajal.

Workletid registreeritakse kasutades CSS.paintWorklet.addModule() või sarnaseid funktsioone ja neid saab seejärel kasutada CSS-i atribuutides. Uurime Paint API-d ja Animation Worklet API-d lähemalt.

Paint API: Kohandatud visuaalsed efektid

Paint API võimaldab teil määratleda kohandatud värvimisfunktsioone, mida saab kasutada väärtustena CSS-i atribuutidele nagu background-image, border-image ja mask-image. See avab maailma võimalusi unikaalsete ja visuaalselt köitvate efektide loomiseks.

Kuidas Paint API töötab

  1. Määratlege värvimisfunktsioon: Kirjutage JavaScripti moodul, mis ekspordib paint funktsiooni. See funktsioon võtab joonistuskonteksti (sarnane Canvas 2D kontekstile), elemendi suuruse ja kõik teie määratletud kohandatud atribuudid.
  2. Registreerige worklet: Kasutage oma mooduli registreerimiseks CSS.paintWorklet.addModule('my-paint-function.js').
  3. Kasutage värvimisfunktsiooni CSS-is: Rakendage oma kohandatud värvimisfunktsiooni, kasutades oma CSS-is funktsiooni paint().

Näide: Kohandatud malelaua mustri loomine

Loome Paint API abil lihtsa malelaua mustri.

// checkerboard.js
registerPaint('checkerboard', class {
  static get inputProperties() {
    return ['--checkerboard-size', '--checkerboard-color1', '--checkerboard-color2'];
  }

  paint(ctx, geom, properties) {
    const size = Number(properties.get('--checkerboard-size'));
    const color1 = String(properties.get('--checkerboard-color1'));
    const color2 = String(properties.get('--checkerboard-color2'));

    for (let i = 0; i < geom.width / size; i++) {
      for (let j = 0; j < geom.height / size; j++) {
        ctx.fillStyle = (i + j) % 2 === 0 ? color1 : color2;
        ctx.fillRect(i * size, j * size, size, size);
      }
    }
  }
});


/* In your CSS file */
body {
  --checkerboard-size: 20;
  --checkerboard-color1: #eee;
  --checkerboard-color2: #fff;
  background-image: paint(checkerboard);
}

Selles näites:

See näitab, kuidas saate Paint API ja kohandatud atribuutide abil luua keerukaid visuaalseid efekte.

Animation Worklet API: Suure jõudlusega animatsioonid

Animation Worklet API võimaldab teil luua animatsioone, mis töötavad eraldi lõimes, tagades sujuvad ja tõrgeteta animatsioonid isegi keerukatel veebisaitidel. See on eriti kasulik animatsioonide puhul, mis hõlmavad keerukaid arvutusi või teisendusi.

Kuidas Animation Worklet API töötab

  1. Määratlege animatsioon: Kirjutage JavaScripti moodul, mis ekspordib funktsiooni, mis määratleb animatsiooni käitumise. See funktsioon saab praeguse aja ja efekti sisendi.
  2. Registreerige worklet: Kasutage oma mooduli registreerimiseks CSS.animationWorklet.addModule('my-animation.js').
  3. Kasutage animatsiooni CSS-is: Rakendage oma kohandatud animatsiooni, kasutades oma CSS-is atribuuti animation-name, viidates nimele, mille oma animatsioonifunktsioonile andsite.

Näide: Lihtsa pöörlemisanimatsiooni loomine

// rotation.js
registerAnimator('rotate', class {
  animate(currentTime, effect) {
    const angle = currentTime / 10;
    effect.localTransform = `rotate(${angle}deg)`;
  }
});


/* In your CSS file */
.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  animation-name: rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

Selles näites:

See näitab, kuidas saate luua suure jõudlusega animatsioone, mis töötavad sujuvalt isegi ressursimahukatel veebisaitidel.

Typed OM (objektimudel): Tõhusus ja tüübikindlus

Typed OM (objektimudel) pakub tõhusamat ja tüübikindlamat viisi CSS-i väärtuste manipuleerimiseks JavaScriptis. Stringidega töötamise asemel esindab Typed OM CSS-i väärtusi JavaScripti objektidena, millel on spetsiifilised tüübid (nt CSSUnitValue, CSSColorValue). See välistab stringide parsimise vajaduse ja vähendab vigade riski.

Typed OM-i eelised

Näide: CSS-i väärtustele juurdepääs ja nende muutmine


const element = document.getElementById('my-element');
const style = element.attributeStyleMap;

// Get the margin-left value
const marginLeft = style.get('margin-left');
console.log(marginLeft.value, marginLeft.unit); // Output: 10 px (assuming margin-left is 10px)

// Set the margin-left value
style.set('margin-left', CSS.px(20));

Selles näites:

Typed OM pakub robustsemat ja tõhusamat viisi CSS-i väärtustega JavaScriptis suhtlemiseks.

Layout API: Kohandatud paigutusalgoritmide loomine

Layout API on ehk kõige ambitsioonikam Houdini API-dest. See võimaldab teil määratleda täiesti uusi paigutusalgoritme, laiendades CSS-i sisseehitatud paigutusmudeleid nagu Flexbox ja Grid. See avab põnevaid võimalusi tõeliselt unikaalsete ja uuenduslike paigutuste loomiseks.

Oluline märkus: Layout API on endiselt arendusjärgus ja brauserites laialdaselt toetamata. Kasutage ettevaatlikult ja kaaluge progressiivset täiustamist.

Kuidas Layout API töötab

  1. Määratlege paigutusfunktsioon: Kirjutage JavaScripti moodul, mis ekspordib layout funktsiooni. See funktsioon võtab sisendina elemendi alamad, piirangud ja muu paigutusteabe ning tagastab iga alama suuruse ja asukoha.
  2. Registreerige worklet: Kasutage oma mooduli registreerimiseks CSS.layoutWorklet.addModule('my-layout.js').
  3. Kasutage paigutust CSS-is: Rakendage oma kohandatud paigutust, kasutades oma CSS-is atribuuti display: layout(my-layout).

Näide: Lihtsa ringpaigutuse loomine (kontseptuaalne)

Kuigi täielik näide on keeruline, on siin kontseptuaalne ülevaade sellest, kuidas võiksite luua ringpaigutuse:

// circle-layout.js (Conceptual - simplified)
registerLayout('circle-layout', class {
  static get inputProperties() {
    return ['--circle-radius'];
  }

  async layout(children, edges, constraints, styleMap) {
      const radius = Number(styleMap.get('--circle-radius').value);
      const childCount = children.length;

      children.forEach((child, index) => {
        const angle = (2 * Math.PI * index) / childCount;
        const x = radius * Math.cos(angle);
        const y = radius * Math.sin(angle);

        child.inlineSize = 50; //Example - Set Child size
        child.blockSize = 50;
        child.styleMap.set('position', 'absolute'); //Critical: Needed for accurate positioning
        child.styleMap.set('left', CSS.px(x + radius));
        child.styleMap.set('top', CSS.px(y + radius));
      });

    return {
      inlineSize: constraints.inlineSize, //Set the size of the container to the constraints from CSS
      blockSize: constraints.blockSize,
      children: children
    };
  }
});


/* In your CSS file */
.circle-container {
  display: layout(circle-layout);
  --circle-radius: 100;
  width: 300px;
  height: 300px;
  position: relative; /* Required for absolute positioning of children */
}

.circle-container > * {
  width: 50px;
  height: 50px;
  background-color: #ddd;
  border-radius: 50%;
}

Layout API peamised kaalutlused:

CSS Houdini praktilised rakendused

CSS Houdini avab laia valiku võimalusi uuenduslike ja jõudate veebikogemuste loomiseks. Siin on mõned praktilised rakendused:

Brauseri tugi ja progressiivne täiustamine

CSS Houdini brauseritugi on endiselt arenemas. Kuigi mõnedel API-del, nagu kohandatud atribuutidel ja Typed OM-il, on hea tugi, on teised, nagu Layout API, endiselt eksperimentaalsed.

Houdiniga töötades on ülioluline kasutada progressiivse täiustamise tehnikaid. See tähendab:

Funktsioonide toe kontrollimiseks saate kasutada JavaScripti:


if ('paintWorklet' in CSS) {
  // Paint API is supported
  CSS.paintWorklet.addModule('my-paint-function.js');
} else {
  // Paint API is not supported
  // Provide a fallback
  element.style.backgroundImage = 'url(fallback-image.png)';
}

CSS Houdiniga alustamine

Olete valmis CSS Houdinisse sukelduma? Siin on mõned ressursid, mis aitavad teil alustada:

CSS Houdini ja ligipääsetavus

CSS Houdini rakendamisel peaks ligipääsetavus olema esmatähtis. Pidage silmas järgmist:

Pidage meeles, et visuaalne ilu ei tohi kunagi kahjustada ligipääsetavust. Veenduge, et kõik kasutajad saaksid teie veebisaiti kasutada, olenemata nende võimetest.

CSS-i ja Houdini tulevik

CSS Houdini tähistab olulist nihet selles, kuidas me läheneme veebistiilimisele. Pakkudes otsest juurdepääsu CSS-i renderdusmootorile, annab Houdini arendajatele võime luua tõeliselt kohandatud ja jõudsaid veebikogemusi. Kuigi mõned API-d on endiselt arendusjärgus, on Houdini potentsiaal vaieldamatu. Brauseritoe paranedes ja rohkemate arendajate Houdinit omaks võttes võime oodata uut lainet uuenduslikke ja visuaalselt vapustavaid veebikujundusi.

Kokkuvõte

CSS Houdini on võimas API-de komplekt, mis avab uusi võimalusi veebistiilimiseks. Kohandatud atribuutide ja workletite valdamisega saate luua dünaamilisi, suure jõudlusega veebikogemusi, mis nihutavad CSS-iga võimaliku piire. Võtke omaks Houdini jõud ja hakake ehitama veebi tulevikku!