M

MLOG

Latviešu

Izpētiet CSS Houdini revolucionārās iespējas, tostarp pielāgotas īpašības un worklets, lai radītu dinamiskus, augstas veiktspējas tīmekļa stila risinājumus un paplašinātu pārlūkprogrammas renderēšanas dzinēju. Uzziniet, kā ieviest pielāgotas animācijas, izkārtojumus un zīmēšanas efektus patiesi modernai tīmekļa pieredzei.

CSS Houdini spēka atklāšana: pielāgotas īpašības un worklets dinamiskam stilam

Tīmekļa izstrādes pasaule nepārtraukti attīstās, un līdz ar to arī iespējas veidot satriecošas un veiktspējīgas lietotāja saskarnes. CSS Houdini ir zema līmeņa API kolekcija, kas atklāj CSS renderēšanas dzinēja daļas, ļaujot izstrādātājiem paplašināt CSS veidos, kas iepriekš nebija iespējami. Tas paver durvis neticamai pielāgošanai un veiktspējas uzlabojumiem.

Kas ir CSS Houdini?

CSS Houdini nav viena funkcija; tā ir API kolekcija, kas izstrādātājiem nodrošina tiešu piekļuvi CSS renderēšanas dzinējam. Tas nozīmē, ka varat rakstīt kodu, kas pieslēdzas pārlūkprogrammas stila un izkārtojuma procesam, veidojot pielāgotus efektus, animācijas un pat pilnīgi jaunus izkārtojuma modeļus. Houdini ļauj jums paplašināt pašu CSS, padarot to par revolucionāru risinājumu priekšgala (front-end) izstrādē.

Iedomājieties to kā atslēgu došanu CSS iekšējai darbībai, kas ļauj jums balstīties uz tā pamatiem un radīt patiesi unikālus un veiktspējīgus stila risinājumus.

Galvenās Houdini API

Houdini projektu veido vairākas galvenās API, katra no tām ir vērsta uz dažādiem CSS renderēšanas aspektiem. Apskatīsim dažas no svarīgākajām:

Izpratne par pielāgotajām īpašībām (CSS mainīgajiem)

Lai gan tās nav tieši Houdini daļa (tās radās pirms tā), pielāgotās īpašības, kas pazīstamas arī kā CSS mainīgie, ir moderna CSS stūrakmens un lieliski sader ar Houdini API. Tās ļauj definēt atkārtoti lietojamas vērtības, kuras var izmantot visā jūsu stila lapā.

Kāpēc izmantot pielāgotās īpašības?

Pamata sintakse

Pielāgoto īpašību nosaukumi sākas ar divām defisēm (--) un ir reģistrjutīgi.

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

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

Piemērs: dinamiska tēmu veidošana

Šeit ir vienkāršs piemērs, kā varat izmantot pielāgotās īpašības, lai izveidotu dinamisku tēmu pārslēdzēju:


<button id="theme-toggle">Pārslēgt tēmu</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');
});

Šis kods pārslēdz dark-theme klasi uz body elementa, kas atjaunina pielāgoto īpašību vērtības un maina vietnes izskatu.

Iedziļināšanās Worklets: CSS iespēju paplašināšana

Worklets ir viegli, JavaScript līdzīgi moduļi, kas darbojas neatkarīgi no galvenā pavediena. Tas ir būtiski veiktspējai, jo tie nebloķē lietotāja saskarni, veicot sarežģītus aprēķinus vai renderēšanu.

Worklets tiek reģistrēti, izmantojot CSS.paintWorklet.addModule() vai līdzīgas funkcijas, un pēc tam tos var izmantot CSS īpašībās. Apskatīsim Paint API un Animation Worklet API tuvāk.

Paint API: pielāgoti vizuālie efekti

Paint API ļauj definēt pielāgotas zīmēšanas funkcijas, kuras var izmantot kā vērtības tādām CSS īpašībām kā background-image, border-image un mask-image. Tas paver iespēju pasauli unikālu un vizuāli pievilcīgu efektu radīšanai.

