10 ចំណុចកែប្រែនៃCSS 3 សំខាន់១០យ៉ាងសម្រាប់អ្នកអភិវឌ្ឍវ៉ិបសាយ
Cascade Style Sheetsជាពាក្យបំព្រួញរបស់CSS ហើយក៏ជាកូដមួយដែលប្រើសម្រាប់ជំនួយដល់អ្នកអភិវឌ្ឍគេហទំព័រឱ្យកាន់តែមានភាពស្រស់ស្អាតនិងមានភាពចាប់អារម្មណ៍ពីអ្នកដែលចូលទស្សនានូវគេហទំព័រនោះ។ ដូច្នេះការប្រើប្រាស់របស់កូដCascade Style Sheets(CSS)ត្រូវបានគេប្រើយកមកជំនួយក្នុងការបង្កើតគេហទំព័រយ៉ាងទូលំទូលាយ។ ដោយសារតែហេតុនេះហើយការអភិវឌ្ឍនៃបច្ចេកវិទ្យាក៏កាន់តែរីកចំរើនយ៉ាងខ្លាំងនោះ បានធ្វើឱ្យកូដCSSបង្កើតបានជាជំនាន់ថ្មីរបស់ខ្លួននោះគឺកូដCSS3 ដែលកូដនេះបានបង្កើតឡើងក្នុងគោលបំណងជំនួយឱ្យអ្នកដែលអភិវឌ្ឍន៍គេហទំព័រឱ្យកាន់តែមានភាពងាយស្រួលជាងមុនទៅទៀតក្នុងការបង្កើត។ តែផ្ទុយទៅវិញបើទោះបីជាកូដដែលអាចជួយសម្រួលដល់អ្នកបានច្រើនយ៉ាងណាក្ដីក៏មានបញ្ហាមួយចំនួនមិនទាន់អាចដោះស្រាយបាននៅឡើយនោះគឺជាបញ្ហានៃ Browser ចាស់ៗមួយចំនួនដែលមិនទាន់បានស្គាល់នូវកូដជំនាន់ថ្មីនេះនៅឡើយ។ យ៉ាងណាមិញចំពោះការមកដល់នូវBrowserជំនាន់ថ្មីបានធ្វើការដាក់បញ្ចូលនូវលក្ខណៈថ្មីមួយចំនួនដើម្បីឱ្យមានការស្គាល់នូវកូដជំនាន់ថ្មីនេះ។
ខាងក្រោមនេះជាលក្ខណៈថ្មីទាំង១០ដែលCSS3 បានបន្ថែមទៅលើកូដជំនាន់ចាស់៖
1. CSS 3 Selectors
ការប្រើប្រាស់នូវSelectorsនៃកូដជំនាន់ថ្មីនេះគឺមាន៣របៀបដែលប្រើសម្រាប់ធ្វើការហៅនូវStyleយកមកបង្ហាញនៅក្នុងគេហទំព័ររបស់អ្នក។ ក្នុងការប្រើនៅកូដនេះអ្នកមិនចាំបាច់ប្រើនៅឈ្មោះរបស់Classes និង IDឱ្យបានច្បាស់នោះទេ ដោយអ្នកគ្រាន់តែស្គាល់នៅការប្រកាសនូវតម្លៃ (Value) របស់ Attribute ថាវាមានឈ្មោះអ្វីទៅបានហើយ។ នៅពេលដែលអ្នកដឹងនូវតម្លៃរបស់Valueនោះហើយអ្នកអាចធ្វើហៅ Style យកមកប្រើប្រាស់បង្ហាញនូវក្នុងគេហទំព័ររបស់អ្នកជាមិនខាន។
នេះគឺជាទម្រង់សម្រាប់ធ្វើការប្រើ Selectorsទាំង៣ដែលមានដូចជា៖
ទម្រង់ទី១៖ ជាការចាប់យកនូវValue របស់Attributeដែលមានតម្លៃនៅមុខគេយកមកធ្វើការប្រៀបធៀបជាមួយនិងឈ្មោះClassឬID ដែលបានប្រកាសនៅខាងក្នុងកូដCSS3ដើម្បីធ្វើការបង្ហាញStyle។ក្នុងការចាប់យកនេះផងដែរវាមិនត្រូវបានគិតពីតួអក្សរដែលនៅបន្ទាប់វានោះទេ តែវាគិតពីតួអក្សរដែលនៅខាងដើមដែលមានឈ្មោះដូចគ្នាទៅនិងការប្រកាសរបស់ClassនិងIDដែលមាននៅក្នុងកូដCSS3 ទើបអាចធ្វើការបង្ហាញនៅStyle នោះបាន។ការប្រកាសនោះមានទម្រង់ដូចខាងក្រោមនេះ៖
[Attribute^=Value] ដែល Attributeនេះអាចជាឈ្មោះរបស់Classនិងជាឈ្មោះរបស់ID ឬក៏អាចមានឈ្មោះរបស់Tag HTMLនៅខាងក្រៅឃ្នាបដែលអាចបញ្ជាក់ថាការប្រើប្រាស់នៃClass នេះទៅលើTag មួយណាជាក់លាក់ ដូចទម្រង់មួយនេះTag HTML[Attribute^=Value]។
ទម្រង់ទី២៖ នេះជាការប្រើប្រាស់នូវតម្លៃរបស់ Attributeយកមកប្រៀបធៀបស្រដៀងគ្នាទៅនិងទម្រង់ខាងលើផងដែរ។ ប៉ុន្តែចំពោះដំណើរការរបស់កូដនេះវាមានភាពខុសគ្នាត្រង់ថា ការចាប់យកនូវតម្លៃរបស់Valueត្រូវបានគិតពីចំនួនតួអក្សរដែលនៅខាងក្រោយ។ ដូច្នោះប្រសិនបើការប្រកាសនៅតម្លៃរបស់Class និងIDមានឈ្មោះអ្វី នោះការចាប់យកនូវតម្លៃរបស់ Value យកមកប្រើនិងត្រូវបានជ្រើសយកនូវValue ណាដែលមានឈ្មោះដូចគ្នាទៅនឹងឈ្មោះនោះ ដែលមាននៅខាងចុងValue ដែលចង់បង្ហាញវានិងធ្វើការដំណើរការកូដនោះភ្លាម។ខាងក្រោមនេះជាទម្រង់របស់កូដនេះ៖
[Attribute$=Value] ចំណែកការប្រើនៅក្នុងទម្រង់កូដនេះក៏មិនខុសគ្នាជាមួយទម្រង់ខាងលើនោះទេតែគ្រាន់តែផ្លាស់ប្ដូរពីសញ្ញា(^) ទៅជាសញ្ញា($)វិញ។
ទម្រង់ទី៣៖ ឬឯការចាប់យកនូវតម្លៃ Value មួយនេះវិញវាមានភាពងាយស្រួលជាងការប្រើប្រាសនូវទម្រង់កូដទាំងពីខាងលើ។ គឺវាអាចប្រើប្រាស់ការចាប់យកValueដោយមិនគិតពីតួអក្សរដែលនៅខាងមុខឬក៏ខាងក្រោយនោះទេវាគិតតែឈ្មោះដែលដូចគ្នាទៅនិងការប្រកាសរបស់ Classនិង ID តែប៉ុណ្ណោះ។ នេះជាទម្រង់ដែលគេបានប្រើប្រាសវា៖
[Attribute*=Value] ចំពោះទម្រង់នេះវាក៏មានភាពដូចគ្នាទៅនិងទម្រង់ទាំងពីខាងលើតែត្រូវធ្វើការផ្លាស់ប្ដូរសញ្ញាមុននិងប្រើដូចខាងលើដែរ។
2. CSS 3 Rounded Corners
Rounded cornerគឺជាទម្រង់កូដមួយដែលបង្កើតឡើងនៅជំនាន់ថ្មីរបស់កូដCSS3 ដែលកូដនេះបានជួយសម្រួលជាខ្លាំងទៅលើការរចនាគេហទំព័រ។ លោកអ្នកធ្លាប់តែធ្វើការរចនាទៅលើស៊ុមរបស់គេហទំព័រដោយធ្វើការកាត់រូបភាពមកដាក់បញ្ចូលគ្នា ដើម្បីឱ្យចេញជារូបរាងកោងនៅផ្នែកខាងកែងជ្រុង។ចំពោះការប្រើប្រាស់លោកអ្នកត្រូវការប្រើកូដដែលមានឈ្មោះថា border-radiusដែលកូដនេះវាអាចធ្វើការទៅតាមBrowserនិមួយៗដែលអ្នកត្រូវបន្ថែមឈ្មោះកូដរបស់Browserទៅខាងមុខវា។ខាងក្រោមនេះជាស៊ុមដែលមានរាងកោងនៅខាងជ្រុងទាំងអស់ដែលធ្វើការនៅលើBrowser Firefox 3.6 ឡើងទៅ៖
3. CSS 3 Border Image
មិនត្រឹមតែប៉ុណ្ណោះការប្រើសុំខាងក្រៅដោយដាក់រូបភាពក៏អាចធ្វើបានដែរ នៅក្នុងកូដជំនាន់ថ្មីនេះដោយការប្រើនូវកូដមួយដែលមានឈ្មោះថា border-image។ចំពោះការប្រើកូដនេះអ្នកត្រូវការរូបភាពណាដែលអ្នកគិតថាវាអាចធ្វើជាស៊ុមបាននិងមានភាពលម្អទៅកាន់អ្នកទស្សនាគេហទំព័ររបស់អ្នក។ ដូចលទ្ធផលខាងក្រោម៖
4. CSS 3 Box Shadow
រឹតតែពិសេសជាងនេះទៅទៀតការបង្កើតស្រមោលទៅឱ្យប្រអប់មួយដែលនៅខាងក្រោយនោះវាលែងមានការពិបាកចំពោះអ្នកអភិវឌ្ឍគេហទំព័រទៀតហើយ ដោយការមកដល់នៅជំនាន់ថ្មីរបស់កូដCSS3គេបានដាក់បញ្ចូលជាស្រេចនៅកូដដែលអាចធ្វើជាស្រមោលបានយ៉ាងងាយដែលមានការបញ្ចេញនូវទម្រង់ដូចរូបខាងក្រោម៖
5. CSS 3 Text Shadow
នេះគឺអ្វីដែលមិនធ្លាប់មានពីមុនសូម្បីតែអក្សរក៏អាចមាននៅស្រមោលបានដែរ ដោយគ្រាន់តែអ្នកបន្ថែមកូដតែបន្តិចទៅលើទីតាំងដែលអ្នកចង់បង្ហាញអក្សរឱ្យមានស្រមោលនោះ។ វាមិនចាំបាច់ធ្វើការរចនានៅក្នុងកម្មវិធីផ្សេងធ្វើជារូបភាពយកមកដាក់នោះទេ ជាការងាយបំផុតដោយគ្រាន់តែសរសេរនូវកូដតែបន្តិចជាការស្រេច។
6. CSS 3 Gradient
ឬឯការចាក់ពណ៌លាយគ្នាទៅឱ្យផ្ទាំងខាងក្រោយរបស់គេហទំព័រវិញមានភាពងាយស្រួលជាងមុនផងដែរដោយអ្នកត្រូវស្គាល់ថាពណ៌ណាដែលអ្នកត្រូវលាយបញ្ចូលគ្នាជាពណ៌ Gradient។ ដោយមិនចាំបាច់ដាក់រូបភាពពណ៌ Gradient ទេ តែអ្នកត្រូវលាយពណ៌ដោយខ្លួនឯង។
7. CSS 3 RGBA
បើនិយាយអំពីការលាយពណ៌វិញRGBគឺជាការលាយបញ្ចូលគ្នាយ៉ាងសំខាន់នៅក្នុងគេហទំព័រ ហើយនៅក្នុងជំនាន់ថ្មីរបស់CSS3នេះគេបានបង្កើតនូវការលាយពណ៌ជាលក្ខណៈRGBA(Red Green Blue Alpha)ដែលមានគុណភាពយ៉ាងល្អក្នុងការលាយពណ៌ និងធ្វើការគ្រប់គ្រង់ទៅលើពណ៌ដែលអ្នកបានលាយតាមរយៈកម្រិតភាពច្បាស់នៃការកំណត់លក្ខណOpacity។
8. CSS 3 Transform (Element Rotation)
វាក៏ជាភាពងាយស្រួលមួយផងដែរ នៃការធ្វើឱ្យអក្សរមានទម្រង់បង្វិលខ្លួនបាននៅលើគេហទំព័រជាមួយនិងកូដរបស់CSS3។ជាធម្មតាប្រសិនបើអ្នករចនាគេហទំព័រចង់ធ្វើការបង្វិលនូវរូបឬអក្សរនោះ គេត្រូវការប្រើនូវកូដរបស់JavaScriptយកមកធ្វើជាជំនួយក្នុងការធ្វើវា ហើយនៅក្នុងពេលបច្ចុប្បន្ន JavaScript បានបង្កើតនៅទម្រង់ជាច្រើនសម្រាប់ផ្ដល់ឱ្យអ្នកប្រើប្រាស់នៅលើ online ដើម្បីធ្វើការទាញយកមកប្រើប្រាស់។ ប៉ុន្តែការប្រើនូវកូដ JavaScriptវាត្រូវការប្រើកូដជាច្រើនយកមកសរសេរ ដើម្បីបង្ហាញនៅលើគេហទំព័រ។ផ្ទុយទៅវិញការប្រើកូដរបស់CSS3មានភាពរហ័សនិងងាយស្រួលក្នុងការសរសេរជាងកូដ របស់JavaScript។
9. CSS 3 Multicolumn Layout
នៅក្នុងគេហទំព័រសព្វថ្ងៃការរចនារបស់វាមានលក្ខណៈបែងចែកជា columnsនិង ប្រអប់ដើម្បីធ្វើការបង្ហាញនូវទិន្នន័យខុសៗគ្នានៅលើគេហទំព័រ។CSS3បានចូលខ្លួនមកធ្វើការដោះស្រាយនូវបញ្ហាមួយនេះបានយ៉ាងងាយដោយការបង្កើតជា តារាងជាច្រើន (multicolumn) នៅក្នុងទម្រង់តែមួយ។ អ្នកត្រូវដឹងឱ្យបានច្បាស់នូវចំនួនcolumns ដែលអ្នកត្រូវការ។ក្នុងទម្រង់កូដនេះវាបានធ្វើដំណើរការជាមួយFirefox និង WebKit browsers។
10. CSS 3 Web Fonts
ចំណុចចុងក្រោយរបស់កូដ CSS3 នោះគឺការដាក់ពុម្ពអក្សរបញ្ចូលទៅក្នុងគេហទំព័រដោយផ្ទាស់ដោយមិនចាំបាច់ធ្វើការហៅចេញពីគេហទំព័រដ៏ទៃនោះឡើយ។ ការដាក់បញ្ចូលនូវពុម្ពអក្សរនេះបានជួយដល់អ្នកអភិវឌ្ឍគេហទំព័រឱ្យរឹតតែមានភាពងាយស្រួល ដោយប្រើនូវទម្រង់កូដ @font-face ឱ្យវាស្គាល់គ្នាដោយផ្ទាល់ទៅកាន់កុំព្យូទ័ររបស់អ្នកចូលទស្សនា ទោះបីជាមិនមាននូវពុម្ពអក្សរនោះក៏ដោយ។
ចំពោះការប្រើប្រាស់របស់កូដCSS3នេះវាបានផ្ដល់ភាពងាយស្រួលជាច្រើនទៅឱ្យអ្នកអភិវឌ្ឍគេហទំព័រដោយជួយផ្នែកការរចនានៃគេហទំព័រឱ្យមានភាពស្រស់ស្អាតនិងធ្វើឱ្យគេហទំព័រនោះមានល្បឿនលឿនជាងមុន ព្រោះលោកអ្នកមិនត្រូវការប្រើប្រាស់នូវរូបភាពច្រើននោះទេ។ ដូច្នោះដើម្បីសម្រួលដល់ការងាររបស់លោកអ្នក អ្នកគួរតែងាកមកប្រើនូវកូដជំនាន់ថ្មីនេះវិញទើបជាការងាយស្រួល។
ចំណាំ៖សូមស្វែងរក Complete Code នូវរាល់ឧទាហរណ៍នៃចំណុចនីមួយខាងលើនៅក្នុង CD Software(ដែលមានលក់ភ្ជាប់ជាមួយសៀវភៅ)ដើម្បីឱ្យលោកអ្នកអាចធ្វើការសិក្សាក៏ដូចជាសាកល្បងដោយខ្លួនឯង៕
