CSS கிரிட் ஏரியாக்கள்: உலகளாவிய இணைய மேம்பாட்டிற்கான அர்த்தமுள்ள லேஅவுட் பெயரிடும் மரபுகளை உருவாக்குதல்

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

CSS கிரிட் ஏரியாக்களைப் புரிந்துகொள்ளுதல்

பெயரிடும் மரபுகளுக்குள் செல்வதற்கு முன், CSS கிரிட் ஏரியாக்கள் என்றால் என்ன என்பதைச் சுருக்கமாகப் பார்ப்போம்.

CSS கிரிட் மூலம், grid-template-columns மற்றும் grid-template-rows போன்ற பண்புகளைப் பயன்படுத்தி ஒரு கிரிட் அமைப்பை நீங்கள் வரையறுக்கிறீர்கள். பின்னர் கிரிட் ஏரியாக்கள் இந்த கிரிட்டின் குறிப்பிட்ட பகுதிகளுக்கு பெயர்களை ஒதுக்க உங்களை அனுமதிக்கின்றன. உதாரணமாக:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header  header"
    "nav    main    aside"
    "footer footer  footer";
}

.header {
  grid-area: header;
}

.nav {
  grid-area: nav;
}

.main {
  grid-area: main;
}

.aside {
  grid-area: aside;
}

.footer {
  grid-area: footer;
}

இந்த எடுத்துக்காட்டில், நாம் ஒரு ஹெடர், நேவிகேஷன், மெயின் கன்டென்ட் பகுதி, அசைடு மற்றும் ஃபூட்டர் உடன் ஒரு அடிப்படை லேஅவுட்டை உருவாக்கியுள்ளோம். grid-template-areas பண்பு கிரிட் அமைப்பை பார்வைக்குரிய வகையில் பிரதிபலிக்கிறது, இது லேஅவுட்டை ஒரு பார்வையில் புரிந்துகொள்வதை எளிதாக்குகிறது. பின்னர் grid-area பண்பு ஒவ்வொரு உறுப்பையும் அதன் தொடர்புடைய பகுதிக்கு ஒதுக்குகிறது.

அர்த்தமுள்ள பெயரிடும் மரபுகள் ஏன் முக்கியம்

மேலே உள்ள எடுத்துக்காட்டு வேலை செய்தாலும், பல காரணங்களுக்காக அர்த்தமுள்ள பெயரிடும் மரபுகளை ஏற்றுக்கொள்வது மிகவும் முக்கியம்:

• பராமரிப்புத்தன்மை: நன்கு பெயரிடப்பட்ட பகுதிகள் உங்கள் CSS-ஐப் புரிந்துகொள்வதையும் மாற்றுவதையும் எளிதாக்குகின்றன, குறிப்பாக பெரிய திட்டங்களில். தெளிவான பெயர்கள் ஒவ்வொரு பகுதியின் நோக்கத்தையும் தெரிவிக்கின்றன, அறிவாற்றல் சுமையைக் குறைத்து, பிழைத்திருத்தத்தை மிகவும் திறமையாக்குகின்றன.
• அளவிடுதல்: அர்த்தமுள்ள பெயர்கள் குறியீடு மறுபயன்பாட்டை ஊக்குவிக்கின்றன மற்றும் மாடுலர் லேஅவுட்களை உருவாக்குவதை எளிதாக்குகின்றன. உங்கள் திட்டம் வளரும்போது, முரண்பாடுகளை அறிமுகப்படுத்தாமல் உங்கள் கிரிட் அமைப்பை எளிதாக மாற்றியமைத்து விரிவாக்கலாம்.
• அணுகல்தன்மை: ஸ்கிரீன் ரீடர்கள் மற்றும் பிற உதவித் தொழில்நுட்பங்கள் ஒரு வலைப்பக்கத்தின் கட்டமைப்பைப் புரிந்துகொள்ள அர்த்தமுள்ள HTML-ஐ நம்பியுள்ளன. உங்கள் CSS கிரிட் லேஅவுட்டில் அர்த்தமுள்ள பெயர்களைப் பயன்படுத்துவது, அடிப்படை HTML கட்டமைப்பை வலுப்படுத்துகிறது மற்றும் அணுகல்தன்மையை மேம்படுத்துகிறது.
• சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n): குறிப்பிட்ட காட்சிப் பண்புகளுடன் இணைக்கப்பட்ட பெயர்களுக்குப் பதிலாக, சுருக்கமான அர்த்தமுள்ள பெயர்களைப் பயன்படுத்துவது, வெவ்வேறு மொழிகள் மற்றும் கலாச்சார சூழல்களுக்கு மிகவும் நெகிழ்வான தழுவலை அனுமதிக்கிறது. ஒரு "சைடுபார்" வலமிருந்து இடமாக உள்ள மொழி லேஅவுட்டில் ஒரு "நேவிகேஷன்" உறுப்பாக மாறக்கூடும், மேலும் "site-navigation" போன்ற ஒரு நடுநிலையான பெயரைப் பயன்படுத்துவது இந்த மாற்றத்தை எளிதாக்குகிறது.
• குழு ஒத்துழைப்பு: சீரான பெயரிடும் மரபுகள் டெவலப்மென்ட் குழுக்களுக்குள் தகவல் தொடர்பு மற்றும் ஒத்துழைப்பை மேம்படுத்துகின்றன. ஒவ்வொரு கிரிட் பகுதியின் நோக்கத்தையும் அனைவரும் புரிந்துகொள்கிறார்கள், இது பிழைகள் மற்றும் முரண்பாடுகளின் அபாயத்தைக் குறைக்கிறது.

அர்த்தமுள்ள பெயரிடலுக்கான முக்கியக் கொள்கைகள்

உங்கள் அர்த்தமுள்ள பெயரிடும் மரபுகளுக்கு வழிகாட்ட சில முக்கியக் கொள்கைகள் இங்கே உள்ளன:

1. உள்ளடக்கத்தை விவரிக்கவும், நிலையை அல்ல

"top-left" அல்லது "bottom-right" போன்ற, கிரிட்டில் உள்ள குறிப்பிட்ட நிலைகளுடன் இணைக்கப்பட்ட பெயர்களைத் தவிர்க்கவும். அதற்கு பதிலாக, அந்தப் பகுதியில் இடம்பெறும் உள்ளடக்கத்தை விவரிப்பதில் கவனம் செலுத்துங்கள். உதாரணமாக, "top-row" என்பதற்கு பதிலாக "site-header" என்றும், "center-area" என்பதற்கு பதிலாக "main-content" என்றும் பயன்படுத்தவும். இது உங்கள் குறியீட்டை லேஅவுட் கட்டமைப்பில் ஏற்படும் மாற்றங்களுக்கு அதிக நெகிழ்வுத்தன்மை உள்ளதாக மாற்றுகிறது.

உதாரணம்:

தவறானது:

.container {
  grid-template-areas:
    "top-left top-right"
    "bottom-left bottom-right";
}

.logo {
  grid-area: top-left;
}

சரியானது:

.container {
  grid-template-areas:
    "site-logo  site-navigation"
    "main-content  advertisement";
}

.logo {
  grid-area: site-logo;
}

"சரியான" எடுத்துக்காட்டு, உண்மையான லேஅவுட்டைப் பார்க்காமலேயே, மிகவும் விளக்கமாகவும் புரிந்துகொள்ள எளிதாகவும் உள்ளது.

2. சீரான சொற்களைப் பயன்படுத்தவும்

பொதுவான லேஅவுட் கூறுகளுக்கு ஒரு சீரான சொற்களஞ்சியத்தை நிறுவி, உங்கள் திட்டம் முழுவதும் அதைக் கடைப்பிடிக்கவும். இது தெளிவைப் பராமரிக்கவும் குழப்பத்தைக் குறைக்கவும் உதவுகிறது. உதாரணமாக, "main-nav," "global-navigation," மற்றும் "top-nav" என மாறி மாறிப் பயன்படுத்துவதற்குப் பதிலாக, தொடர்ந்து "site-navigation" என்பதைப் பயன்படுத்தவும்.

3. போதுமான அளவு குறிப்பாக இருங்கள்

நிலைகளுடன் இணைக்கப்பட்ட அதிகப்படியான குறிப்பிட்ட பெயர்களைத் தவிர்ப்பது முக்கியம் என்றாலும், உங்கள் பெயர்கள் வெவ்வேறு பகுதிகளுக்கு இடையில் வேறுபடுத்தி அறியும் அளவுக்கு விளக்கமாக இருப்பதை உறுதி செய்ய வேண்டும். உதாரணமாக, உங்களிடம் பல நேவிகேஷன் பகுதிகள் இருந்தால், அவற்றை வேறுபடுத்துவதற்கு "site-navigation," "secondary-navigation," மற்றும் "footer-navigation" போன்ற பெயர்களைப் பயன்படுத்தவும்.

4. படிநிலையைக் கருத்தில் கொள்ளுங்கள்

