CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳ ಮೂಲಕ ಬಣ್ಣದ ಫಾಂಟ್‌ಗಳನ್ನು ನಿಯಂತ್ರಿಸಿ, ಜಾಗತಿಕ ವೆಬ್ ವಿನ್ಯಾಸದ ಪ್ರವೇಶಸಾಧ್ಯತೆ ಮತ್ತು ದೃಶ್ಯ ಆಕರ್ಷಣೆಯನ್ನು ಹೆಚ್ಚಿಸಿ. ಆಧುನಿಕ ವೆಬ್‌ಗೆ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ.
CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳು: ಜಾಗತಿಕ ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಸುಧಾರಿತ ಬಣ್ಣದ ಫಾಂಟ್ ನಿಯಂತ್ರಣ
ವೆಬ್ ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ, ಮತ್ತು ಅದರೊಂದಿಗೆ, ನಾವು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ನಮ್ಮನ್ನು ವ್ಯಕ್ತಪಡಿಸುವ ವಿಧಾನಗಳು ಸಹ. ಬಣ್ಣದ ಫಾಂಟ್‌ಗಳು, ವಿಶೇಷವಾಗಿ COLRv1 ಸ್ವರೂಪವನ್ನು ಬಳಸುವ ಫಾಂಟ್‌ಗಳು, ವಿನ್ಯಾಸಕರಿಗೆ ಪ್ರಬಲ ಸಾಧನವಾಗಿ ಪ್ರಗತಿ ಸಾಧಿಸುತ್ತಿವೆ. ಆದಾಗ್ಯೂ, ಈ ಫಾಂಟ್‌ಗಳಲ್ಲಿನ ವೈವಿಧ್ಯಮಯ ಬಣ್ಣ ಸ್ಕೀಮ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಸವಾಲಿನ ಸಂಗತಿಯಾಗಿದೆ. CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ನಮೂದಿಸಿ, ಇದು ಬಣ್ಣದ ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್‌ಗಳ ಮೇಲೆ ಉತ್ತಮ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುವ ಒಂದು ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ, ಇದು ವಿವಿಧ ಬಳಕೆದಾರರ ಅನುಭವಗಳಾದ್ಯಂತ ವರ್ಧಿತ ಗ್ರಾಹಕೀಕರಣ ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಶಕ್ತಗೊಳಿಸುತ್ತದೆ.
ಬಣ್ಣದ ಫಾಂಟ್‌ಗಳು ಯಾವುವು?
ಸಾಂಪ್ರದಾಯಿಕ ಫಾಂಟ್‌ಗಳು ಅಕ್ಷರಗಳ ಆಕಾರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ, color ಮತ್ತು backgroundColor ನಂತಹ CSS ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಬಣ್ಣವನ್ನು ಬಿಟ್ಟುಕೊಡುತ್ತವೆ. ಬಣ್ಣದ ಫಾಂಟ್‌ಗಳು, ಮತ್ತೊಂದೆಡೆ, ಫಾಂಟ್ ಫೈಲ್‌ನಲ್ಲಿ ಬಣ್ಣ ಮಾಹಿತಿಯನ್ನು ನೇರವಾಗಿ ಹುದುಗಿಸುತ್ತವೆ. ಇದು ಗ್ರೇಡಿಯೆಂಟ್‌ಗಳು, ಟೆಕಶ್ಚರ್‌ಗಳು ಮತ್ತು ಬಹು-ಬಣ್ಣದ ಗ್ಲಿಫ್‌ಗಳು ಸೇರಿದಂತೆ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮತ್ತು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಸಮೃದ್ಧ ಟೈಪೊಗ್ರಫಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಬಣ್ಣದ ಫಾಂಟ್‌ಗಳಿಗೆ ಹಲವಾರು ಸ್ವರೂಪಗಳಿವೆ, ಅವುಗಳೆಂದರೆ:
- SVGinOT (SVG OpenType): OpenType ಫಾಂಟ್‌ಗಳಲ್ಲಿ SVG (ಸ್ಕೇಲೆಬಲ್ ವೆಕ್ಟರ್ ಗ್ರಾಫಿಕ್ಸ್) ಡೇಟಾವನ್ನು ಹುದುಗಿಸುತ್ತದೆ.
- CBDT/CBLC (ಕಲರ್ ಬಿಟ್‌ಮ್ಯಾಪ್ ಡೇಟಾ ಟೇಬಲ್/ಕಲರ್ ಬಿಟ್‌ಮ್ಯಾಪ್ ಲೊಕೇಶನ್ ಟೇಬಲ್): ಗ್ಲಿಫ್ ಪ್ರಾತಿನಿಧ್ಯಗಳಿಗಾಗಿ ಬಿಟ್‌ಮ್ಯಾಪ್ ಚಿತ್ರಗಳನ್ನು ಬಳಸುತ್ತದೆ.
- COLR (ಕಲರ್ ಲೇಯರ್‌ಗಳು): ಗ್ಲಿಫ್‌ಗಳನ್ನು ಲೇಯರ್ ಮಾಡಿದ ಆಕಾರಗಳ ಸರಣಿಯಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಪ್ರತಿಯೊಂದೂ ತನ್ನದೇ ಆದ ಬಣ್ಣವನ್ನು ಹೊಂದಿದೆ. ಆವೃತ್ತಿ 0 (COLR v0) ಸೀಮಿತ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಹೊಂದಿದೆ.
- COLRv1 (ಕಲರ್ ಲೇಯರ್‌ಗಳು ಆವೃತ್ತಿ 1): COLR ನ ವಿಕಸನ, ನಮ್ಯತೆ, ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯಲ್ಲಿ ಗಮನಾರ್ಹ ಸುಧಾರಣೆಗಳನ್ನು ನೀಡುತ್ತದೆ. ಇದು ವೇರಿಯಬಲ್ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್‌ಗಳು ಮತ್ತು ಗ್ರೇಡಿಯೆಂಟ್‌ಗಳಂತಹ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ.
COLRv1 ವಿಶೇಷವಾಗಿ ಭರವಸೆ ನೀಡುತ್ತದೆ ಏಕೆಂದರೆ ಇದು ವೆಕ್ಟರ್ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ಗ್ರೇಡಿಯೆಂಟ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ, ಇದು ಸ್ಕೇಲೆಬಲ್ ಮತ್ತು ಉತ್ತಮ-ಗುಣಮಟ್ಟದ ಬಣ್ಣದ ಫಾಂಟ್‌ಗಳಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ದಿಷ್ಟವಾಗಿ ನಿಯಂತ್ರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಸ್ವರೂಪವಾಗಿದೆ.
CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ಪರಿಚಯಿಸಲಾಗುತ್ತಿದೆ
CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳು COLRv1 ಫಾಂಟ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ಮತ್ತು ಮಾರ್ಪಡಿಸಲು ಒಂದು ಕಾರ್ಯವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಇದು ನಿಮಗೆ ಇದನ್ನು ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ:
- ಬಣ್ಣದ ಸ್ಕೀಮ್‌ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಬ್ರ್ಯಾಂಡಿಂಗ್ ಅಥವಾ ಥೀಮ್‌ಗೆ ಹೊಂದಿಸಲು ಫಾಂಟ್‌ನ ಬಣ್ಣಗಳನ್ನು ಅಳವಡಿಸಿ.
- ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಸುಧಾರಿಸಿ: ದೃಷ್ಟಿಹೀನತೆ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಪೂರೈಸುವ ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ವ್ಯತ್ಯಾಸಗಳನ್ನು ರಚಿಸಿ.
- ಥೀಮಿಂಗ್ ಅಳವಡಿಸಿ: ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್‌ಗಳಿಗಾಗಿ ಅಥವಾ ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳ ಆಧಾರದ ಮೇಲೆ ವಿವಿಧ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್‌ಗಳ ನಡುವೆ ಸುಲಭವಾಗಿ ಬದಲಾಯಿಸಿ.
- ಡೈನಾಮಿಕ್ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಿ: CSS ವೇರಿಯಬಲ್‌ಗಳು ಅಥವಾ JavaScript ಬಳಸಿ ಫಾಂಟ್ ಬಣ್ಣಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಿ ಅಥವಾ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾಯಿಸಿ.
CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ
ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಮುಖ್ಯ CSS ಗುಣಲಕ್ಷಣವೆಂದರೆ font-palette. ಇದು ಫಾಂಟ್ ಫೈಲ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ನಿರ್ದಿಷ್ಟ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಅಥವಾ ನಿಮ್ಮದೇ ಆದ ಕಸ್ಟಮ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
1. ಪೂರ್ವನಿರ್ಧರಿತ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದು
COLRv1 ಫಾಂಟ್‌ಗಳು ಬಹು ಪೂರ್ವನಿರ್ಧರಿತ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ಹೊಂದಿರಬಹುದು, ಪ್ರತಿಯೊಂದೂ ಅನನ್ಯ ಹೆಸರಿನೊಂದಿಗೆ. font-palette ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಈ ಪ್ಯಾಲೆಟ್‌ಗಳಲ್ಲಿ ಒಂದನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದು:
.element {
font-family: 'MyColorFont';
font-palette: 'DarkTheme';
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, "element" ಎಂಬ ವರ್ಗವನ್ನು ಹೊಂದಿರುವ ಅಂಶವು "MyColorFont" ಫಾಂಟ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ "DarkTheme" ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ.
2. ಕಸ್ಟಮ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು
ನೀವು @font-palette-values ಅಟ್-ರೂಲ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಕಸ್ಟಮ್ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ರಚಿಸಬಹುದು. ಇದು ಫಾಂಟ್‌ನ ಡೀಫಾಲ್ಟ್ ಪ್ಯಾಲೆಟ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಬಣ್ಣಗಳನ್ನು ಅತಿಕ್ರಮಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
@font-palette-values --custom-palette {
font-family: 'MyColorFont';
base-palette: 'Default'; /* Optional: Start with a predefined palette */
override-colors: [
0 #FF0000, /* Color index 0 (usually the first color) becomes red */
1 #00FF00, /* Color index 1 becomes green */
2 #0000FF /* Color index 2 becomes blue */
];
}
.element {
font-family: 'MyColorFont';
font-palette: --custom-palette;
}
ವಿವರಣೆ:
@font-palette-values --custom-palette: "--custom-palette" ಎಂಬ ಹೆಸರಿನ ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಡಬಲ್ ಡ್ಯಾಶ್‌ಗಳು ಇದು ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣ (CSS ವೇರಿಯಬಲ್) ಎಂದು ಸೂಚಿಸುತ್ತವೆ.font-family: 'MyColorFont': ಈ ಪ್ಯಾಲೆಟ್ ಅನ್ವಯಿಸುವ ಫಾಂಟ್ ಕುಟುಂಬವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.base-palette: 'Default': (ಐಚ್ಛಿಕ) ಈ ಕಸ್ಟಮ್ ಪ್ಯಾಲೆಟ್ ಫಾಂಟ್‌ನಿಂದ "Default" ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಆಧರಿಸಿದೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ. ಇದನ್ನು ಬಿಟ್ಟರೆ, ಅದು ಖಾಲಿ ಸ್ಲೇಟ್‌ನಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ.override-colors: ಬಣ್ಣದ ವ್ಯಾಖ್ಯಾನಗಳ ಒಂದು ಶ್ರೇಣಿ. ಪ್ರತಿ ವ್ಯಾಖ್ಯಾನವು ಬಣ್ಣದ ಸೂಚ್ಯಂಕ (0 ರಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ) ಮತ್ತು CSS ಬಣ್ಣದ ಮೌಲ್ಯ (ಹೆಕ್ಸಾಡೆಸಿಮಲ್, RGB, HSL, ಇತ್ಯಾದಿ) ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಫಾಂಟ್‌ನಲ್ಲಿನ ಮೊದಲ ಮೂರು ಬಣ್ಣಗಳನ್ನು ಅತಿಕ್ರಮಿಸುವ ಕಸ್ಟಮ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ರಚಿಸುತ್ತಿದ್ದೇವೆ. ಸೂಚ್ಯಂಕ 0 ನಲ್ಲಿನ ಬಣ್ಣವು ಕೆಂಪು ಆಗುತ್ತದೆ, ಸೂಚ್ಯಂಕ 1 ಹಸಿರು ಆಗುತ್ತದೆ ಮತ್ತು ಸೂಚ್ಯಂಕ 2 ನೀಲಿ ಆಗುತ್ತದೆ. `base-palette` ಕಸ್ಟಮ್ ಪ್ಯಾಲೆಟ್‌ನಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ಅತಿಕ್ರಮಿಸದ ಯಾವುದೇ ಬಣ್ಣಗಳು 'Default' ಪ್ಯಾಲೆಟ್‌ನಿಂದ ತಮ್ಮ ಮೂಲ ಮೌಲ್ಯಗಳನ್ನು ಉಳಿಸಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
3. ಡೈನಾಮಿಕ್ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸುವುದು
CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳ ನಿಜವಾದ ಶಕ್ತಿ ನೀವು ಅವುಗಳನ್ನು CSS ವೇರಿಯಬಲ್‌ಗಳ (ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳು) ಜೊತೆ ಸಂಯೋಜಿಸಿದಾಗ ಕಾರ್ಯರೂಪಕ್ಕೆ ಬರುತ್ತದೆ. ಇದು ಬಳಕೆದಾರರ ಸಂವಹನಗಳು, ಮೀಡಿಯಾ ಪ್ರಶ್ನೆಗಳು ಅಥವಾ JavaScript ಆಧಾರದ ಮೇಲೆ ಫಾಂಟ್ ಬಣ್ಣಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
:root {
--primary-color: #007bff; /* Default blue */
--secondary-color: #6c757d; /* Default gray */
}
@font-palette-values --dynamic-palette {
font-family: 'MyColorFont';
override-colors: [
0 var(--primary-color),
1 var(--secondary-color)
];
}
.element {
font-family: 'MyColorFont';
font-palette: --dynamic-palette;
}
/* Example: Change the colors on hover */
.element:hover {
--primary-color: #ff0000; /* Red on hover */
--secondary-color: #00ff00; /* Green on hover */
}
ವಿವರಣೆ:
- ನಾವು
:rootಸೆಲೆಕ್ಟರ್‌ನಲ್ಲಿ--primary-colorಮತ್ತು--secondary-colorಎಂಬ ಎರಡು CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ, ಅವುಗಳ ಆರಂಭಿಕ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ. @font-palette-valuesನಿಯಮವು "--dynamic-palette" ಎಂಬ ಕಸ್ಟಮ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಅದು ಸೂಚ್ಯಂಕಗಳು 0 ಮತ್ತು 1 ರಲ್ಲಿನ ಬಣ್ಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಈ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ.- ಬಳಕೆದಾರರು ಅಂಶದ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, ನಾವು CSS ವೇರಿಯಬಲ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತೇವೆ, ಇದು ಫಾಂಟ್‌ನ ಬಣ್ಣಗಳನ್ನು ನವೀಕರಿಸುತ್ತದೆ.
ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು
ಬಣ್ಣದ ಫಾಂಟ್‌ಗಳು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಆಕರ್ಷಕವಾಗಿರಬಹುದು, ಆದರೆ ಅವು ಎಲ್ಲ ಬಳಕೆದಾರರಿಗೂ ಪ್ರವೇಶಿಸುವಂತೆ ನೋಡಿಕೊಳ್ಳುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸುವಾಗ ಇಲ್ಲಿ ಕೆಲವು ಪ್ರಮುಖ ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು ಇವೆ:
- ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್: ಫಾಂಟ್ ಬಣ್ಣಗಳು ಮತ್ತು ಹಿನ್ನೆಲೆ ಬಣ್ಣದ ನಡುವೆ ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತಗಳನ್ನು ಪರಿಶೀಲಿಸಲು WebAIM ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕರ್ ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ. WCAG (ವೆಬ್ ವಿಷಯ ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮಾರ್ಗಸೂಚಿಗಳು) ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕೆ ಕನಿಷ್ಠ 4.5:1 ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯಕ್ಕೆ 3:1 ರ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತವನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ.
- ಬಣ್ಣ ಕುರುಡುತನ: ವಿವಿಧ ರೀತಿಯ ಬಣ್ಣ ಕುರುಡುತನ (ಡ್ಯೂಟೆರಾನೋಪಿಯಾ, ಪ್ರೋಟಾನೋಪಿಯಾ, ಟ್ರೈಟಾನೋಪಿಯಾ) ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಬಣ್ಣದ ಆಯ್ಕೆಗಳು ಹೇಗೆ ಕಾಣಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಪರಿಗಣಿಸಿ. ಬಣ್ಣ ಕುರುಡುತನವನ್ನು ಅನುಕರಿಸಲು ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಲು Coblis ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ. ಪರ್ಯಾಯ ಪಠ್ಯ ಆಯ್ಕೆಗಳು ಅಥವಾ ಫಾಂಟ್‌ನ ಬಣ್ಣದ ಸ್ಕೀಮ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನಿಯಂತ್ರಣಗಳನ್ನು ಒದಗಿಸುವುದು ಬಣ್ಣ ಕುರುಡು ಬಳಕೆದಾರರಿಗೆ ಅನುಭವವನ್ನು ಬಹಳವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ.
- ಬಳಕೆದಾರರ ನಿಯಂತ್ರಣ: ಬಳಕೆದಾರರು ತಮ್ಮ ವೈಯಕ್ತಿಕ ಅಗತ್ಯಗಳನ್ನು ಪೂರೈಸಲು ಫಾಂಟ್‌ನ ಬಣ್ಣದ ಸ್ಕೀಮ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಅನುಮತಿಸಿ. ಇದು ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್‌ಗಳ ನಡುವೆ ಬದಲಾಯಿಸಲು, ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಹೆಚ್ಚಿಸಲು ಅಥವಾ ಪೂರ್ವ-ನಿರ್ಧರಿತ ಹೈ-ಕಾಂಟ್ರಾಸ್ಟ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಆಯ್ಕೆಗಳನ್ನು ಒದಗಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳನ್ನು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಅಥವಾ ಕುಕೀಗಳಲ್ಲಿ ಸಂಗ್ರಹಿಸುವುದು ಅವರ ಆಯ್ಕೆಗಳನ್ನು ಸೆಷನ್‌ಗಳಾದ್ಯಂತ ನೆನಪಿನಲ್ಲಿಡುತ್ತದೆ.
- ಫಾಲ್‌ಬ್ಯಾಕ್ ಆಯ್ಕೆಗಳು: CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳು ಅಥವಾ COLRv1 ಫಾಂಟ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಿ. ಇದು ಪ್ರಮಾಣಿತ CSS ಬಣ್ಣಗಳೊಂದಿಗೆ ಸರಳ ಫಾಂಟ್ ಅನ್ನು ಬಳಸುವುದು ಅಥವಾ ಪಠ್ಯ-ಆಧಾರಿತ ಪರ್ಯಾಯವನ್ನು ಒದಗಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರಬಹುದು.
ಬ್ರೌಸರ್ ಬೆಂಬಲ
CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳಿಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲ ಇನ್ನೂ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ, ಆದರೆ ಅದು ಸುಧಾರಿಸುತ್ತಿದೆ. 2023 ರ ಅಂತ್ಯದ ವೇಳೆಗೆ, Chrome, Firefox ಮತ್ತು Safari ನಂತಹ ಪ್ರಮುಖ ಬ್ರೌಸರ್‌ಗಳು ಭಾಗಶಃ ಅಥವಾ ಪೂರ್ಣ ಬೆಂಬಲವನ್ನು ಹೊಂದಿವೆ. ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯ ಮಾಹಿತಿಗಾಗಿ Can I Use ಅನ್ನು ಪರಿಶೀಲಿಸಿ.
ಬೆಂಬಲ ಸಾರ್ವತ್ರಿಕವಾಗಿಲ್ಲದ ಕಾರಣ, ಪ್ರಗತಿಪರ ವರ್ಧನೆಯು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಬಳಕೆದಾರರ ಬ್ರೌಸರ್ ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸದಿದ್ದರೂ ಸಹ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಪ್ರವೇಶಿಸುವಂತೆ ಇರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಉದಾಹರಣೆಗೆ:
- ಒಂದು ಬೇಸ್‌ಲೈನ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ: ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಮತ್ತು ಓದುವಿಕೆಯನ್ನು ಒದಗಿಸುವ ಪ್ರಮಾಣಿತ CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು (
color,background-color) ಬಳಸಿಕೊಂಡು ಡೀಫಾಲ್ಟ್ ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ. - ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ಅನ್ವಯಿಸಿ: ಬ್ರೌಸರ್ ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸಿದರೆ, ಫಾಂಟ್‌ನ ನೋಟವನ್ನು ಹೆಚ್ಚಿಸಲು ಅವುಗಳನ್ನು ಬಳಸಿ, ಆದರೆ ಮೂಲಭೂತ ಕಾರ್ಯಕ್ಕಾಗಿ ಅವುಗಳ ಮೇಲೆ *ಅವಲಂಬಿಸಬೇಡಿ*.
- ಫಾಲ್‌ಬ್ಯಾಕ್ ಶೈಲಿಗಳು: ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಪತ್ತೆಹಚ್ಚಲು
@supportsಅಟ್-ರೂಲ್ ಅನ್ನು ಬಳಸಿ ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ಪರ್ಯಾಯ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಿ.@supports (font-palette: normal) { .element { font-family: 'MyColorFont'; font-palette: --my-palette; } } else { .element { /* Fallback styles for browsers that don't support font-palette */ color: black; /* Set a default text color */ background-color: white; /* Set a default background color */ } }
ಜಾಗತಿಕ ವೆಬ್ ವಿನ್ಯಾಸ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಉದಾಹರಣೆಗಳು
ವಿವಿಧ ಸಂಸ್ಕೃತಿಗಳು ಮತ್ತು ಭಾಷೆಗಳಾದ್ಯಂತ ಬಳಕೆದಾರರ ಅನುಭವ ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಹೆಚ್ಚಿಸಲು CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ವಿವಿಧ ಜಾಗತಿಕ ವೆಬ್ ವಿನ್ಯಾಸ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಬಳಸಬಹುದು.
- ಬಹುಭಾಷಾ ವೆಬ್‌ಸೈಟ್‌ಗಳು: ವೆಬ್‌ಸೈಟ್‌ನ ವಿವಿಧ ಭಾಷಾ ಆವೃತ್ತಿಗಳಿಗೆ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ. ಉದಾಹರಣೆಗೆ, ಕೆಲವು ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿ, ಕೆಲವು ಬಣ್ಣಗಳು ನಿರ್ದಿಷ್ಟ ಅರ್ಥಗಳನ್ನು ಹೊಂದಿವೆ (ಉದಾ., ಚೀನಾದಲ್ಲಿ ಕೆಂಪು ಅದೃಷ್ಟವನ್ನು ಸಂಕೇತಿಸುತ್ತದೆ). ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳು ಉದ್ದೇಶಿತ ಪ್ರೇಕ್ಷಕರೊಂದಿಗೆ ಉತ್ತಮವಾಗಿ ಪ್ರತಿಧ್ವನಿಸಲು ಫಾಂಟ್‌ನ ನೋಟವನ್ನು ಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- ಥೀಮ್ ಮಾಡಿದ ವಿಷಯ: ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ಶೈಕ್ಷಣಿಕ ಸಾಮಗ್ರಿಗಳಿಗಾಗಿ ವಿವಿಧ ಬಣ್ಣದ ಥೀಮ್‌ಗಳನ್ನು ರಚಿಸಿ. ಉದಾಹರಣೆಗೆ, ಇತಿಹಾಸದ ವೆಬ್‌ಸೈಟ್ ಮ್ಯೂಟ್ ಮಾಡಿದ, ಪ್ರಾಚೀನ-ಪ್ರೇರಿತ ಬಣ್ಣಗಳೊಂದಿಗೆ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಬಳಸಬಹುದು, ಆದರೆ ವಿಜ್ಞಾನ ವೆಬ್‌ಸೈಟ್ ಪ್ರಕಾಶಮಾನವಾದ, ಹೆಚ್ಚು ಆಧುನಿಕ ಬಣ್ಣಗಳನ್ನು ಬಳಸಬಹುದು.
- ಇ-ಕಾಮರ್ಸ್: ಉತ್ಪನ್ನದ ಬಣ್ಣದ ಸ್ಕೀಮ್‌ಗೆ ಹೊಂದಿಸಲು ಉತ್ಪನ್ನ ಪುಟಗಳಲ್ಲಿ ಫಾಂಟ್ ಬಣ್ಣಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ, ದೃಶ್ಯ ಆಕರ್ಷಣೆ ಮತ್ತು ಬ್ರ್ಯಾಂಡ್ ಸ್ಥಿರತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
- ಸುದ್ದಿ ಮತ್ತು ಮಾಧ್ಯಮ: ಸುದ್ದಿ ವೆಬ್‌ಸೈಟ್‌ನ ವಿವಿಧ ವಿಭಾಗಗಳನ್ನು (ಉದಾ., ರಾಜಕೀಯ, ಕ್ರೀಡೆ, ವ್ಯವಹಾರ) ಹೈಲೈಟ್ ಮಾಡಲು ವಿವಿಧ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ಬಳಸಿ.
- ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಓವರ್‌ಲೇಗಳು: ಬಳಕೆದಾರರು ತಮ್ಮ ವೈಯಕ್ತಿಕ ಅಗತ್ಯಗಳನ್ನು ಪೂರೈಸಲು ವೆಬ್‌ಸೈಟ್‌ನ ಬಣ್ಣದ ಸ್ಕೀಮ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಅನುಮತಿಸುವ ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಓವರ್‌ಲೇಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಿ. ಇದು ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಹೆಚ್ಚಿಸಲು, ಬಣ್ಣಗಳನ್ನು ತಿರುಗಿಸಲು ಅಥವಾ ಪೂರ್ವ-ನಿರ್ಧರಿತ ಹೈ-ಕಾಂಟ್ರಾಸ್ಟ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು.
CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕಾದ ಕೆಲವು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:
- ಸರಿಯಾದ ಫಾಂಟ್ ಅನ್ನು ಆಯ್ಕೆಮಾಡಿ: ಎಲ್ಲಾ ಫಾಂಟ್‌ಗಳನ್ನು ಸಮಾನವಾಗಿ ರಚಿಸಲಾಗಿಲ್ಲ. ಉತ್ತಮವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿದ, ಸ್ಪಷ್ಟವಾದ ಮತ್ತು ಉತ್ತಮವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಹೊಂದಿರುವ COLRv1 ಫಾಂಟ್ ಅನ್ನು ಆಯ್ಕೆಮಾಡಿ.
- ನಿಮ್ಮ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಯೋಜಿಸಿ: ನೀವು ಬಳಸಲು ಬಯಸುವ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಯೋಜಿಸಿ. ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಒಟ್ಟಾರೆ ವಿನ್ಯಾಸ, ಉದ್ದೇಶಿತ ಪ್ರೇಕ್ಷಕರು ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಅವಶ್ಯಕತೆಗಳನ್ನು ಪರಿಗಣಿಸಿ.
- ವಿವರಣಾತ್ಮಕ ಪ್ಯಾಲೆಟ್ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ಯಾಲೆಟ್‌ಗಳಿಗೆ ಅವುಗಳ ಉದ್ದೇಶವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗುವ ವಿವರಣಾತ್ಮಕ ಹೆಸರುಗಳನ್ನು ನೀಡಿ (ಉದಾ., "DarkMode", "HighContrast", "BrandAccent").
- ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಸರಿಯಾಗಿ ರೆಂಡರ್ ಆಗುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಿ. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಅಥವಾ CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳಿಗೆ ಸೀಮಿತ ಬೆಂಬಲವನ್ನು ಹೊಂದಿರುವ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ವಿಶೇಷ ಗಮನ ನೀಡಿ.
- ಫಾಲ್‌ಬ್ಯಾಕ್ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಿ: CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಯಾವಾಗಲೂ ಫಾಲ್‌ಬ್ಯಾಕ್ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಿ.
- ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಆದ್ಯತೆ ನೀಡಿ: ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ಆಯ್ಕೆಮಾಡುವಾಗ ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡುವಾಗ ಪ್ರವೇಶಸಾಧ್ಯತೆಯು ಪ್ರಾಥಮಿಕ ಪರಿಗಣನೆಯಾಗಿರಬೇಕು.
- ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ಸಂಕೀರ್ಣ ಬಣ್ಣದ ಫಾಂಟ್‌ಗಳು ಪುಟ ಲೋಡ್ ಸಮಯದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ನಿಮ್ಮ ಫಾಂಟ್ ಫೈಲ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ ಮತ್ತು ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಫಾಂಟ್ ಸಬ್‌ಸೆಟ್ಟಿಂಗ್‌ನಂತಹ ತಂತ್ರಗಳನ್ನು ಬಳಸಿ.
ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಕೋಡ್ ತುಣುಕುಗಳು
ನೈಜ-ಪ್ರಪಂಚದ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದರ ಕುರಿತು ಕೆಲವು ವಿವರವಾದ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ.
ಉದಾಹರಣೆ 1: ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್ ಥೀಮ್
ಈ ಉದಾಹರಣೆಯು CSS ಮೀಡಿಯಾ ಪ್ರಶ್ನೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್‌ಗಳ ನಡುವೆ ಹೇಗೆ ಬದಲಾಯಿಸುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.
/* Define color variables for light mode */\n:root {\n --bg-color: #ffffff; /* White background */\n --text-color: #000000; /* Black text */\n --accent-color: #007bff; /* Blue accent */\n}\n\n/* Define color variables for dark mode */\n@media (prefers-color-scheme: dark) {\n :root {\n --bg-color: #222222; /* Dark gray background */\n --text-color: #ffffff; /* White text */\n --accent-color: #bb86fc; /* Purple accent */\n }\n}\n\n/* Define font palette */\n@font-palette-values --theme-palette {\n font-family: 'MyColorFont';\n override-colors: [\n 0 var(--text-color), /* Text color */\n 1 var(--bg-color), /* Background color */\n 2 var(--accent-color) /* Accent color */\n ];\n}\n\nbody {\n background-color: var(--bg-color); /* Apply background color */\n color: var(--text-color); /* Apply text color */\n}\n\n.element {\n font-family: 'MyColorFont';\n font-palette: --theme-palette;\n}
ವಿವರಣೆ:
- ಬಳಕೆದಾರರು ತಮ್ಮ ಸಿಸ್ಟಮ್ ಅನ್ನು ಲೈಟ್ ಅಥವಾ ಡಾರ್ಕ್ ಮೋಡ್‌ಗೆ ಹೊಂದಿಸಿದ್ದಾರೆಯೇ ಎಂದು ಪತ್ತೆಹಚ್ಚಲು ನಾವು
prefers-color-schemeಮೀಡಿಯಾ ಪ್ರಶ್ನೆಯನ್ನು ಬಳಸುತ್ತೇವೆ. - ಬಳಕೆದಾರರ ಆದ್ಯತೆಯ ಆಧಾರದ ಮೇಲೆ, ನಾವು ಹಿನ್ನೆಲೆ ಬಣ್ಣ, ಪಠ್ಯ ಬಣ್ಣ ಮತ್ತು ಆಕ್ಸೆಂಟ್ ಬಣ್ಣಕ್ಕಾಗಿ CSS ವೇರಿಯಬಲ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನು ನವೀಕರಿಸುತ್ತೇವೆ.
@font-palette-valuesನಿಯಮವು ಫಾಂಟ್ ಬಣ್ಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಈ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸುವ ಕಸ್ಟಮ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.bodyಮತ್ತು.elementಸೆಲೆಕ್ಟರ್‌ಗಳು ಹಿನ್ನೆಲೆ ಬಣ್ಣ, ಪಠ್ಯ ಬಣ್ಣ ಮತ್ತು ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಪುಟಕ್ಕೆ ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಅಂಶಕ್ಕೆ ಕ್ರಮವಾಗಿ ಅನ್ವಯಿಸುತ್ತವೆ.
ಉದಾಹರಣೆ 2: ಹೈ ಕಾಂಟ್ರಾಸ್ಟ್ ಥೀಮ್
ಈ ಉದಾಹರಣೆಯು ದೃಷ್ಟಿಹೀನತೆ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಹೈ-ಕಾಂಟ್ರಾಸ್ಟ್ ಥೀಮ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.
/* Default colors */\n:root {\n --default-bg: #ffffff;\n --default-text: #000000;\n --high-contrast-bg: #000000;\n --high-contrast-text: #ffff00;\n}\n\n/* High contrast class */\n.high-contrast {\n --default-bg: var(--high-contrast-bg);\n --default-text: var(--high-contrast-text);\n}\n\n@font-palette-values --contrast-palette {\n font-family: 'MyColorFont';\n override-colors: [\n 0 var(--default-text), /*Text Color*/\n 1 var(--default-bg) /*Background Color*/\n ];\n}\n\nbody {\n background-color: var(--default-bg);\n color: var(--default-text);\n}\n\n.element {\n font-family: 'MyColorFont';\n font-palette: --contrast-palette;\n}\n
ವಿವರಣೆ:
- ಸ್ಟ್ಯಾಂಡರ್ಡ್ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಹೈ ಕಾಂಟ್ರಾಸ್ಟ್ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಬಣ್ಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ.
high-contrastವರ್ಗವನ್ನು ಅನ್ವಯಿಸಿದಾಗ, ಡೀಫಾಲ್ಟ್ ಬಣ್ಣಗಳನ್ನು ಹೈ ಕಾಂಟ್ರಾಸ್ಟ್ ಆವೃತ್ತಿಗಳೊಂದಿಗೆ ಬದಲಾಯಿಸಲಾಗುತ್ತದೆ.@font-palette-valuesಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
ತೀರ್ಮಾನ
CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳು ಬಣ್ಣದ ಫಾಂಟ್‌ಗಳ ಬಣ್ಣಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ಪ್ರಬಲ ಮತ್ತು ಸುಲಭವಾದ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತವೆ, ಇದು ವೆಬ್ ವಿನ್ಯಾಸ ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಹೊಸ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲ ಇನ್ನೂ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದ್ದರೂ, ಸಂಭಾವ್ಯ ಪ್ರಯೋಜನಗಳು ಗಮನಾರ್ಹವಾಗಿವೆ. ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ಮತ್ತು ವಿನ್ಯಾಸಕರು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಹೆಚ್ಚು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಆಕರ್ಷಕ, ಪ್ರವೇಶಿಸುವ ಮತ್ತು ಆಕರ್ಷಕ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಬಹುದು.
CSS ಫಾಂಟ್ ಪ್ಯಾಲೆಟ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಟೈಪೊಗ್ರಫಿಯ ಭವಿಷ್ಯವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ಬಣ್ಣದ ಫಾಂಟ್‌ಗಳ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ!