ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്

Posted on July 17, 2025July 17, 2025 by Rajesh Odayanchal

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

വെബ് ആപ്ലിക്കേഷനുകളുടെ സങ്കീർണ്ണത വർദ്ധിക്കുന്നതിനനുസരിച്ച്, കാര്യക്ഷമവും പുനരുപയോഗിക്കാവുന്നതുമായ സി‌എസ്‌എസ് കോഡ് എഴുതേണ്ടതിന്റെ ആവശ്യകത വർദ്ധിച്ചു. സി‌എസ്‌എസ് ഫ്രെയിംവർക്കുകൾ ഈ വെല്ലുവിളികളെ നേരിടാൻ സഹായിക്കുന്ന, മുൻകൂട്ടി നിർവചിച്ച ശൈലികളും ഘടകങ്ങളും നൽകുന്നു. ഇവ വികസന സമയം കുറയ്ക്കാനും ഡിസൈൻ കൺസിസ്റ്റൻസി ഉറപ്പാക്കാനും സഹായിക്കുന്നു. “യൂട്ടിലിറ്റി-ഫസ്റ്റ്” എന്ന സമീപനത്തിനും “വേഗതയേറിയ വികസനം” എന്നതിനും ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് നൽകുന്ന പ്രാധാന്യം, പരമ്പരാഗത സി‌എസ്‌എസ് രീതികളിലും നിലവിലുള്ള ഘടക-അധിഷ്ഠിത ഫ്രെയിംവർക്കുകളിലും ഉണ്ടായിരുന്ന പരിമിതികൾക്കും കാര്യക്ഷമതയില്ലായ്മകൾക്കും ഒരു നേരിട്ടുള്ള പ്രതികരണമായി ഈ ഫ്രെയിംവർക്ക് ഉയർന്നുവന്നു എന്ന് സൂചിപ്പിക്കുന്നു. ഇത് യൂസർ ഇന്റർഫേസ് (UI) വികസനത്തിൽ കൂടുതൽ സൂക്ഷ്മമായ നിയന്ത്രണവും വേഗതയേറിയ ആവർത്തനവും ആവശ്യപ്പെടുന്ന ഒരു വലിയ വ്യവസായ പ്രവണതയെയാണ് പ്രതിനിധീകരിക്കുന്നത്.

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

എന്താണ് ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്?

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ഒരു യൂട്ടിലിറ്റി-ഫസ്റ്റ് സി‌എസ്‌എസ് ഫ്രെയിംവർക്കാണ്. ഇത് ഡെവലപ്പർമാരെ അവരുടെ വെബ്‌സൈറ്റുകൾക്ക് സ്റ്റൈൽ നൽകുന്നതിന്, കോൺസൈസ് യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് നേരിട്ട് HTML-ൽ പ്രവർത്തിക്കാൻ അനുവദിക്കുന്നു. ഓരോ ക്ലാസും ഒരു പ്രത്യേക സി‌എസ്‌എസ് പ്രോപ്പർട്ടിക്ക് ഒരു ചെറിയ രൂപം നൽകുന്നു. ഉദാഹരണത്തിന്,

p-4 എന്നത് padding: 1rem; എന്നതിനെയും text-center എന്നത് text-align: center; എന്നതിനെയും സൂചിപ്പിക്കുന്നു.

പരമ്പരാഗത സി‌എസ്‌എസിൽ നിന്ന് വ്യത്യസ്തമായി, ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ഓരോ ഘടകത്തിനും കസ്റ്റം ശൈലികൾ എഴുതേണ്ടതിന്റെ ആവശ്യം ഇല്ലാതാക്കി വേഗതയേറിയ വികസനം പ്രോത്സാഹിപ്പിക്കുന്നു. ബൂട്ട്സ്ട്രാപ്പ് പോലുള്ള ഘടക-അധിഷ്ഠിത ഫ്രെയിംവർക്കുകൾ മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ (ബട്ടണുകൾ, നാവിഗേഷൻ ബാറുകൾ) നൽകുമ്പോൾ, ടെയിൽ‌വിൻഡ് താഴ്ന്ന തലത്തിലുള്ള യൂട്ടിലിറ്റി ക്ലാസുകൾ നൽകുന്നു, ഇത് ഡെവലപ്പർമാർക്ക് പൂർണ്ണമായ ഡിസൈൻ നിയന്ത്രണം നൽകുന്നു. “യൂട്ടിലിറ്റി-ഫസ്റ്റ്” എന്ന ഈ സമീപനം സി‌എസ്‌എസ് വികസനത്തിന്റെ അടിസ്ഥാനപരമായ ചിന്താ പ്രക്രിയയെ മാറ്റുന്നു. ഇത് “ഈ ഘടകം എന്താണ്?” എന്നതിൽ നിന്ന് “ഈ ഘടകത്തിന് എന്ത് ശൈലികളാണ് വേണ്ടത്?” എന്നതിലേക്ക് മാറുന്നു. ഈ സൂക്ഷ്മമായ നിയന്ത്രണം നിലവിലുള്ള ഫ്രെയിംവർക്കുകളുടെ “അഭിപ്രായങ്ങളോട് പോരാടേണ്ട” അവസ്ഥയെയും “ബൂട്ട്സ്ട്രാപ്പ് ആപ്പ് പോലെ തോന്നിക്കുന്ന” പ്രശ്നങ്ങളെയും നേരിട്ട് അഭിസംബോധന ചെയ്യുന്നു. ഇത് ഡെവലപ്പർമാർക്ക് സമാനതകളില്ലാത്ത ഡിസൈൻ സ്വാതന്ത്ര്യം നൽകുന്നു, കസ്റ്റം സി‌എസ്‌എസ് ഫയലുകൾ എഴുതേണ്ടതിന്റെ ആവശ്യം ഇല്ലാതാക്കുന്നു.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് HTML ഫയലുകൾ, ജാവാസ്ക്രിപ്റ്റ് ഘടകങ്ങൾ, മറ്റ് ടെംപ്ലേറ്റുകൾ എന്നിവയിൽ നിന്ന് ക്ലാസ് പേരുകൾ സ്കാൻ ചെയ്ത്, അനുബന്ധ ശൈലികൾ ഒരു സ്റ്റാറ്റിക് സി‌എസ്‌എസ് ഫയലിലേക്ക് സൃഷ്ടിച്ച് എഴുതുന്നു. ഇത് വേഗതയേറിയതും വഴക്കമുള്ളതും വിശ്വസനീയവുമായ ഒരു പരിഹാരമാണ്.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്, Preflight എന്ന പേരിൽ ഒരു കൂട്ടം അടിസ്ഥാന ശൈലികൾ ഉൾക്കൊള്ളുന്നു. വിവിധ ബ്രൗസറുകളിലുടനീളമുള്ള ശൈലിപരമായ പൊരുത്തക്കേടുകൾ പരിഹരിക്കുകയും സ്ഥിരമായ ഒരു അടിസ്ഥാനം നൽകുകയും ചെയ്യുക എന്നതാണ് ഇതിന്റെ ലക്ഷ്യം. ഇത് സാധാരണയായി ഉപയോഗിക്കുന്ന സി‌എസ്‌എസ് പ്രോപ്പർട്ടികൾക്ക് ഒരു സ്ഥിരമായ സ്റ്റാർട്ടിംഗ് പോയിന്റ് നൽകി ഡെവലപ്പർമാർക്ക് ഒരു ക്ലീൻ സ്ലേറ്റ് ഉറപ്പാക്കുന്നു.

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

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ ഉത്ഭവവും ചരിത്രവും

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

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

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ ചരിത്രത്തിലെ ഒരു പ്രധാന നാഴികക്കല്ലാണ് JIT (Just-In-Time) മോഡിന്റെ ആവിർഭാവം. ഇത് v2.1 പതിപ്പിന്റെ ഭാഗമായി 2021 ഏപ്രിൽ 5-ന് പുറത്തിറങ്ങി. JIT മോഡിന്റെ പ്രധാന സവിശേഷതകൾ താഴെ പറയുന്നവയാണ്:

മിന്നൽ വേഗതയുള്ള ബിൽഡ് ടൈംസ്: വലിയ സി‌എസ്‌എസ് ഫയലുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ വെബ്‌പാക്ക് പോലുള്ള ബിൽഡ് ടൂളുകൾക്ക് 30-45 സെക്കൻഡ് വരെ എടുത്തിരുന്നിടത്ത്, JIT മോഡ് വലിയ പ്രോജക്റ്റുകളെ ഏകദേശം 800ms-ൽ കംപൈൽ ചെയ്യാനും ഇൻക്രിമെന്റൽ റീബിൽഡുകൾ 3ms പോലെ വേഗത്തിലാക്കാനും സഹായിക്കുന്നു.
എല്ലാ വകഭേദങ്ങളും ഡിഫോൾട്ടായി പ്രവർത്തനക്ഷമം: ഫയൽ വലുപ്പം കാരണം സാധാരണയായി പ്രവർത്തനക്ഷമമല്ലാത്ത focus-visible, active, disabled പോലുള്ള വകഭേദങ്ങൾ JIT മോഡിൽ ഓൺ-ഡിമാൻഡ് ശൈലികൾ സൃഷ്ടിക്കുന്നതിനാൽ എളുപ്പത്തിൽ ഉപയോഗിക്കാം. ഇത് വകഭേദങ്ങൾ കോൺഫിഗർ ചെയ്യേണ്ടതിന്റെ ആവശ്യം ഇല്ലാതാക്കുന്നു.
കസ്റ്റം സി‌എസ്‌എസ് എഴുതാതെ തന്നെ ആർബിട്രറി ശൈലികൾ സൃഷ്ടിക്കാനുള്ള കഴിവ്: top-[-113px] പോലുള്ള അൾട്രാ-സ്പെസിഫിക് മൂല്യങ്ങൾ സ്ക്വയർ ബ്രാക്കറ്റ് നൊട്ടേഷൻ ഉപയോഗിച്ച് ഓൺ-ഡിമാൻഡ് യൂട്ടിലിറ്റികളായി സൃഷ്ടിക്കാൻ JIT മോഡ് അനുവദിക്കുന്നു.
ഡെവലപ്‌മെന്റിലും പ്രൊഡക്ഷനിലും ഒരേ സി‌എസ്‌എസ്: ശൈലികൾ ആവശ്യാനുസരണം സൃഷ്ടിക്കപ്പെടുന്നതിനാൽ, പ്രൊഡക്ഷനുവേണ്ടി ഉപയോഗിക്കാത്ത ശൈലികൾ നീക്കം ചെയ്യേണ്ട ആവശ്യമില്ല (PurgeCSS). ഇത് എല്ലാ പരിതസ്ഥിതികളിലും ഒരേ സി‌എസ്‌എസ് ഉറപ്പാക്കുന്നു.

JIT മോഡിന്റെ ആമുഖം, മുൻപത്തെ ടെയിൽ‌വിൻഡ് പതിപ്പുകളുടെ പ്രധാന പരിമിതികളെ, പ്രത്യേകിച്ച് ബിൽഡ് പ്രകടനത്തെയും വകഭേദങ്ങൾ വ്യക്തമായി കോൺഫിഗർ ചെയ്യേണ്ടതിന്റെ ആവശ്യകതയെയും നേരിട്ട് അഭിസംബോധന ചെയ്യുന്ന ഒരു നിർണായക പരിണാമപരമായ ചുവടുവെപ്പാണ്. എല്ലാ സാധ്യമായ ശൈലികളും മുൻകൂട്ടി സൃഷ്ടിക്കുന്നതിൽ നിന്ന് ആവശ്യാനുസരണം സൃഷ്ടിക്കുന്നതിലേക്കുള്ള ഈ മാറ്റം, ഡെവലപ്പർമാരുടെ പ്രതികരണങ്ങളോടുള്ള സജീവമായ പ്രതികരണത്തെയും ഡെവലപ്പർ അനുഭവവും പ്രകടനവും ഒപ്റ്റിമൈസ് ചെയ്യാനുള്ള പ്രതിബദ്ധതയെയും സൂചിപ്പിക്കുന്നു. JIT-ന് മുമ്പ്, ടെയിൽ‌വിൻഡ് ഉപയോഗിക്കാത്ത യൂട്ടിലിറ്റി ക്ലാസുകളും വകഭേദങ്ങളും ഉൾപ്പെടെയുള്ള ഒരു വലിയ സി‌എസ്‌എസ് ഫയൽ സൃഷ്ടിക്കുമായിരുന്നു. ഇത് കംപൈലേഷൻ സമയത്തെ മന്ദഗതിയിലാക്കുകയും (പ്രത്യേകിച്ച് വെബ്‌പാക്ക് പ്രോജക്റ്റുകളിൽ) വലിയ ഡെവലപ്‌മെന്റ് ബിൽഡുകൾക്ക് കാരണമാവുകയും ചെയ്യുമായിരുന്നു. JIT മോഡിന്റെ “ഓൺ-ഡിമാൻഡ് ജനറേഷൻ” ഈ പ്രശ്നം പരിഹരിച്ചു, ഇത് ഉൽപ്പാദന ബിൽഡുകളിൽ ഉപയോഗിക്കുന്ന ശൈലികൾ മാത്രം ഉൾപ്പെടുത്തുന്നു. ഇത് ഡെവലപ്‌മെന്റ് സമയത്ത് PurgeCSS-ന്റെ ആവശ്യം ഇല്ലാതാക്കുകയും വകഭേദങ്ങളുടെ കോൺഫിഗറേഷൻ ലളിതമാക്കുകയും ബിൽഡ് സമയം ഗണ്യമായി കുറയ്ക്കുകയും ചെയ്യുന്നു.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് v4.0 ഫ്രെയിംവർക്കിന്റെ ഒരു പുതിയ പതിപ്പാണ്, ഇത് പ്രകടനത്തിനും വഴക്കത്തിനും വേണ്ടി ഒപ്റ്റിമൈസ് ചെയ്തിരിക്കുന്നു. ഇത് വർഷങ്ങളായി പഠിച്ച പാഠങ്ങൾ ഉൾക്കൊണ്ട്, അടിമുടി മാറ്റിയെഴുതിയ (ground-up rewrite) ഒരു പുതിയ ഹൈ-പെർഫോമൻസ് എഞ്ചിനിലാണ് പ്രവർത്തിക്കുന്നത്. ഇതിലെ പ്രധാന മാറ്റങ്ങൾ താഴെ പറയുന്നവയാണ്:

വേഗത: v4.0-ൽ ഫുൾ ബിൽഡുകൾ 5x വരെ വേഗത്തിലാകുന്നു, ഇൻക്രിമെന്റൽ ബിൽഡുകൾ 100x-ൽ അധികം വേഗത്തിലാകുന്നു. ഇത് v3.4-നെ അപേക്ഷിച്ച് ഫുൾ റീബിൽഡുകൾ 3.5x വേഗത്തിലും ഇൻക്രിമെന്റൽ ബിൽഡുകൾ 8x വേഗത്തിലുമാണെന്ന് ബെഞ്ച്മാർക്കുകൾ കാണിക്കുന്നു.
ആധുനിക വെബിനായുള്ള രൂപകൽപ്പന: കാസ്കേഡ് ലെയറുകൾ, @property ഉപയോഗിച്ചുള്ള രജിസ്റ്റർ ചെയ്ത കസ്റ്റം പ്രോപ്പർട്ടികൾ, color-mix() പോലുള്ള ഏറ്റവും പുതിയ സി‌എസ്‌എസ് സവിശേഷതകൾ ഇത് പൂർണ്ണമായി പ്രയോജനപ്പെടുത്തുന്നു.
ലളിതമായ ഇൻസ്റ്റാളേഷൻ: കുറഞ്ഞ ഡിപൻഡൻസികളും സീറോ കോൺഫിഗറേഷനുമായി, സി‌എസ്‌എസ് ഫയലിൽ ഒരു സിംഗിൾ ലൈൻ കോഡ് മാത്രം മതി.
ഓട്ടോമാറ്റിക് കണ്ടന്റ് ഡിറ്റക്ഷൻ: v3.x-ലെ “അലോസരപ്പെടുത്തുന്ന content അറേ” കോൺഫിഗറേഷൻ ആവശ്യമില്ല; എല്ലാ ടെംപ്ലേറ്റ് ഫയലുകളും സ്വയമേവ കണ്ടെത്തുന്നു.
CSS-ഫസ്റ്റ് കോൺഫിഗറേഷൻ: tailwind.config.js ഫയലിന് പകരം @theme ഡയറക്റ്റീവ് ഉപയോഗിച്ച് സി‌എസ്‌എസ് ഫയലിൽ നേരിട്ട് കോൺഫിഗർ ചെയ്യാൻ സാധിക്കുന്നു.

v4.0-ന്റെ “അടിമുടി മാറ്റിയെഴുതൽ”, പ്രകടനം, ലളിതമായ കോൺഫിഗറേഷൻ, ആധുനിക സി‌എസ്‌എസ് സവിശേഷതകൾ എന്നിവയിലുള്ള ശ്രദ്ധ, വെബ് പ്ലാറ്റ്‌ഫോമിന്റെ കൂടുതൽ ആഴത്തിലുള്ളതും പ്രകടനക്ഷമവുമായ ഭാഗമായി മാറുന്നതിനുള്ള ടെയിൽ‌വിൻഡിന്റെ തന്ത്രപരമായ പരിണാമത്തെ സൂചിപ്പിക്കുന്നു. JavaScript-കേന്ദ്രീകൃത കോൺഫിഗറേഷനിൽ (tailwind.config.js) നിന്ന് CSS-ഫസ്റ്റ് (@theme) കോൺഫിഗറേഷനിലേക്കുള്ള ഈ മാറ്റം ഒരു പ്രധാന തത്ത്വചിന്താപരമായ മാറ്റമാണ്, ഇത് കൂടുതൽ തടസ്സമില്ലായ്മയും കൂടുതൽ നേറ്റീവ് അനുഭവവും ലക്ഷ്യമിടുന്നു. വെബ് പ്ലാറ്റ്‌ഫോം നിരന്തരം വികസിച്ചുകൊണ്ടിരിക്കുന്നു. v4.0-ന്റെ കാസ്കേഡ് ലെയറുകളും @property പോലുള്ള സവിശേഷതകളും സ്വീകരിക്കുന്നത്, പ്ലാറ്റ്‌ഫോമിന്റെ നേറ്റീവ് കഴിവുകൾ കൂടുതൽ നേരിട്ട് പ്രയോജനപ്പെടുത്തുന്നതിലേക്കുള്ള ഒരു നീക്കത്തെ സൂചിപ്പിക്കുന്നു.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് വെബ് ഡിസൈനിംഗിന്റെ രീതിയെ മാറ്റിമറിച്ചു, യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനം വെബ് ഡെവലപ്‌മെന്റ് കമ്മ്യൂണിറ്റിയിൽ വ്യാപകമായി സ്വീകരിക്കപ്പെട്ടു. GitHub-ൽ 8,000-ത്തിലധികം സ്റ്റാറുകൾ, 1,100-ലധികം അംഗങ്ങളുള്ള സ്ലാക്ക് കമ്മ്യൂണിറ്റി, 10,000-ത്തിലധികം ട്വിറ്റർ ഫോളോവേഴ്‌സ്, 700,000-ത്തോളം npm ഇൻസ്റ്റാളേഷനുകൾ എന്നിവ ആദ്യ വർഷത്തിനുള്ളിൽ തന്നെ നേടി.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ പ്രധാന സവിശേഷതകൾ

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് നിരവധി സവിശേഷതകൾ വാഗ്ദാനം ചെയ്യുന്നു, ഇത് ആധുനിക വെബ് വികസനത്തിൽ അതിനെ ഒരു ശക്തമായ ഉപകരണമാക്കി മാറ്റുന്നു.

വേഗതയേറിയതും കാര്യക്ഷമവുമായ വികസനം

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനം ഡെവലപ്പർമാരെ ഓരോ ഘടകത്തിനും കസ്റ്റം സി‌എസ്‌എസ് എഴുതാതെ തന്നെ വേഗത്തിൽ സ്റ്റൈൽ ചെയ്യാൻ അനുവദിക്കുന്നു. ഇത് പ്രോട്ടോടൈപ്പിംഗിനും വെബ്സൈറ്റുകൾ നിർമ്മിക്കുന്നതിനും ആവശ്യമായ സമയം ഗണ്യമായി കുറയ്ക്കുന്നു. ഈ കാര്യക്ഷമത ഡെവലപ്പർമാരെ ഡിസൈൻ മാറ്റങ്ങൾ വരുത്തുന്നതിന് ബാഹ്യ സി‌എസ്‌എസ് ഫയലുകൾ മാറ്റാതെ തന്നെ യൂട്ടിലിറ്റി ക്ലാസുകൾ ചേർക്കുകയോ നീക്കം ചെയ്യുകയോ ചെയ്താൽ മതിയാകും.

അതിരുകളില്ലാത്ത കസ്റ്റമൈസേഷൻ സാധ്യതകൾ

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ഒരു tailwind.config.js ഫയൽ വഴി ഉയർന്ന തലത്തിൽ കസ്റ്റമൈസ് ചെയ്യാവുന്നതാണ്. നിറങ്ങൾ, സ്പേസിംഗ്, ബ്രേക്ക്പോയിന്റുകൾ, ഫോണ്ടുകൾ എന്നിവയുൾപ്പെടെ എല്ലാം നിങ്ങളുടെ ആവശ്യങ്ങൾക്കനുസരിച്ച് ക്രമീകരിക്കാൻ കഴിയും. ഇത് ഒരു പ്രത്യേക തീം ഇല്ലാതെ തന്നെ ഓരോ പ്രോജക്റ്റിനും തനതായ രൂപം നൽകാൻ സഹായിക്കുന്നു. ടെയിൽ‌വിൻഡിന്റെ ഈ “അതിരുകളില്ലാത്ത കസ്റ്റമൈസേഷൻ” എന്നത്, ബൂട്ട്സ്ട്രാപ്പ് പോലുള്ള ഘടക-അധിഷ്ഠിത ഫ്രെയിംവർക്കുകളോടുള്ള “അഭിപ്രായമുള്ള” അല്ലെങ്കിൽ “കസ്റ്റമൈസ് ചെയ്യാൻ ബുദ്ധിമുട്ടുള്ള” വിമർശനങ്ങളെ നേരിട്ട് പ്രതിരോധിക്കുന്ന ഒരു ബോധപൂർവമായ രൂപകൽപ്പനയാണ്. ഈ വഴക്കം ഒരു പ്രധാന വ്യത്യാസമാണ്, കൂടാതെ തനതായ ബ്രാൻഡിംഗ് ആവശ്യമുള്ള പ്രോജക്റ്റുകളിൽ ഇത് വ്യാപകമായി സ്വീകരിക്കപ്പെടാനുള്ള ഒരു പ്രധാന കാരണവുമാണ്.

മൊബൈൽ-ഫസ്റ്റ് റെസ്പോൺസീവ് ഡിസൈൻ

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് മൊബൈൽ-ഫസ്റ്റ് സമീപനത്തെ പിന്തുണയ്ക്കുന്നു. ഇത് ബിൽറ്റ്-ഇൻ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് വിവിധ സ്ക്രീൻ വലുപ്പങ്ങളിലേക്ക് തടസ്സമില്ലാതെ മാറുന്ന റെസ്പോൺസീവ് ലേഔട്ടുകൾ നിർമ്മിക്കുന്നത് ലളിതമാക്കുന്നു. ഡെവലപ്പർമാർക്ക് മീഡിയ ക്വറികൾ എഴുതാതെ തന്നെ ബ്രേക്ക്പോയിന്റുകൾ ഉപയോഗിച്ച് HTML-ൽ നേരിട്ട് റെസ്പോൺസീവ് ശൈലികൾ പ്രയോഗിക്കാൻ കഴിയും.

പർജ്സി‌എസ്‌എസ് ഉപയോഗിച്ചുള്ള കോഡ് ഒപ്റ്റിമൈസേഷൻ

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് PurgeCSS പോലുള്ള ടൂളുകളുമായി സംയോജിപ്പിച്ചിരിക്കുന്നു, ഇത് ഉപയോഗിക്കാത്ത സി‌എസ്‌എസ് ശൈലികൾ സ്വയമേവ നീക്കംചെയ്യുന്നു. ഇത് അന്തിമ സി‌എസ്‌എസ് ഫയലിന്റെ വലുപ്പം കുറയ്ക്കുകയും വെബ്സൈറ്റിന്റെ പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.

PurgeCSS (അല്ലെങ്കിൽ പുതിയ പതിപ്പുകളിലെ JIT മോഡ്) സംയോജിപ്പിക്കുന്നത്, യൂട്ടിലിറ്റി-ഫസ്റ്റ് ഫ്രെയിംവർക്കിൽ ഉണ്ടാകാൻ സാധ്യതയുള്ള “സി‌എസ്‌എസ് ബ്ലോട്ട്” കുറയ്ക്കുന്നതിന് നിർണായകമാണ്. ഈ സവിശേഷത ഒരു സാധ്യതയുള്ള പോരായ്മയെ (വലിയ പ്രാരംഭ സി‌എസ്‌എസ്) ഒരു പ്രധാന നേട്ടമാക്കി (ചെറിയ ഉൽപ്പാദന സി‌എസ്‌എസ്) മാറ്റുന്നു, ഇത് വെബ്സൈറ്റിന്റെ പ്രകടനത്തെയും സെർച്ച് എഞ്ചിൻ ഒപ്റ്റിമൈസേഷനെയും നേരിട്ട് സ്വാധീനിക്കുന്നു.

ഗ്രാനുലാർ കൺട്രോളും യൂട്ടിലിറ്റി ക്ലാസുകളുടെ വ്യാപ്തിയും

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ഡിസൈനിന്റെ ഓരോ വശത്തും ആറ്റോമിക് തലത്തിൽ നിയന്ത്രണം നൽകുന്നു. ഇത് ലേഔട്ട്, സ്പേസിംഗ്, ടൈപ്പോഗ്രഫി, പശ്ചാത്തലങ്ങൾ, ബോർഡറുകൾ, ഷാഡോകൾ, ട്രാൻസിഷനുകൾ, ട്രാൻസ്ഫോമുകൾ, ആനിമേഷനുകൾ, ഇന്ററാക്റ്റിവിറ്റി, ഫിൽട്ടറുകൾ എന്നിവയുൾപ്പെടെ നിരവധി യൂട്ടിലിറ്റി ക്ലാസുകൾ നൽകുന്നു.

ലേഔട്ട്, സ്പേസിംഗ്, ടൈപ്പോഗ്രഫി: display, position, overflow, z-index, padding, margin, space-between, font-size, font-weight, text-align, line-height, letter-spacing തുടങ്ങിയവയ്ക്കുള്ള യൂട്ടിലിറ്റികൾ.
ഫ്ലെക്സ്ബോക്സ്, ഗ്രിഡ് സിസ്റ്റങ്ങൾ: ഫ്ലെക്സ് ഡയറക്ഷൻ, ഫ്ലെക്സ് റാപ്പ്, ഫ്ലെക്സ് ഗ്രോ, ഫ്ലെക്സ് ഷ്രിങ്ക്, ഓർഡർ, ഗ്രിഡ് ടെംപ്ലേറ്റ് കോളങ്ങൾ/വരികൾ, ഗ്രിഡ് ഗ്യാപ്പ് തുടങ്ങിയവയ്ക്കുള്ള ക്ലാസുകൾ.
ബാക്ക്ഗ്രൗണ്ടുകൾ, ബോർഡറുകൾ, ഷാഡോകൾ: പശ്ചാത്തല ചിത്രങ്ങൾ, നിറങ്ങൾ, ഗ്രേഡിയന്റുകൾ, ബോർഡർ വീതി, നിറം, ബോർഡർ റേഡിയസ്, ബോക്സ് ഷാഡോ, ഒപാസിറ്റി തുടങ്ങിയവ നിയന്ത്രിക്കാൻ.
ട്രാൻസിഷനുകൾ, ട്രാൻസ്ഫോമുകൾ, ആനിമേഷനുകൾ: UI ഘടകങ്ങളിൽ സുഗമമായ ട്രാൻസിഷനുകളും ആനിമേഷനുകളും ചേർക്കാൻ.
ഇന്ററാക്റ്റിവിറ്റി, ഫിൽട്ടറുകൾ: കഴ്സർ ശൈലി, പോയിന്റർ ഇവന്റുകൾ, ബ്ലർ, ബ്രൈറ്റ്നെസ്, കോൺട്രാസ്റ്റ് പോലുള്ള ഫിൽട്ടർ ഇഫക്റ്റുകൾ.

ഡയറക്റ്റീവുകളും ബിൽഡ്-ടൈം ഫംഗ്ഷനുകളും (@apply, @theme, @import, etc.)

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് പ്രോജക്റ്റുകളിൽ പ്രത്യേക പ്രവർത്തനക്ഷമത വാഗ്ദാനം ചെയ്യുന്ന കസ്റ്റം @-റൂളുകളാണ് ഡയറക്റ്റീവുകൾ.

@import: സി‌എസ്‌എസ് ഫയലുകൾ ഇൻലൈൻ ഇറക്കുമതി ചെയ്യാൻ.
@theme: പ്രോജക്റ്റിന്റെ കസ്റ്റം ഡിസൈൻ ടോക്കണുകൾ (ഫോണ്ടുകൾ, നിറങ്ങൾ, ബ്രേക്ക്പോയിന്റുകൾ) നിർവചിക്കാൻ.
@apply: നിലവിലുള്ള യൂട്ടിലിറ്റി ക്ലാസുകൾ നിങ്ങളുടെ സ്വന്തം കസ്റ്റം സി‌എസ്‌എസിലേക്ക് ഇൻലൈൻ ചെയ്യാൻ. ഇത് മൂന്നാം കക്ഷി ലൈബ്രറികളിലെ ശൈലികൾ ഓവർറൈഡ് ചെയ്യേണ്ടിവരുമ്പോൾ ഉപയോഗപ്രദമാണ്.
@utility, @variant, @custom-variant, @source, @reference എന്നിവയും ലഭ്യമാണ്.

@apply, @theme, @import പോലുള്ള ഡയറക്റ്റീവുകളുടെ ലഭ്യത, യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനമാണ് പ്രാഥമികമെങ്കിലും, പരമ്പരാഗത സി‌എസ്‌എസ് മാതൃകകളോ കൂടുതൽ അബ്സ്ട്രാക്റ്റഡ് ഡിസൈൻ ടോക്കണുകളോ ആവശ്യമായ സാഹചര്യങ്ങൾ ഇപ്പോഴുമുണ്ടെന്ന് ടെയിൽ‌വിൻഡ് തിരിച്ചറിയുന്നുവെന്ന് കാണിക്കുന്നു. ഈ വഴക്കം ഡെവലപ്പർമാരെ ആവശ്യമുള്ളപ്പോൾ “യൂട്ടിലിറ്റി-മാത്രം” എന്ന പരിമിതിയിൽ നിന്ന് പുറത്തുകടക്കാൻ അനുവദിക്കുന്നു, ഇത് അറ്റോമിക് സ്റ്റൈലിംഗും കൂടുതൽ പരമ്പരാഗത സി‌എസ്‌എസ് ആർക്കിടെക്ചറും തമ്മിലുള്ള വിടവ് നികത്തുന്നു. @apply പോലുള്ളവ, HTML-ന്റെ ദൈർഘ്യം കുറയ്ക്കുന്നതിനോ നിലവിലുള്ള സി‌എസ്‌എസുമായി സംയോജിപ്പിക്കുന്നതിനോ ഒരു മാർഗ്ഗം നൽകുന്നു. @theme ഡിസൈൻ സിസ്റ്റം വേരിയബിളുകളെ കേന്ദ്രീകരിക്കുന്നു, ഇത് കസ്റ്റമൈസേഷൻ കൂടുതൽ കൈകാര്യം ചെയ്യാവുന്നതും സ്ഥിരതയുള്ളതുമാക്കുന്നു.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിലെ വകഭേദങ്ങൾ

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിൽ, വകഭേദങ്ങൾ ഒരു ക്ലാസ് നാമത്തിന്റെ തുടക്കത്തിൽ ചേർത്ത്, വ്യത്യസ്ത അവസ്ഥകളിലോ സാഹചര്യങ്ങളിലോ യൂട്ടിലിറ്റി ക്ലാസുകൾ വ്യവസ്ഥാപിതമായി പ്രയോഗിക്കാൻ ഉപയോഗിക്കുന്നു. പരമ്പരാഗത സി‌എസ്‌എസിൽ ഒരു ക്ലാസിന് വ്യത്യസ്ത അവസ്ഥകളിൽ വ്യത്യസ്ത ശൈലികൾ ഉണ്ടാകുമെങ്കിൽ, ടെയിൽ‌വിൻഡ് ഡിഫോൾട്ട് അവസ്ഥകൾക്കും വ്യവസ്ഥാപിത അവസ്ഥകൾക്കുമായി പ്രത്യേക ക്ലാസുകൾ ഉപയോഗിക്കുന്നു. ഉദാഹരണത്തിന്,

hover:bg-sky-700 എന്നത് ഹോവർ ചെയ്യുമ്പോൾ മാത്രമേ bg-sky-700 എന്ന ബാക്ക്ഗ്രൗണ്ട് കളർ പ്രയോഗിക്കൂ.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് വിവിധതരം വകഭേദങ്ങൾ ഉൾക്കൊള്ളുന്നു, അവ ഘടകങ്ങളുടെ ഇന്ററാക്ടീവ് അല്ലെങ്കിൽ ഘടനാപരമായ അവസ്ഥകൾ, വ്യൂപോർട്ട് സ്വഭാവസവിശേഷതകൾ, ബ്രൗസർ ഫീച്ചർ പിന്തുണ, HTML ആട്രിബ്യൂട്ടുകൾ എന്നിവയെ അടിസ്ഥാനമാക്കി ശൈലികൾ പ്രയോഗിക്കാൻ സഹായിക്കുന്നു.

സ്യൂഡോ-ക്ലാസുകൾ:
- :hover, :focus, :active: ഉപയോക്താവ് ഹോവർ ചെയ്യുമ്പോൾ, ഫോക്കസ് ചെയ്യുമ്പോൾ, അല്ലെങ്കിൽ അമർത്തുമ്പോൾ ഘടകങ്ങൾക്ക് സ്റ്റൈൽ നൽകാൻ.
- :first, :last, :odd, :even: ഒരു പാരന്റ് ഘടകത്തിനുള്ളിലെ ഒരു ചൈൽഡിന്റെ സ്ഥാനത്തെ അടിസ്ഥാനമാക്കി സ്റ്റൈൽ ചെയ്യാൻ.
- :has(), :not(): സ്യൂഡോ-ക്ലാസുകൾ, ഡാറ്റാ ആട്രിബ്യൂട്ടുകൾ, അല്ലെങ്കിൽ എലമെന്റ് സെലക്ടറുകൾ എന്നിവയെ അടിസ്ഥാനമാക്കി ഒരു ഘടകത്തിന്റെ സ്റ്റൈലിംഗിൽ വ്യത്യാസം വരുത്താൻ.
- group-*, peer-*: പാരന്റ് അല്ലെങ്കിൽ സഹോദര ഘടകങ്ങളുടെ അവസ്ഥയെ അടിസ്ഥാനമാക്കി ചൈൽഡ് ഘടകങ്ങൾക്ക് സ്റ്റൈൽ നൽകാൻ.
സ്യൂഡോ-എലമെന്റുകൾ: ::before, ::after, ::placeholder, ::selection, ::file, ::marker, ::first-line, ::first-letter, ::backdrop എന്നിവയ്ക്ക് സ്റ്റൈൽ നൽകാൻ.
മീഡിയ, ഫീച്ചർ ക്വറികൾ:
- റെസ്പോൺസീവ് ബ്രേക്ക്പോയിന്റുകൾ (sm, md, lg, xl, 2xl): വിവിധ വ്യൂപോർട്ട് വീതികളിൽ ശൈലികൾ പ്രയോഗിക്കാൻ.
- ഡാർക്ക് മോഡ് (dark): ഉപയോക്താവിന്റെ ഇഷ്ടപ്പെട്ട കളർ സ്കീം അനുസരിച്ച് ശൈലികൾ പ്രയോഗിക്കാൻ.
- prefers-reduced-motion (motion-reduce, motion-safe), prefers-contrast, forced-colors, inverted-colors, pointer, orientation, scripting, print, @supports (supports-[...], not-supports-[...]), @starting-style എന്നിവയും ഉൾപ്പെടുന്നു.
ആട്രിബ്യൂട്ട് സെലക്ടറുകൾ: ARIA സ്റ്റേറ്റുകൾ (aria-*), ഡാറ്റാ ആട്രിബ്യൂട്ടുകൾ (data-*), RTL/LTR പിന്തുണ (rtl, ltr), open സ്റ്റേറ്റ്, inert എലമെന്റുകൾ എന്നിവയെ അടിസ്ഥാനമാക്കി ശൈലികൾ പ്രയോഗിക്കാൻ.
ചൈൽഡ് സെലക്ടറുകൾ: * (ഡയറക്റ്റ് ചൈൽഡുകൾക്ക്), ** (എല്ലാ ഡിസെൻഡന്റുകൾക്കും) എന്നിവ ഉപയോഗിച്ച് ശൈലികൾ പ്രയോഗിക്കാൻ.

ടെയിൽ‌വിൻഡ് കൂടുതൽ നിർദ്ദിഷ്ട അല്ലെങ്കിൽ പുനരുപയോഗിക്കാവുന്ന സാഹചര്യങ്ങൾക്കായി കസ്റ്റം വകഭേദങ്ങൾ നിർമ്മിക്കാൻ അനുവദിക്കുന്നു. സ്ക്വയർ ബ്രാക്കറ്റ് നൊട്ടേഷൻ ഉപയോഗിച്ച് HTML-ൽ നേരിട്ട് കസ്റ്റം സെലക്ടർ വകഭേദങ്ങൾ എഴുതാം (

[&.is-dragging]:cursor-grabbing) അല്ലെങ്കിൽ @custom-variant ഡയറക്റ്റീവ് ഉപയോഗിച്ച് CSS-ൽ പുനരുപയോഗിക്കാവുന്ന കസ്റ്റം വകഭേദങ്ങൾ നിർവചിക്കാം.

tailwind-variants പോലുള്ള ലൈബ്രറികൾ ടൈപ്പ്-സേഫ്റ്റിയും കോൺഫ്ലിക്റ്റ് മെർജിംഗും വാഗ്ദാനം ചെയ്യുന്നു.

വകഭേദങ്ങൾ ഒരുമിച്ച് ഉപയോഗിക്കാൻ കഴിയും (stacking), ഇത് കൂടുതൽ നിർദ്ദിഷ്ട സാഹചര്യങ്ങളെ ലക്ഷ്യമിടാൻ സഹായിക്കുന്നു. ഉദാഹരണത്തിന്, dark:md:hover:bg-fuchsia-600 എന്നത് ഡാർക്ക് മോഡിൽ, മീഡിയം ബ്രേക്ക്പോയിന്റിൽ, ഹോവർ ചെയ്യുമ്പോൾ ഒരു പശ്ചാത്തല നിറം പ്രയോഗിക്കുന്നു. ടെയിൽ‌വിൻഡ് വകഭേദങ്ങളുടെ വിപുലവും സ്റ്റാക്ക് ചെയ്യാവുന്നതുമായ സ്വഭാവം അതിന്റെ യൂട്ടിലിറ്റി-ഫസ്റ്റ് തത്ത്വചിന്തയുടെ നേരിട്ടുള്ള ഫലമാണ്. ഇത് ഡെവലപ്പർമാരെ സങ്കീർണ്ണമായ കണ്ടീഷണൽ സ്റ്റൈലിംഗ് HTML-ൽ നേരിട്ട് പ്രകടിപ്പിക്കാൻ അനുവദിക്കുന്നു, ഇത് സി‌എസ്‌എസ് ലോജിക് ഘടക മാർക്കപ്പിനോട് അടുപ്പിക്കുന്നു. ഇത് സ്റ്റൈലിംഗ് ക്രമീകരണങ്ങൾക്കായി HTML, സി‌എസ്‌എസ് ഫയലുകൾക്കിടയിൽ മാറേണ്ടതിന്റെ ആവശ്യം കുറയ്ക്കുന്നു, ഇത് വേഗതയേറിയ ആവർത്തനത്തിന് കാരണമാകുന്നു, എന്നാൽ HTML-ന്റെ ദൈർഘ്യം വർദ്ധിപ്പിക്കാനും സാധ്യതയുണ്ട്.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ ഗുണങ്ങളും ദോഷങ്ങളും

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് വെബ് വികസനത്തിന് നിരവധി നേട്ടങ്ങൾ നൽകുമ്പോൾ, ചില പോരായ്മകളും ഇതിനുണ്ട്.

ഗുണങ്ങൾ

വേഗതയേറിയ പ്രോട്ടോടൈപ്പിംഗും വികസനവും: യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനം, കസ്റ്റം സി‌എസ്‌എസ് എഴുതേണ്ടതിന്റെ ആവശ്യം ഇല്ലാതാക്കി, ഡിസൈനുകൾ വേഗത്തിൽ നിർമ്മിക്കാൻ സഹായിക്കുന്നു. ഇത് പ്രോട്ടോടൈപ്പിംഗിന് വളരെ മികച്ചതാണ്.
കോഡ് ക്ലീൻലിനസും പരിപാലനക്ഷമതയും: യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുന്നത് പ്രോജക്റ്റിലുടനീളം സ്ഥിരമായ ഡിസൈൻ പ്രോത്സാഹിപ്പിക്കുന്നു, ഇത് പരിപാലനം എളുപ്പമാക്കുന്നു. ഓരോ യൂട്ടിലിറ്റി ക്ലാസും ഒരു കാര്യം മാത്രം ചെയ്യുന്നതിനാൽ, ഡീബഗ്ഗിംഗ് എളുപ്പമാണ്.
ഡിസൈൻ കൺസിസ്റ്റൻസിയും ബ്രാൻഡ് ഐഡന്റിറ്റിയും: ടെയിൽ‌വിൻഡിന്റെ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഒരു സ്ഥിരമായ ഡിസൈൻ സിസ്റ്റം നടപ്പിലാക്കാൻ സഹായിക്കുന്നു, ഇത് പ്രോജക്റ്റിലുടനീളം ഡിസൈൻ സ്ഥിരത ഉറപ്പാക്കുന്നു. ഇത് ഒരു ബ്രാൻഡിന് തനതായ ദൃശ്യാനുഭവം നൽകാൻ സഹായിക്കുന്നു.
ഒപ്റ്റിമൈസ് ചെയ്ത ഫയൽ വലുപ്പം: PurgeCSS (അല്ലെങ്കിൽ JIT മോഡ്) ഉപയോഗിച്ച് ഉപയോഗിക്കാത്ത ശൈലികൾ നീക്കംചെയ്യുന്നതിലൂടെ, അന്തിമ സി‌എസ്‌എസ് ഫയൽ വലുപ്പം ചെറുതും ഒപ്റ്റിമൈസ് ചെയ്തതുമായിരിക്കും, ഇത് വെബ്സൈറ്റിന്റെ പ്രകടനം മെച്ചപ്പെടുത്തുന്നു.

ദോഷങ്ങൾ

പഠന വക്രം: ടെയിൽ‌വിൻഡിന്റെ വിപുലമായ യൂട്ടിലിറ്റി ക്ലാസുകളും കോൺഫിഗറേഷൻ ഓപ്ഷനുകളും പുതിയ ഉപയോക്താക്കൾക്ക് ഒരു പഠന വക്രത ഉണ്ടാക്കിയേക്കാം.
HTML ഫയലുകളിലെ ക്ലാസുകളുടെ ആധിക്യം (“ക്ലാസ് സൂപ്പ്”): യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനം HTML-ൽ ധാരാളം ക്ലാസുകൾ ഉപയോഗിക്കാൻ ഇടയാക്കും, ഇത് HTML ഫയലുകൾ വലുതും വായിക്കാൻ ബുദ്ധിമുട്ടുള്ളതുമാക്കും. ഇത് “ക്ലാസ് സൂപ്പ്” എന്ന് വിശേഷിപ്പിക്കപ്പെടുന്നു. “ബ്ലോട്ടഡ് HTML” എന്ന വിമർശനം ടെയിൽ‌വിൻഡിന്റെ യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനത്തിന്റെ നേരിട്ടുള്ളതും ഒഴിവാക്കാനാവാത്തതുമായ ഫലമാണ്. HTML-ൽ ശൈലികൾ നിലനിർത്തുന്നതിലൂടെ ഇത് സൂക്ഷ്മമായ നിയന്ത്രണവും വേഗതയേറിയ വികസനവും നൽകുമ്പോൾ, HTML-ന്റെ വായനാക്ഷമതയെ ഇത് ത്യജിക്കുന്നു.
കോഡ് ഡ്യൂപ്ലിക്കേഷൻ സാധ്യത: യൂട്ടിലിറ്റി ക്ലാസുകൾ പുനരുപയോഗിക്കാവുന്ന ഘടകങ്ങളായി സംയോജിപ്പിക്കാതെ നേരിട്ട് ഉപയോഗിക്കുമ്പോൾ, ഒരേ ശൈലികൾ പലയിടത്തും ആവർത്തിക്കാൻ സാധ്യതയുണ്ട്.
സിന്റാക്സ് ഹൈലൈറ്റിംഗിന്റെയും എക്സ്പ്രസ്സീവ്നെസ്സിന്റെയും വെല്ലുവിളികൾ: ടെയിൽ‌വിൻഡ് ക്ലാസ് പേരുകൾ സാധാരണയായി സ്ട്രിംഗുകളായി മാത്രം പ്രദർശിപ്പിക്കപ്പെടുന്നു, ഇത് സിന്റാക്സ് ഹൈലൈറ്റിംഗ് ഇല്ലാത്തതിനാൽ വായിക്കാൻ ബുദ്ധിമുട്ടാണ്. ചുരുക്കപ്പേരുകൾ പൂർണ്ണ സി‌എസ്‌എസ് പ്രോപ്പർട്ടികളേക്കാൾ കുറഞ്ഞ വിവരണാത്മകമാണ്.
@apply ഡയറക്റ്റീവിനെക്കുറിച്ചുള്ള വിമർശനങ്ങൾ: @apply ഡയറക്റ്റീവ് ടെയിൽ‌വിൻഡിന്റെ പ്രധാന തത്വങ്ങൾക്ക് വിരുദ്ധമാണെന്നും ഒരു “പ്രയോജനമില്ലാത്ത അബ്സ്ട്രാക്ഷൻ” ആണെന്നും വിമർശിക്കപ്പെടുന്നു. ഇത് കസ്റ്റം സി‌എസ്‌എസ് ഫയലിന്റെ ആവശ്യകത നിലനിർത്തുകയും സാധാരണ സി‌എസ്‌എസ് ക്ലാസുകളുടെ ഒരു മിനിഫൈഡ് പതിപ്പ് എഴുതുന്നതിന് തുല്യമാവുകയും ചെയ്യുന്നു. @apply നെക്കുറിച്ചുള്ള ചർച്ചകൾ ഈ സംഘർഷത്തെ കൂടുതൽ വ്യക്തമാക്കുന്നു: ഇത് ദൈർഘ്യം കുറയ്ക്കാനുള്ള ഒരു ശ്രമമാണ്, എന്നാൽ വിമർശകർ ഇത് പ്രധാന തത്ത്വചിന്തയെ ദുർബലപ്പെടുത്തുന്നു എന്ന് വാദിക്കുന്നു, ഇത് രൂപകൽപ്പനയിലെ ഒരു വിട്ടുവീഴ്ചയെ വെളിപ്പെടുത്തുന്നു.

മറ്റ് സി‌എസ്‌എസ് ഫ്രെയിംവർക്കുകളുമായുള്ള താരതമ്യം

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്, ബൂട്ട്സ്ട്രാപ്പ്, ബുൾമ എന്നിവയെല്ലാം വെബ് UI വികസനം ലളിതമാക്കാൻ ലക്ഷ്യമിടുന്നു, എന്നാൽ ഓരോന്നിനും അടിസ്ഥാനപരമായി വ്യത്യസ്തമായ സമീപനങ്ങളുണ്ട്.

ബൂട്ട്സ്ട്രാപ്പ്: ഘടക-അധിഷ്ഠിത ഫ്രെയിംവർക്കാണ്, ഇത് മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങളും UI കിറ്റുകളും നൽകുന്നു. ഇത് വേഗത്തിൽ ഒരു UI പ്രവർത്തനക്ഷമമാക്കാൻ സഹായിക്കുന്നു, എന്നാൽ കസ്റ്റമൈസേഷൻ സങ്കീർണ്ണമാക്കാം.
ബുൾമ: സാസ്, ഫ്ലെക്സ്ബോക്സ് സിസ്റ്റം എന്നിവയിൽ നിർമ്മിച്ച ഒരു ഫ്രീ, ഓപ്പൺ സോഴ്സ് സി‌എസ്‌എസ് ഫ്രെയിംവർക്കാണ്. ഇത് ബൂട്ട്സ്ട്രാപ്പിന് സമാനമായി മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ നൽകുന്നു, എന്നാൽ കൂടുതൽ മൊഡ്യൂലാർ ഘടനയും കസ്റ്റമൈസേഷൻ വഴക്കവും വാഗ്ദാനം ചെയ്യുന്നു. ഇതിന് ജാവാസ്ക്രിപ്റ്റ് ഘടകങ്ങൾ ഉൾപ്പെടുന്നില്ല.
ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്: ഒരു യൂട്ടിലിറ്റി-ഫസ്റ്റ് ഫ്രെയിംവർക്കാണ്, ഇത് മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങളോ UI കിറ്റുകളോ നൽകുന്നില്ല. പകരം, ഡെവലപ്പർമാർക്ക് എല്ലാ ഘടകങ്ങളും ലേഔട്ടുകളും ആദ്യം മുതൽ നിർമ്മിക്കാൻ ആവശ്യമായ ടൂളുകൾ നൽകുന്നു. ഇത് ഡിസൈൻ നിയന്ത്രണത്തിൽ ഉയർന്ന വഴക്കം നൽകുന്നു.

താഴെ പറയുന്ന പട്ടിക, ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്, ബൂട്ട്സ്ട്രാപ്പ്, ബുൾമ എന്നിവയുടെ പ്രധാന സവിശേഷതകളെ താരതമ്യം ചെയ്യുന്നു:

സവിശേഷത	ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്	ബൂട്ട്സ്ട്രാപ്പ്	ബുൾമ
പ്രധാന സമീപനം	യൂട്ടിലിറ്റി-ഫസ്റ്റ്; HTML-ൽ നേരിട്ട് സ്റ്റൈലിംഗ്	ഘടക-അധിഷ്ഠിത; മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ	ഘടക-അധിഷ്ഠിത; മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ
കസ്റ്റമൈസേഷൻ	`tailwind.config.js` വഴി ഉയർന്ന തലത്തിൽ കസ്റ്റമൈസ് ചെയ്യാവുന്നത്; പൂർണ്ണ ഡിസൈൻ സ്വാതന്ത്ര്യം	ഡിഫോൾട്ട് സ്റ്റൈലുകൾ ഓവർറൈഡ് ചെയ്യേണ്ടി വരുന്നു; വലിയ പ്രോജക്റ്റുകളിൽ ബുദ്ധിമുട്ടാകാം	സാസ് വഴി നല്ല വഴക്കം; ബൂട്ട്സ്ട്രാപ്പിനേക്കാൾ കൂടുതൽ നിയന്ത്രണം
മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ/UI കിറ്റുകൾ	ഇല്ല	ഉണ്ട്	ഉണ്ട്
സാധാരണ ഫയൽ വലുപ്പം (ഒപ്റ്റിമൈസ് ചെയ്തത്)	ചെറുത് (~27KB)	വലുത് (~300KB)	വലുത്
പഠന വക്രം	കൂടുതൽ (യൂട്ടിലിറ്റി ക്ലാസുകൾ പഠിക്കണം)	മിതമായത്	മിതമായത് (ബൂട്ട്സ്ട്രാപ്പ് പശ്ചാത്തലമുള്ളവർക്ക് എളുപ്പം)
ഡിസൈൻ നിയന്ത്രണം	ഉയർന്നത്	പരിമിതം (അഭിപ്രായമുള്ളത്)	മിതമായത്
JS/jQuery ഉൾപ്പെടുന്നു	ഇല്ല	ഉണ്ട്	ഇല്ല (സി‌എസ്‌എസ് മാത്രം)

ഈ താരതമ്യം ടെയിൽ‌വിൻഡിന്റെ അതുല്യമായ സ്ഥാനത്തെ വ്യക്തമാക്കുന്നു. ഇത് കസ്റ്റം ഡിസൈനുകൾക്കും ഡിസൈൻ സിസ്റ്റങ്ങൾക്കും ഉയർന്ന വഴക്കം നൽകുന്നു, അതേസമയം പ്രകടനത്തിനായി ഫയൽ വലുപ്പം ഒപ്റ്റിമൈസ് ചെയ്യുന്നു. മറ്റ് ഫ്രെയിംവർക്കുകൾ വേഗതയേറിയ സജ്ജീകരണത്തിന് മുൻഗണന നൽകുമ്പോൾ, ടെയിൽ‌വിൻഡ് ഡെവലപ്പർമാർക്ക് അവരുടെ ഡിസൈനുകളിൽ പൂർണ്ണ നിയന്ത്രണം നൽകുന്നു, ഇത് “ബൂട്ട്സ്ട്രാപ്പ് ആപ്പ് പോലെ” തോന്നിക്കുന്ന പ്രശ്നം ഒഴിവാക്കുന്നു.

കമ്മ്യൂണിറ്റിയും വിഭവങ്ങളും

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന് ശക്തമായ ഒരു കമ്മ്യൂണിറ്റി പിന്തുണയുണ്ട്, ഇത് നിരവധി പ്ലഗിനുകൾ, ടൂളുകൾ, ലൈബ്രറികൾ എന്നിവ വാഗ്ദാനം ചെയ്യുന്നു. ഈ സഹായകരമായ അന്തരീക്ഷം “പഠന വക്രം” എന്ന പോരായ്മയെ നേരിട്ട് അഭിസംബോധന ചെയ്യുന്നു , കൂടാതെ ഫ്രെയിംവർക്കിന്റെ കഴിവുകൾ അതിന്റെ പ്രധാന യൂട്ടിലിറ്റി ക്ലാസുകൾക്കപ്പുറത്തേക്ക് വ്യാപിപ്പിക്കുകയും ചെയ്യുന്നു.

UI ഘടക ലൈബ്രറികൾ: Flowbite (52+ സൗജന്യവും പ്രീമിയം പ്ലഗിനുകളും) , Tailwind UI (600+ ഔദ്യോഗിക UI ഘടകങ്ങൾ) , Headless UI (സ്റ്റൈലില്ലാത്തതും ആക്സസ് ചെയ്യാവുന്നതുമായ UI ഘടകങ്ങൾ).
ഡിസൈൻ ടൂളുകൾ: Figma, Sketch, Adobe XD എന്നിവയ്ക്കുള്ള ഡിസൈൻ സിസ്റ്റങ്ങൾ.
സഹായക ടൂളുകൾ: Tailwind CSS Cheat Sheet, CSS to Tailwind CSS Converter, Tailwind CSS Shades Generator, Tailwind CSS Gradient Generator.
ഇന്റഗ്രേഷൻ ടൂളുകൾ: Gatsby, Vite, WordPress, Next.js, React, Vue.js, Svelte, Nuxt, Remix, Angular എന്നിവയുമായുള്ള ഇന്റഗ്രേഷനുകൾ.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ഉപയോഗിച്ച് ഡിസൈൻ സിസ്റ്റങ്ങൾ നിർമ്മിക്കുന്നത് എളുപ്പമാണ്. Figma, Sketch, Adobe XD എന്നിവയ്ക്കുള്ള ഡിസൈൻ കിറ്റുകൾ ഇത് വാഗ്ദാനം ചെയ്യുന്നു, ഇത് UI പ്രോട്ടോടൈപ്പിംഗ് വേഗത്തിലാക്കുന്നു.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന് ഒരു സജീവ കമ്മ്യൂണിറ്റിയുണ്ട്, ഇത് ചോദ്യോത്തരങ്ങൾ, ഗൈഡുകൾ, ട്യൂട്ടോറിയലുകൾ, ഷോക്കേസ് പ്രോജക്റ്റുകൾ എന്നിവ നൽകുന്നു. ഇത് പഠന വക്രതയെ ലഘൂകരിക്കാൻ സഹായിക്കുന്നു. സമഗ്രമായ ഡോക്യുമെന്റേഷൻ, ചീറ്റ് ഷീറ്റുകൾ, കൺവെർട്ടറുകൾ എന്നിവ പഠന വക്രതയെ ലഘൂകരിക്കാൻ നേരിട്ട് സഹായിക്കുന്നു. Flowbite, Tailwind UI പോലുള്ള ലൈബ്രറികൾ, ടെയിൽ‌വിൻഡിന്റെ പ്രധാന തത്ത്വചിന്തയിൽ ഒഴിവാക്കിയിരുന്ന “മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ” ഫലപ്രദമായി നൽകുന്നു. ഇത് ഡെവലപ്പർമാർക്ക് രണ്ട് ലോകങ്ങളിലെയും നേട്ടങ്ങൾ ലഭിക്കുന്നു എന്ന് ഉറപ്പാക്കുന്നു: കസ്റ്റം ഡിസൈനുകൾക്ക് സൂക്ഷ്മമായ നിയന്ത്രണവും സാധാരണ UI പാറ്റേണുകൾക്ക് തയ്യാറായ ഘടകങ്ങളും.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ആധുനിക വെബ് ഡെവലപ്‌മെന്റിൽ ഒരു പ്രധാന ശക്തിയായി തുടരും. JIT മോഡിന്റെയും v4.0-ന്റെ പുതിയ എഞ്ചിന്റെയും ആവിർഭാവം അതിന്റെ പ്രകടനം, ഉപയോഗക്ഷമത, വെബ് പ്ലാറ്റ്‌ഫോമുമായുള്ള സംയോജനം എന്നിവ മെച്ചപ്പെടുത്തിയിട്ടുണ്ട്. ഇത് കൂടുതൽ കാര്യക്ഷമവും വഴക്കമുള്ളതുമായ സി‌എസ്‌എസ് വികസനത്തിനുള്ള വ്യവസായത്തിന്റെ ആവശ്യകതയെ പ്രതിഫലിക്കുന്നു.

വിവിധ പ്രോജക്റ്റ് ആവശ്യകതകൾക്ക് ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് എത്രത്തോളം അനുയോജ്യമാണ് എന്നതിനെക്കുറിച്ചുള്ള ശുപാർശകൾ താഴെ നൽകുന്നു:

അനുയോജ്യമായ സാഹചര്യങ്ങൾ:

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

പരിഗണനകൾ:

ചെറിയ പ്രോജക്റ്റുകൾ അല്ലെങ്കിൽ ലളിതമായ UI-കൾ: വളരെ ലളിതമായ UI-കൾക്ക്, പിക്കോ സി‌എസ്‌എസ് പോലുള്ള ക്ലാസ്ലെസ് ഫ്രെയിംവർക്കുകൾ കൂടുതൽ ലളിതമായ സജ്ജീകരണം നൽകിയേക്കാം.
പഠന വക്രം: ടീമിലെ അംഗങ്ങൾക്ക് ടെയിൽ‌വിൻഡിൽ പരിചയമില്ലെങ്കിൽ, പഠനത്തിനായി സമയം നീക്കിവെക്കേണ്ടത് അത്യാവശ്യമാണ്.
HTML വെർബോസിറ്റി: വലിയ HTML ഫയലുകൾ അല്ലെങ്കിൽ “ക്ലാസ് സൂപ്പ്” ഒരു ആശങ്കയാണെങ്കിൽ, ഘടക-അധിഷ്ഠിത സമീപനങ്ങളോ @apply ഡയറക്റ്റീവിന്റെ വിവേകപൂർണ്ണമായ ഉപയോഗമോ പരിഗണിക്കാവുന്നതാണ്.

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

CSS3 new attribute selectors

Posted on November 19, 2012 by Rajesh Odayanchal

CSS3 introduce 3 new selectors for the sub-string or matching attributes. they are [att^=val], [att$=val] and [att*=val]. these selectors coming under Sub-string Matching Attribute Selectors section.

[att^=val]

This is the “begins with” selector. This selector allows for the selection of elements where a specified attribute begins with a specified string. example:

