M

MLOG

Lietuvių

Atraskite revoliucines CSS Houdini galimybes – individualizuotas ypatybes ir „worklets“, skirtus kurti dinamiškus, našius stiliaus sprendimus ir praplėsti naršyklės atvaizdavimo variklį.

CSS Houdini galios atskleidimas: individualizuotos ypatybės ir „Worklets“ dinamiškam stiliui

Saityno kūrimo pasaulis nuolat keičiasi, o kartu su juo – ir galimybės kurti įspūdingas bei našias vartotojo sąsajas. CSS Houdini yra žemo lygio API rinkinys, atveriantis prieigą prie CSS atvaizdavimo variklio dalių, leidžiantis kūrėjams praplėsti CSS būdais, kurie anksčiau buvo neįmanomi. Tai atveria duris neįtikėtinam pritaikymui ir našumo padidėjimui.

Kas yra CSS Houdini?

CSS Houdini nėra viena funkcija; tai API rinkinys, suteikiantis kūrėjams tiesioginę prieigą prie CSS atvaizdavimo variklio. Tai reiškia, kad galite rašyti kodą, kuris prisijungia prie naršyklės stiliaus ir maketavimo proceso, kurdami individualizuotus efektus, animacijas ir net visiškai naujus maketavimo modelius. Houdini leidžia išplėsti patį CSS, todėl tai yra esminis pokytis „front-end“ kūrimui.

Galvokite apie tai, kaip apie raktus į vidinį CSS veikimą, leidžiančius jums remtis jo pagrindais ir kurti tikrai unikalius bei našius stiliaus sprendimus.

Pagrindinės Houdini API

Houdini projektą sudaro kelios pagrindinės API, kurių kiekviena skirta skirtingiems CSS atvaizdavimo aspektams. Išnagrinėkime keletą svarbiausių:

Individualizuotų ypatybių (CSS kintamųjų) supratimas

Nors individualizuotos ypatybės, dar žinomos kaip CSS kintamieji, griežtai nėra Houdini dalis (jos atsirado anksčiau), jos yra modernaus CSS pagrindas ir puikiai veikia su Houdini API. Jos leidžia apibrėžti pakartotinai naudojamas reikšmes, kurias galima pritaikyti visame stilių apraše.

Kodėl verta naudoti individualizuotas ypatybes?

Pagrindinė sintaksė

Individualizuotų ypatybių pavadinimai prasideda dviem brūkšneliais (--) ir yra jautrūs raidžių dydžiui.

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

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

Pavyzdys: Dinamiškos temos

Štai paprastas pavyzdys, kaip galite naudoti individualizuotas ypatybes dinamiškam temos keitikliui sukurti:


<button id="theme-toggle">Perjungti temą</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 kodas perjungia dark-theme klasę ant body elemento, o tai atnaujina individualizuotų ypatybių reikšmes ir pakeičia svetainės išvaizdą.

Pasinerkime į „Worklets“: CSS galimybių praplėtimas

„Worklets“ yra lengvi, į „JavaScript“ panašūs moduliai, kurie veikia nepriklausomai nuo pagrindinės gijos. Tai yra labai svarbu našumui, nes jie neblokuoja vartotojo sąsajos atliekant sudėtingus skaičiavimus ar atvaizdavimą.

„Worklets“ yra registruojami naudojant CSS.paintWorklet.addModule() ar panašias funkcijas ir tada gali būti naudojami CSS ypatybėse. Išnagrinėkime „Paint API“ ir „Animation Worklet API“ atidžiau.

Paint API: Individualizuoti vizualiniai efektai

„Paint API“ leidžia apibrėžti pasirinktines piešimo funkcijas, kurias galima naudoti kaip reikšmes CSS ypatybėms, tokioms kaip background-image, border-image ir mask-image. Tai atveria daugybę galimybių kurti unikalius ir vizualiai patrauklius efektus.

Kaip veikia „Paint API“

  1. Apibrėžkite piešimo funkciją: Parašykite „JavaScript“ modulį, kuris eksportuoja paint funkciją. Ši funkcija priima piešimo kontekstą (panašų į „Canvas 2D“ kontekstą), elemento dydį ir bet kokias jūsų apibrėžtas individualizuotas ypatybes.
  2. Registruokite „Worklet“: Naudokite CSS.paintWorklet.addModule('my-paint-function.js'), kad užregistruotumėte savo modulį.
  3. Naudokite piešimo funkciją CSS: Pritaikykite savo pasirinktinę piešimo funkciją naudodami paint() funkciją savo CSS.

Pavyzdys: Pasirinktinio šachmatų lentos rašto kūrimas

Sukurkime paprastą šachmatų lentos raštą naudojant „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ūsų CSS faile */
body {
  --checkerboard-size: 20;
  --checkerboard-color1: #eee;
  --checkerboard-color2: #fff;
  background-image: paint(checkerboard);
}

Šiame pavyzdyje:

Tai parodo, kaip galite sukurti sudėtingus vizualinius efektus naudodami „Paint API“ ir individualizuotas ypatybes.

Animation Worklet API: Didelio našumo animacijos

„Animation Worklet API“ leidžia kurti animacijas, kurios veikia atskiroje gijoje, užtikrinant sklandžias ir be trikdžių veikiančias animacijas net sudėtingose svetainėse. Tai ypač naudinga animacijoms, kuriose atliekami sudėtingi skaičiavimai ar transformacijos.

Kaip veikia „Animation Worklet API“

  1. Apibrėžkite animaciją: Parašykite „JavaScript“ modulį, kuris eksportuoja funkciją, apibrėžiančią animacijos elgseną. Ši funkcija gauna esamą laiką ir efekto įvestį.
  2. Registruokite „Worklet“: Naudokite CSS.animationWorklet.addModule('my-animation.js'), kad užregistruotumėte savo modulį.
  3. Naudokite animaciją CSS: Pritaikykite savo pasirinktinę animaciją naudodami animation-name ypatybę savo CSS, nurodydami pavadinimą, kurį suteikėte savo animacijos funkcijai.

Pavyzdys: Paprastos sukimosi animacijos kūrimas

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


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

Šiame pavyzdyje:

Tai parodo, kaip galite sukurti didelio našumo animacijas, kurios veikia sklandžiai net ir daug resursų reikalaujančiose svetainėse.

Typed OM (Objektų modelis): Efektyvumas ir tipų saugumas

Typed OM (Objektų modelis) suteikia efektyvesnį ir tipams saugų būdą manipuliuoti CSS reikšmėmis „JavaScript“. Užuot dirbus su eilutėmis, „Typed OM“ atvaizduoja CSS reikšmes kaip „JavaScript“ objektus su konkrečiais tipais (pvz., CSSUnitValue, CSSColorValue). Tai pašalina eilutės analizės poreikį ir sumažina klaidų riziką.

„Typed OM“ privalumai

Pavyzdys: Prieiga prie CSS reikšmių ir jų keitimas


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

// Gauti margin-left reikšmę
const marginLeft = style.get('margin-left');
console.log(marginLeft.value, marginLeft.unit); // Išvestis: 10 px (darant prielaidą, kad margin-left yra 10px)

// Nustatyti margin-left reikšmę
style.set('margin-left', CSS.px(20));

Šiame pavyzdyje:

„Typed OM“ suteikia patikimesnį ir efektyvesnį būdą sąveikauti su CSS reikšmėmis „JavaScript“ kalboje.

Layout API: Individualizuotų maketavimo algoritmų kūrimas

„Layout API“ yra bene ambicingiausia iš Houdini API. Ji leidžia apibrėžti visiškai naujus maketavimo algoritmus, praplečiant CSS integruotus maketavimo modelius, tokius kaip „Flexbox“ ir „Grid“. Tai atveria įdomias galimybes kurti tikrai unikalius ir novatoriškus maketus.

Svarbi pastaba: „Layout API“ vis dar yra kuriama ir nėra plačiai palaikoma visose naršyklėse. Naudokite atsargiai ir apsvarstykite laipsniško gerinimo (progressive enhancement) metodą.