உங்கள் லேஅவுட்டில் உள்ளமைக்கப்பட்ட (nested) கிரிட் பகுதிகள் இருந்தால், உங்கள் பெயரிடும் மரபில் படிநிலையைப் பிரதிபலிக்கவும். உதாரணமாக, மூலப் பகுதியைக் குறிக்க நீங்கள் முன்னொட்டுகள் அல்லது பின்னொட்டுகளைப் பயன்படுத்தலாம். உதாரணமாக, ஹெடருக்குள் ஒரு நேவிகேஷன் பகுதி இருந்தால், அதை "header-navigation" என்று பெயரிடலாம்.

5. சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) ஆகியவற்றைக் கணக்கில் கொள்ளுங்கள்

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

உதாரணம்:

குறிப்பிட்ட காட்சி இடத்தைக் குறிக்கும் "sidebar" என்பதைப் பயன்படுத்துவதற்குப் பதிலாக, "site-navigation" அல்லது "page-aside" போன்றவற்றைப் பயன்படுத்தவும், இவை மிகவும் நடுநிலையானவை மற்றும் வெவ்வேறு லேஅவுட் திசைகள் மற்றும் கலாச்சார மரபுகளுக்கு ஏற்றவாறு மாற்றியமைக்கப்படலாம்.

6. பிரிப்பதற்கு கோடுகள் (Dashes) அல்லது அடிக்கோடுகளை (Underscores) பயன்படுத்தவும்

உங்கள் கிரிட் பகுதி பெயர்களில் சொற்களைப் பிரிக்க கோடுகள் (-) அல்லது அடிக்கோடுகளை (_) பயன்படுத்தவும். இங்கு நிலைத்தன்மை முக்கியம். ஒன்றைத் தேர்ந்தெடுத்து அதையே தொடர்ந்து பயன்படுத்தவும். CSS பண்பு பெயரிடும் மரபுகளுடன் (எ.கா., grid-template-areas) ஒத்துப்போவதால், பொதுவாக CSS-ல் கோடுகள் விரும்பப்படுகின்றன.

7. பெயர்களைச் சுருக்கமாக வைக்கவும்

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

அர்த்தமுள்ள பெயரிடும் மரபுகளின் நடைமுறை எடுத்துக்காட்டுகள்

வெவ்வேறு சூழ்நிலைகளில் இந்தக் கொள்கைகளை எவ்வாறு பயன்படுத்துவது என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளைப் பார்ப்போம்.

எடுத்துக்காட்டு 1: அடிப்படை இணையதள லேஅவுட்

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "site-header  site-header  site-header"
    "site-navigation  main-content  page-aside"
    "site-footer  site-footer  site-footer";
}

.header {
  grid-area: site-header;
}

.nav {
  grid-area: site-navigation;
}

.main {
  grid-area: main-content;
}

.aside {
  grid-area: page-aside;
}

.footer {
  grid-area: site-footer;
}

இந்த எடுத்துக்காட்டில், ஒவ்வொரு கிரிட் பகுதியின் நோக்கத்தையும் தெளிவாக வரையறுக்க "site-header," "site-navigation," "main-content," "page-aside," மற்றும் "site-footer" போன்ற அர்த்தமுள்ள பெயர்களைப் பயன்படுத்தியுள்ளோம்.

எடுத்துக்காட்டு 2: இ-காமர்ஸ் தயாரிப்புப் பக்கம்

.product-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "product-title product-title"
    "product-image product-details"
    "product-description product-description";
}

.product-title {
  grid-area: product-title;
}

.product-image {
  grid-area: product-image;
}

.product-details {
  grid-area: product-details;
}

.product-description {
  grid-area: product-description;
}

இங்கே, ஒரு இ-காமர்ஸ் தயாரிப்புப் பக்கத்தின் குறிப்பிட்ட உள்ளடக்கத்தைப் பிரதிபலிக்க "product-title," "product-image," "product-details," மற்றும் "product-description" போன்ற பெயர்களைப் பயன்படுத்தியுள்ளோம்.

எடுத்துக்காட்டு 3: உள்ளமைக்கப்பட்ட கிரிட் உடன் வலைப்பதிவு இடுகை லேஅவுட்

.blog-post {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "post-header post-header"
    "post-content sidebar"
    "post-footer post-footer";
}

.post-header {
  grid-area: post-header;
}

.post-content {
  grid-area: post-content;
}

.sidebar {
  grid-area: sidebar;
  display: grid; /* Nested Grid */
  grid-template-rows: auto auto;
  grid-template-areas:
    "sidebar-advertisement"
    "sidebar-categories";
}

.sidebar-advertisement {
  grid-area: sidebar-advertisement;
}

.sidebar-categories {
  grid-area: sidebar-categories;
}

.post-footer {
  grid-area: post-footer;
}

இந்த எடுத்துக்காட்டில், சைடுபார் பகுதிக்குள் ஒரு உள்ளமைக்கப்பட்ட கிரிட்டைப் பயன்படுத்தியுள்ளோம். உள்ளமைக்கப்பட்ட கிரிட், இந்தப் பகுதிகள் சைடுபாரின் குழந்தைகள் என்பதைக் குறிக்க "sidebar-advertisement" மற்றும் "sidebar-categories" போன்ற பெயர்களைப் பயன்படுத்துகிறது.

கிரிட் ஏரியா பெயர்களை நிர்வகிப்பதற்கான கருவிகள் மற்றும் நுட்பங்கள்

உங்கள் திட்டங்கள் சிக்கலானதாக வளரும்போது, உங்கள் கிரிட் ஏரியா பெயர்களை நிர்வகிக்க உதவும் கருவிகள் மற்றும் நுட்பங்களைப் பயன்படுத்த நீங்கள் பரிசீலிக்கலாம்.

• CSS பிரீபுரோசசர்கள் (Sass, Less): CSS பிரீபுரோசசர்கள் உங்கள் கிரிட் ஏரியா பெயர்களுக்கு மாறிகள் மற்றும் மிக்சின்களை வரையறுக்க உங்களை அனுமதிக்கின்றன, இது அவற்றை மீண்டும் பயன்படுத்தவும் பராமரிக்கவும் எளிதாக்குகிறது.
• CSS மாட்யூல்கள்: CSS மாட்யூல்கள் உங்கள் CSS விதிகளை தனிப்பட்ட கூறுகளுக்குள் கட்டுப்படுத்த உதவுகின்றன, பெயரிடல் முரண்பாடுகளைத் தடுத்து மாடுலாரிட்டியை மேம்படுத்துகின்றன.
• பெயரிடும் மரபுகள் ஆவணப்படுத்தல்: உங்கள் திட்டத்தின் கிரிட் ஏரியாக்களுக்கான பெயரிடும் மரபுகளை கோடிட்டுக் காட்டும் ஒரு ஆவணத்தை உருவாக்கி அதை உங்கள் குழுவுடன் பகிரவும். இது நிலைத்தன்மையையும் தெளிவையும் உறுதிசெய்ய உதவுகிறது.

அணுகல்தன்மை பரிசீலனைகள்

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

• அர்த்தமுள்ள HTML-ஐப் பயன்படுத்தவும்: உங்கள் HTML கூறுகள் அர்த்தமுள்ளவையாக இருப்பதையும், அவை கொண்டிருக்கும் உள்ளடக்கத்தை துல்லியமாகப் பிரதிபலிப்பதையும் உறுதிப்படுத்தவும். உதாரணமாக, உங்கள் பக்கத்தை கட்டமைக்க <header>, <nav>, <main>, <aside>, மற்றும் <footer> கூறுகளைப் பயன்படுத்தவும்.
• படங்களுக்கு மாற்று உரையை வழங்கவும்: படங்களை ஸ்கிரீன் ரீடர்களுக்கு அணுகக்கூடியதாக மாற்ற, எப்போதும் விளக்கமான மாற்று உரையை வழங்கவும்.
• ARIA பண்புகளைப் பயன்படுத்தவும்: சில சமயங்களில், உதவித் தொழில்நுட்பங்களுக்கு கூடுதல் அர்த்தமுள்ள தகவல்களை வழங்க நீங்கள் ARIA பண்புகளைப் பயன்படுத்த வேண்டியிருக்கலாம். உதாரணமாக, ஒரு கிரிட் பகுதியின் நோக்கத்தை வரையறுக்க role பண்பைப் பயன்படுத்தலாம்.
• ஸ்கிரீன் ரீடர்கள் மூலம் சோதிக்கவும்: உங்கள் இணையதளம் ஊனமுற்ற பயனர்களுக்கு அணுகக்கூடியதாக இருப்பதை உறுதிப்படுத்த, ஸ்கிரீன் ரீடர்கள் மூலம் அதைத் தொடர்ந்து சோதிக்கவும்.

முடிவுரை

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

இணைய மேம்பாடு தொடர்ந்து বিকশিতப்பட்டு வருவதால், இதுபோன்ற அர்த்தமுள்ள நடைமுறைகளைக் கடைப்பிடிப்பது அனைவருக்கும் வலுவான மற்றும் உள்ளடக்கிய டிஜிட்டல் அனுபவங்களை உருவாக்குவதற்கு மிகவும் முக்கியமானதாகிறது.