# កិច្ចការផ្លាស់ប្តូររចនាសម្ព័ន្ធ CSS

## គោលដៅ

ផ្លាស់ប្តូរគម្រោង terrarium របស់អ្នក ដើម្បីប្រើបច្ចេកវិទ្យារចនាសម្ព័ន្ធ CSS ម៉ូដដែល! បម្លែងវិធីសាស្រ្តកំណត់តំណែងអប្បបរមា (absolute positioning) បច្ចុប្បន្នក្នុងការអនុវត្ត **Flexbox** ឬ **CSS Grid** សម្រាប់រចនាបទដែលអាចថែរក្សា បានងាយ និងមានការឆ្លើយតបល្អ។ កិច្ចការនេះធ្វើឱ្យអ្នកមានការប្រឈមក្នុងការអនុវត្តស្ដង់ដារផ្នែក CSS ថ្មីៗ ខណៈបន្តរក្សាសម្រស់ភ្នាក់ងាររបស់ terrarium របស់អ្នក។

ការ​យល់​ដឹង​ពី​ពេលវេលា​និង​វិធីសាស្រ្ត​ប្រើ​ការ​រចនា layout ខុសៗគ្នា គឺជាទំនុកចិត្តមួយសំខាន់សម្រាប់ការអភិវឌ្ឍវែបសម័យថ្មី។ ការហាត់នេះជាស្ពានភ្ជាប់វិធីសាស្រ្តកំណត់តំណែងចាស់ៗជាមួយប្រព័ន្ធរចនាសម្ព័ន្ធ CSS បច្ចុប្បន្ន។

## សេចក្តីណែនាំសម្រាប់កិច្ចការ

### ជំហានទី 1: វិភាគ និង គម្រោង
1. **ពិនិត្យកូដ terrarium បច្ចុប្បន្នរបស់អ្នក** - ស្វែងរកធាតុដែលកំពុងប្រើកំណត់តំណែងអប្បបរមា
2. **ជ្រើសរើសវិធីសាស្រ្តរចនា layout របស់អ្នក** - សម្រេចថាតើ Flexbox ឬ CSS Grid ត្រូវគ្នាជាងសម្រាប់គោលដៅរចនារបស់អ្នក
3. **គូររចនាសម្ព័ន្ធ layout ថ្មីរបស់អ្នក** - វិភាគពីរបៀបដាក់តំណែងកុងត្ន័រនិងធាតុរុក្ខជាតិ

### ជំហានទី 2: អនុវត្ត
1. **បង្កើតកំណែថ្មី** នៃគម្រោង terrarium របស់អ្នកនៅថតថ្មីមួយ
2. **ធ្វើបច្ចុប្បន្នភាពរចនាសម្ព័ន្ធ HTML** តាមតម្រូវ ដើម្បីគាំទ្រវិធីសាស្រ្តរចនារបស់អ្នកជ្រើសរើស
3. **ផ្លាស់ប្តូរ CSS** ដើម្បីប្រើ Flexbox ឬ CSS Grid ជំនួសការកំណត់តំណែងអប្បបរមា
4. **រក្សាសមាមាត្ររូបភាព** - រក្សាការបង្ហាញរុក្ខជាតិ និងចាន terrarium នៅតំណែងដដែល
5. **អនុវត្តចម្លើយបត់បែន** - រចនាសម្ព័ន្ធរបស់អ្នកគួរតែអាចបត់បែនឱ្យសម្រួលទៅទំហំអេក្រង់ខុសៗគ្នា

### ជំហានទី 3: សាកល្បង និង ឯកសារព័ត៌មាន
1. **សាកល្បងក្នុងកម្មវិធីរុករក** - បញ្ជាក់ថារចនារបស់អ្នកដំណើរការល្អនៅក្នុង Chrome, Firefox, Edge និង Safari
2. **សាកល្បងចម្លើយបត់បែន** - ពិនិត្យរចនារបស់អ្នកនៅលើទូរស័ព្ទចល័ត, ថេប្លេត និងកុំព្យូទ័រឡេបតុប
3. **ឯកសារព័ត៌មាន** - បន្ថែមមតិយោបល់ទៅ CSS របស់អ្នកដើម្បីពន្យល់ពីជម្រើសរចនា
4. **ថតរូបអេក្រង់** - ចាប់ផ្តើម terrarium របស់អ្នកនៅក្នុងកម្មវិធីរុករកនិងទំហំអេក្រង់ផ្សេងៗ