Kaip veikia „Layout API“

  1. Apibrėžkite maketo funkciją: Parašykite „JavaScript“ modulį, kuris eksportuoja layout funkciją. Ši funkcija priima elemento antrinius elementus, apribojimus ir kitą maketo informaciją kaip įvestį ir grąžina kiekvieno antrinio elemento dydį ir padėtį.
  2. Registruokite „Worklet“: Naudokite CSS.layoutWorklet.addModule('my-layout.js'), kad užregistruotumėte savo modulį.
  3. Naudokite maketą CSS: Pritaikykite savo pasirinktinį maketą naudodami display: layout(my-layout) ypatybę savo CSS.

Pavyzdys: Paprasto apskritimo maketo kūrimas (konceptualus)

Nors visas pavyzdys yra sudėtingas, štai konceptualus planas, kaip galėtumėte sukurti apskritimo maketą:

// circle-layout.js (Konceptualus - supaprastintas)
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; //Pavyzdys - Nustatyti antrinio elemento dydį
        child.blockSize = 50;
        child.styleMap.set('position', 'absolute'); //Svarbu: Reikalinga tiksliam pozicionavimui
        child.styleMap.set('left', CSS.px(x + radius));
        child.styleMap.set('top', CSS.px(y + radius));
      });

    return {
      inlineSize: constraints.inlineSize, //Nustatyti konteinerio dydį pagal apribojimus iš CSS
      blockSize: constraints.blockSize,
      children: children
    };
  }
});


/* Jūsų CSS faile */
.circle-container {
  display: layout(circle-layout);
  --circle-radius: 100;
  width: 300px;
  height: 300px;
  position: relative; /* Būtina absoliučiam antrinių elementų pozicionavimui */
}

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

Svarbiausi aspektai dirbant su „Layout API“:

Praktinis CSS Houdini pritaikymas

CSS Houdini atveria platų galimybių spektrą kurti novatoriškas ir našias interneto patirtis. Štai keletas praktinių pritaikymo pavyzdžių:

Naršyklių palaikymas ir laipsniškas gerinimas

Naršyklių palaikymas CSS Houdini vis dar vystosi. Nors kai kurios API, pvz., individualizuotos ypatybės ir „Typed OM“, yra gerai palaikomos, kitos, pvz., „Layout API“, vis dar yra eksperimentinės.

Dirbant su Houdini, labai svarbu naudoti laipsniško gerinimo metodus. Tai reiškia:

Funkcijų palaikymui patikrinti galite naudoti „JavaScript“:


if ('paintWorklet' in CSS) {
  // Paint API yra palaikoma
  CSS.paintWorklet.addModule('my-paint-function.js');
} else {
  // Paint API nėra palaikoma
  // Pateikite atsarginį variantą
  element.style.backgroundImage = 'url(fallback-image.png)';
}

Darbo su CSS Houdini pradžia

Pasiruošę pasinerti į CSS Houdini? Štai keletas išteklių, padėsiančių jums pradėti:

CSS Houdini ir prieinamumas

Įgyvendinant CSS Houdini, prieinamumas turėtų būti pagrindinis prioritetas. Turėkite omenyje šiuos dalykus:

Atminkite, kad vizualinis patrauklumas niekada neturėtų pakenkti prieinamumui. Užtikrinkite, kad visi vartotojai galėtų pasiekti ir naudotis jūsų svetaine, nepaisant jų gebėjimų.

CSS ir Houdini ateitis

CSS Houdini žymi reikšmingą pokytį mūsų požiūryje į saityno stilių. Suteikdamas tiesioginę prieigą prie CSS atvaizdavimo variklio, Houdini suteikia kūrėjams galią kurti tikrai individualizuotas ir našias interneto patirtis. Nors kai kurios API vis dar kuriamos, Houdini potencialas yra neabejotinas. Gerėjant naršyklių palaikymui ir vis daugiau kūrėjų pradedant naudoti Houdini, galime tikėtis naujos novatoriškų ir vizualiai įspūdingų saityno dizainų bangos.

Išvada

CSS Houdini yra galingas API rinkinys, atveriantis naujas galimybes saityno stiliui. Įvaldę individualizuotas ypatybes ir „worklets“, galite kurti dinamiškas, didelio našumo interneto patirtis, kurios peržengia CSS galimybių ribas. Pasinaudokite Houdini galia ir pradėkite kurti saityno ateitį!