தமிழ்

CSS Houdini-இன் புரட்சிகரமான திறன்களை ஆராயுங்கள். கஸ்டம் பிராப்பர்ட்டீஸ் மற்றும் வொர்க்லெட்டுகளைப் பயன்படுத்தி, டைனமிக், உயர் செயல்திறன் கொண்ட வெப் ஸ்டைலிங் தீர்வுகளை உருவாக்கி, நவீன வலை அனுபவத்தைப் பெறுங்கள்.

CSS Houdini-இன் சக்தியைத் திறத்தல்: டைனமிக் ஸ்டைலிங்கிற்கான கஸ்டம் பிராப்பர்ட்டீஸ் மற்றும் வொர்க்லெட்டுகள்

வெப் டெவலப்மென்ட் உலகம் தொடர்ந்து வளர்ந்து வருகிறது, அதனுடன், பிரமிக்க வைக்கும் மற்றும் செயல்திறன் மிக்க பயனர் இடைமுகங்களை உருவாக்குவதற்கான வாய்ப்புகளும் அதிகரித்து வருகின்றன. CSS Houdini என்பது CSS ரெண்டரிங் இன்ஜினின் பகுதிகளை வெளிப்படுத்தும் கீழ்-நிலை API-களின் தொகுப்பாகும், இது டெவலப்பர்களை முன்பு சாத்தியமில்லாத வழிகளில் CSS-ஐ நீட்டிக்க அனுமதிக்கிறது. இது நம்பமுடியாத தனிப்பயனாக்கம் மற்றும் செயல்திறன் ஆதாயங்களுக்கு வழி வகுக்கிறது.

CSS Houdini என்றால் என்ன?

CSS Houdini ஒரு தனி அம்சம் அல்ல; இது டெவலப்பர்களுக்கு CSS ரெண்டரிங் இன்ஜினுக்கு நேரடி அணுகலை வழங்கும் API-களின் தொகுப்பாகும். இதன் பொருள், நீங்கள் உலாவியின் ஸ்டைலிங் மற்றும் லேஅவுட் செயல்முறையில் இணையும் குறியீட்டை எழுதலாம், தனிப்பயன் விளைவுகள், அனிமேஷன்கள் மற்றும் முற்றிலும் புதிய லேஅவுட் மாடல்களை உருவாக்கலாம். Houdini உங்களை CSS-ஐயே நீட்டிக்க அனுமதிக்கிறது, இது ஃபிரண்ட்-எண்ட் டெவலப்மென்ட்டிற்கு ஒரு கேம்-சேஞ்சராக அமைகிறது.

இதை CSS-இன் உள் செயல்பாடுகளின் சாவியை உங்களுக்கு வழங்குவதாக நினைத்துக் கொள்ளுங்கள், அதன் அடித்தளத்தை மேம்படுத்தவும், உண்மையிலேயே தனித்துவமான மற்றும் செயல்திறன் மிக்க ஸ்டைலிங் தீர்வுகளை உருவாக்கவும் இது உங்களை அனுமதிக்கிறது.

முக்கிய Houdini API-கள்

Houdini திட்டத்தில் பல முக்கிய API-கள் உள்ளன, ஒவ்வொன்றும் CSS ரெண்டரிங்கின் வெவ்வேறு அம்சங்களைக் குறிவைக்கின்றன. அவற்றில் சில முக்கியமானவற்றை ஆராய்வோம்:

கஸ்டம் பிராப்பர்ட்டீஸ் (CSS மாறிகள்) புரிந்துகொள்ளுதல்

இது கண்டிப்பாக Houdini-இன் ஒரு பகுதியாக இல்லாவிட்டாலும் (அவை அதற்கு முந்தியவை), கஸ்டம் பிராப்பர்ட்டீஸ், CSS மாறிகள் என்றும் அழைக்கப்படுகின்றன, நவீன CSS-இன் ஒரு மூலக்கல்லாகும், மேலும் இது Houdini API-களுடன் அழகாக வேலை செய்கிறது. உங்கள் ஸ்டைல்ஷீட் முழுவதும் பயன்படுத்தக்கூடிய மறுபயன்பாட்டு மதிப்புகளை வரையறுக்க அவை உங்களை அனுமதிக்கின்றன.