## កម្រិតបច្ចេកទេសត្រូវការ

### ការអនុវត្តរចនាសម្ព័ន្ធ
- **ជ្រើសរើស១យ៉ាង**: អនុវត្ត Flexbox ឬ CSS Grid (មិនប្រើពីរទាំងពីរជាមួយធាតុដូចគ្នា)
- **រចនារឆ្លើយតប**: ប្រើឯកតាដូចជា (`rem`, `em`, `%`, `vw`, `vh`) ជំនួស pixels កំណត់ថេរ
- **ចូលដំណើរការ**: រក្សារចនាសម្ព័ន្ធ HTML មានអត្ថន័យ និងអត្ថបទ alt ដូចគ្នា
- **គុណភាពកូដ**: ប្រើឈ្មោះសម្គាល់រួមគ្នានិងចាត់តាំង CSS យ៉ាងសមរម្យ

### លក្ខណៈ CSS ម៉ូដែលដើម្បីបញ្ចូល
```css
/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}
```

### តម្រូវការគាំទ្រកម្មវិធីរុករក
- **Chrome/Edge**: ចុងក្រោយ ២ កំណែ
- **Firefox**: ចុងក្រោយ ២ កំណែ  
- **Safari**: ចុងក្រោយ ២ កំណែ
- **កម្មវិធីរុករកលើទូរស័ព្ទ**: iOS Safari, Chrome Mobile

## ឯកសារដែលត្រូវឲ្យប្រគល់

1. **ឯកសារ HTML បច្ចុប្បន្នភាព** ជាមួយរចនាសម្ព័ន្ធសម្រួលធំ
2. **ឯកសារ CSS បានផ្លាស់ប្តូរ** ប្រើបច្ចេកទេសរចនាសម្ព័ន្ធម៉ូដ។
3. **បណ្ណាល័យថតរូបអេក្រង់** បង្ហាញការចូលគ្នានៃកម្មវិធីរុករក:
   - មើលលើកុំព្យូទ័រ (1920x1080)
   - មើលលើថេប្លេត (768x1024) 
   - មើលលើទូរស័ព្ទចល័ត (375x667)
   - យ៉ាងហោចណាស់ ២កម្មវិធីរុករកផ្សេងគ្នា
4. **ឯកសារ README.md** បង្ហាញសេចក្តីហេតុផលជ្រើសរើសរចនា (Flexbox ឬ Grid) និងហេតុផល
   - បញ្ហាសម្រេចក្នុងពេលផ្លាស់ប្តូរ
   - កំណត់សម្គាល់ការចូលរួមកម្មវិធីរុករក
   - សេចក្តីណែនាំក្នុងការបញ្ជួរកូដរបស់អ្នក

## វិច្ឆ័យការវាយតម្លៃ

| កម្រិត | អតិភាព (4) | បរិញ្ញាបត្រ (3) | កំពុងអភិវឌ្ឍ (2) | ចាប់ផ្តើម (1) |
|----------|-------------|------------------|------------------|---------------|
| **ការអនុវត្តរចនា layout** | ប្រើខ្លាំង Flexbox/Grid ជាមួយលក្ខណៈវាងវៃ; រចនារឆ្លើយតបពេញលេញ | អនុវត្តត្រឹមត្រូវ ជាមួយរចនារឆ្លើយតបល្អ | អនុវត្តមូលដ្ឋាន មានបញ្ហារចនារឆ្លើយតបតិច | ការអនុវត្តរចនា layout មិនពេញលេញ ឬខុស |
| **គុណភាពកូដ** | CSS ស្អាត រៀបចំល្អ មានមតិយោបល់មានន័យ និងឈ្មោះធម្មតា | រៀបចំបានល្អ មានមតិយោបល់ខ្លះ | រៀបចំបានត្រឹមត្រូវ មានការ​ចង្អុល​ខ្លះ | រៀបចំខ្សោយ ធ្វើអោយស្មុគស្មាញក្នុងការយល់ |
| **ភាពឆបគ្នាក្នុងកម្មវិធីរុករក** | មានភាពស្របគ្នាទាំងអស់ជំនួយដោយថតរូបអេក្រង់ | មានភាពឆបគ្នាល្អ បញ្ជាក់បញ្ហានៅកម្រិតតូច | មានបញ្ហាភាពឆបគ្នាដែលមិនប៉ះពាល់មុខងារ | មានបញ្ហាធំ ឬខ្វះការសាកល្បង |
| **រចនារឆ្លើយតប** | វិធីសាស្រ្តម៉ូប៊ីល-ផ្តើមល្អ ជាមួយចំណុចឆក់ខ្សែភាពយន្ដទន់ | រចនារឆ្លើយតបល្អ ជាមួយចំណុចឆក់សមរម្យ | រចនាមូលដ្ឋាន មានបញ្ហារចនារឆ្លើយតប | រចនារឆ្លើយតបមានកំណត់ ឬខូចខាត |
| **ឯកសារព័ត៌មាន** | README ពេញលេញ មានពន្យល់លម្អិត និងយល់ដឹង | ឯកសារយ៉ាងល្អគ្របដណ្តប់ទាំងអស់ | ឯកសារមូលដ្ឋាន មានការពន្យល់តិច | ឯកសារខ្វះ ឬមិនមាន |