Kā darbojas Paint API

  1. Definējiet zīmēšanas funkciju: Uzrakstiet JavaScript moduli, kas eksportē paint funkciju. Šī funkcija saņem zīmēšanas kontekstu (līdzīgu Canvas 2D kontekstam), elementa izmēru un jebkuras jūsu definētās pielāgotās īpašības.
  2. Reģistrējiet Worklet: Izmantojiet CSS.paintWorklet.addModule('my-paint-function.js'), lai reģistrētu savu moduli.
  3. Izmantojiet zīmēšanas funkciju CSS: Piemērojiet savu pielāgoto zīmēšanas funkciju, izmantojot paint() funkciju savā CSS.

Piemērs: pielāgota šaha dēļa raksta izveide

Izveidosim vienkāršu šaha dēļa rakstu, izmantojot Paint API.

// 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);
      }
    }
  }
});


/* Jūsu CSS failā */
body {
  --checkerboard-size: 20;
  --checkerboard-color1: #eee;
  --checkerboard-color2: #fff;
  background-image: paint(checkerboard);
}

Šajā piemērā:

Tas parāda, kā varat izveidot sarežģītus vizuālos efektus, izmantojot Paint API un pielāgotās īpašības.

Animation Worklet API: augstas veiktspējas animācijas

Animation Worklet API ļauj jums izveidot animācijas, kas darbojas atsevišķā pavedienā, nodrošinot plūstošas un neraustīgas animācijas pat sarežģītās vietnēs. Tas ir īpaši noderīgi animācijām, kas ietver sarežģītus aprēķinus vai transformācijas.

Kā darbojas Animation Worklet API

  1. Definējiet animāciju: Uzrakstiet JavaScript moduli, kas eksportē funkciju, kura definē animācijas uzvedību. Šī funkcija saņem pašreizējo laiku un efekta ievadi.
  2. Reģistrējiet Worklet: Izmantojiet CSS.animationWorklet.addModule('my-animation.js'), lai reģistrētu savu moduli.
  3. Izmantojiet animāciju CSS: Piemērojiet savu pielāgoto animāciju, izmantojot animation-name īpašību savā CSS, atsaucoties uz nosaukumu, ko piešķīrāt savai animācijas funkcijai.

Piemērs: vienkāršas rotācijas animācijas izveide

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


/* Jūsu CSS failā */
.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  animation-name: rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

Šajā piemērā:

Tas parāda, kā varat izveidot augstas veiktspējas animācijas, kas darbojas plūstoši pat resursietilpīgās vietnēs.

Tipizētais OM (objektu modelis): efektivitāte un tipu drošība

Tipizētais OM (objektu modelis) nodrošina efektīvāku un tipiem drošu veidu, kā manipulēt ar CSS vērtībām JavaScript. Tā vietā, lai strādātu ar virknēm, tipizētais OM attēlo CSS vērtības kā JavaScript objektus ar konkrētiem tipiem (piemēram, CSSUnitValue, CSSColorValue). Tas novērš nepieciešamību pēc virkņu parsēšanas un samazina kļūdu risku.

Tipizētā OM priekšrocības

Piemērs: piekļuve un CSS vērtību modificēšana


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

// Iegūstiet margin-left vērtību
const marginLeft = style.get('margin-left');
console.log(marginLeft.value, marginLeft.unit); // Izvade: 10 px (pieņemot, ka margin-left ir 10px)

// Iestatiet margin-left vērtību
style.set('margin-left', CSS.px(20));

Šajā piemērā:

Tipizētais OM nodrošina stabilāku un efektīvāku veidu, kā mijiedarboties ar CSS vērtībām JavaScript.

Layout API: pielāgotu izkārtojuma algoritmu izstrāde

Layout API, iespējams, ir visambiciozākā no Houdini API. Tā ļauj definēt pilnīgi jaunus izkārtojuma algoritmus, paplašinot CSS iebūvētos izkārtojuma modeļus, piemēram, Flexbox un Grid. Tas paver aizraujošas iespējas radīt patiesi unikālus un inovatīvus izkārtojumus.

Svarīga piezīme: Layout API joprojām ir izstrādes stadijā un nav plaši atbalstīta visās pārlūkprogrammās. Izmantojiet to piesardzīgi un apsveriet progresīvo uzlabošanu (progressive enhancement).

Kā darbojas Layout API

  1. Definējiet izkārtojuma funkciju: Uzrakstiet JavaScript moduli, kas eksportē layout funkciju. Šī funkcija saņem elementa bērnus, ierobežojumus un citu izkārtojuma informāciju kā ievadi un atgriež katra bērna izmēru un pozīciju.
  2. Reģistrējiet Worklet: Izmantojiet CSS.layoutWorklet.addModule('my-layout.js'), lai reģistrētu savu moduli.
  3. Izmantojiet izkārtojumu CSS: Piemērojiet savu pielāgoto izkārtojumu, izmantojot display: layout(my-layout) īpašību savā CSS.

Piemērs: vienkārša apļa izkārtojuma izveide (konceptuāls)

Lai gan pilns piemērs ir sarežģīts, šeit ir konceptuāls apraksts, kā jūs varētu izveidot apļa izkārtojumu:

// circle-layout.js (Konceptuāls - vienkāršots)
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; //Piemērs - Iestatīt bērna izmēru
        child.blockSize = 50;
        child.styleMap.set('position', 'absolute'); //Kritiski: Nepieciešams precīzai pozicionēšanai
        child.styleMap.set('left', CSS.px(x + radius));
        child.styleMap.set('top', CSS.px(y + radius));
      });

    return {
      inlineSize: constraints.inlineSize, //Iestatiet konteinera izmēru atbilstoši ierobežojumiem no CSS
      blockSize: constraints.blockSize,
      children: children
    };
  }
});


/* Jūsu CSS failā */
.circle-container {
  display: layout(circle-layout);
  --circle-radius: 100;
  width: 300px;
  height: 300px;
  position: relative; /* Nepieciešams bērnu absolūtai pozicionēšanai */
}

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

Galvenie apsvērumi par Layout API:

CSS Houdini praktiskie pielietojumi

CSS Houdini paver plašu iespēju klāstu inovatīvu un veiktspējīgu tīmekļa pieredžu radīšanai. Šeit ir daži praktiski pielietojumi:

Pārlūkprogrammu atbalsts un progresīvā uzlabošana

Pārlūkprogrammu atbalsts CSS Houdini joprojām attīstās. Lai gan dažām API, piemēram, pielāgotajām īpašībām un tipizētajam OM, ir labs atbalsts, citas, piemēram, Layout API, joprojām ir eksperimentālas.

Strādājot ar Houdini, ir ļoti svarīgi izmantot progresīvās uzlabošanas metodes. Tas nozīmē:

Jūs varat izmantot JavaScript, lai pārbaudītu funkciju atbalstu:


if ('paintWorklet' in CSS) {
  // Paint API tiek atbalstīts
  CSS.paintWorklet.addModule('my-paint-function.js');
} else {
  // Paint API netiek atbalstīts
  // Nodrošiniet alternatīvu
  element.style.backgroundImage = 'url(fallback-image.png)';
}

Kā sākt darbu ar CSS Houdini

Gatavs ienirt CSS Houdini? Šeit ir daži resursi, kas palīdzēs jums sākt:

CSS Houdini un pieejamība

Ieviešot CSS Houdini, pieejamībai jābūt galvenajai prioritātei. Paturiet prātā sekojošo:

Atcerieties, ka vizuālais noformējums nekad nedrīkst apdraudēt pieejamību. Nodrošiniet, lai visi lietotāji varētu piekļūt un izmantot jūsu vietni neatkarīgi no viņu spējām.

CSS un Houdini nākotne

CSS Houdini ir nozīmīgs pavērsiens tajā, kā mēs pieejam tīmekļa stila veidošanai. Nodrošinot tiešu piekļuvi CSS renderēšanas dzinējam, Houdini dod izstrādātājiem iespēju radīt patiesi pielāgotas un veiktspējīgas tīmekļa pieredzes. Lai gan dažas API joprojām tiek izstrādātas, Houdini potenciāls ir nenoliedzams. Uzlabojoties pārlūkprogrammu atbalstam un arvien vairāk izstrādātājiem pieņemot Houdini, mēs varam sagaidīt jaunu inovatīvu un vizuāli satriecošu tīmekļa dizainu vilni.

Noslēgums

CSS Houdini ir spēcīgs API kopums, kas paver jaunas iespējas tīmekļa stila veidošanā. Apgūstot pielāgotās īpašības un worklets, jūs varat izveidot dinamiskas, augstas veiktspējas tīmekļa pieredzes, kas pārkāpj CSS iespēju robežas. Pieņemiet Houdini spēku un sāciet veidot tīmekļa nākotni!