כאשר אנו מתכנתים עמוד web, אנו נוהגים ליצור קוד HTML ו-CSS עם ערכים קבועים לטובת עימוד ועיצוב העמוד
בפוסט הבא נעסוק בצורך של עדכון ערכי ה-CSS על ידי פונקציות Javascript שיופעלו בהתאם להתנהגות הגולש.
תוכן עניינים
משתני CSS
אפליקציות/ממשקי צד לקוח, עשויות להכיל עמודי תצוגה רבים אשר להם תכונות עיצוב (CSS) משותפות רבות. כמו בכל עולמות התכנות, נרצה לשמור את חלקם כמשתנה וזאת על מנת שנוכל לבצע שימוש חוזר בהם וגם להינות מהאפשרות לשנותם במקום אחד בצורה כזאת שתחול על כל המקומות שעושים שימשו במשתנה.
לדוגמא
בממשק ישנו פונט אחיד וצבע רקע מסוים בכל העמודים השונים, נוכל להגדיר משתני ה-CSS בצורה הבאה:
:root {
--main-font: Roboto;
--main-color: brown;
}
השימוש במשתנה באלמנטים השונים יבוצע באמצעות פונקצית ה-var, אשר תחלץ את ערך המשתנה עבורנו.
element {
font-family: var(--main-font);
background-color: var(--main-color);
}
בצורה זו, ניתן לשמור מספר רב של משתנים, לדאוג לעבודה נכונה ללא חזרות בקוד ולוודא כי כאשר נרצה לשנות תכונות בעיצוב נוכל לעשות זאת ממקום אחד אשר ישפיע על כל שאר המקומות בלי מאמץ.
ערכים דינמים למשתני ה-css
עד כה, השמנו למשתני ה-css ערכים קבועים, אבסולוטים, ידועים מראש. אך מה אם נרצה לשנות את תכונות העיצוב על פי התנהגות המשתמש באתר? כיצד נוכל לשנות את משתני ה-CSS בעקבות שינוי של משתני javascript?
דוגמא 1 – באמצעות ספריית – Vue JS
הפריימוורקים השונים הקלו עלינו את החיים. הם מעניקים לנו תשתית מצוינת ואוסף רב של פעולות מובנות שניתנות לנו מעצם השימוש בספריות. בדוגמא הזאת נעסוק בספריה של Vue.
נעשה שימוש ב-
1. קומפוננטה ״מדומה״ (לא תייצר אלמנט ב-DOM) מסוג style. תפקידה יהיה להזריק String בצורה כזאת שהדפדפן יבין כי מדובר בקוד CSS style.
<component is="style">{{style}}</component>
2. נוסיף מטודה לאובייקט ה-computed, אשר תחשב עבורנו את הערכים של המשתנים ב-javascript לתוך המחרוזת “style״ אותה נחזיר לקומפוננטת העיצוב. פונקציות ה-computed מעניקות לנו כוח אדיר בעובדה שהן מכילות watcher בתוכן – אשר יגרמו לפונקציה לרוץ מחדש בכל פעם שהערכים אותם היא מכילה ישתנו.
3. אלמנטי קלט, אשר יעזרו לגולש לבחור מבין אפשרויות. את הערכים הנבחרים נחשב בפונקצית ה-computed אשר תחזיר את הערך לקומפוננטת ה-style.
4. קונטיינר דמה, אשר מעוצב באמצעות משתני CSS. כאשר הגולש בוחר אפשרות מבין האפשרויות השונות, ערך משתנה ה-CSS ישתנה על ידי ה-computed וישפיע על עיצוב האלמנט (צבע רקע וגודל טקסט)
בדוגמא הנוכחית ניתן לגולש את האפשרות לבחור צבע רקע ואת גודל הפונט, ניתן לבחור מבין האפשרויות השונות של כפתורי הרדיו ולראות כיצד זה משפיע על העיצוב של האלמנט דמה.
See the Pen JS variables and css by Ron (@ron2man) on CodePen.
דוגמא 2 – javascript טהור
הדוגמא הנוכחית נגזרת כחלק מתרגיל בית עבור ראיון עבודה, הדרישה היתה להשתמש ב-ונילה ג׳אווה סקריפט(כלומר ללא ספריה – אלא טהור). בתרגיל ישנה תמונת רקע מטושטשת ובמעבר עכבר יש לחשוף את התמונה במיקום הסמן.
נעשה שימוש ב-
.container {
--x: 0px;
--y: 0px;
.
.
.
}
2. לאלמנט ה-container נצמיד פונקציה שתחל לפעול בכל פעם שהעכבר יזוז מעליו. באמצעות הפונקציה נזריק כסטייל פנימי את ערכי משתני ה-css.
let containerElement = document.querySelector('div.container')
containerElement.onmousemove = function(e) {
let x = e.offsetX;
let y = e.offsetY;
containerElement.style.setProperty("--x", x + "px");
containerElement.style.setProperty("--y", y + "px");
}
3. את השימוש האמיתי במשתני ה-css נבצע באלמנט מתחת להיררכיה של ה-container.
.sharp-circle {
.
.
.
left: var(--x);
top: var(--y);
background-position-x: calc(var(--x) * -1);
background-position-y: calc(var(--y) * -1);
}
See the Pen blur widget by Ron (@ron2man) on CodePen.
בעיות בעבודה עם משתני צבעים ופתרונות
כאשר עובדים עם פונקציות הצבעים rgb ו-rgba ובמשתנה css שמוגדר בפורמט hex נתקלים בכך שהדפדפן לא מכיר את הערך ונכשל מלהציג את הצבע. הסיבה היא שהפונקציה מבצעת חישוב עבור צבעים ״שטרם חושבו״.
הפתרון – באמצעות פונקצית javascript להעביר את משתנה ה-hex לפורמט rgb כמחרוזרת ולשמור עוד משתנה css בצורת מחרוזת ״rgb״, כלומר שלושת המספרים שמייצגים את הצבע בפורמט rgb ללא הפונקציה בפועל.
נשתמש ב-
1. פונקציה ב-javascript אשר מקבלת ערך בפורמט hex ומחזירה מחרוזת rgb (אדום, ירוק, כחול) מופרד בפסיקים.
2. נשמור את המשתני Css על הקונטיינר לצורך הדוגמא
function convertToRGB(color) {
if (color.length != 6) {
throw "Only six-digit hex colors are allowed.";
}
var aRgbHex = color.match(/.{1,2}/g);
var aRgb = [
parseInt(aRgbHex[0], 16),
parseInt(aRgbHex[1], 16),
parseInt(aRgbHex[2], 16)
];
return aRgb;
}
.container {
--hex-color: #1515d6;
--rgb-color: 21,21,214;
}
בדוגמא נראה הדגמה לפי הסדר הבא –
1. שימוש במשתנה בפורמט hex בתכונת background-color ללא פונקציות rgb או rgba – עובד
2. שימוש במשתנה בפורמט hex בתכונת background-color עם שימוש בפונקציית rgba – לא עובד
3. שימוש במשתנה בפורמט rgb בתכונת background-color עם שימוש בפונקציית rgba – עובד
See the Pen css variables - hex color and rgba function by Ron (@ron2man) on CodePen.
בעיות בעבודה עם פונקציות SASS
בעבודה עם פריימוורקים כמו Vue, React, Angular ואחרים אנו מקבלים את האפשרות לעבוד עם SASS, שכבת הרחבה מעל css שמאפשרת עבודה עם שלל פונקציות מובנות, לולאות ועוד הרבה יכולות מדהימות. SASS מתקמפל לפני הרצת העמוד ולכן שימוש במשתני CSS בפונקציות המובנות (mix, darken, lighten) אינו אפשרי. לכן גם כאן, הפתרון יהיה בדמות פונקציות javascript שיבצעו עבורינו את החישוב ולאחר מכן נוכל להשים את הערך במשתנה css.
לדוגמא: באפליקציה ניתנת לכל משתמש האפשרות לשמור את צבעי המערכת המועדפים עליו (הצבעים הופכים להיות ערך דינאמי שמשתנה ממשתמש למשתמש).
– עבור אלמנט מסוים נרצה להשתמש בפונקצית הצבע rgba (אשר מאפשרת לנו לחשב שקיפות עם צבע מסוים)
– עבור באלמנט אחר כבר קיימת שקיפות לכן נרצה להשתמש בערך הצבע אשר מחושב בערבוב עם לבן.
נשתמש בפונקציה שמקבלת 2 צבעים ואחוז ערבוב ומחזירה צבע ב-hex:
// CREDIT: https://gist.github.com/jedfoster/7939513
function mix (color_1, color_2, weight) {
function d2h(d) { return d.toString(16); } // convert a decimal value to hex
function h2d(h) { return parseInt(h, 16); } // convert a hex value to decimal
weight = (typeof(weight) !== 'undefined') ? weight : 50; // set the weight to 50%, if that argument is omitted
var color = "#";
for(var i = 0; i <= 5; i += 2) { // loop through each of the 3 hex pairs—red, green, and blue
var v1 = h2d(color_1.substr(i, 2)), // extract the current pairs
v2 = h2d(color_2.substr(i, 2)),
// combine the current pairs from each source color, according to the specified weight
val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
while(val.length < 2) { val = '0' + val; } // prepend a '0' if val results in a single digit
color += val; // concatenate val to our new color string
}
return color; // PROFIT!
};
בחלק הראשון מודגמת העבודה עם משתני css וצבעים המחושבים על ידי פונקציות javascript.
בחלק השני מודמגת עבודה עם צבעים קבועים (ללא משתני css) המאפשר עבודה עם פונקציות rgba ו-mix.
See the Pen JS mix() and css variables by Ron (@ron2man) on CodePen.