<pre>a[alt~=”Kerala”] { color:#00aa00; font-size:14px; border:1px solid #00aa00; padding:3px 10px; font-family:Arial, Helvetica, sans-serif; text-decoration:none; margin:2px; background:#afa }</pre>

<code>a[alt~=”Karnataka”] { color:#0000aa; font-size:14px; border:1px solid #0000aa; padding:3px 10px; font-family:Arial, Helvetica, sans-serif; text-decoration:none; margin:2px; background:#aaf }</code>

CSS3 Gradient Backgrounds

Posted on October 4, 2012 by Rajesh Odayanchal

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Read more >>

Linear Gradient (Top → Bottom)

#linearBg2 { background-color: #fddfa4; background: url(images/linear_bg_2.png); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fddfa4), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2F2727, #fddfa4); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2F2727, #fddfa4); /* IE 10 */ background: -ms-linear-gradient(top, #2F2727, #fddfa4); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2F2727, #fddfa4); }

Linear Gradient (Left → Right)

#linearBg1 { background-color: #ec800b; background-repeat: repeat-y; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#fddfa4), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4); }

Linear Gradient (with Even Stops)

#even-stops { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.75, #fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); }

Linear Gradient (with Specified Arbitrary Stops)

#arbitrary-stops { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.95, #fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); }

Radial Gradient (Centered, Full Size)

#radial-center { background-color: #2F2727; background-image: url(images/radial_bg.png); background-position: center center; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can’t specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #fddfa4, #2F2727); /* IE 10 */ background: -ms-radial-gradient(circle, #fddfa4, #2F2727); /* Opera cannot do radial gradients yet */ }

Radial Gradient (Positioned, Sized)

Warning: Not Consistent Among Browsers

#radial-position { background-color: #2F2727; background-position: 80% 20%; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* IE 10 */ background: -ms-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* Opera cannot do radial gradients yet */ }

ഫെയ്‌സ്ബുക്കിലെ പരസ്യങ്ങൾ കളയാനും തീം മാറ്റാനും ഒരു എളുപ്പ വഴി!

Posted on May 26, 2011 by Rajesh Odayanchal

ഫെയ്‌സ് ബുക്കിലെ വലതുവശം മിക്കപ്പോഴും പലതരത്തിലുള്ള പരസ്യങ്ങള്‍ വന്നു മിന്നിമറയുന്നത് കാണാറില്ലേ. ചിലപ്പോഴെങ്കിലും നിങ്ങളതിനെ എങ്ങനെ ഒഴിവാക്കാം എന്നതിനെ പറ്റി ചിന്തിച്ചിട്ടുണ്ടാവും. പലപ്പോഴും അത്തരം പരസ്യങ്ങളില്‍ ക്ലിക്ക് ചെയ്ത് നെറ്റില്‍ കറങ്ങിനടന്നിട്ടുമുണ്ടാവും. ഇവിടെ, ഫെയ്സ്ബുക്കിനു വേണ്ടിയുള്ള ചെറിയൊരു എക്സ്റ്റന്‍‌ഷന്‍ കൊടുത്തിരിക്കുന്നു. കൊടുത്തിരിക്കുന്ന കാര്യങ്ങള്‍ അതുപടി ചെയ്താന്‍ അത്തരം പരസ്യങ്ങളെ ഒഴിവാക്കി ഫെയ്സ്‌ബുക്ക് അപ്‌ഡേറ്റുകള്‍ കൂടുതല്‍ വീതിയുള്ള പ്രതലത്തില്‍ കാണാവുന്നതാണ്‌. അതിന്റെ കൂടെ, ഫെയ്സ്‌ബുക്കിന്റെ കളര്‍ തീമിലും ചെറിയ മാറ്റം വരുത്തിയിട്ടുണ്ട്. ഫയര്‍‌ഫോക്സ് മോസില്ലയില്‍ മാത്രമേ ഇതു വര്‍ക്ക്‌ ചെയ്യുകയുള്ളൂ… മോസില്ലയല്ല ഉപയോഗിക്കുന്നത് എങ്കില്‍ താങ്കള്‍ ഇനി താഴോട്ട് വായിക്കണമെന്നില്ല
🙂

മാറ്റങ്ങള്‍ വരുത്തുന്നതിനു മുമ്പ്, ജാക്സന്‍ ഡവലപ്പ് ചെയ്ത സ്റ്റൈലിഷ് എന്ന മോസില്ല ബ്രൗസര്‍ ആഡോണ്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്യേണ്ടതാണ്‌. അതിനായി ഇവിടെ ക്ലിക്ക് ചെയ്യുക. ഇതു വളരെ ലൈറ്റ്-വെയ്‌റ്റാണ്, അധികം മെമ്മറിയൊന്നും കളയുമെന്ന പേടി വേണ്ട. ഈ ആഡോണ് ഇന്‍സ്റ്റാള്‍ ചെയ്താല്‍ പ്രത്യേകിച്ച് ഒന്നും കിട്ടില്ല; മറ്റുസൈറ്റുകളെ നമ്മുക്ക് ഇഷ്ടപ്പെട്ട രീതിയില്‍ സ്റ്റൈല്‍ ചെയ്തെടുക്കാനുള്ള ഒരു ഇന്റെര്‍‌ഫേസാണ്. അവിടെ, സ്റ്റൈല്‍ ഷീറ്റിനെ കുറിച്ച് അറിയാവുന്നവര്‍ക്ക് മാറ്റങ്ങള്‍ വരുത്താവുന്നതാണ്. ഈ അഡ്‌ഓണ്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്യാന്‍വേണ്ടി ആ സൈറ്റില്‍ കാണുന്ന Add to Firefox എന്ന ബട്ടന്‍ ക്ലിക്ക് ചെയ്താല്‍ മതി. അപ്പോള്‍ തുറന്നു വരുന്ന വിന്‍ഡോയില്‍ ഇത് ഇന്‍സ്റ്റാള്‍ ചെയ്യാനുള്ള ഓപ്‌ഷന്‍ കാണും.

സ്റ്റൈലിഷ് എന്ന ആഡോണ്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്തു കഴിഞ്ഞാല്‍ ബ്രൗസര്‍ ഒന്നു ക്ലോസ് ചെയ്തിട്ട് വീണ്ടും ഓപ്പണ്‍ ചെയ്യുക. സ്റ്റൈലിഷ് എന്ന എക്സ്റ്റന്‍ഷന്റെ ഉപയോഗം മുകളില്‍ പറഞ്ഞല്ലോ. ഇതുവെച്ചാണിനി നമ്മുടെ കളികള്‍.

ഇനി Ctrl + Shift + A ഒന്നിച്ചു പ്രസ്സ് ചെയ്യുക. (ആഡോണ്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്തു പരിചയമില്ലാത്തവര്‍ക്ക് അതെവിടെ കിടകുന്നു എന്നു കണ്ടെത്താന്‍ ബുദ്ധിമുട്ടുകാണുമായിരിക്കും. മോസില്ലയുടെ മെനുബാറില്‍ (Alt + T) ടൂള്‍സ് എന്ന മെനു ഐറ്റം ഉണ്ട്. അതില്‍ Add – Ons എന്ന മെനുഐറ്റം ക്ലിക്ക് ചെയ്താലും മതിയാവും)

അപ്പോള്‍ ആഡോണ്‍ വിന്‍ഡോ തുറന്നുവരും.

ആ വിന്‍ഡോയില്‍ തപ്പിനോക്കിയാള്‍ എക്സ്റ്റന്‍ഷന്‍സ് (Extensions) എന്നൊരു ടാബ് കാണും. അതു ക്ലിക്ക് ചെയ്യുക. അതില്‍ നിങ്ങള്‍ ഇതുവരെ ഏതെങ്കിലും ബ്രൗസര്‍ എക്സ്റ്റന്‍ഷന്‍സ് ഇന്‍സ്റ്റാള്‍ ചെയ്തിട്ടുണ്ടെങ്കില്‍ അവയൊക്കെ കാണാവുന്നതാണ്. നമ്മള്‍ ഇപ്പോള്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്ത സ്റ്റൈലിഷ് എന്ന എക്സ്റ്റന്‍ഷനും അവിടെ കാണും!

Options, Disable, Remove എന്നിങ്ങനെ മൂന്നു ബട്ടണുകള്‍ അവിടെ തന്നെ കാണാനാവും. അതില്‍ ഓപ്ഷന്‍സ് എന്ന ബട്ടനിലാണു നമ്മുടെ കളികള്‍!

ഡിസേബിള്‍ എന്ന ബട്ടന്‍ സ്റ്റൈലിഷ് എന്ന എക്സ്റ്റന്‍ഷന്റെ പരിപാടി നിങ്ങള്‍ക്ക് ഇഷ്ടപ്പെട്ടില്ലെങ്കില്‍ നിര്‍ത്തിവെക്കാനുള്ളതാണ്. മുഴുവനായും ഒഴിവാക്കാനുള്ളതാണ് റിമൂവ് ബട്ടന്‍.

Options എന്ന ബട്ടന്‍ ക്ലിക്ക് ചെയ്യുക. അതു ക്ലിക്ക് ചെയ്യുമ്പോള്‍ വേറൊരു വിന്‍ഡോ തുറന്നുവരും; ഒന്നും കാണില്ല അതില്‍! അതിന്റെ താഴെ, Write New Style എന്ന ഒരു ബട്ടന്‍ കാണാം. അതു ക്ലിക്ക് ചെയ്തിട്ടുവേണം നമുക്ക് പുതിയ സ്റ്റൈല്‍സ് എഴുതാന്‍. ഇപ്പോള്‍ വരുന്ന വിന്‍ഡോ ഒന്നു നോക്കുക. അതില്‍ മൂന്ന് ടെക്സ്റ്റ് ബോക്സുകള്‍ കാണാം. ഇവിടെ കൊടുത്തിരിക്കുന്ന ചിത്രത്തില്‍ കാണുതു പോലെ അതില്‍ ഫില്‍ ചെയ്യുക:

Name: MyFBStyle
Tags: facebokstyle
ഇതിനു താഴെ കാണുന്ന വലിയ ടെക്സ്റ്റ് ബോക്സില്‍
@import url(“https://chayilyam.com/stories/MyWorks/facebookStyles.css”);

ഇതു കോപ്പിയെടുത്തു പേസ്റ്റ് ചെയ്യുക. Name -ഉം Tags – ഉം നിങ്ങള്‍ക്കിഷ്ടമുള്ളതു കൊടുക്കാം. പക്ഷേ, ഈ സി എസ് എസ് കോഡ് ഇതേ പടിതന്നെ കൊടുക്കണം. ഇനി നിങ്ങള്‍ ഫെസ്‌സ് ബുക്ക് ഒന്ന് ഓപ്പണ്‍ ചെയ്തു നോക്കൂ 🙂

പരസ്യങ്ങള്‍ ഒക്കെ അപ്രത്യക്ഷമായി
ഫെയ്സ്ബുക്ക് അപ്ഡേറ്റ്സും നോട്ടിഫിക്കേഷനും വരുന്നഭാഗം കൂടുതല്‍ വീതിയുള്ളതും വൃത്തിയുള്ളതും ആയി
ലേഔട്ടിലെ കളറുകളൊക്കെ കുറച്ച് മാറി, ബാക്‌ഗ്രൗണ്ടില്‍ ഗ്രേഡിയന്റ് കളര്‍ വന്നു
നിങ്ങളുടെ ഫെയ്സ്‌ബുക്കിനൊരു ക്ലീന്‍ ലുക്ക് കിട്ടുന്നു

ഫെയ്സ് ബുക്ക് ആഡോണ്‍ ഇഷ്ടപ്പെട്ടില്ലെങ്കില്‍

ഇനിയിതു വേണ്ടാ എന്നുണ്ടെങ്കില്‍ കളയാന്‍ വളരെ എളുപ്പമാണ് Ctrl + Shift + A മോസില്ലയുടെ ആഡോണ്‍ വിന്‍ഡോ ഓപ്പണ്‍ ചെയ്യുക. എന്നിട്ട് അതില്‍ നിന്നും സ്റ്റൈലിഷ് എന്ന എക്സ്റ്റന്‍ഷന്‍ കണ്ടെത്തി അതിലെ രണ്ടാമത്തെ ബട്ടണ്‍ ആയ Disable ക്ലിക്ക് ചെയ്താല്‍ മതിയാവും. ഫെയ്സ്ബുക്ക് പഴയപടി ആയിട്ടുണ്ടാവും.

ഇതിനുവേണ്ടി തയ്യാറാക്കിയ CSS കോഡ് ആര്‍ക്കെങ്കിലും വേണമെന്നുണ്ടെങ്കില്‍ ഇവിടെ നിന്നും കോപ്പി ചെയ്തെടുക്കാവുന്നതാണ്…

ഇതു വളരെ എളുപ്പത്തില്‍ ഒരു നോട്ട്പാഡില്‍ ഓപ്പണ്‍ ചെയ്തിട്ട് എഡിറ്റ് ചെയ്യാവുന്നതും ആണ്. സി.എസ്.എസ്. അറിയുന്നവര്‍ മാത്രം ആ പണിക്കു പോയാല്‍ മതിയാവും.

ഇതു ചെയ്തു കഴിഞ്ഞാല്‍ ഫെയ്സ്‌ബുക്ക് എങ്ങനെയിരിക്കും എന്നു കാണാന്‍ ഈ ലിങ്കു നോക്കുക

HTML5

Posted on March 25, 2011 by Rajesh Odayanchal

നെറ്റിലൂടെയുള്ള ആശയവിനിമയത്തിനു ചുക്കാന്‍ പിടിക്കുന്ന വളരെ ലളിതമായ ഒരു കമ്പ്യൂട്ടര്‍ ഭാഷയാണ് HTML. ഈ അടുത്ത് ഇറങ്ങിയ HTML5 ആണ് HTML -ന്റെ പരിഷ്കരിച്ച അവസ്സന പതിപ്പ്. ഒരുപാട് പുതിയ ടാഗുകളും എപിഐ കളും ഉള്‍ക്കൊള്ളിച്ചുകൊണ്ട് വളരേ നൂതനമായൊരു ബ്രൗസിംങ് അനുഭവം പ്രദാനം ചെയ്യാന്‍ HTML5 നു കഴിയും എന്നു വേണം കരുതാന്‍. HTML 4.01, XHTML 1.0 , DOM Level 2 HTML ഇവയ്ക്കു ശേഷം ഇറങ്ങിയ അടുത്ത വെബ്‌സ്റ്റാന്‍‌ഡേര്‍ഡായിട്ടാണ്‌ HTML5 ഇറങ്ങിയിരിക്കുന്നത്. Flash, Silverlight, Java തുടങ്ങിയ RIA Technologies നെ കുറിച്ചുള്ള വേവലാതി ഇനി വേണ്ട. ഇവ സപ്പോര്‍‌ഡ് ചെയ്യാനുതകുന്ന ടാഗുകളും അതിനു വേണ്ട എപിഐ കളും HTML5 നോടൊപ്പം കൂട്ടിച്ചേര്‍ത്തിരിക്കുന്നു. ഔദ്യോഗികമായി ഇതു പുറത്തിറങ്ങിയെങ്കിലും HTML5 സ്റ്റാന്‍ഡേഡൈസേഷന്‍ വരും വര്‍ഷങ്ങളിലും തുടരും. എല്ലാ ബ്രൗസറുകളും HTML5 ലെ എല്ലാ ടാഗുകളെയും സപ്പോര്‍ട്ട് ചെയ്‌തു തുടങ്ങിയിട്ടില്ല. എങ്കിലും മോസില്ല, ഗൂഗിള്‍ ക്രോം എന്നിവയില്‍ HTML5 ശക്തി വളരേ പ്രകടമായി കാണാവുന്നതാണ്. ഇന്റെര്‍നെറ്റ് എക്സ്പ്ലോറര്‍ എന്ന മൈക്രോസോഫ്‌റ്റ് ബ്രൗസറിന്റെ പരിഷ്‌കരിച്ച പതിപ്പായ ഇന്റെര്‍നെറ്റ് എക്സ്പ്ലോറര്‍ 9 – ഇല്‍ ആണ് HTML5 ന്റെ പ്രകടനം താരതമ്യേന വളരേ കുറവാണ്.

ജിമെയില്‍ html സിഗ്‌നേച്ചര്‍

Posted on August 17, 2010 by Rajesh Odayanchal

യാഹുമെയിലില്‍ html signature കൊടുക്കാനുള്ള സൗകര്യം മുമ്പുതന്നെ ഉണ്ട്. ഏതെങ്കിലും html editor-ല്‍ ഒരു കുഞ്ഞു സിഗ്‌നേച്ചറുണ്ടാക്കി കോപ്പി എടുത്ത് അവിടെ പേസ്റ്റ് ചെയ്താല്‍ മതിയാവും. എന്നാല്‍ ജിമെയില്‍ പോലുള്ള പല മെയില്‍ സര്‍‌വീസുകളിലും ആ ഒരു സൗകര്യം നിലവില്ലില്ല. html ഉപയോഗിച്ച് അത്യാവശ്യം കളികള്‍ കളിക്കുന്നവരെ നിരാശരാക്കുന്ന ഒരു കാര്യമാണത്. എന്നാല്‍ വൈസ്‌സ്റ്റാമ്പെന്ന ഒരു മോസില്ല ആഡ്‌ഓണ്‍ ഉപയോഗിച്ച് നമുക്കിത് ഭംഗിയായി ചെയ്യാവുന്നതാണ്‌. എന്റെ ജീമെയില്‍ കിട്ടിയ പലരും, അതിലെ സിഗ്നേച്ചര്‍ കണ്ടിട്ട് അതെങ്ങനെ ഉണ്ടാക്കിയെന്നു ചോദിക്കുകയുണ്ടായി. (ദാ ഇവിടെ ഉണ്ട് ആ സിഗ്നേച്ചര്‍!)അന്നേ തോന്നിയ ഒരാശയമായിരുന്നു, ജിമെയില്‍ സിഗ്നേച്ചറിനെ കുറിച്ചൊരു പോസ്റ്റ്. ഇതു കൊണ്ട് ജീമെയിലില്‍ മാത്രമല്ല, മറ്റു പല മെയില്‍സര്‍‌വീസുകളിലും നമുക്ക് സിഗ്നേച്ചര്‍ ഉണ്ടാക്കാവുന്നതാണ്.

സിഗ്നേച്ചര്‍

മെയിലിനു കീഴെ അല്പം ഭംഗിയില്‍ പേരും അഡ്രസ്സും ഫോണ്‍ നമ്പറും അതുപോലെ അത്യാവശ്യം ചിലകാര്യങ്ങളും html കോഡുപയോഗിച്ച് എഴുതുക എന്നേ സിഗ്നേച്ചര്‍ എന്നതുകൊണ്ട് ഇവിടെ അര്‍‌ത്ഥമാക്കുന്നുള്ളൂ. അതിനായ് വേണമെങ്കില്‍ ഇമേജുകളും ഉപയോഗിക്കാം. പിന്നീട് മെയില്‍ കം‌മ്പോസുചെയ്യുമ്പോള്‍ അതു താഴെ അറ്റാച്ച്‌ഡായി വരുന്നതു കാണാം. ഇമേജുകള്‍ ഉപയോഗിക്കുന്നവര്‍, ആ ഇമേജുകള്‍ ഓണ്‍ലൈനില്‍ എന്നും സൂക്ഷിക്കാന്‍ ഒരിടം(പിക്കാസ വെബ്‌ആര്‍ബം, നിങ്ങളുടെ വെബ്‌സ്പേസ്, ഇതുപോലെ ഏതെങ്കിലും ഒന്ന്) കണ്ടെത്തുകയും അവിടെ ആ ഇമേജുകള്‍ ആദ്യം തന്നെ സൂക്ഷിക്കേണ്ടതുമാണ്‌.

ഡൗണ്‍ലോഡുചെയ്യുക

മോസില്ലയില്‍ ഈ ആഡ്‌ഓണ്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്യുക. ഇതു ഡൗണ്‍‌ലോഡ് ചെയ്തശേഷം തുറന്നു വെച്ച മോസില്ല ബ്രൗസറിലേക്ക് ഡ്രാഗ്‌ ചെയ്തുകൊണ്ടിട്ടാല്‍ മതി. അപ്പോള്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്യാനുള്ള ഓപ്‌ഷന്‍ കിട്ടും. സാധാരണ ആഡ്‌ഓണ്‍‌സ് ഇന്‍സ്‌റ്റാള്‍ ചെയ്യുന്നതുപോലെ തന്നെയാണ്‌. ആഡ്‌ഓണ്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്തു കഴിഞ്ഞാന്‍ ബ്രൗസര്‍‌ ഒന്നു റീസ്റ്റാര്‍‌ട്ട് ചെയ്യാന്‍ പറയും. ഇതിനായി ബ്രൗസര്‍‌ ക്ലോസ്‌ ചെയ്ത ശേഷം വീണ്ടും ഓപ്പണ്‍‌ ചെയ്താല്‍ മതിയാവും. ഇനി മോസില്ലയുടെ മുകളിലെ മെനുവില്‍ ടൂള്‍‌സ് ക്ലിക്ക് ചെയ്ത് അതിലെ ആഡ്‌ഓണ്‍‌സ് (Add-Ons) ക്ലിക്ക് ചെയ്യുക. ആഡ്‌ഓണ്‍‌സിന്റെ ഒരു വിന്‍‌ഡോ ഓപ്പണ്‍‌ ചെയ്തു വരുന്നതു കാണാം. അതില്‍ എക്‌സ്റ്റന്‍‌ഷന്‍‌സ് ‍‌(extensions) എന്നൊരു ടാബുണ്ടാവും. അതു ക്ലിക്കുചെയ്ത് താഴെ വൈസ്‌സ്റ്റാമ്പ് എന്നൊരു എക്‌സ്റ്റന്‍‌ഷന്‍ കൂട്ടിച്ചേര്‍‌ത്തിട്ടുണ്ടോ എന്നു നോക്കുക: ചിത്രം നോക്കിയാല്‍ കൂടുതല്‍‌ മനസിലാവും.

ഇതില്‍ വന്നാല്‍ നിങ്ങളുടെ ആഡ്‌ഓണ്‍ കൃത്യമായിതന്നെ ഇന്‍സ്‌റ്റാള്‍‌ഡ് ആണെന്നര്‍‌ത്ഥം.

സിഗ്നേച്ചര്‍‌ ഉണ്ടാക്കുക

വളരെ ശ്രദ്ധിച്ചുചെയ്യേണ്ട ഒരു കാര്യമാണിത്. നിങ്ങള്‍ക്ക് ഏതെങ്കിലും html എഡിറ്റര്‍ ഉപയോഗിച്ച് നല്ലൊരു സിഗ്നേച്ചര്‍ ഉണ്ടാക്കാവുന്നതാണ്‌. (ഞാന്‍ ഉപയോഗിക്കുന്നത് അഡോബിന്റെ ഡ്രീം‌വീവറാണ്‌) സ്റ്റൈല്‍‌സ് ഒക്കെ ഇന്‍ലൈന്‍‌ ആയിത്തന്നെ കൊടുക്കണം. ഇമേജുകള്‍ ഉപയോഗിക്കുന്നുണ്ടെങ്കില്‍ മുകളില്‍ പറഞ്ഞത് ഓര്‍‌മ്മയുണ്ടല്ലോ അവ ഓണ്‍‌ലൈനില്‍ എന്നും ഉണ്ടാവുന്ന വിധം ഏതെങ്കിലും ഒരു സെര്‍‌വറില്‍ വേണം സൂക്ഷിക്കാന്‍. ഇനി ഇതൊന്നുമറിയാത്തവര്‍ക്ക് ഞാന്‍ ഉപയോഗിക്കുന്ന സിഗ്നേച്ചറിന്റെ കോഡുതരാം, അതിലെ കണ്ടറ്റുപാര്‍‌ട്ടില്‍ നിങ്ങള്‍ക്കു വേണ്ടുന്ന മാറ്റങ്ങള്‍ വരുത്തിയാല്‍ മതി. അതില്‍ കാണുന്ന ഇമേജ്‌സ് ഒക്കെ ഓണ്‍‌ലൈനില്‍ തന്നെ ഉള്ളതിനാല്‍ അതിനേകുറിച്ചും വേവലാതി വേണ്ട.

എന്റെ സിഗ്നേച്ചറിന്റെ കോഡ്.

<div style=”font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(187, 187, 187); font-weight: bold; margin-bottom: 3px;”>Rajesh K</div>

<div style=”font-size: 12px; color: rgb(136, 136, 136); line-height: 15px;”><span style=”font-size: 12px; color: rgb(0, 51, 102); padding-right: 5px; margin-top: 2px;”>Email:</span><a href=”#” style=”font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: rgb(91, 153, 254); text-decoration: none;”>rajeshodayanchal@gmail.com</a></div>

<div style=”font-size: 12px; color: rgb(136, 136, 136); line-height: 15px; margin-bottom: 9px;”><span style=”font-size: 12px; color: rgb(0, 51, 102); padding-right: 5px; margin-top: 2px;”>Website:</span><a href=”https://chayilyam.com/stories” target=”_blank” style=”font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: rgb(91, 153, 254); text-decoration: none;”>https://chayilyam.com/stories</a></div>

</ul>

</div>

ഈ കോഡിന്റെ പ്രിവ്യു ഇവിടെ കൊടുത്തിരിക്കുന്നു. ഈ കോഡ് ഇതുപോലെ കോപ്പി എടുക്കുക.

ഈ കോഡില്‍ തിരുത്തലുകള്‍ വരുത്താന്‍ പ്രയാസം തോന്നിയതായി പലരു പറഞ്ഞതിനാല്‍ കോഡ് എഡിറ്റിംങിനെ കുറിച്ച് അല്പം കൂടി വിശദമായി ഇവിടെ കൊടുത്തിരിക്കുന്നു. (click here >> ). അതുകൂടി കാണുക.

ഒരു നോട്പാഡില്‍ അതു പേസ്റ്റ്‌ ചെയ്യുക – ഒരു html എഡിറ്റാറാണെങ്കില്‍ വളരേ നല്ലത്.
പേര്‍, നമ്പര്‍ എന്നിവ മാറ്റുക,
സോഷ്യല്‍‌ നെറ്റ്‌വര്‍ക്കിലെ നിങ്ങളുടെ പ്രൊഫൈല്‍ ലിങ്ക് കണ്ടുപിടിച്ച് വളരെ ശ്രദ്ധാപൂര്‍‌വം മാറ്റുക,
ഇനി ഇവിടെ കൊടുത്തിരിക്കുന്ന സോഷ്യല്‍ നെറ്റ്വര്‍ക്ക് ലിങ്കില്‍ ഏതെങ്കിലും ഒന്നില്‍ നിങ്ങള്‍ക്ക്‌ പ്രൊഫൈല്‍ ഇല്ലെന്നു കരുതുക. അതപ്പോള്‍ ഒഴിവാക്കേണ്ടതാണല്ലോ. അതിന് ആ ലിങ്ക് ഉള്‍പ്പെട്ട <li> ടാഗ് ( <li> style=”float:…. മുതല്‍ </li> വരെ ഉള്ള ഭാഗം) എടുത്തു കളഞ്ഞാല്‍ മതി.
ഇതില്‍ ഇല്ലാത്തൊരു ലിങ്ക് കൂട്ടിച്ചേര്‍ക്കാന്‍ അല്പം പാടാണ്‌.

ഇനി ചെയ്യേണ്ടത്

ഇനി, മോസില്ല ഓപ്പണ്‍ ചെയ്യുക. നേരത്തേ പറഞ്ഞ ആഡോണ്‍‌ എടുക്കക ( click: tools -> Add-ons then Extensions) അതില്‍ Options എന്നൊരു ബട്ടണ്‍‌ ഇടതുവശത്തുണ്ടാവും അതു ക്ലിക്ക്‌ ചെയ്യുക. ഇപ്പോള്‍ വരുന്ന വിന്‍‌ഡോ ഒന്നു നന്നായി നോക്കുക. അതില്‍ Choose your Signature: എന്നുണ്ട്; Your Details: എന്നൊരു സെക്‌ഷന്‍ ഉണ്ട് – അതില്‍ തന്നെ HTML എന്നൊരു ബട്ടണ്‍‌ ഉണ്ട്. അതില്‍ ക്ലിക്ക്‌ ചെയ്താല്‍‌ വിഷ്വല്‍‌ (Visual) എന്നായി അതിന്റെ പേരു മാറുന്നതു കാണാം. അതിനു താഴെ വലിയൊരു ടെക്‌സ്‌റ്റ്ബോക്‌സും കാണാം. HTML എന്നു പേരുള്ള ബട്ടണ്‍‌ ക്ലിക്ക് ചെയ്താല്‍‌ വരുന്ന ഈ ബോക്‌സില്‍‌ നമ്മള്‍ നേരത്തേ നോട്‌പാഡില്‍ തയ്യാറാക്കി വെച്ചിരിക്കുന്ന html code പേസ്റ്റ് ചെയ്താല്‍‌ മതി. ഇനി വേണമെങ്കില്‍ ഏറ്റവും താഴെ ഉള്ള Preview എന്ന ബട്ടണ്‍‌ ക്ലിക്ക് ചെയ്താല്‍ അതെങ്ങനെ വരുമെന്നു കാണാനുമാവും. ഇനി എല്ലാം OK കൊടുത്തു ക്ലോസ്‌ ചെയ്യുക.

ഇനി നിങ്ങളുടെ ജിമെയില്‍ ഓപ്പണ്‍‌ ചെയ്യുക. അവിടെ സെറ്റിം‌ങ്‌സില്‍‌ ജെനറല്‍‌ പാര്‍‌ട്ടില്‍ താഴെ സിഗ്നേച്ചര്‍ എന്ന ഭാഗം നോക്കുക. അവിടെ താഴെ കാണുന്നതു പോലെ വന്നു കാണും.

അത്യാവശ്യം വേണ്ട എഡിറ്റിംങുകള്‍ ഇവിടേയും നടത്താം. രണ്ട് സിഗ്നേച്ചര്‍ വന്നിട്ടുണ്ടെങ്കില്‍ ഒന്ന് ഇവിടെവെച്ചു തന്നെ ഡിലീറ്റ് ചെയ്തേക്ക്. സിഗ്നേച്ചര്‍ ബോക്സില്‍ സിഗ്നേച്ചര്‍ വന്നു കഴിഞ്ഞാല്‍‌ വീണ്ടും മോസില്ലയുടെ ടൂള്‍സില്‍‌ ആഡോണ്‍‌സില്‍ പോയി ആ ആഡോണിനെ എടുക്കുക. അതിനി വേണ്ട. അതവിടെ കിടന്നാല്‍ മെയില്‍ സിഗ്നേച്ചറില്‍ ഇനി രണ്ട് സിഗ്നേച്ചര്‍ വനുകൊണ്ടിരിക്കും. അവിടെ നിന്നു തന്നെ Uninstall ചെയ്തു കളഞ്ഞേക്ക്… അല്ലെങ്കില്‍ ഡിസേബിള്‍ ചെയ്തു വെച്ചേക്ക്. (ഡൗണ്‍ലോഡുചെയ്യുക എന്ന മുകളിലെ ഹെഡിം‌ങിനു കീഴിലുള്ള ചിത്രം നോക്കുക. uninstall ചെയ്യാനും disable ചെയ്യാനും ഉള്ള ബട്ടണുകള്‍ കാണാവുന്നതാണ്‌.)

വളരെ എളുപ്പമാണിത്. കോഡ് എഡിറ്റുചെയ്യുമ്പോള്‍ നല്ല ശ്രദ്ധ വേണം. എന്റെ ജീമെയില്‍ സിഗ്നേച്ചറിന്റെ ഗുട്ടന്‍‌സ് പിടികിട്ടിക്കാണുമെന്നു കരുതുന്നു. സ്വന്തമായി ഇതിനുവേണ്ട കോഡ് എഴുതുമ്പോള്‍ ശ്രദ്ധിക്കേണ്ട കാര്യം അതിന്റെ സ്റ്റൈല്‍‌ ഇന്‍ലൈനായി തന്നെ എഴുതണം എന്നതാണ്‌. പുതിയൊരു സിഗ്നേച്ചര്‍‌ ഉണ്ടാക്കി തരണമെന്ന് ആരും പറഞ്ഞേക്കരുത് 🙂 പലര്‍ക്കും പല ഐഡിയ ആണല്ലോ ശ്രമിച്ചു നോക്കുക. വിജയിച്ചാല്‍ ഒരു മെയില്‍ എനിക്കും അയക്കാന്‍ മറക്കരുത്!

Dynamic Font Technology

Posted on July 27, 2010 by Rajesh Odayanchal

When designing a logo or other material for your website, most people will probably know about the importance of factors such as colours, space, shapes and design. Sure, designing a logo is about all these things and a visually easily recognisesable logo is a must.

However, choosing the right font for your materials like logo, page content is equally as important. In fact many incredibly successful products are almost synonymous with a certain kind of font. Think about Coca Cola’s curved font or IBM’s clear cut letters or any other famous company’s logo. Those fonts have become visually ingrained in peoples conception of the brand. Choosing the right font type for your logo is not just about recognisability, its also about choosing a font that communicates the right message to the general public. It has to do with congruently.

What is Font?

Font is a design for a set of characters. A font is the combination of typeface and other qualities, such as size, pitch, and spacing. For example, Times Roman is a typeface that defines the shape of each character. Within Times Roman, however, there are many fonts to choose from – different sizes, italic, bold, and so on.

The height of characters in a font is measured in points, each point being approximately 1/72 inch. The width is measured by pitch, which refers to how many characters can fit in an inch. Common pitch values are 10 and 12. A font is said to be fixed pitch if every character has the same width. If the widths vary depending on the shape of the character, it is called a proportional font.

Dynamic Font

Typography plays a very important role in Web Design. Current Web Design trends involves variety of fonts to ensure a good user experience. Obviously these are not-standard system fonts in many cases. Well, Image Replacement has always been a good solution but not for a site with too many elements or even sites with dynamic content. One of the sweetest things to come out of the HTML 3.0 specification was the ability to use the font of your choice on your Web pages. This ability to use “dynamic fonts,” or fonts which are downloaded from the server to your browser, has enabled developers to create and use fonts on their pages which create a whole new look from the same old text. So that you can see that this is just inline text, drag your mouse across the text. You can cut and paste it just like any other text on the page. Dynamic fonts can be used for seamless viewing of the contents (web pages) when the corresponding font in which the content has been created is not present on clients machine. The Dynamic fonts are placed on the server on which the web pages are hosted. They travel to the client machine in a manner transparent to the user. They remain in the cache of the users machine till the time he is viewing a particular webpage and are rendered back the browser once the user exits out of the website.

Here is a clean list of popular Dynamic Image Replacement solutions that will help you solve various font related issues.

SiFR 2.0

Cufón

P+C DTR

FLIR

SIIR

DTR

SiFR 3

Typeface.js

IFR

PHP+CSS DTR

CSS Image Replacement (static)

Swfir

Google Font API

Google Font API

The world of web typography is advancing with leaps and bounds. Already we have the options of SiFR, Cufon, Typekit, @font-face, etc and now, Google has introduced their own custom font service under the Google Font API. Let’s take a look at what the Google Font API is and how you can use it in your own web designs. The Google Font API is basically a shortcut to manually using the CSS3 @font-face property. When you insert the Google code in your website, the Font API returns a stylesheet including an @font-face rule for your chosen font. Google will do all the hard work in getting the font to work in non-CSS3 browsers such as Internet Explorer.

The Google Font API is one of the most easy to use custom web font solutions out there. With just a line of code you’re ready to import a range of custom fonts from the Google Font Direcory.

The Google Font API works like a charm in most browsers.
The Google Font Directory includes a range of tasteful and stylish fonts to choose from, as well as a selection of more decorative options.
All fonts are released under an Open Source license, so the Google Font API can be used in both your commercial and personal projects.
Text rendered using the Google Font API is still selectable, which is one drawback with some solutions like SiFR.
The Google Font API doesn’t rely on Javascript, so the customised fonts still show if the user has Javascript disabled.
Because the fonts are rendered with good old CSS, any additional styling such as the CSS3 text-shadow property can be added.

Drawbacks of Google Font API

Despite having a few nice options in the Font Directory, the choice is fairly limited. However you can tie the Google Font API with Typekit using Javascript and the WebFont loader to open up further font options.

Most browsers will load the rest of the page before rendering the font. This may leave a blank space, or the fallback option until the page has been completely downloaded.

It’s not supported on mobile browsers such as the iPhone, iPod or iPad webkit browser or Android.

Example of Google Font API

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers. I used Reenie Beanie font from google font directory to write this paragraph

Click here to find Google Font Directory! There you can find the code for implementing google dynamic font. enjoy!!

web designing paradigm

Posted on February 8, 2010 by Rajesh Odayanchal

fdsf

CSS Positioning

Posted on December 11, 2009 by Rajesh Odayanchal

Position:Static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.
Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.

#div-1 {   
position:static;  }

Position:Relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Let’s move div-1 down 20 pixels, and to the left 40 pixels:

#div-1 {   
position:relative;
top:20px;
left:-40px;  }

Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That’s because div-1 still occupies that original space in the document, even though we have moved it.

It appears that position:relative is not very useful, but it will perform an important task later in this tutorial.

Position:Absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Let’s move div-1a to the top right of the page:

#div-1a {   
position:absolute;   
top:0;   
right:0;   
width:200px;  }

