ಆಕರ್ಷಕ ಮತ್ತು ಸುಲಭವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ಟೆಕ್ಸ್ಟ್ ಆಯ್ಕೆಯ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಸುಧಾರಿತ ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ API ಅನ್ವೇಷಿಸಿ. ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಬಳಕೆದಾರರ ಸಂವಾದವನ್ನು ಹೆಚ್ಚಿಸಲು ಟೆಕ್ಸ್ಟ್ ಹೈಲೈಟ್‌ನ ನೋಟ ಮತ್ತು ನಡವಳಿಕೆಯನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಮತ್ತು ನಿಯಂತ್ರಿಸಲು ಕಲಿಯಿರಿ.
ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್: ಟೆಕ್ಸ್ಟ್ ಆಯ್ಕೆಯ ಸಂವಾದಗಳನ್ನು ಉನ್ನತೀಕರಿಸುವುದು
ವೆಬ್‌ನಲ್ಲಿ ಟೆಕ್ಸ್ಟ್ ಆಯ್ಕೆಯು ಒಂದು ಮೂಲಭೂತ ಸಂವಾದವಾಗಿದೆ. ಬಳಕೆದಾರರು ವಿವಿಧ ಕಾರಣಗಳಿಗಾಗಿ ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡುತ್ತಾರೆ: ವಿಷಯವನ್ನು ನಕಲಿಸಲು, ಉಲ್ಲೇಖಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಲು, ಹುಡುಕಾಟಗಳನ್ನು ನಡೆಸಲು, ಅಥವಾ ಕೇವಲ ಗಮನವನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು. ಬ್ರೌಸರ್‌ಗಳು ಡೀಫಾಲ್ಟ್ ಟೆಕ್ಸ್ಟ್ ಹೈಲೈಟಿಂಗ್ ಅನ್ನು ಒದಗಿಸುತ್ತವೆ, ಆದರೆ ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ API ಈ ಸಂವಾದದ ಮೇಲೆ ಅಭೂತಪೂರ್ವ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ, ಇದರಿಂದ ಡೆವಲಪರ್‌ಗಳು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕ, ಸಂದರ್ಭಕ್ಕೆ ತಕ್ಕಂತೆ ಮತ್ತು ಹೆಚ್ಚು ಸುಲಭವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ಆಯ್ಕೆಯ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ APIಯ ಆಳವನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಅದರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಹೆಚ್ಚಿಸಲು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಡೀಫಾಲ್ಟ್ ಟೆಕ್ಸ್ಟ್ ಆಯ್ಕೆಯ ನಡವಳಿಕೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಬ್ರೌಸರ್‌ಗಳು ::selection ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಬಳಸಿ ಆಯ್ಕೆಮಾಡಿದ ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಶೈಲಿಗೊಳಿಸುತ್ತವೆ. ಅದರ ನೋಟವನ್ನು ಬದಲಾಯಿಸಲು ನೀವು background-color ಮತ್ತು color ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬದಲಾಯಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ:
::selection {
background-color: #b3d4fc;
color: #000;
}
ಈ ಸರಳ ಸಿಎಸ್‌ಎಸ್‌ ಸ್ನಿಪೆಟ್ ಬಳಕೆದಾರರು ಪುಟದಲ್ಲಿ ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿದಾಗಲೆಲ್ಲಾ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ತಿಳಿ ನೀಲಿ ಮತ್ತು ಟೆಕ್ಸ್ಟ್ ಬಣ್ಣವನ್ನು ಕಪ್ಪು ಬಣ್ಣಕ್ಕೆ ಬದಲಾಯಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ::selection ಸೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗೆ ಮಿತಿಗಳಿವೆ. ಇದು ಹಿನ್ನೆಲೆ ಮತ್ತು ಬಣ್ಣವನ್ನು ಮಾತ್ರ ಶೈಲಿಗೊಳಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಇದು ಕಸ್ಟಮೈಸೇಶನ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಇದರಲ್ಲಿ ಆಯ್ಕೆಯ ಸಂದರ್ಭದ ಬಗ್ಗೆ ಯಾವುದೇ ಸೆಮ್ಯಾಂಟಿಕ್ ಮಾಹಿತಿ ಇರುವುದಿಲ್ಲ. ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ API ಈ ಮಿತಿಗಳನ್ನು ನಿವಾರಿಸುತ್ತದೆ.
ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ API ಪರಿಚಯ
ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ API ಟೆಕ್ಸ್ಟ್ ಆಯ್ಕೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಹೊಸ ಸಿಎಸ್‌ಎಸ್‌ ಪ್ರಾಪರ್ಟಿಗಳು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ APIಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ, ಅದು ನಿರ್ದಿಷ್ಟ ಪರಿಸ್ಥಿತಿಗಳು ಮತ್ತು ಸಂವಾದಗಳ ಆಧಾರದ ಮೇಲೆ ಕಸ್ಟಮ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ಶೈಲಿಗೊಳಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು
- ಹೈಲೈಟ್ ಇನ್ಹೆರಿಟೆನ್ಸ್: ಇತರ ಸಿಎಸ್‌ಎಸ್‌ ಪ್ರಾಪರ್ಟಿಗಳಂತೆಯೇ ಕ್ಯಾಸ್ಕೇಡ್ ಮತ್ತು ಇನ್ಹೆರಿಟೆನ್ಸ್ ಯಾಂತ್ರಿಕತೆಯ ಮೂಲಕ ಹೈಲೈಟ್‌ಗಳನ್ನು ಶೈಲಿಗೊಳಿಸಲಾಗುತ್ತದೆ. ಇದರರ್ಥ ನೀವು ರೂಟ್ ಮಟ್ಟದಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಹೈಲೈಟ್ ಶೈಲಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್‌ಗಳು ಅಥವಾ ಸಂದರ್ಭಗಳಿಗಾಗಿ ಅವುಗಳನ್ನು ಓವರ್‌ರೈಡ್ ಮಾಡಬಹುದು.
- ಹೈಲೈಟ್ ಸೂಡೋ:
::highlight()ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಅನ್ನು ಹೆಸರಿಸಲಾದ ಹೈಲೈಟ್‌ಗಳಿಗೆ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. - ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ API:
getSelection()ಮತ್ತುHighlightಆಬ್ಜೆಕ್ಟ್‌ಗಳಂತಹ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ APIಗಳು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಹೈಲೈಟ್‌ಗಳನ್ನು ರಚಿಸಲು, ನಿರ್ವಹಿಸಲು ಮತ್ತು ಸಂವಹನ ನಡೆಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ. - ಪ್ರವೇಶಿಸುವಿಕೆ: ಈ APIಯು ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮತ್ತು ಪ್ರವೇಶಿಸುವಿಕೆ ಪರಿಗಣನೆಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ, ಕಸ್ಟಮ್ ಹೈಲೈಟ್‌ಗಳು ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಂದ ಗ್ರಹಿಸಬಲ್ಲ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಲ್ಲವು ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಕಸ್ಟಮ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು: ಹಂತ-ಹಂತದ ಮಾರ್ಗದರ್ಶಿ
ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ API ಬಳಸಿ ಕಸ್ಟಮ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಇಲ್ಲಿದೆ ಪ್ರಾಯೋಗಿಕ ಮಾರ್ಗದರ್ಶಿ:
ಹಂತ 1: ಹೆಸರಿಸಲಾದ ಹೈಲೈಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು
ಮೊದಲಿಗೆ, ನೀವು ಸಿಎಸ್‌ಎಸ್‌ ಬಳಸಿ ಒಂದು ಹೆಸರಿಸಲಾದ ಹೈಲೈಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು. ಈ ಹೆಸರನ್ನು ನಿರ್ದಿಷ್ಟ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಶೈಲಿಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.
::highlight(custom-highlight) {
background-color: rgba(255, 0, 0, 0.3);
color: #000;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು `custom-highlight` ಎಂಬ ಹೆಸರಿನ ಹೈಲೈಟ್ ಅನ್ನು ಅರೆ-ಪಾರದರ್ಶಕ ಕೆಂಪು ಹಿನ್ನೆಲೆ ಮತ್ತು ಕಪ್ಪು ಟೆಕ್ಸ್ಟ್ ಬಣ್ಣದೊಂದಿಗೆ ವ್ಯಾಖ್ಯಾನಿಸಿದ್ದೇವೆ. ನೀವು ಹಿನ್ನೆಲೆ ಮತ್ತು ಟೆಕ್ಸ್ಟ್‌ಗೆ ಯಾವುದೇ ಮಾನ್ಯವಾದ ಸಿಎಸ್‌ಎಸ್‌ ಬಣ್ಣದ ಮೌಲ್ಯವನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದು.
ಹಂತ 2: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಹೈಲೈಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು
ಮುಂದೆ, ಹೈಲೈಟ್ ಅನ್ನು ರಚಿಸಲು ಮತ್ತು ಅನ್ವಯಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ. ಇದು ಆಯ್ಕೆಮಾಡಿದ ಟೆಕ್ಸ್ಟ್ ಶ್ರೇಣಿಯನ್ನು ಪಡೆಯುವುದು ಮತ್ತು `Highlight` ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ರಚಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.
function applyCustomHighlight() {
const selection = window.getSelection();
if (!selection.rangeCount) {
return; // No selection
}
const range = selection.getRangeAt(0);
if (range.collapsed) {
return; // Empty selection
}
const highlight = new Highlight(range);
// Register the highlight with the document. It's experimental and may need polyfill or browser flag
if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
CSS.highlights.set('custom-highlight', highlight);
} else {
console.warn('CSS.highlights is not supported. Consider using a polyfill.');
// Implement a fallback mechanism here, e.g., wrapping the selected text in a <span> with a class
// For example:
const span = document.createElement('span');
span.classList.add('fallback-custom-highlight');
span.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
span.style.color = '#000';
range.surroundContents(span);
}
selection.removeAllRanges(); // Optional: Clear the selection after highlighting
}
ವಿವರಣೆ:
window.getSelection(): ಪ್ರಸ್ತುತ ಆಯ್ಕೆಯ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂಪಡೆಯುತ್ತದೆ.selection.rangeCount: ಸಕ್ರಿಯ ಆಯ್ಕೆ ಇದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ.selection.getRangeAt(0): ಆಯ್ಕೆಮಾಡಿದ ಶ್ರೇಣಿಯನ್ನು ಪಡೆಯುತ್ತದೆ.new Highlight(range): ಶ್ರೇಣಿಯಿಂದ ಹೊಸ `Highlight` ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.CSS.highlights.set('custom-highlight', highlight): ಹೈಲೈಟ್ ಅನ್ನು ಸಿಎಸ್‌ಎಸ್‌ ಹೈಲೈಟ್ ರಿಜಿಸ್ಟ್ರಿಯೊಂದಿಗೆ ನೋಂದಾಯಿಸುತ್ತದೆ. ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಹೈಲೈಟ್ ಅನ್ನು ಈ ಹಿಂದೆ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಸಿಎಸ್‌ಎಸ್‌ ಶೈಲಿಗಳಿಗೆ ಲಿಂಕ್ ಮಾಡುವ ನಿರ್ಣಾಯಕ ಹಂತವಾಗಿದೆ.- ಫಾಲ್‌ಬ್ಯಾಕ್ ಮೆಕ್ಯಾನಿಸಂ: `CSS.highlights` ಅನ್ನು ಇನ್ನೂ ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ನಿರ್ಣಾಯಕ ಫಾಲ್‌ಬ್ಯಾಕ್ ಮೆಕ್ಯಾನಿಸಂ ಅನ್ನು ಒಳಗೊಂಡಿದೆ. ಇದು ನಿಮ್ಮ ವೈಶಿಷ್ಟ್ಯವು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಣೆಯನ್ನು ನಿರ್ವಹಿಸುವಾಗ ಸರಿಯಾಗಿ ಡಿಗ್ರೇಡ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
selection.removeAllRanges(): ಹೈಲೈಟ್ ಮಾಡಿದ ನಂತರ ಆಯ್ಕೆಯನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ. ಇದು ಐಚ್ಛಿಕವಾಗಿದ್ದು, ನಿಮ್ಮ ಅಪೇಕ್ಷಿತ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ.
ಈ ಫಂಕ್ಷನ್ ಅನ್ನು ಒಂದು ಈವೆಂಟ್ ಲಿಸನರ್‌ಗೆ, ಉದಾಹರಣೆಗೆ ಬಟನ್ ಕ್ಲಿಕ್ ಅಥವಾ ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್‌ಕಟ್‌ಗೆ ಲಗತ್ತಿಸಲು ಮರೆಯದಿರಿ.
ಹಂತ 3: ಬಹು ಶ್ರೇಣಿಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು (ಒಂದರ ಮೇಲೊಂದು ಬರುವ ಆಯ್ಕೆಗಳು)
APIಯು ಒಂದೇ ಹೈಲೈಟ್‌ನಲ್ಲಿ ಅನೇಕ ಒಂದರ ಮೇಲೊಂದು ಬರುವ ಶ್ರೇಣಿಗಳನ್ನು ನಿರ್ವಹಿಸಬಲ್ಲದು. ನೀವು `Highlight` ಆಬ್ಜೆಕ್ಟ್‌ಗೆ ಅನೇಕ ಶ್ರೇಣಿಗಳನ್ನು ಸೇರಿಸಬಹುದು:
const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);
if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
CSS.highlights.set('custom-highlight', highlight);
} else {
console.warn('CSS.highlights is not supported. Consider using a polyfill.');
// Implement a fallback for multiple ranges (more complex)
// This would require splitting the text into smaller spans and applying styles
// This is a more advanced fallback implementation and may not be suitable for all cases
}
ಹೈಲೈಟ್‌ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಶ್ರೇಣಿಗಳಿಗೆ ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.
ಸುಧಾರಿತ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ತಂತ್ರಗಳು
ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ API ಟೆಕ್ಸ್ಟ್ ಆಯ್ಕೆಯ ಸಂವಾದಗಳನ್ನು ಹೆಚ್ಚಿಸಲು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ. ಇಲ್ಲಿ ಕೆಲವು ಸುಧಾರಿತ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ತಂತ್ರಗಳಿವೆ:
1. ಸಂದರ್ಭ-ಅರಿತ ಹೈಲೈಟಿಂಗ್
ಆಯ್ಕೆಮಾಡಿದ ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಮತ್ತು ಅದರ ವಿಷಯ ಅಥವಾ ಸುತ್ತಮುತ್ತಲಿನ ಸಂದರ್ಭದ ಆಧಾರದ ಮೇಲೆ ವಿಭಿನ್ನ ಹೈಲೈಟ್ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿನ ಕೀವರ್ಡ್‌ಗಳನ್ನು ನಿರ್ದಿಷ್ಟ ಬಣ್ಣದಿಂದ ಹೈಲೈಟ್ ಮಾಡಬಹುದು, ಅಥವಾ ಕೋಡ್ ಸ್ನಿಪ್ಪೆಟ್‌ಗಳನ್ನು ಗುರುತಿಸಿ ಹೈಲೈಟ್ ಮಾಡಬಹುದು.
function applyContextualHighlight() {
const selection = window.getSelection();
if (!selection.rangeCount) return;
const range = selection.getRangeAt(0);
const selectedText = range.toString();
let highlightName = 'default-highlight';
if (selectedText.startsWith('//')) {
highlightName = 'comment-highlight'; // Highlight code comments
} else if (selectedText.match(/\b(function|class|const|let)\b/)) {
highlightName = 'keyword-highlight'; // Highlight JavaScript keywords
}
const highlight = new Highlight(range);
if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
CSS.highlights.set(highlightName, highlight);
} else {
console.warn('CSS.highlights is not supported. Consider using a polyfill.');
// Fallback implementation, potentially using data attributes and custom CSS
const span = document.createElement('span');
span.classList.add('fallback-highlight');
span.dataset.highlightType = highlightName;
range.surroundContents(span);
}
selection.removeAllRanges();
}
ಪ್ರತಿ ಹೈಲೈಟ್ ಪ್ರಕಾರಕ್ಕೆ ಸಿಎಸ್‌ಎಸ್‌ ಶೈಲಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ:
::highlight(comment-highlight) {
background-color: rgba(0, 255, 0, 0.2);
color: #555;
}
::highlight(keyword-highlight) {
background-color: rgba(255, 255, 0, 0.2);
color: #000;
}
.fallback-highlight[data-highlight-type="comment-highlight"] {
background-color: rgba(0, 255, 0, 0.2);
color: #555;
}
.fallback-highlight[data-highlight-type="keyword-highlight"] {
background-color: rgba(255, 255, 0, 0.2);
color: #000;
}
2. ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡುವುದು
ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಹುಡುಕಾಟ ಪದಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ನೀವು API ಅನ್ನು ಬಳಸಬಹುದು. ಹುಡುಕಾಟ ಫಲಿತಾಂಶ ಪುಟಗಳಿಗೆ ಅಥವಾ ಆಪ್-ಒಳಗಿನ ಹುಡುಕಾಟ ಕಾರ್ಯಕ್ಕೆ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.
function highlightSearchResults(searchTerm) {
const text = document.body.innerText; // Or specific element
const regex = new RegExp(searchTerm, 'gi'); // Global, case-insensitive
let match;
while ((match = regex.exec(text)) !== null) {
const start = match.index;
const end = start + searchTerm.length;
// Create a range for each match
const range = document.createRange();
range.setStart(document.body.firstChild, start);
range.setEnd(document.body.firstChild, end);
const highlight = new Highlight(range);
if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
CSS.highlights.set('search-result-highlight', highlight);
} else {
console.warn('CSS.highlights is not supported. Consider using a polyfill.');
// Fallback, again, requires careful handling of text nodes
}
}
}
ಹುಡುಕಾಟ ಫಲಿತಾಂಶದ ಹೈಲೈಟ್‌ಗಾಗಿ ಸಿಎಸ್‌ಎಸ್‌ ಶೈಲಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ:
::highlight(search-result-highlight) {
background-color: yellow;
color: black;
}
3. ಶ್ಯಾಡೋ DOM ನೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು
ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ API ಶ್ಯಾಡೋ DOM ನೊಂದಿಗೆ ಮನಬಂದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಇದು ನಿಮಗೆ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ ಶೈಲಿಗಳೊಂದಿಗೆ ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಟೆಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ನೀವು ಶ್ಯಾಡೋ DOM ಒಳಗೆ ಹೈಲೈಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು ಮತ್ತು ಅವುಗಳನ್ನು ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗಿನ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು.
4. ಪ್ರವೇಶಿಸುವಿಕೆ ಪರಿಗಣನೆಗಳು
ನಿಮ್ಮ ಕಸ್ಟಮ್ ಹೈಲೈಟ್‌ಗಳು ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಪರಿಗಣಿಸಿ:
- ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್: WCAG ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಪೂರೈಸಲು ಹೈಲೈಟ್ ಹಿನ್ನೆಲೆ ಮತ್ತು ಟೆಕ್ಸ್ಟ್ ಬಣ್ಣದ ನಡುವೆ ಸಾಕಷ್ಟು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಇರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್: ಬಳಕೆದಾರರು ಕೀಬೋರ್ಡ್ ಬಳಸಿ ಹೈಲೈಟ್ ಮಾಡಿದ ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ನ್ಯಾವಿಗೇಟ್ ಮಾಡಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಹೊಂದಾಣಿಕೆ: ಆಯ್ಕೆಮಾಡಿದ ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಸರಿಯಾಗಿ ಘೋಷಿಸಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಹೈಲೈಟ್‌ಗಳನ್ನು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ.
- ಫೋಕಸ್ ಇಂಡಿಕೇಟರ್‌ಗಳು: ಹೈಲೈಟ್ ಮಾಡಿದ ಎಲಿಮೆಂಟ್‌ಗೆ ಫೋಕಸ್ ಬಂದಾಗ, ಸ್ಪಷ್ಟವಾದ ದೃಶ್ಯ ಫೋಕಸ್ ಇಂಡಿಕೇಟರ್ ಅನ್ನು ಒದಗಿಸಿ.
ಹೈಲೈಟ್‌ಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚುವರಿ ಸೆಮ್ಯಾಂಟಿಕ್ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸಲು ನೀವು ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಹೈಲೈಟ್ ಮಾಡಿದ ವಿಭಾಗದ ಉದ್ದೇಶವನ್ನು ವಿವರಿಸಲು ನೀವು aria-label ಅನ್ನು ಬಳಸಬಹುದು.
5. ಸ್ಥಳೀಕರಣ ಮತ್ತು ಅಂತರರಾಷ್ಟ್ರೀಕರಣ
ಜಾಗತಿಕ ಸಂದರ್ಭದಲ್ಲಿ ಟೆಕ್ಸ್ಟ್ ಆಯ್ಕೆಯೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಪರಿಗಣಿಸಿ:
- ಟೆಕ್ಸ್ಟ್ ದಿಕ್ಕು: ನಿಮ್ಮ ಹೈಲೈಟ್‌ಗಳು ಎಡದಿಂದ-ಬಲಕ್ಕೆ (LTR) ಮತ್ತು ಬಲದಿಂದ-ಎಡಕ್ಕೆ (RTL) ಎರಡೂ ಟೆಕ್ಸ್ಟ್ ದಿಕ್ಕುಗಳೊಂದಿಗೆ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಭಾಷಾ-ನಿರ್ದಿಷ್ಟ ನಿಯಮಗಳು: ಟೆಕ್ಸ್ಟ್ ಆಯ್ಕೆ ಮತ್ತು ಪದ ಗಡಿಗಳಿಗೆ ಭಾಷಾ-ನಿರ್ದಿಷ್ಟ ನಿಯಮಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರಲಿ.
- ಫಾಂಟ್ ಬೆಂಬಲ: ವಿವಿಧ ಭಾಷೆಗಳಲ್ಲಿ ಬಳಸುವ ಅಕ್ಷರಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಫಾಂಟ್‌ಗಳನ್ನು ಬಳಸಿ.
6. ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್
ಕಸ್ಟಮ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವುದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ ಡಾಕ್ಯುಮೆಂಟ್‌ಗಳಲ್ಲಿ. ಈ ಕೆಳಗಿನ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಪರಿಗಣಿಸಿ:
- ಡಿಬೌನ್ಸಿಂಗ್: ಕ್ಷಿಪ್ರ ಆಯ್ಕೆಗಳ ಸಮಯದಲ್ಲಿ ಅತಿಯಾದ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ತಪ್ಪಿಸಲು ಹೈಲೈಟ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಡಿಬೌನ್ಸ್ ಮಾಡಿ.
- ಕ್ಯಾಶಿಂಗ್: ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದ ಹೈಲೈಟ್ ಶ್ರೇಣಿಗಳನ್ನು ಅನಗತ್ಯವಾಗಿ ಪುನಃ ಲೆಕ್ಕಾಚಾರ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಲು ಅವುಗಳನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿ.
- ವರ್ಚುವಲೈಸೇಶನ್: ಪ್ರಸ್ತುತ ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿ ಗೋಚರಿಸುವ ಹೈಲೈಟ್‌ಗಳನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡಲು ವರ್ಚುವಲೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಬಳಸಿ.
- ವೆಬ್ ವರ್ಕರ್ಸ್: ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು ಹೈಲೈಟ್ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ವೆಬ್ ವರ್ಕರ್‌ಗೆ ಆಫ್‌ಲೋಡ್ ಮಾಡಿ.
ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಪಾಲಿಫಿಲ್‌ಗಳು
ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ API ತುಲನಾತ್ಮಕವಾಗಿ ಹೊಸದಾಗಿದೆ ಮತ್ತು ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸಲ್ಪಡದಿರಬಹುದು. ಇದನ್ನು ಉತ್ಪಾದನೆಯಲ್ಲಿ ಬಳಸುವ ಮೊದಲು ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಕೋಷ್ಟಕಗಳನ್ನು ಪರಿಶೀಲಿಸಿ. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒದಗಿಸಲು ಪಾಲಿಫಿಲ್ ಅನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಪಾಲಿಫಿಲ್ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಹೊಸ API ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಅಗತ್ಯವಾದ ಕೋಡ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಆಯ್ಕೆಗಳನ್ನು ಹುಡುಕಲು ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ "CSS Custom Highlight API Polyfill" ಎಂದು ಹುಡುಕಿ.
ತೀರ್ಮಾನ
ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ API ಡೆವಲಪರ್‌ಗಳಿಗೆ ಆಕರ್ಷಕ, ಸಂದರ್ಭ-ಅರಿತ, ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದ ಟೆಕ್ಸ್ಟ್ ಆಯ್ಕೆಯ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ನಲ್ಲಿ ವಿವರಿಸಲಾದ APIಯ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡು ಮತ್ತು ತಂತ್ರಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನೀವು ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಉನ್ನತೀಕರಿಸಬಹುದು ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ಟೆಕ್ಸ್ಟ್‌ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು ಹೆಚ್ಚು ಅರ್ಥಗರ್ಭಿತ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸಬಹುದು. ಕಸ್ಟಮ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ ಪ್ರವೇಶಿಸುವಿಕೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಆದ್ಯತೆ ನೀಡಲು ಮರೆಯದಿರಿ, ಮತ್ತು ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಪಾಲಿಫಿಲ್ ಆಯ್ಕೆಗಳನ್ನು ಪರಿಗಣಿಸಿ. ಟೆಕ್ಸ್ಟ್ ಆಯ್ಕೆಯ ಈ ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣವು ಡೆವಲಪರ್‌ಗಳಿಗೆ ನಿರ್ದಿಷ್ಟ ಅಪ್ಲಿಕೇಶನ್ ಅಗತ್ಯತೆಗಳು ಮತ್ತು ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ಹೆಚ್ಚು ಸಂವಾದಾತ್ಮಕ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ವೆಬ್ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲ ಬೆಳೆದಂತೆ, ಸಿಎಸ್‌ಎಸ್‌ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ API ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ಅನಿವಾರ್ಯ ಸಾಧನವಾಗುವ ಭರವಸೆ ನೀಡುತ್ತದೆ.
ಹೆಚ್ಚಿನ ಅನ್ವೇಷಣೆ
- MDN ವೆಬ್ ಡಾಕ್ಸ್: ಹೈಲೈಟ್ API
- ಸಿಎಸ್‌ಎಸ್‌ ಹೌದಿನಿ: ಈ ಸುಧಾರಿತ ಸಿಎಸ್‌ಎಸ್‌ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವ ಸಿಎಸ್‌ಎಸ್‌ ಹೌದಿನಿ ಯೋಜನೆಯ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ.