CSS വ്യൂ ട്രാൻസിഷനുകളിൽ വൈദഗ്ദ്ധ്യം നേടാം: സ്യൂഡോ-എലമെന്റ് സ്റ്റൈലിംഗിനെക്കുറിച്ചുള്ള ആഴത്തിലുള്ള പഠനം

വെബ് ഡെവലപ്‌മെന്റിന്റെ എപ്പോഴും വികസിച്ചുകൊണ്ടിരിക്കുന്ന ഈ രംഗത്ത്, സുഗമവും ആകർഷകവുമായ ഉപയോക്തൃ അനുഭവം നൽകുക എന്നത് ഒരു സ്ഥിരം ലക്ഷ്യമാണ്. വർഷങ്ങളായി, വെബ്, നേറ്റീവ് ആപ്ലിക്കേഷനുകൾ തമ്മിലുള്ള അന്തരം കുറയ്ക്കാൻ ഡെവലപ്പർമാർ ശ്രമിച്ചുകൊണ്ടിരിക്കുകയാണ്, പ്രത്യേകിച്ചും പേജ് ട്രാൻസിഷനുകളുടെ കാര്യത്തിൽ. പരമ്പരാഗത വെബ് നാവിഗേഷൻ പലപ്പോഴും ഒരു പേജ് മുഴുവനായി റീലോഡ് ചെയ്യുന്നതിലേക്ക് നയിക്കുന്നു—ഇത് ഉപയോക്താവിന്റെ ശ്രദ്ധയെ താൽക്കാലികമായി തടസ്സപ്പെടുത്തുന്ന ഒരു ശൂന്യമായ വെള്ള സ്ക്രീൻ കാണിക്കുന്നു. സിംഗിൾ-പേജ് ആപ്ലിക്കേഷനുകൾ (SPAs) ഇത് ഒരു പരിധി വരെ ലഘൂകരിച്ചിട്ടുണ്ടെങ്കിലും, ഇഷ്ടാനുസൃതവും അർത്ഥവത്തായതുമായ ട്രാൻസിഷനുകൾ ഉണ്ടാക്കുന്നത് ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറികളെയും സങ്കീർണ്ണമായ സ്റ്റേറ്റ് മാനേജ്‌മെന്റിനെയും ആശ്രയിക്കുന്ന ഒരു പ്രയാസമേറിയ ജോലിയായി തുടർന്നു.

ഇവിടെയാണ് CSS വ്യൂ ട്രാൻസിഷൻസ് API കടന്നുവരുന്നത്. വെബിലെ UI മാറ്റങ്ങൾ കൈകാര്യം ചെയ്യുന്ന രീതിയെ മാറ്റിമറിക്കാൻ പോകുന്ന ഒരു വിപ്ലവകരമായ സാങ്കേതികവിദ്യയാണിത്. ഈ ശക്തമായ API, വ്യത്യസ്ത DOM സ്റ്റേറ്റുകൾക്കിടയിൽ ആനിമേഷൻ നൽകുന്നതിന് ലളിതവും എന്നാൽ വളരെ ഫ്ലെക്സിബിളുമായ ഒരു സംവിധാനം നൽകുന്നു, ഇത് ഉപയോക്താക്കൾ പ്രതീക്ഷിക്കുന്ന തരത്തിലുള്ള മിഴിവുള്ള, ആപ്പ് പോലുള്ള അനുഭവങ്ങൾ ഉണ്ടാക്കുന്നത് എന്നത്തേക്കാളും എളുപ്പമാക്കുന്നു. ഈ API-യുടെ ശക്തിയുടെ കാതൽ ഒരു കൂട്ടം പുതിയ CSS സ്യൂഡോ-എലമെന്റുകളാണ്. ഇവ നിങ്ങളുടെ സാധാരണ സെലക്ടറുകളല്ല; ഒരു ട്രാൻസിഷന്റെ ഓരോ ഘട്ടത്തിലും നിങ്ങൾക്ക് സൂക്ഷ്മമായ നിയന്ത്രണം നൽകാൻ ബ്രൗസർ സൃഷ്ടിക്കുന്ന ചലനാത്മകവും താൽക്കാലികവുമായ എലമെന്റുകളാണ് ഇവ. ഈ ഗൈഡ്, ഈ സ്യൂഡോ-എലമെന്റ് ട്രീയിലേക്ക് നിങ്ങളെ ആഴത്തിൽ കൊണ്ടുപോകും, ആഗോള പ്രേക്ഷകർക്കായി അതിശയകരവും മികച്ച പ്രകടനമുള്ളതും എല്ലാവർക്കും ഉപയോഗിക്കാൻ കഴിയുന്നതുമായ ആനിമേഷനുകൾ നിർമ്മിക്കുന്നതിന് ഓരോ ഘടകത്തെയും എങ്ങനെ സ്റ്റൈൽ ചെയ്യാമെന്ന് പര്യവേക്ഷണം ചെയ്യും.

ഒരു വ്യൂ ട്രാൻസിഷന്റെ ഘടന

നമുക്ക് ഒരു ട്രാൻസിഷൻ സ്റ്റൈൽ ചെയ്യുന്നതിന് മുമ്പ്, അത് പ്രവർത്തനക്ഷമമാകുമ്പോൾ എന്താണ് സംഭവിക്കുന്നതെന്ന് മനസ്സിലാക്കണം. നിങ്ങൾ ഒരു വ്യൂ ട്രാൻസിഷൻ ആരംഭിക്കുമ്പോൾ (ഉദാഹരണത്തിന്, document.startViewTransition() എന്ന് വിളിക്കുമ്പോൾ), ബ്രൗസർ ഒരു കൂട്ടം ഘട്ടങ്ങളിലൂടെ കടന്നുപോകുന്നു:

• പഴയ സ്റ്റേറ്റ് പിടിച്ചെടുക്കൽ: നിലവിലെ പേജിന്റെ സ്റ്റേറ്റിന്റെ ഒരു "സ്ക്രീൻഷോട്ട്" ബ്രൗസർ എടുക്കുന്നു.
• DOM അപ്‌ഡേറ്റ് ചെയ്യുക: നിങ്ങളുടെ കോഡ് പിന്നീട് DOM-ൽ മാറ്റങ്ങൾ വരുത്തുന്നു (ഉദാ. ഒരു പുതിയ വ്യൂവിലേക്ക് നാവിഗേറ്റ് ചെയ്യുക, എലമെന്റുകൾ ചേർക്കുകയോ നീക്കം ചെയ്യുകയോ ചെയ്യുക).
• പുതിയ സ്റ്റേറ്റ് പിടിച്ചെടുക്കൽ: DOM അപ്‌ഡേറ്റ് പൂർത്തിയായിക്കഴിഞ്ഞാൽ, ബ്രൗസർ പുതിയ സ്റ്റേറ്റിന്റെ ഒരു സ്ക്രീൻഷോട്ട് എടുക്കുന്നു.
• സ്യൂഡോ-എലമെന്റ് ട്രീ നിർമ്മിക്കുക: ബ്രൗസർ പിന്നീട് പേജിന്റെ ഓവർലേയിൽ സ്യൂഡോ-എലമെന്റുകളുടെ ഒരു താൽക്കാലിക ട്രീ നിർമ്മിക്കുന്നു. ഈ ട്രീയിൽ പഴയതും പുതിയതുമായ സ്റ്റേറ്റുകളുടെ പിടിച്ചെടുത്ത ചിത്രങ്ങൾ അടങ്ങിയിരിക്കുന്നു.
• ആനിമേറ്റ് ചെയ്യുക: ഈ സ്യൂഡോ-എലമെന്റുകളിൽ CSS ആനിമേഷനുകൾ പ്രയോഗിക്കുന്നു, ഇത് പഴയ സ്റ്റേറ്റിൽ നിന്ന് പുതിയതിലേക്ക് ഒരു സുഗമമായ മാറ്റം സൃഷ്ടിക്കുന്നു. ഡിഫോൾട്ടായി ഇത് ഒരു ലളിതമായ ക്രോസ്-ഫേഡ് ആണ്.
• ക്ലീനപ്പ്: ആനിമേഷനുകൾ പൂർത്തിയായിക്കഴിഞ്ഞാൽ, സ്യൂഡോ-എലമെന്റ് ട്രീ നീക്കംചെയ്യപ്പെടും, ഉപയോക്താവിന് പുതിയ, ലൈവ് DOM-മായി സംവദിക്കാൻ കഴിയും.

ഈ താൽക്കാലിക സ്യൂഡോ-എലമെന്റ് ട്രീയാണ് ഇഷ്ടാനുസൃതമാക്കലിന്റെ താക്കോൽ. ഒരു ഡിസൈൻ ടൂളിലെ ലെയറുകളുടെ ഒരു കൂട്ടമായി ഇതിനെ കരുതുക, അത് നിങ്ങളുടെ പേജിന് മുകളിൽ താൽക്കാലികമായി സ്ഥാപിച്ചിരിക്കുന്നു. ഈ ലെയറുകളിൽ നിങ്ങൾക്ക് പൂർണ്ണമായ CSS നിയന്ത്രണം ഉണ്ട്. നിങ്ങൾ പ്രവർത്തിക്കാൻ പോകുന്ന ഘടന ഇതാ:

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

ഈ ഓരോ സ്യൂഡോ-എലമെന്റുകളും എന്തിനെയാണ് പ്രതിനിധീകരിക്കുന്നതെന്ന് നമുക്ക് വിശദമായി പരിശോധിക്കാം.

സ്യൂഡോ-എലമെന്റുകളുടെ പ്രവർത്തനം

::view-transition: ഇതാണ് മുഴുവൻ ഘടനയുടെയും റൂട്ട്. ഇത് വ്യൂപോർട്ട് മുഴുവൻ നിറയുകയും പേജിലെ മറ്റെല്ലാ ഉള്ളടക്കത്തിനും മുകളിൽ സ്ഥിതിചെയ്യുകയും ചെയ്യുന്ന ഒരൊറ്റ എലമെന്റാണ്. ഇത് എല്ലാ ട്രാൻസിഷൻ ഗ്രൂപ്പുകൾക്കുമുള്ള കണ്ടെയ്‌നറായി പ്രവർത്തിക്കുന്നു, കൂടാതെ ട്രാൻസിഷന്റെ ദൈർഘ്യം അല്ലെങ്കിൽ ടൈമിംഗ് ഫംഗ്ഷൻ പോലുള്ള പൊതുവായ പ്രോപ്പർട്ടികൾ സജ്ജീകരിക്കുന്നതിനുള്ള മികച്ച ഒരിടമാണിത്.

::view-transition-group(*): ഓരോ വ്യത്യസ്ത ട്രാൻസിഷൻ എലമെന്റിനും (view-transition-name CSS പ്രോപ്പർട്ടി ഉപയോഗിച്ച് തിരിച്ചറിഞ്ഞത്), ഒരു ഗ്രൂപ്പ് സൃഷ്ടിക്കപ്പെടുന്നു. ഈ സ്യൂഡോ-എലമെന്റ് അതിന്റെ ഉള്ളടക്കത്തിന്റെ സ്ഥാനവും വലുപ്പവും ആനിമേറ്റ് ചെയ്യുന്നതിന് ഉത്തരവാദിയാണ്. സ്ക്രീനിന്റെ ഒരു വശത്ത് നിന്ന് മറ്റൊന്നിലേക്ക് നീങ്ങുന്ന ഒരു കാർഡ് നിങ്ങൾക്കുണ്ടെങ്കിൽ, യഥാർത്ഥത്തിൽ നീങ്ങുന്നത് ::view-transition-group ആണ്.

::view-transition-image-pair(*): ഗ്രൂപ്പിനുള്ളിൽ സ്ഥിതി ചെയ്യുന്ന ഈ എലമെന്റ്, പഴയതും പുതിയതുമായ വ്യൂകൾക്കായി ഒരു കണ്ടെയ്‌നറായും ക്ലിപ്പിംഗ് മാസ്കായും പ്രവർത്തിക്കുന്നു. ആനിമേഷൻ സമയത്ത് border-radius അല്ലെങ്കിൽ transform പോലുള്ള ഇഫക്റ്റുകൾ നിലനിർത്തുകയും ഡിഫോൾട്ട് ക്രോസ്-ഫേഡ് ആനിമേഷൻ കൈകാര്യം ചെയ്യുകയുമാണ് ഇതിന്റെ പ്രധാന പങ്ക്.

::view-transition-old(*): ഇത് എലമെന്റിന്റെ പഴയ സ്റ്റേറ്റിലെ (DOM മാറ്റത്തിന് മുമ്പ്) "സ്ക്രീൻഷോട്ട്" അല്ലെങ്കിൽ റെൻഡർ ചെയ്ത വ്യൂവിനെ പ്രതിനിധീകരിക്കുന്നു. ഡിഫോൾട്ടായി, ഇത് opacity: 1-ൽ നിന്ന് opacity: 0-ലേക്ക് ആനിമേറ്റ് ചെയ്യുന്നു.

::view-transition-new(*): ഇത് എലമെന്റിന്റെ പുതിയ സ്റ്റേറ്റിലെ (DOM മാറ്റത്തിന് ശേഷം) "സ്ക്രീൻഷോട്ട്" അല്ലെങ്കിൽ റെൻഡർ ചെയ്ത വ്യൂവിനെ പ്രതിനിധീകരിക്കുന്നു. ഡിഫോൾട്ടായി, ഇത് opacity: 0-ൽ നിന്ന് opacity: 1-ലേക്ക് ആനിമേറ്റ് ചെയ്യുന്നു.

റൂട്ട്: ::view-transition സ്യൂഡോ-എലമെന്റ് സ്റ്റൈൽ ചെയ്യൽ

::view-transition സ്യൂഡോ-എലമെന്റ് നിങ്ങളുടെ മുഴുവൻ ആനിമേഷനും വരയ്ക്കുന്ന ക്യാൻവാസാണ്. ടോപ്പ്-ലെവൽ കണ്ടെയ്‌നർ എന്ന നിലയിൽ, ട്രാൻസിഷനിൽ ആഗോളമായി പ്രയോഗിക്കേണ്ട പ്രോപ്പർട്ടികൾ നിർവചിക്കാൻ ഇത് അനുയോജ്യമായ സ്ഥലമാണ്. ഡിഫോൾട്ടായി, ബ്രൗസർ ഒരു കൂട്ടം ആനിമേഷനുകൾ നൽകുന്നു, എന്നാൽ നിങ്ങൾക്ക് അവ എളുപ്പത്തിൽ ഓവർറൈഡ് ചെയ്യാൻ കഴിയും.

ഉദാഹരണത്തിന്, ഡിഫോൾട്ട് ട്രാൻസിഷൻ 250 മില്ലിസെക്കൻഡ് നീണ്ടുനിൽക്കുന്ന ഒരു ക്രോസ്-ഫേഡ് ആണ്. നിങ്ങളുടെ സൈറ്റിലെ എല്ലാ ട്രാൻസിഷനുകൾക്കും ഇത് മാറ്റണമെങ്കിൽ, നിങ്ങൾക്ക് റൂട്ട് സ്യൂഡോ-എലമെന്റിനെ ടാർഗെറ്റുചെയ്യാം:

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

ഈ ലളിതമായ നിയമം ഇപ്പോൾ എല്ലാ ഡിഫോൾട്ട് പേജ് ഫേഡുകളും ഇരട്ടി സമയമെടുക്കാനും 'ease-in-out' കർവ് ഉപയോഗിക്കാനും കാരണമാകുന്നു, ഇത് അവയ്ക്ക് അല്പം വ്യത്യസ്തമായ അനുഭവം നൽകുന്നു. നിങ്ങൾക്ക് ഇവിടെ സങ്കീർണ്ണമായ ആനിമേഷനുകൾ പ്രയോഗിക്കാൻ കഴിയുമെങ്കിലും, പൊതുവായ ടൈമിംഗും ഈസിംഗും നിർവചിക്കുന്നതിനാണ് ഇത് സാധാരണയായി ഉപയോഗിക്കുന്നത്, കൂടുതൽ നിർദ്ദിഷ്ട സ്യൂഡോ-എലമെന്റുകളെ വിശദമായ ക്രമീകരണങ്ങൾ കൈകാര്യം ചെയ്യാൻ അനുവദിക്കുന്നു.

ഗ്രൂപ്പിംഗും പേരിടലും: `view-transition-name`-ന്റെ ശക്തി

പ്രത്യേകിച്ച് ഒന്നും ചെയ്യാതെ തന്നെ, വ്യൂ ട്രാൻസിഷൻ API മുഴുവൻ പേജിനും ഒരു ക്രോസ്-ഫേഡ് നൽകുന്നു. ഇത് റൂട്ടിനായുള്ള ഒരൊറ്റ സ്യൂഡോ-എലമെന്റ് ഗ്രൂപ്പാണ് കൈകാര്യം ചെയ്യുന്നത്. നിർദ്ദിഷ്ടവും വ്യക്തിഗതവുമായ എലമെന്റുകളെ സ്റ്റേറ്റുകൾക്കിടയിൽ മാറ്റാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോഴാണ് ഈ API-യുടെ യഥാർത്ഥ ശക്തി വെളിവാകുന്നത്. ഉദാഹരണത്തിന്, ഒരു ലിസ്റ്റ് പേജിലെ ഒരു ഉൽപ്പന്നത്തിന്റെ തമ്പ്നെയ്ൽ, ഒരു ഡീറ്റെയിൽ പേജിലെ പ്രധാന ഉൽപ്പന്ന ചിത്രത്തിന്റെ സ്ഥാനത്തേക്ക് സുഗമമായി വളരുകയും നീങ്ങുകയും ചെയ്യുന്നത് പോലെ.

വ്യത്യസ്ത DOM സ്റ്റേറ്റുകളിലെ രണ്ട് എലമെന്റുകൾ ആശയപരമായി ഒന്നുതന്നെയാണെന്ന് ബ്രൗസറിനോട് പറയാൻ, നിങ്ങൾ view-transition-name എന്ന CSS പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു. ഈ പ്രോപ്പർട്ടി ആരംഭിക്കുന്ന എലമെന്റിലും അവസാനിക്കുന്ന എലമെന്റിലും പ്രയോഗിക്കണം.

/* ലിസ്റ്റ് പേജ് CSS-ൽ */

.product-thumbnail {

  view-transition-name: product-image;

}

/* ഡീറ്റെയിൽ പേജ് CSS-ൽ */

.main-product-image {

  view-transition-name: product-image;

}

രണ്ട് എലമെന്റുകൾക്കും ഒരേ അദ്വിതീയ നാമം ('product-image' ഈ സാഹചര്യത്തിൽ) നൽകുന്നതിലൂടെ, നിങ്ങൾ ബ്രൗസറിന് നിർദ്ദേശം നൽകുന്നു: "പഴയ പേജ് ഫേഡ് ഔട്ട് ചെയ്ത് പുതിയ പേജ് ഫേഡ് ഇൻ ചെയ്യുന്നതിനു പകരം, ഈ നിർദ്ദിഷ്ട എലമെന്റിനായി ഒരു പ്രത്യേക ട്രാൻസിഷൻ സൃഷ്ടിക്കുക." ബ്രൗസർ ഇപ്പോൾ അതിന്റെ ആനിമേഷൻ റൂട്ട് ഫേഡിൽ നിന്ന് വേറിട്ട് കൈകാര്യം ചെയ്യാൻ ഒരു സമർപ്പിത ::view-transition-group(product-image) സൃഷ്ടിക്കും. ജനപ്രിയമായ "മോർഫിംഗ്" അല്ലെങ്കിൽ "ഷെയർഡ് എലമെന്റ്" ട്രാൻസിഷൻ ഇഫക്റ്റ് സാധ്യമാക്കുന്ന അടിസ്ഥാന ആശയം ഇതാണ്.

പ്രധാന കുറിപ്പ്: ഒരു ട്രാൻസിഷൻ സമയത്ത് ഏത് നിമിഷവും, ഒരു view-transition-name അദ്വിതീയമായിരിക്കണം. ഒരേ സമയം ഒരേ പേരുള്ള രണ്ട് ദൃശ്യമായ എലമെന്റുകൾ നിങ്ങൾക്ക് ഉണ്ടാകാൻ കഴിയില്ല.

ആഴത്തിലുള്ള സ്റ്റൈലിംഗ്: പ്രധാന സ്യൂഡോ-എലമെന്റുകൾ

നമ്മുടെ എലമെന്റുകൾക്ക് പേരിട്ടുകഴിഞ്ഞാൽ, ബ്രൗസർ അവയ്‌ക്കായി സൃഷ്‌ടിക്കുന്ന നിർദ്ദിഷ്‌ട സ്യൂഡോ-എലമെന്റുകൾ സ്‌റ്റൈൽ ചെയ്യുന്നതിലേക്ക് കടക്കാം. ഇവിടെയാണ് നിങ്ങൾക്ക് യഥാർത്ഥത്തിൽ ഇഷ്‌ടാനുസൃതവും ആകർഷകവുമായ ആനിമേഷനുകൾ സൃഷ്‌ടിക്കാൻ കഴിയുന്നത്.

`::view-transition-group(name)`: ചലിപ്പിക്കുന്ന ഘടകം

ഗ്രൂപ്പിന്റെ ഏക ഉത്തരവാദിത്തം പഴയ എലമെന്റിന്റെ വലുപ്പത്തിൽ നിന്നും സ്ഥാനത്തുനിന്നും പുതിയ എലമെന്റിന്റെ വലുപ്പത്തിലേക്കും സ്ഥാനത്തേക്കും മാറുക എന്നതാണ്. ഇതിൽ യഥാർത്ഥ ഉള്ളടക്കത്തിന്റെ രൂപം അടങ്ങിയിട്ടില്ല, അതിന്റെ ബൗണ്ടിംഗ് ബോക്സ് മാത്രം. ഇതിനെ ചലിക്കുന്ന ഒരു ഫ്രെയിമായി കരുതുക.

ഡിഫോൾട്ടായി, ബ്രൗസർ അതിന്റെ transform, width/height പ്രോപ്പർട്ടികൾ ആനിമേറ്റ് ചെയ്യുന്നു. വ്യത്യസ്ത ഇഫക്റ്റുകൾ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് ഇത് ഓവർറൈഡ് ചെയ്യാൻ കഴിയും. ഉദാഹരണത്തിന്, ഒരു വളഞ്ഞ പാതയിലൂടെ ആനിമേറ്റ് ചെയ്‌ത് നിങ്ങൾക്ക് അതിന്റെ ചലനത്തിന് ഒരു ആർക്ക് ചേർക്കാം, അല്ലെങ്കിൽ അതിന്റെ യാത്രയ്ക്കിടയിൽ അത് വലുതാക്കുകയും ചെറുതാക്കുകയും ചെയ്യാം.

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

ഈ ഉദാഹരണത്തിൽ, ഉൽപ്പന്ന ചിത്രത്തിന്റെ ചലനത്തിന് മാത്രമായി ഒരു പ്രത്യേക ഈസിംഗ് ഫംഗ്ഷൻ ഞങ്ങൾ പ്രയോഗിക്കുന്നു, ഇത് പേജിന്റെ മറ്റ് ഭാഗങ്ങളിലെ ഡിഫോൾട്ട് ഫേഡിനെ ബാധിക്കാതെ അതിനെ കൂടുതൽ ചലനാത്മകവും ഭൗതികവുമാക്കുന്നു.

`::view-transition-image-pair(name)`: ക്ലിപ്പറും ഫേഡറും

ചലിക്കുന്ന ഗ്രൂപ്പിനുള്ളിൽ, ഇമേജ്-പെയർ പഴയതും പുതിയതുമായ വ്യൂകൾ സൂക്ഷിക്കുന്നു. ഇത് ഒരു ക്ലിപ്പിംഗ് മാസ്കായി പ്രവർത്തിക്കുന്നു, അതിനാൽ നിങ്ങളുടെ എലമെന്റിന് ഒരു border-radius ഉണ്ടെങ്കിൽ, വലുപ്പത്തിലും സ്ഥാനത്തിലുമുള്ള ആനിമേഷനിലുടനീളം ഉള്ളടക്കം ആ റേഡിയസിൽ ക്ലിപ്പ് ചെയ്‌തിട്ടുണ്ടെന്ന് ഇമേജ്-പെയർ ഉറപ്പാക്കുന്നു. പഴയതും പുതിയതുമായ ഉള്ളടക്കങ്ങൾക്കിടയിലുള്ള ഡിഫോൾട്ട് ക്രോസ്-ഫേഡ് ക്രമീകരിക്കുക എന്നതാണ് ഇതിന്റെ മറ്റൊരു പ്രധാന ജോലി.

കാഴ്ചയിൽ സ്ഥിരത ഉറപ്പാക്കുന്നതിനോ അല്ലെങ്കിൽ കൂടുതൽ നൂതനമായ ഇഫക്റ്റുകൾ സൃഷ്ടിക്കുന്നതിനോ നിങ്ങൾ ഈ എലമെന്റ് സ്റ്റൈൽ ചെയ്യാൻ ആഗ്രഹിച്ചേക്കാം. പരിഗണിക്കേണ്ട ഒരു പ്രധാന പ്രോപ്പർട്ടിയാണ് isolation: isolate. നിങ്ങൾ ചിൽഡ്രനിൽ (പഴയതും പുതിയതും) നൂതനമായ mix-blend-mode ഇഫക്റ്റുകൾ ഉപയോഗിക്കാൻ പദ്ധതിയിടുകയാണെങ്കിൽ ഇത് നിർണായകമാണ്, കാരണം ഇത് ഒരു പുതിയ സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റ് സൃഷ്ടിക്കുകയും ബ്ലെൻഡിംഗ് ട്രാൻസിഷൻ ഗ്രൂപ്പിന് പുറത്തുള്ള എലമെന്റുകളെ ബാധിക്കുന്നത് തടയുകയും ചെയ്യുന്നു.

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)` ഉം `::view-transition-new(name)` ഉം: ഷോയിലെ താരങ്ങൾ

DOM മാറ്റത്തിന് മുമ്പും ശേഷവും നിങ്ങളുടെ എലമെന്റിന്റെ ദൃശ്യരൂപത്തെ പ്രതിനിധീകരിക്കുന്ന സ്യൂഡോ-എലമെന്റുകളാണിവ. ഇവിടെയാണ് നിങ്ങളുടെ മിക്ക ഇഷ്‌ടാനുസൃത ആനിമേഷൻ ജോലികളും നടക്കുന്നത്. ഡിഫോൾട്ടായി, ബ്രൗസർ opacity, mix-blend-mode എന്നിവ ഉപയോഗിച്ച് അവയിൽ ഒരു ലളിതമായ ക്രോസ്-ഫേഡ് ആനിമേഷൻ പ്രവർത്തിപ്പിക്കുന്നു. ഒരു ഇഷ്‌ടാനുസൃത ആനിമേഷൻ സൃഷ്‌ടിക്കുന്നതിന്, നിങ്ങൾ ആദ്യം ഡിഫോൾട്ട് ഒന്ന് ഓഫ് ചെയ്യണം.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

ഡിഫോൾട്ട് ആനിമേഷൻ പ്രവർത്തനരഹിതമാക്കിയാൽ, നിങ്ങൾക്ക് സ്വന്തമായി പ്രയോഗിക്കാൻ സ്വാതന്ത്ര്യമുണ്ട്. നമുക്ക് ചില സാധാരണ പാറ്റേണുകൾ പര്യവേക്ഷണം ചെയ്യാം.

ഇഷ്ടാനുസൃത ആനിമേഷൻ: സ്ലൈഡ്

ഒരു ക്രോസ്-ഫേഡിന് പകരം, ഒരു കണ്ടെയ്‌നറിന്റെ ഉള്ളടക്കം സ്ലൈഡ് ഇൻ ചെയ്യാം. ഉദാഹരണത്തിന്, ലേഖനങ്ങൾക്കിടയിൽ നാവിഗേറ്റ് ചെയ്യുമ്പോൾ, പുതിയ ലേഖനത്തിന്റെ ടെക്സ്റ്റ് വലതുവശത്ത് നിന്ന് സ്ലൈഡ് ഇൻ ചെയ്യണമെന്നും പഴയ ടെക്സ്റ്റ് ഇടതുവശത്തേക്ക് സ്ലൈഡ് ഔട്ട് ചെയ്യണമെന്നും ഞങ്ങൾ ആഗ്രഹിക്കുന്നു.

ആദ്യം, കീഫ്രെയിമുകൾ നിർവചിക്കുക:

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

ഇപ്പോൾ, 'article-content' എന്ന് പേരുള്ള എലമെന്റിനായി പഴയതും പുതിയതുമായ സ്യൂഡോ-എലമെന്റുകളിൽ ഈ ആനിമേഷനുകൾ പ്രയോഗിക്കുക.

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

ഇഷ്ടാനുസൃത ആനിമേഷൻ: 3D ഫ്ലിപ്പ്

കൂടുതൽ നാടകീയമായ ഒരു ഇഫക്റ്റിനായി, നിങ്ങൾക്ക് ഒരു 3D കാർഡ് ഫ്ലിപ്പ് സൃഷ്ടിക്കാൻ കഴിയും. ഇതിന് rotateY ഉപയോഗിച്ച് transform പ്രോപ്പർട്ടി ആനിമേറ്റ് ചെയ്യുകയും backface-visibility കൈകാര്യം ചെയ്യുകയും വേണം.

/* ഗ്രൂപ്പിന് ഒരു 3D കോൺടെക്സ്റ്റ് ആവശ്യമാണ് */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* ഇമേജ്-പെയറിനും 3D കോൺടെക്സ്റ്റ് നിലനിർത്തേണ്ടതുണ്ട് */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* പഴയ വ്യൂ 0 മുതൽ -180 ഡിഗ്രി വരെ ഫ്ലിപ്പ് ചെയ്യുന്നു */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* പുതിയ വ്യൂ 180 മുതൽ 0 ഡിഗ്രി വരെ ഫ്ലിപ്പ് ചെയ്യുന്നു */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

പ്രായോഗിക ഉദാഹരണങ്ങളും നൂതന സാങ്കേതിക വിദ്യകളും

സിദ്ധാന്തം ഉപയോഗപ്രദമാണ്, എന്നാൽ പ്രായോഗിക പ്രയോഗത്തിലൂടെയാണ് നമ്മൾ ശരിക്കും പഠിക്കുന്നത്. ചില സാധാരണ സാഹചര്യങ്ങളും വ്യൂ ട്രാൻസിഷൻ സ്യൂഡോ-എലമെന്റുകൾ ഉപയോഗിച്ച് അവ എങ്ങനെ പരിഹരിക്കാമെന്നും നമുക്ക് നോക്കാം.

ഉദാഹരണം: "മോർഫിംഗ്" കാർഡ് തമ്പ്നെയിൽ

ഇതൊരു ക്ലാസിക് ഷെയർഡ് എലമെന്റ് ട്രാൻസിഷനാണ്. ഉപയോക്തൃ പ്രൊഫൈലുകളുടെ ഒരു ഗാലറി സങ്കൽപ്പിക്കുക. ഓരോ പ്രൊഫൈലും ഒരു അവതാർ ഉള്ള ഒരു കാർഡാണ്. നിങ്ങൾ ഒരു കാർഡിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, അതേ അവതാർ മുകളിൽ വ്യക്തമായി പ്രദർശിപ്പിച്ചിരിക്കുന്ന ഒരു ഡീറ്റെയിൽ പേജിലേക്ക് നിങ്ങൾ നാവിഗേറ്റ് ചെയ്യുന്നു.

ഘട്ടം 1: പേരുകൾ നൽകുക

നിങ്ങളുടെ ഗാലറി പേജിൽ, അവതാർ ചിത്രത്തിന് ഒരു പേര് നൽകുക. ഓരോ കാർഡിനും പേര് അദ്വിതീയമായിരിക്കണം, ഉദാഹരണത്തിന്, ഉപയോക്താവിന്റെ ഐഡി അടിസ്ഥാനമാക്കി.

/* gallery-item.css-ൽ */

.card-avatar { view-transition-name: avatar-user-123; }

പ്രൊഫൈൽ ഡീറ്റെയിൽ പേജിൽ, വലിയ ഹെഡർ അവതാറിനും അതേ പേര് നൽകുക.

/* profile-page.css-ൽ */

.profile-header-avatar { view-transition-name: avatar-user-123; }

ഘട്ടം 2: ആനിമേഷൻ ഇഷ്ടാനുസൃതമാക്കുക

ഡിഫോൾട്ടായി, ബ്രൗസർ അവതാർ നീക്കുകയും സ്കെയിൽ ചെയ്യുകയും ചെയ്യും, എന്നാൽ അത് ഉള്ളടക്കം ക്രോസ്-ഫേഡ് ചെയ്യുകയും ചെയ്യും. ചിത്രം സമാനമാണെങ്കിൽ, ഈ ഫേഡ് അനാവശ്യമാണ്, ഇത് ഒരു ചെറിയ മിന്നലിന് കാരണമായേക്കാം. നമുക്ക് അത് പ്രവർത്തനരഹിതമാക്കാം.

/* ഇവിടെയുള്ള നക്ഷത്രം (*) ഏതെങ്കിലും പേരുള്ള ഗ്രൂപ്പിനുള്ള വൈൽഡ്കാർഡാണ് */

::view-transition-image-pair(*) {

  /* ഡിഫോൾട്ട് ഫേഡ് പ്രവർത്തനരഹിതമാക്കുക */

  animation-duration: 0s;

}

ഒരു നിമിഷം, നമ്മൾ ഫേഡ് പ്രവർത്തനരഹിതമാക്കിയാൽ, ഉള്ളടക്കം എങ്ങനെ മാറും? പഴയതും പുതിയതുമായ വ്യൂകൾ സമാനമായ ഷെയർഡ് എലമെന്റുകൾക്കായി, മുഴുവൻ ട്രാൻസിഷനും ഒരൊറ്റ വ്യൂ ഉപയോഗിക്കാൻ ബ്രൗസറിന് അറിയാം. `image-pair` അടിസ്ഥാനപരമായി ഒരൊറ്റ ചിത്രം മാത്രമേ കൈവശം വയ്ക്കുന്നുള്ളൂ, അതിനാൽ ഫേഡ് പ്രവർത്തനരഹിതമാക്കുന്നത് ഈ ഒപ്റ്റിമൈസേഷൻ വെളിപ്പെടുത്തുന്നു. ഉള്ളടക്കം യഥാർത്ഥത്തിൽ മാറുന്ന എലമെന്റുകൾക്കായി, ഡിഫോൾട്ട് ഫേഡിന് പകരം നിങ്ങൾക്ക് ഒരു ഇഷ്‌ടാനുസൃത ആനിമേഷൻ ആവശ്യമാണ്.

ആസ്പെക്റ്റ് റേഷ്യോ മാറ്റങ്ങൾ കൈകാര്യം ചെയ്യൽ

ഒരു ട്രാൻസിഷനിംഗ് എലമെന്റിന്റെ ആസ്പെക്റ്റ് റേഷ്യോ മാറുമ്പോൾ ഒരു സാധാരണ വെല്ലുവിളി ഉണ്ടാകുന്നു. ഉദാഹരണത്തിന്, ഒരു ലിസ്റ്റ് പേജിലെ 16:9 ലാൻഡ്‌സ്‌കേപ്പ് തമ്പ്നെയിൽ ഒരു ഡീറ്റെയിൽ പേജിലെ 1:1 സ്ക്വയർ അവതാറിലേക്ക് മാറിയേക്കാം. ബ്രൗസറിന്റെ ഡിഫോൾട്ട് സ്വഭാവം വീതിയും ഉയരവും സ്വതന്ത്രമായി ആനിമേറ്റ് ചെയ്യുക എന്നതാണ്, ഇത് ട്രാൻസിഷൻ സമയത്ത് ചിത്രം ഞെരുങ്ങിയോ വലിച്ചുനീട്ടിയോ കാണുന്നതിന് കാരണമാകുന്നു.

പരിഹാരം ലളിതമാണ്. വലുപ്പവും സ്ഥാനമാറ്റവും കൈകാര്യം ചെയ്യാൻ നമ്മൾ ::view-transition-group-നെ അനുവദിക്കുന്നു, എന്നാൽ അതിനുള്ളിലെ പഴയതും പുതിയതുമായ ചിത്രങ്ങളുടെ സ്റ്റൈലിംഗ് നമ്മൾ ഓവർറൈഡ് ചെയ്യുന്നു.

പഴയതും പുതിയതുമായ "സ്ക്രീൻഷോട്ടുകൾ" അവയുടെ കണ്ടെയ്‌നർ വികൃതമാക്കാതെ നിറയ്ക്കുക എന്നതാണ് ലക്ഷ്യം. അവയുടെ വീതിയും ഉയരവും 100% ആയി സജ്ജീകരിച്ച് ബ്രൗസറിന്റെ ഡിഫോൾട്ട് object-fit പ്രോപ്പർട്ടി (യഥാർത്ഥ എലമെന്റിൽ നിന്ന് പാരമ്പര്യമായി ലഭിച്ചത്) സ്കെയിലിംഗ് ശരിയായി കൈകാര്യം ചെയ്യാൻ അനുവദിച്ചുകൊണ്ട് നമുക്ക് ഇത് ചെയ്യാൻ കഴിയും.

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* കണ്ടെയ്‌നർ നിറച്ച് വികൃതമാകുന്നത് തടയുക */

  width: 100%;

  height: 100%;

  

  /* ഇഫക്റ്റ് വ്യക്തമായി കാണുന്നതിന് ഡിഫോൾട്ട് ക്രോസ്-ഫേഡ് ഓവർറൈഡ് ചെയ്യുക */

  animation: none;

}

ഈ CSS ഉപയോഗിച്ച്, `image-pair` അതിന്റെ ആസ്പെക്റ്റ് റേഷ്യോ സുഗമമായി ആനിമേറ്റ് ചെയ്യും, കൂടാതെ ഉള്ളിലെ ചിത്രങ്ങൾ അവയുടെ `object-fit` മൂല്യം അനുസരിച്ച് ശരിയായി ക്രോപ്പ് ചെയ്യുകയോ ലെറ്റർബോക്സ് ചെയ്യുകയോ ചെയ്യും. ഈ ശരിയാക്കിയ ജ്യാമിതിക്ക് മുകളിൽ നിങ്ങൾക്ക് ക്രോസ്-ഫേഡ് പോലുള്ള നിങ്ങളുടെ സ്വന്തം ഇഷ്ടാനുസൃത ആനിമേഷനുകൾ ചേർക്കാൻ കഴിയും.

ഡീബഗ്ഗിംഗും ബ്രൗസർ പിന്തുണയും

ഒരു സെക്കൻഡിന്റെ ഒരു ചെറിയ അംശത്തിൽ മാത്രം നിലനിൽക്കുന്ന എലമെന്റുകൾ സ്റ്റൈൽ ചെയ്യുന്നത് ബുദ്ധിമുട്ടാണ്. ഭാഗ്യവശാൽ, ആധുനിക ബ്രൗസറുകൾ ഇതിനായി മികച്ച ഡെവലപ്പർ ടൂളുകൾ നൽകുന്നു. Chrome അല്ലെങ്കിൽ Edge DevTools-ൽ, നിങ്ങൾക്ക് "Animations" പാനലിലേക്ക് പോകാം, നിങ്ങൾ ഒരു വ്യൂ ട്രാൻസിഷൻ ട്രിഗർ ചെയ്യുമ്പോൾ, നിങ്ങൾക്ക് അത് താൽക്കാലികമായി നിർത്താൻ കഴിയും. ആനിമേഷൻ താൽക്കാലികമായി നിർത്തിയ ശേഷം, DOM-ന്റെ മറ്റേതൊരു ഭാഗത്തെയും പോലെ `::view-transition` സ്യൂഡോ-എലമെന്റ് ട്രീ മുഴുവനായി പരിശോധിക്കാൻ നിങ്ങൾക്ക് "Elements" പാനൽ ഉപയോഗിക്കാം. പ്രയോഗിക്കുന്ന സ്റ്റൈലുകൾ നിങ്ങൾക്ക് കാണാനും നിങ്ങളുടെ ആനിമേഷനുകൾ മികച്ചതാക്കാൻ അവ തത്സമയം മാറ്റം വരുത്താനും കഴിയും.

2023-ന്റെ അവസാനത്തോടെ, വ്യൂ ട്രാൻസിഷൻസ് API ക്രോമിയം അടിസ്ഥാനമാക്കിയുള്ള ബ്രൗസറുകളിൽ (Chrome, Edge, Opera) പിന്തുണയ്ക്കുന്നു. Firefox, Safari എന്നിവയ്ക്കുള്ള നിർമ്മാണ പ്രവർത്തനങ്ങൾ പുരോഗമിക്കുകയാണ്. ഇത് പ്രോഗ്രസ്സീവ് എൻഹാൻസ്‌മെന്റിന് ഒരു മികച്ച ഉപാധിയാക്കുന്നു. പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകളുള്ള ഉപയോക്താക്കൾക്ക് സന്തോഷകരവും മെച്ചപ്പെട്ടതുമായ അനുഭവം ലഭിക്കുന്നു, അതേസമയം മറ്റ് ബ്രൗസറുകളിലെ ഉപയോക്താക്കൾക്ക് സാധാരണ, തൽക്ഷണ നാവിഗേഷൻ ലഭിക്കുന്നു. നിങ്ങൾക്ക് CSS-ൽ പിന്തുണ പരിശോധിക്കാൻ കഴിയും:

@supports (view-transition: none) {

  /* എല്ലാ വ്യൂ-ട്രാൻസിഷൻ സ്റ്റൈലുകളും ഇവിടെ വരുന്നു */

  ::view-transition-old(my-element) { ... }

}

ആഗോള ഉപയോക്താക്കൾക്കുള്ള മികച്ച സമ്പ്രദായങ്ങൾ

ആനിമേഷനുകൾ നടപ്പിലാക്കുമ്പോൾ, ലോകമെമ്പാടുമുള്ള വിവിധതരം ഉപയോക്താക്കളെയും ഉപകരണങ്ങളെയും പരിഗണിക്കേണ്ടത് അത്യാവശ്യമാണ്.

പ്രകടനം: ആനിമേഷനുകൾ വേഗതയേറിയതും സുഗമവുമായിരിക്കണം. ബ്രൗസറിന് പ്രോസസ്സ് ചെയ്യാൻ എളുപ്പമുള്ള CSS പ്രോപ്പർട്ടികൾ, പ്രധാനമായും transform, opacity എന്നിവ ആനിമേറ്റ് ചെയ്യുന്നതിൽ ശ്രദ്ധിക്കുക. width, height, അല്ലെങ്കിൽ margin പോലുള്ള പ്രോപ്പർട്ടികൾ ആനിമേറ്റ് ചെയ്യുന്നത് ഓരോ ഫ്രെയിമിലും ലേയൗട്ട് പുനർക്രമീകരണത്തിന് കാരണമാകും, ഇത് പ്രത്യേകിച്ച് കുറഞ്ഞ പവർ ഉള്ള ഉപകരണങ്ങളിൽ മോശം അനുഭവത്തിന് ഇടയാക്കും.

ലഭ്യത (Accessibility): ചില ഉപയോക്താക്കൾക്ക് ആനിമേഷനുകളിൽ നിന്ന് ചലനവുമായി ബന്ധപ്പെട്ട അസുഖങ്ങളോ അസ്വസ്ഥതകളോ അനുഭവപ്പെടാം. എല്ലാ പ്രധാന ഓപ്പറേറ്റിംഗ് സിസ്റ്റങ്ങളും ചലനം കുറയ്ക്കുന്നതിനുള്ള ഒരു ഉപയോക്തൃ മുൻഗണന നൽകുന്നു. നമ്മൾ ഇത് മാനിക്കണം. prefers-reduced-motion മീഡിയ ക്വറി ഈ ഉപയോക്താക്കൾക്കായി നിങ്ങളുടെ ആനിമേഷനുകൾ പ്രവർത്തനരഹിതമാക്കാനോ ലളിതമാക്കാനോ നിങ്ങളെ അനുവദിക്കുന്നു.

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* എല്ലാ ഇഷ്ടാനുസൃത ആനിമേഷനുകളും ഒഴിവാക്കി വേഗതയേറിയതും ലളിതവുമായ ഫേഡ് ഉപയോഗിക്കുക */

    animation: none !important;

  }

}

ഉപയോക്തൃ അനുഭവം (UX): നല്ല ട്രാൻസിഷനുകൾക്ക് ഒരു ലക്ഷ്യമുണ്ട്. അവ ഉപയോക്താവിന്റെ ശ്രദ്ധയെ നയിക്കുകയും UI-ൽ സംഭവിക്കുന്ന മാറ്റത്തെക്കുറിച്ച് സന്ദർഭം നൽകുകയും വേണം. വളരെ വേഗത കുറഞ്ഞ ഒരു ആനിമേഷൻ ആപ്ലിക്കേഷനെ മന്ദഗതിയിലാക്കും, അതേസമയം വളരെ ആകർഷകമായ ഒന്ന് ശ്രദ്ധ തിരിക്കുന്നതുമാകാം. 200ms-നും 500ms-നും ഇടയിലുള്ള ട്രാൻസിഷൻ ദൈർഘ്യം ലക്ഷ്യമിടുക. ആനിമേഷൻ കാണുന്നതിനേക്കാൾ കൂടുതൽ അനുഭവപ്പെടുക എന്നതാണ് ലക്ഷ്യം.

ഉപസംഹാരം: ഭാവി സുഗമമാണ്

CSS വ്യൂ ട്രാൻസിഷൻസ് API, പ്രത്യേകിച്ച് അതിന്റെ ശക്തമായ സ്യൂഡോ-എലമെന്റ് ട്രീ, വെബ് യൂസർ ഇന്റർഫേസുകൾക്ക് ഒരു വലിയ മുന്നേറ്റത്തെ പ്രതിനിധീകരിക്കുന്നു. ഇത് ഡെവലപ്പർമാർക്ക് നേറ്റീവ് ആപ്ലിക്കേഷനുകളുടെ മാത്രം പ്രത്യേകതയായിരുന്ന തരത്തിലുള്ള സുഗമവും സ്റ്റേറ്റ്ഫുൾ ആയതുമായ ട്രാൻസിഷനുകൾ സൃഷ്ടിക്കുന്നതിന് ഒരു നേറ്റീവ്, പെർഫോമന്റ്, ഉയർന്ന കസ്റ്റമൈസ് ചെയ്യാവുന്ന ടൂൾസെറ്റ് നൽകുന്നു. ::view-transition, ::view-transition-group, old/new ഇമേജ് ജോഡികളുടെ റോളുകൾ മനസ്സിലാക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് ലളിതമായ ഫേഡുകൾക്കപ്പുറം നീങ്ങാനും ഉപയോഗക്ഷമത വർദ്ധിപ്പിക്കുകയും ഉപയോക്താക്കളെ ആനന്ദിപ്പിക്കുകയും ചെയ്യുന്ന സങ്കീർണ്ണവും അർത്ഥവത്തായതുമായ ആനിമേഷനുകൾ ക്രമീകരിക്കാനും കഴിയും.

ബ്രൗസർ പിന്തുണ വികസിക്കുന്നതിനനുസരിച്ച്, ഈ API ആധുനിക ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പറുടെ ടൂൾകിറ്റിന്റെ ഒരു പ്രധാന ഭാഗമായി മാറും. അതിന്റെ കഴിവുകൾ ഉൾക്കൊള്ളുകയും പ്രകടനത്തിനും പ്രവേശനക്ഷമതയ്ക്കുമുള്ള മികച്ച സമ്പ്രദായങ്ങൾ പാലിക്കുകയും ചെയ്യുന്നതിലൂടെ, നമുക്ക് കൂടുതൽ പ്രവർത്തനക്ഷമമായതും മാത്രമല്ല, എല്ലായിടത്തും എല്ലാവർക്കും കൂടുതൽ മനോഹരവും അവബോധജന്യവുമായ ഒരു വെബ് നിർമ്മിക്കാൻ കഴിയും.