Notice that this time, since div-1a was removed from the document, the other elements on the page were positioned differently: div-1b, div-1c, and div-after moved up since div-1a was no longer there.

Also notice that div-1a was positioned in the top right corner of the page. It’s nice to be able to position things directly the page, but it’s of limited value.

What I really want is to position div-1a relative to div-1. And that’s where relative position comes back into play.

Footnotes

There is a bug in the Windows IE browser: if you specify a relative width (like “width:50%”) then the width will be based on the parent element instead of on the positioning element.

Position:Relative + Position:Absolute

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:

#div-1 {   
position:relative;  }  


#div-1a {   
position:absolute;   
top:0;   
right:0;   
width:200px;  }

Two Column Absolute

Now we can make a two-column layout using relative and absolute positioning!

#div-1 {   
position:relative;  }  


#div-1a {   
position:absolute;  
 top:0;   
right:0;   
width:200px;  } 


 #div-1b {   
position:absolute;  
 top:0;   
left:0;   
width:200px;  }

One advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. So I put div-1b before div-1a.

But wait – what happened to the other elements? They are being obscured by the absolutely positioned elements. What can we do about that?

float

For variable height columns, absolute positioning does not work, so let’s come up with another solution.

We can “float” an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we will use it for more complex layout tasks (because it’s the only tool we have).