## ឧបករណ៍ជួយ

### មេរៀនវិធីសាស្រ្តរចនា layout
- 📖 [មេរៀនពេញលេញអំពី Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- 📖 [មេរៀនពេញលេញអំពី CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- 📖 [Flexbox នឹង Grid - ជ្រើសឧបករណ៍ត្រឹមត្រូវ](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)

### ឧបករណ៍សាកល្បងកម្មវិធីរុករក
- 🛠️ [ម៉ូដឆ្លើយតប DevTools របស់កម្មវិធីរុករក](https://developer.chrome.com/docs/devtools/device-mode/)
- 🛠️ [Can I Use - គាំទ្រលក្ខណៈពិសេស](https://caniuse.com/)
- 🛠️ [BrowserStack - សាកល្បងគន្លងកម្មវិធីរុករក](https://www.browserstack.com/)

### ឧបករណ៍គុណភាពកូដ
- ✅ [CSS Validator](https://jigsaw.w3.org/css-validator/)
- ✅ [HTML Validator](https://validator.w3.org/)
- ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)

## បញ្ហាបន្ថែម

🌟 **រចនាលំនាំបច្ចេកទេស**: អនុវត្តទាំង Flexbox និង Grid នៅផ្នែកផ្សេងៗនៃរចនារបស់អ្នក  
🌟 **បញ្ចូលកម្មវិធីចលនា**: បន្ថែមការផ្លាស់ប្តូរឬចលនាដែលដំណើរការជាមួយ layout ថ្មីរបស់អ្នក  
🌟 **របៀបខ្មៅ**: អនុវត្តអ្នកប្តូរមុខងារធ្វើពីលក្ខណ: CSS custom properties  
🌟 **ការសួរក្រោមកុងតឺន័រ**: ប្រើបច្ចេកវិទ្យារចនាក្រោម container query សម្រាប់ភាពឆ្លើយតបនៅកម្រិតធាតុ

> 💡 **ចងចាំ**: គោលបំណងមិនមែនគ្រាន់តែធ្វើឲ្យវាដំណើរការ ប៉ុន្តែគឺយល់ថា ហេតុអ្វីបានជាវិធីសាស្រ្តរចនារបស់អ្នកជ្រើសរើសគឺជាចម្លើយល្អបំផុតសម្រាប់បញ្ហារចនានេះ!

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**ប្រកាសលើកលែង**៖  
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ទោះបីយើងខិតខំសម្រាប់ភាពត្រឹមត្រូវ ក៏សូមយកចិត្តទុកដាក់ថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុសឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមក្នុងភាសាមានដើមគួរត្រូវបានគេចាត់ទុកជាធនធានដ៏មានអំណាច។ សម្រាប់ព័ត៌មានសំខាន់ៗ ដាក់សំណើរសូមប្រើការបកប្រែដោយមនុស្សជំនាញ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការបកប្រែខុសណាមួយដែលកើតមានពីការប្រើប្រាស់បកប្រែនេះទេ។
<!-- CO-OP TRANSLATOR DISCLAIMER END -->