கஸ்டம் பிராப்பர்ட்டீஸ்களை ஏன் பயன்படுத்த வேண்டும்?

அடிப்படை சிண்டாக்ஸ்

கஸ்டம் பிராப்பர்ட்டி பெயர்கள் இரண்டு ஹைபன்களுடன் (--) தொடங்கி, கேஸ்-சென்சிடிவ் ஆகும்.

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

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

எடுத்துக்காட்டு: டைனமிக் தீமிங்

டைனமிக் தீம் ஸ்விட்சரை உருவாக்க கஸ்டம் பிராப்பர்ட்டீஸ்களை எப்படிப் பயன்படுத்தலாம் என்பதற்கான ஒரு எளிய எடுத்துக்காட்டு இங்கே:


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

இந்த குறியீடு body எலிமென்டில் dark-theme கிளாஸை மாற்றி, கஸ்டம் பிராப்பர்ட்டி மதிப்புகளைப் புதுப்பித்து, வலைத்தளத்தின் தோற்றத்தை மாற்றுகிறது.

வொர்க்லெட்டுகளில் மூழ்குதல்: CSS-இன் திறன்களை நீட்டித்தல்

வொர்க்லெட்டுகள் என்பவை மெயின் த்ரெட்டிலிருந்து சுயாதீனமாக இயங்கும் இலகுவான, ஜாவாஸ்கிரிப்ட் போன்ற மாட்யூல்கள் ஆகும். இது செயல்திறனுக்கு முக்கியமானது, ஏனெனில் அவை சிக்கலான கணக்கீடுகள் அல்லது ரெண்டரிங் செய்யும்போது பயனர் இடைமுகத்தைத் தடுக்காது.

வொர்க்லெட்டுகள் CSS.paintWorklet.addModule() அல்லது அதுபோன்ற ஃபங்ஷன்களைப் பயன்படுத்தி பதிவு செய்யப்பட்டு, பின்னர் CSS பிராப்பர்ட்டீஸ்களில் பயன்படுத்தப்படலாம். பெயிண்ட் API மற்றும் அனிமேஷன் வொர்க்லெட் API-ஐ இன்னும் நெருக்கமாகப் பார்ப்போம்.

பெயிண்ட் API: தனிப்பயன் காட்சி விளைவுகள்

பெயிண்ட் API, background-image, border-image, மற்றும் mask-image போன்ற CSS பிராப்பர்ட்டீஸ்களின் மதிப்புகளாகப் பயன்படுத்தக்கூடிய தனிப்பயன் பெயிண்ட் ஃபங்ஷன்களை வரையறுக்க உங்களை அனுமதிக்கிறது. இது தனித்துவமான மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய விளைவுகளை உருவாக்குவதற்கான சாத்தியக்கூறுகளின் உலகத்தைத் திறக்கிறது.

பெயிண்ட் API எப்படி வேலை செய்கிறது

  1. ஒரு பெயிண்ட் ஃபங்ஷனை வரையறுக்கவும்: ஒரு paint ஃபங்ஷனை ஏற்றுமதி செய்யும் ஜாவாஸ்கிரிப்ட் மாட்யூலை எழுதுங்கள். இந்த ஃபங்ஷன் ஒரு டிராயிங் கான்டெக்ஸ்ட் (Canvas 2D கான்டெக்ஸ்ட் போன்றது), எலிமென்டின் அளவு மற்றும் நீங்கள் வரையறுக்கும் எந்தவொரு கஸ்டம் பிராப்பர்ட்டீஸ்களையும் எடுத்துக்கொள்கிறது.
  2. வொர்க்லெட்டைப் பதிவு செய்யவும்: உங்கள் மாட்யூலை பதிவு செய்ய CSS.paintWorklet.addModule('my-paint-function.js') பயன்படுத்தவும்.
  3. CSS-இல் பெயிண்ட் ஃபங்ஷனைப் பயன்படுத்தவும்: உங்கள் CSS-இல் 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);
      }
    }
  }
});

/* உங்கள் CSS கோப்பில் */
body {
  --checkerboard-size: 20;
  --checkerboard-color1: #eee;
  --checkerboard-color2: #fff;
  background-image: paint(checkerboard);
}

இந்த எடுத்துக்காட்டில்:

பெயிண்ட் API மற்றும் கஸ்டம் பிராப்பர்ட்டீஸ்களைப் பயன்படுத்தி சிக்கலான காட்சி விளைவுகளை எப்படி உருவாக்கலாம் என்பதை இது காட்டுகிறது.

அனிமேஷன் வொர்க்லெட் API: உயர்-செயல்திறன் அனிமேஷன்கள்

அனிமேஷன் வொர்க்லெட் API, தனி த்ரெட்டில் இயங்கும் அனிமேஷன்களை உருவாக்க உங்களை அனுமதிக்கிறது, சிக்கலான வலைத்தளங்களில் கூட மென்மையான மற்றும் தடையில்லா அனிமேஷன்களை உறுதி செய்கிறது. இது சிக்கலான கணக்கீடுகள் அல்லது மாற்றங்களை உள்ளடக்கிய அனிமேஷன்களுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும்.

அனிமேஷன் வொர்க்லெட் API எப்படி வேலை செய்கிறது

  1. ஒரு அனிமேஷனை வரையறுக்கவும்: அனிமேஷனின் நடத்தையை வரையறுக்கும் ஒரு ஃபங்ஷனை ஏற்றுமதி செய்யும் ஜாவாஸ்கிரிப்ட் மாட்யூலை எழுதுங்கள். இந்த ஃபங்ஷன் தற்போதைய நேரம் மற்றும் ஒரு எஃபெக்ட் இன்புட்டைப் பெறுகிறது.
  2. வொர்க்லெட்டைப் பதிவு செய்யவும்: உங்கள் மாட்யூலைப் பதிவு செய்ய CSS.animationWorklet.addModule('my-animation.js') பயன்படுத்தவும்.
  3. CSS-இல் அனிமேஷனைப் பயன்படுத்தவும்: உங்கள் CSS-இல் animation-name பிராப்பர்ட்டியைப் பயன்படுத்தி உங்கள் தனிப்பயன் அனிமேஷனைப் பயன்படுத்தவும், உங்கள் அனிமேஷன் ஃபங்ஷனுக்கு நீங்கள் கொடுத்த பெயரைப் பயன்படுத்தி.

எடுத்துக்காட்டு: ஒரு எளிய சுழற்சி அனிமேஷனை உருவாக்குதல்

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

/* உங்கள் CSS கோப்பில் */
.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  animation-name: rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

இந்த எடுத்துக்காட்டில்:

வளம் மிகுந்த வலைத்தளங்களில் கூட மென்மையாக இயங்கும் உயர்-செயல்திறன் அனிமேஷன்களை எப்படி உருவாக்கலாம் என்பதை இது காட்டுகிறது.

டைப்டு OM (ஆப்ஜெக்ட் மாடல்): செயல்திறன் மற்றும் வகை பாதுகாப்பு

டைப்டு OM (ஆப்ஜெக்ட் மாடல்) ஜாவாஸ்கிரிப்டில் CSS மதிப்புகளைக் கையாள மிகவும் திறமையான மற்றும் வகை-பாதுகாப்பான வழியை வழங்குகிறது. ஸ்டிரிங்களுடன் வேலை செய்வதற்குப் பதிலாக, டைப்டு OM, CSS மதிப்புகளை குறிப்பிட்ட வகைகளைக் கொண்ட ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட்களாக (எ.கா., CSSUnitValue, CSSColorValue) குறிக்கிறது. இது ஸ்டிரிங் பார்சிங் தேவையை நீக்கி, பிழைகளின் அபாயத்தைக் குறைக்கிறது.

டைப்டு OM-இன் நன்மைகள்

எடுத்துக்காட்டு: CSS மதிப்புகளை அணுகுதல் மற்றும் மாற்றுதல்


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

// margin-left மதிப்பைப் பெறுங்கள்
const marginLeft = style.get('margin-left');
console.log(marginLeft.value, marginLeft.unit); // வெளியீடு: 10 px (margin-left 10px என்று ধরেக்கொண்டு)

// margin-left மதிப்பை அமைக்கவும்
style.set('margin-left', CSS.px(20));

இந்த எடுத்துக்காட்டில்:

டைப்டு OM ஜாவாஸ்கிரிப்டில் CSS மதிப்புகளுடன் தொடர்பு கொள்ள மிகவும் வலுவான மற்றும் திறமையான வழியை வழங்குகிறது.

லேஅவுட் API: தனிப்பயன் லேஅவுட் அல்காரிதம்களை உருவாக்குதல்

லேஅவுட் API என்பது Houdini API-களில் மிகவும் லட்சியமானது. இது முற்றிலும் புதிய லேஅவுட் அல்காரிதம்களை வரையறுக்க உங்களை அனுமதிக்கிறது, CSS-இன் உள்ளமைக்கப்பட்ட லேஅவுட் மாடல்களான Flexbox மற்றும் Grid-ஐ நீட்டிக்கிறது. இது உண்மையிலேயே தனித்துவமான மற்றும் புதுமையான லேஅவுட்களை உருவாக்குவதற்கான அற்புதமான சாத்தியங்களைத் திறக்கிறது.

முக்கிய குறிப்பு: லேஅவுட் API இன்னும் உருவாக்கத்தில் உள்ளது மற்றும் உலாவிகளில் பரவலாக ஆதரிக்கப்படவில்லை. எச்சரிக்கையுடன் பயன்படுத்தவும் மற்றும் முற்போக்கான மேம்பாட்டைக் கருத்தில் கொள்ளவும்.

லேஅவுட் API எப்படி வேலை செய்கிறது

  1. ஒரு லேஅவுட் ஃபங்ஷனை வரையறுக்கவும்: ஒரு layout ஃபங்ஷனை ஏற்றுமதி செய்யும் ஜாவாஸ்கிரிப்ட் மாட்யூலை எழுதுங்கள். இந்த ஃபங்ஷன் எலிமென்டின் குழந்தைகள், கட்டுப்பாடுகள் மற்றும் பிற லேஅவுட் தகவல்களை உள்ளீடாக எடுத்து, ஒவ்வொரு குழந்தையின் அளவு மற்றும் நிலையைத் திருப்பித் தருகிறது.
  2. வொர்க்லெட்டைப் பதிவு செய்யவும்: உங்கள் மாட்யூலைப் பதிவு செய்ய CSS.layoutWorklet.addModule('my-layout.js') பயன்படுத்தவும்.
  3. CSS-இல் லேஅவுட்டைப் பயன்படுத்தவும்: உங்கள் CSS-இல் display: layout(my-layout) பிராப்பர்ட்டியைப் பயன்படுத்தி உங்கள் தனிப்பயன் லேஅவுட்டைப் பயன்படுத்தவும்.

எடுத்துக்காட்டு: ஒரு எளிய வட்ட லேஅவுட்டை உருவாக்குதல் (கருத்தியல்)

ஒரு முழுமையான எடுத்துக்காட்டு சிக்கலானதாக இருந்தாலும், ஒரு வட்ட லேஅவுட்டை நீங்கள் எப்படி உருவாக்கலாம் என்பதற்கான ஒரு கருத்தியல் சுருக்கம் இங்கே:

// circle-layout.js (கருத்தியல் - எளிமைப்படுத்தப்பட்டது)
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; //உதாரணம் - குழந்தை அளவை அமைக்கவும்
        child.blockSize = 50;
        child.styleMap.set('position', 'absolute'); //முக்கியமானது: துல்லியமான நிலைப்படுத்தலுக்குத் தேவை
        child.styleMap.set('left', CSS.px(x + radius));
        child.styleMap.set('top', CSS.px(y + radius));
      });

    return {
      inlineSize: constraints.inlineSize, //கண்டெய்னரின் அளவை CSS-இலிருந்து வரும் கட்டுப்பாடுகளுக்கு அமைக்கவும்
      blockSize: constraints.blockSize,
      children: children
    };
  }
});

/* உங்கள் CSS கோப்பில் */
.circle-container {
  display: layout(circle-layout);
  --circle-radius: 100;
  width: 300px;
  height: 300px;
  position: relative; /* குழந்தைகளின் முழுமையான நிலைப்படுத்தலுக்குத் தேவை */
}

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

லேஅவுட் API-க்கான முக்கியக் கருத்தில் கொள்ள வேண்டியவை:

CSS Houdini-இன் நடைமுறைப் பயன்பாடுகள்

CSS Houdini புதுமையான மற்றும் செயல்திறன் மிக்க வலை அனுபவங்களை உருவாக்குவதற்கான பரந்த அளவிலான சாத்தியங்களைத் திறக்கிறது. இங்கே சில நடைமுறைப் பயன்பாடுகள்:

உலாவி ஆதரவு மற்றும் முற்போக்கான மேம்பாடு

CSS Houdini-க்கான உலாவி ஆதரவு இன்னும் வளர்ந்து வருகிறது. கஸ்டம் பிராப்பர்ட்டீஸ் மற்றும் டைப்டு OM போன்ற சில API-களுக்கு நல்ல ஆதரவு இருந்தாலும், லேஅவுட் API போன்றவை இன்னும் சோதனை நிலையில் உள்ளன.

Houdini-உடன் வேலை செய்யும்போது முற்போக்கான மேம்பாட்டு நுட்பங்களைப் பயன்படுத்துவது முக்கியம். இதன் பொருள்:

அம்ச ஆதரவைச் சரிபார்க்க நீங்கள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம்:


if ('paintWorklet' in CSS) {
  // பெயிண்ட் API ஆதரிக்கப்படுகிறது
  CSS.paintWorklet.addModule('my-paint-function.js');
} else {
  // பெயிண்ட் API ஆதரிக்கப்படவில்லை
  // ஒரு ஃபால்பேக்கை வழங்கவும்
  element.style.backgroundImage = 'url(fallback-image.png)';
}

CSS Houdini-உடன் தொடங்குதல்

CSS Houdini-இல் மூழ்கத் தயாரா? நீங்கள் தொடங்குவதற்கு உதவ சில ஆதாரங்கள் இங்கே:

CSS Houdini மற்றும் அணுகல்தன்மை

CSS Houdini-ஐச் செயல்படுத்தும்போது, அணுகல்தன்மைக்கு முதலிடம் கொடுக்க வேண்டும். பின்வருவனவற்றை மனதில் கொள்ளுங்கள்:

காட்சி அழகு ஒருபோதும் அணுகல்தன்மையை சமரசம் செய்யக்கூடாது என்பதை நினைவில் கொள்ளுங்கள். அனைத்து பயனர்களும், அவர்களின் திறன்களைப் பொருட்படுத்தாமல், உங்கள் வலைத்தளத்தை அணுகவும் பயன்படுத்தவும் முடியும் என்பதை உறுதிசெய்யவும்.

CSS மற்றும் Houdini-இன் எதிர்காலம்

CSS Houdini நாம் வலை ஸ்டைலிங்கை அணுகும் விதத்தில் ஒரு குறிப்பிடத்தக்க மாற்றத்தைக் குறிக்கிறது. CSS ரெண்டரிங் இன்ஜினுக்கு நேரடி அணுகலை வழங்குவதன் மூலம், Houdini டெவலப்பர்களுக்கு உண்மையான தனிப்பயன் மற்றும் செயல்திறன் மிக்க வலை அனுபவங்களை உருவாக்க அதிகாரம் அளிக்கிறது. சில API-கள் இன்னும் உருவாக்கத்தில் இருந்தாலும், Houdini-இன் சாத்தியம் மறுக்க முடியாதது. உலாவி ஆதரவு மேம்படும்போதும், மேலும் பல டெவலப்பர்கள் Houdini-ஐ ஏற்றுக்கொள்ளும்போதும், புதுமையான மற்றும் பார்வைக்கு பிரமிக்க வைக்கும் வலை வடிவமைப்புகளின் ஒரு புதிய அலையைக் காணலாம்.

முடிவுரை

CSS Houdini என்பது வலை ஸ்டைலிங்கிற்கான புதிய சாத்தியங்களைத் திறக்கும் ஒரு சக்திவாய்ந்த API-களின் தொகுப்பாகும். கஸ்டம் பிராப்பர்ட்டீஸ் மற்றும் வொர்க்லெட்டுகளில் தேர்ச்சி பெறுவதன் மூலம், CSS-உடன் என்னவெல்லாம் சாத்தியம் என்பதன் எல்லைகளைத் தாண்டும் டைனமிக், உயர்-செயல்திறன் வலை அனுபவங்களை நீங்கள் உருவாக்கலாம். Houdini-இன் சக்தியை ஏற்றுக்கொண்டு, வலையின் எதிர்காலத்தை உருவாக்கத் தொடங்குங்கள்!