#div-1a {   
float:left;  
 width:200px;  }

float columns

If we float one column to the left, then also float the second column to the left, they will push up against each other.

#div-1a {  
float:left;   
width:150px;  }  


#div-1b {   
float:left;   
width:150px;  }

float columns with clear

Then after the floating elements we can “clear” the floats to push down the rest of the content.

#div-1a {   
float:left;  
 width:190px;  }  


#div-1b {   
float:left;  
width:190px;  }  


#div-1c {   
clear:both;  }

Organize CSS Properties Alphabetically

Posted on May 6, 2009 by Rajesh Odayanchal

Which example would you think is faster to find the margin-right property?

Example 1

print ?

div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

Example 2

print ?

div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

You can’t tell me that Example 2 isn’t faster. By alphabetizing your properties, you are creating this consistency that will help you reduce the time you spend searching for a specific property.

I know some people who organize one way and others who organize another, but at my company, we made a consensus decision to all organize alphabetically. It has definitely helped when working with other people’s code. I cringe every time I go into a stylesheet where the properties are not sorted alphabetically.

എന്താണ് ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്?

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ ഉത്ഭവവും ചരിത്രവും

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ പ്രധാന സവിശേഷതകൾ

വേഗതയേറിയതും കാര്യക്ഷമവുമായ വികസനം

അതിരുകളില്ലാത്ത കസ്റ്റമൈസേഷൻ സാധ്യതകൾ

മൊബൈൽ-ഫസ്റ്റ് റെസ്പോൺസീവ് ഡിസൈൻ

പർജ്സി‌എസ്‌എസ് ഉപയോഗിച്ചുള്ള കോഡ് ഒപ്റ്റിമൈസേഷൻ

ഗ്രാനുലാർ കൺട്രോളും യൂട്ടിലിറ്റി ക്ലാസുകളുടെ വ്യാപ്തിയും

ഡയറക്റ്റീവുകളും ബിൽഡ്-ടൈം ഫംഗ്ഷനുകളും (@apply, @theme, @import, etc.)

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിലെ വകഭേദങ്ങൾ

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ ഗുണങ്ങളും ദോഷങ്ങളും

ഗുണങ്ങൾ

ദോഷങ്ങൾ

മറ്റ് സി‌എസ്‌എസ് ഫ്രെയിംവർക്കുകളുമായുള്ള താരതമ്യം

കമ്മ്യൂണിറ്റിയും വിഭവങ്ങളും

[att^=val]

Linear Gradient (Top → Bottom)

Linear Gradient (Left → Right)

Linear Gradient (with Even Stops)

Linear Gradient (with Specified Arbitrary Stops)

Radial Gradient (Centered, Full Size)

Radial Gradient (Positioned, Sized)

ഫെയ്സ് ബുക്ക് ആഡോണ്‍ ഇഷ്ടപ്പെട്ടില്ലെങ്കില്‍

സിഗ്നേച്ചര്‍

ഡൗണ്‍ലോഡുചെയ്യുക

സിഗ്നേച്ചര്‍‌ ഉണ്ടാക്കുക

എന്റെ സിഗ്നേച്ചറിന്റെ കോഡ്.

ഇനി ചെയ്യേണ്ടത്

What is Font?

Dynamic Font

Google Font API

Drawbacks of Google Font API

Example of Google Font API

Example 1

Example 2

മുൻകാല ലേഖനങ്ങൾ