CSS Functions
សេចក្តីផ្តើម
CSS Functions គឺជាមុខងារដែលអនុញ្ញាតឱ្យយើងធ្វើការគណនា ផ្លាស់ប្តូរតម្លៃ ឬបង្កើតលទ្ធផលស្មុគស្មាញដោយស្វ័យប្រវត្តិ។ ពួកវាជួយធ្វើឱ្យ CSS មានភាពបត់បែន និងមានឥទ្ធិពលខ្លាំងជាងមុន។
ចំណាំ: CSS Functions ប្រើ syntax function-name(arguments) ដូចគ្នានឹងមុខងារក្នុងភាសាកម្មវិធីផ្សេងៗ។
១. calc() - ការគណនា
Function calc() អនុញ្ញាតឱ្យយើងធ្វើការគណនាគណិតវិទ្យាក្នុង CSS។ វាអាចរួមបញ្ចូលខ្នាតផ្សេងៗគ្នា (px, %, em, vw ...)។
Operators ដែលអាចប្រើបាន:
+- បូក-- ដក*- គុណ/- ចែក
សំខាន់: Operators + និង - ត្រូវមានដកឃ្លាទាំងសងខាង។ ឧទាហរណ៍: calc(100% - 20px) មិនមែន calc(100%-20px)
២. var() - CSS Variables
Function var() ប្រើដើម្បីយកតម្លៃពី CSS custom properties (variables)។
Syntax:
var(--variable-name, fallback-value)
- --variable-name: ឈ្មោះអថេរ (ត្រូវចាប់ផ្តើមដោយ
--) - fallback-value: តម្លៃបម្រុងបើអថេរមិនមាន (optional)
៣. min(), max(), clamp()
Functions ទាំងនេះប្រើសម្រាប់ជ្រើសរើសតម្លៃតាមលក្ខខណ្ឌ។
min() - តម្លៃតូចបំផុត
ជ្រើសរើសតម្លៃតូចបំផុតក្នុងចំណោមតម្លៃដែលផ្តល់ឱ្យ។
max() - តម្លៃធំបំផុត
ជ្រើសរើសតម្លៃធំបំផុតក្នុងចំណោមតម្លៃដែលផ្តល់ឱ្យ។
clamp() - តម្លៃក្នុងចន្លោះ
កំណត់តម្លៃក្នុងចន្លោះមួយ។ Syntax: clamp(min, preferred, max)
៤. Color Functions
CSS មាន functions ជាច្រើនសម្រាប់ធ្វើការជាមួយពណ៌។
rgb() និង rgba()
បង្កើតពណ៌ពី Red, Green, Blue (និង Alpha សម្រាប់ transparency)។
hsl() និង hsla()
បង្កើតពណ៌ពី Hue, Saturation, Lightness (និង Alpha)។
color-mix()
លាយពណ៌ពីរ (CSS feature ថ្មី)។
៥. Transform Functions
Functions ទាំងនេះប្រើជាមួយ property transform ដើម្បីផ្លាស់ប្តូររូបរាងធាតុ។
Transform Functions សំខាន់ៗ:
| Function | ពិពណ៌នា | ឧទាហរណ៍ |
|---|---|---|
translate() |
រំកិលធាតុ | translate(50px, 100px) |
rotate() |
បង្វិលធាតុ | rotate(45deg) |
scale() |
ពង្រីក/បង្រួមធាតុ | scale(1.5) |
skew() |
ផ្អៀងធាតុ | skew(20deg) |
matrix() |
បញ្ចូលគ្នាទាំងអស់ | matrix(1, 0, 0, 1, 0, 0) |
៦. Gradient Functions
Functions ទាំងនេះបង្កើត gradient (ពណ៌ជម្រាលពីមួយទៅមួយ)។
linear-gradient()
បង្កើត gradient តាមបន្ទាត់ត្រង់។
radial-gradient()
បង្កើត gradient តាមរង្វង់ពីកណ្តាល។
conic-gradient()
បង្កើត gradient តាមរង្វង់គ្រប់ 360 ដឺក្រេ។
៧. Filter Functions
Functions ទាំងនេះប្រើជាមួយ property filter ដើម្បីបន្ថែមបែបផែនពិសេសលើធាតុ។
Filter Functions សំខាន់ៗ:
| Function | ពិពណ៌នា |
|---|---|
blur() |
ធ្វើឱ្យព្រិល |
brightness() |
កែសម្រួលពន្លឺ |
contrast() |
កែសម្រួលកម្រិតពណ៌ |
grayscale() |
បម្លែងទៅខ្មៅស |
hue-rotate() |
បង្វិលពណ៌ |
invert() |
ដាក់បញ្ច្រាស់ពណ៌ |
opacity() |
កែសម្រួលតម្លា |
saturate() |
កែសម្រួលកម្រិតពណ៌ឆ្អែត |
sepia() |
បន្ថែមបែបផែនសេពៀ |
drop-shadow() |
បន្ថែមមាឈ្មោល |
៨. url() - Resources
Function url() ប្រើដើម្បីផ្ទុករូបភាព fonts ឬ resources ផ្សេងៗ។
៩. attr() - Attributes
Function attr() ប្រើដើម្បីយកតម្លៃពី HTML attributes។ ជាធម្មតាប្រើជាមួយ pseudo-elements។
១០. counter() - Counters
Functions counter() និង counters() ប្រើដើម្បីបង្កើតលេខរាប់ស្វ័យប្រវត្តិ។
១១. Math Functions (Modern CSS)
CSS ទំនើបមាន math functions បន្ថែម:
sin(), cos(), tan()
Trigonometric functions សម្រាប់ការគណនាកម្រិតខ្ពស់។
abs(), sign()
តម្លៃដាច់ខាត និង sign នៃលេខ។
round(), mod(), rem()
ការបង្គត់ និងដកសល់។
pow(), sqrt(), hypot()
ការគណនាស្វ័យគុណ ឬឌ និង Pythagorean។
១២. Shape Functions
Functions ទាំងនេះប្រើដើម្បីបង្កើតរូបរាងពិសេស។
circle(), ellipse()
បង្កើតរូបរង្វង់ និងរង្វង់ពងក្រពើ។
polygon()
បង្កើតរូបពហុកោណ។
path()
បង្កើតផ្លូវស្មុគស្មាញដោយប្រើ SVG path syntax។
ឧទាហរណ៍ជាក់ស្តែង - Responsive Card
ឧទាហរណ៍នេះបង្ហាញការប្រើ functions ជាច្រើនរួមគ្នា។
ឧទាហរណ៍ជាក់ស្តែង - Image Gallery
ឧទាហរណ៍នេះប្រើ calc(), min(), max() និង filters។
តារាងសង្ខេប Functions សំខាន់ៗ
| ប្រភេទ | Functions | ការប្រើប្រាស់ |
|---|---|---|
| Math | calc(), min(), max(), clamp() | ការគណនានិងកំណត់តម្លៃ |
| Color | rgb(), hsl(), color-mix() | បង្កើតនិងលាយពណ៌ |
| Transform | translate(), rotate(), scale(), skew() | ផ្លាស់ប្តូររូបរាងធាតុ |
| Gradient | linear-gradient(), radial-gradient(), conic-gradient() | បង្កើតពណ៌ជម្រាល |
| Filter | blur(), brightness(), contrast(), etc. | បែបផែនពិសេស |
| Shape | circle(), polygon(), path() | បង្កើតរូបរាង |
| Other | var(), url(), attr(), counter() | utilities ផ្សេងៗ |
ករណីប្រើប្រាស់ទូទៅ (Common Use Cases)
១. Responsive Design
ប្រើ calc(), clamp(), min(), max() ដើម្បីបង្កើត layouts ដែល responsive ដោយមិនចាំបាច់ media queries។
២. Theme System
ប្រើ var() ដើម្បីបង្កើតប្រព័ន្ធពណ៌និង theme ដែលងាយផ្លាស់ប្តូរ។
៣. Animations & Effects
ប្រើ transform functions និង filter functions ដើម្បីបង្កើត animations និងបែបផែនពិសេស។
៤. Dynamic Spacing
ប្រើ calc() ដើម្បីគណនា margins, paddings ដោយស្វ័យប្រវត្តិ។
៥. Image Effects
ប្រើ filter functions ដើម្បីបន្ថែមបែបផែនលើរូបភាពដោយមិនចាំបាច់កែសម្រួលរូបភាពដើម។
៦. Custom Shapes
ប្រើ clip-path ជាមួយ shape functions ដើម្បីបង្កើតរូបរាងពិសេស។
ចំណាំសំខាន់និងការអនុវត្តល្អបំផុត
⚠️ ចំណាំសំខាន់
- Browser Support: Functions មួយចំនួន (color-mix, sin, cos...) នៅថ្មី ត្រូវពិនិត្យ browser support
- Performance: Filter functions និង transform functions អាចប៉ះពាល់ performance បើប្រើច្រើនពេក
- calc() spaces: Operators + និង - ត្រូវមានដកឃ្លាទាំងសងខាង
- Custom Properties Scope: CSS variables មាន scope តាម DOM hierarchy
✅ ការអនុវត្តល្អបំផុត (Best Practices)
- ប្រើ CSS Variables (var()) សម្រាប់តម្លៃដែលប្រើច្រើនដង
- ប្រើ clamp() ជំនួស min/max width ជាមួយ media queries
- ប្រើ calc() ដើម្បីគណនា spacing និង sizing dynamically
- ប្រើ transform functions ជំនួស top/left សម្រាប់ animations (performance ល្អជាង)
- ប្រើ filter functions ជំនួសការកែសម្រួលរូបភាពក្នុង Photoshop
- តែងតែផ្តល់ fallback values ក្នុង var()
- ប្រើ will-change ជាមួយ animations ដើម្បី performance ល្អជាង
🎯 Tips & Tricks
- ប្រើ
calc(100vh - 60px)សម្រាប់ full-height layouts ដោយមាន fixed header - ប្រើ
clamp(1rem, 2vw, 2rem)សម្រាប់ fluid typography - រួមបញ្ចូល functions:
calc(var(--spacing) * 2) - ប្រើ
hsl()ជំនួសrgb()សម្រាប់ការកែសម្រួលពណ៌ងាយជាង - ប្រើ multiple transforms:
transform: rotate(45deg) scale(1.2); - ប្រើ
backdrop-filterជាមួយblur()សម្រាប់ glass effect
🔮 Future CSS Functions
CSS Functions ថ្មីៗកំពុងត្រូវបានអភិវឌ្ឍ៖
color-contrast()- ជ្រើសរើសពណ៌ដែលមាន contrast ល្អបំផុតrandom()- បង្កើតលេខចៃដន្យtoggle()- toggle រវាងតម្លៃ- Math functions បន្ថែម
សង្ខេប: CSS Functions គឺជាឧបករណ៍មានឥទ្ធិពលខ្លាំងដែលធ្វើឱ្យ CSS មានភាពបត់បែននិងមានឥទ្ធិពលខ្លាំង។ ពី calc() សម្រាប់ការគណនាសាមញ្ញ រហូតដល់ filter functions សម្រាប់បែបផែនស្មុគស្មាញ functions ទាំងនេះជួយយើងសរសេរ CSS ដែល maintainable និង powerful។ ការយល់ដឹងនិងប្រើប្រាស់ត្រឹមត្រូវនឹងធ្វើឱ្យការងាររចនាគេហទំព័ររបស់អ្នកងាយស្រួលនិងទំនើបជាង។