למה כדאי להכיר פיצ׳רים חדשים של CSS

הפוסט הקודם שלי על מתכנתים בעולם החדש של הבינה המלאכותית גרר הרבה עניין ודיונים – גם ברשתות, גם בתגובות וגם בעל פה. בדיון מאד מעניין שהיה אצלי בעבודה – עלה דיון מעניין – אמרו לי שזה קל להראות שצריך ידע בתכנון ובמערכת ובקונטקסט של קוד כאשר מדובר בדברים מורכבים – למשל קריפטוגרפיה, אבטחת מידע וביצועים. אבל בדברים ״קטנים״ יותר, באמת אין שום יתרון למתכנת אנושי.

כך למשל הציוץ הזה של אלון ניסר שהוא מתכנת מאד מנוסה על קוברנטיס וטעות של מתכנתים שנעזרים בו מבלי להבין שהוא לאו דווקא נותן את התשובה האמיתית.

ושאל. וקיבל כצפוי (גם בהתאם לניסוח השאלה, שג׳יפיטי נוטה לרצות, וגם בהתאם לידע השגוי שמפוזר בנושא באינטרנט) תשובה פשוט שגויה לגמרי. ואז עימת אותי איתה: אתה אומר ככה. אבל ג׳יפיטי אומר אחרת.. לא ידעתי מה לעשות עם עצמי.

תוהה לכמה שיט הסוג הזה של התנהלות מוביל

— Alon Nisser (@alonisser) March 22, 2024

כשהבאתי את הציוץ הזה וכאלו שדומים לו כדוגמה, אמרו לי משהו שנשמע די הגיוני:

״קל לך לומר שצריך מתכנת אנושי כאשר צריכים להשתמש ב-hash, אבל לא צריך מתכנת אנושי בכל מה שקשור לפרונט אנד ובטח שלי ל-CSS״. וזו היתה תמצית הטיעון.

המענה שלי הוא שנכון, לא יוצא לי המון להתעסק עם CSS כבר – בעידן הפרימוורקים של היום וגם ספריות הקומפוננטות אני עוסק פחות ופחות בזה. אבל אני כן משתדל להכיר את הפיצ׳רים החדשים ולו רק בשביל להנחות את הבינה המלאכותית שתפתור את הבעיה כמו שצריך ולא עם מאתיים שורות קוד לא יעילות.

הם רצו דוגמה וכך הגיע לעולם המאמר הזה. בפוסט הזה אני סוקר שלוש טכניקות CSS חדשות ומהממות, שנתמכות ברוב הדפדפנים אבל הן חדשות ״יחסית״ – כלומר זמינות לכלל הדפדפנים הגדולים (מה ש caniuse קורא לו baseline) בשנה/שנתיים האחרונות. מדובר בטכניקות פשוטות שחוסכות המון כאב ונכנסו לשימוש בשנים האחרונות ויש סיכוי שגם אם אתם מתכנתי פרונט אנד אתם לא תכירו. לא באשמת אף אחד כמובן, קצב השינויים בעולם הזה הוא גבוה וקל לפספס.

אחרי שאני סוקר אותן, אני נותן דוגמה יפה, כולל קישור ישיר לצ׳אט שאותו קיימתי עם ChatGPT 4 החדש שמראה איך הפתרון שהוא מציע באופן טבעי, מבלי שאני מנחה אותו, הוא פחות טוב. בדקתי גם בקופיילוט וקיבלתי תשובות זהות – את הדוגמאות הבאתי עם Chat GPT בגלל הפיצ׳ר שלו שמאפשר קישור לשיחה.

הנקודה שלי: אפשר להנחות את הבינה המלאכותית לתת פתרון טוב יותר – כלומר כזה שפחות מסובך, נשען פחות על ג׳אווהסקריפט ונשען יותר על טכניקות CSS – גם עם הטכניקות החדשות – אבל בשביל זה צריך להכיר את הטכניקות החדשות ולדעת מה לבקש.

פסאודו סלקטור: has

אחת מהקפיצות המשמעותיות ביותר של CSS זה לקבוע עיצוב של אלמנט על פי הילדים שלו. בעבר היינו יכולים לעשות אם זה עם ג׳אווהסקריפט בלבד. היום? אפשר רק עם CSS. זה אולטרא שימושי לטפסים, כאשר אני רוצה לתפוס טפסים שמישהו מילא ולשנות את העיצוב של אלמנט האבא.

אני אמחיש עם דוגמה קטנה – למשל סלקטור שצובע באדום גבול של טופס שיש בו אינפוט שהוא checked:

form:has(input:checked) {
  border: 2px solid red;
}

בגדול הנקודתיים has זה הפסאודו סלקטור שאפשר להעביר אליו מה שרוצים. במקרה הזה – טופס שיש לו ילד אחד לפחות שהוא input:checked.

והנה הדוגמה החיה למי שרוצה לשחק:

זה באמת מאד מאד שימושי – גם למשל לצביעת תשובות נכונות או שגויות במבחן למשל, או כל שינוי כלשהו באחד הילדים של אלמנט האב.

והנה, נדגים למה חשוב להכיר את זה – נתתי את ה-HTML של הטופס לידידי ChatGPT וביקשתי ממנו שיצבע את הטופס לפי מה שיש בפנים והוא הציע פתרון מבוסס ג׳אווהסקריפט. שזה פתרון ולידי, עובד ובסך הכל היה באמת הפתרון הכי טוב לפני שנתיים. אבל הכרות עם הטכניקה הזו, שהיא חדשה למדי – תסייע לי בלהנחות אותו בפתרון הרבה יותר אלגנטי. ללא ספק כמה שורות ב-CSS הן יותר טובות וקלות מכמה שורות בג׳אווהסקריפט.

https://chat.openai.com/share/f45a12b0-cf5d-43bf-b146-914b43776124

אם לא הייתי מכיר את הטכניקה הזו, הייתי משתמש פשוט בפתרון שהוצע לי. למרות שיש פתרון טוב יותר. המשמעות של טוב יותר הוא שורה אחת ב-CSS שנתמך על ידי רוב הדפדפנים ולא כמה שורות של ג׳אווהסקריפט שצריך לתחזק.

קינון ב-CSS נייטיב

פיצ׳ר שממש אהבתי הוא קינון שבא כנייטיב ב-CSS. איך הוא עובד? בדיוק כמו ב-SASS, LESS ובעצם כמו שאנו רגילים לכתוב כאשר יש לנו וובפאק שמסדר את הכל – אבל בנייטיב!

בהנחה שיש לנו HTML כזה:

<div class="container">
    <p>This is a paragraph inside a container. It demonstrates basic text content.</p>
    
    <ol>
        <li>This is an <strong>ordered</strong> list item.</li>
        <li>The list uses numbers to organize items.</li>
        <li>Text can be <em>italicized</em> for emphasis.</li>
    </ol>

    <ul>
        <li>This is an <strong>unordered</strong> list item.</li>
        <li>It uses bullets to organize items.</li>
        <li>Combining <strong>bold</strong> and <em>italic</em> is possible.</li>
    </ul>
</div>

אני יכול לצבוע את הטקסטים של ה-strong בצבעים אדומים:

.container {
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 10px;
  strong {
    color: red;
  }
}

והטקסטים ייצבעו באדום. הנה דוגמה חיה!

מדובר בפיצ׳ר חדש יחסית (הדגש הוא על יחסית) ואם אני אבקש מצ׳אט GPT סיוע מבלי להכיר את הפיצ׳ר, אני אקבל פתרון – אבל לא בטוח שהפתרון האופטימלי. הנה דוגמה למשל מצ׳אט שבו ביקשתי סיוע כזה. קיבלתי פתרון – אבל לא פתרון אלגנטי ומספק.

https://chat.openai.com/share/03ff09ec-927d-4b7d-886e-c5f2817d71f9

אם אני מכיר פיצ׳רים וטכנולוגיות, אני יכול להנחות את הבינה המלאכותית לעבוד לפי הדרך שאני רוצה – שבמקרה הזה היא יותר טובה.

Container named query

אחד מהפיצ׳רים היותר מדליקים שיש ושימושי מאד בקומפוננטות. אני יכול לשנות את ה-CSS והעיצוב הכללי בהתאם לגודל של אלמנט אב לפי בחירתי – כאשר אני בוחר לו שם. זה אולטרא שימושי במקרים של עיצוב ריספונסיבי כאשר אני רוצה לשנות עיצובים של יחידות בתוך העיצוב שלי.

עד כה היינו יכולים לשנות עיצוב גלובלי באמצעות media query על המסמך עצמו. שזה נהדר אבל די גורם לכאב ראש כאשר אני בונה קומפוננטה שאמורים להשתמש בה בכל מיני ממשקים ואני לא רוצה להכפיף את העיצוב לגודל הכללי של המסמך אלא דווקא לגודל של הקומפוננטה עצמה.

למשל, בואו תסתכלו על הקוד הזה שמתאר וידג׳ט גלובלי שמוטמע בכמה חלקים שונים במערכת או אפילו על פני כמה מערכות.

<div class="global-widget">
  <div class="box">
    <img src="https://picsum.photos/200/300" alt="Placeholder Image 1">
    <p>Your Text Here</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image 2">
    <p>Your Text Here</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image 3">
    <p>Your Text Here</p>
  </div>
</div>

אני רוצה למשל שהתמונה לא תוצג אם הגודל של global-widget יהיה קטן מ-400 פיקסלים.

אני לא יכול לסמוך על גודל המסך ו-media query רגיל. למה? כי מדובר בוידג׳ט שיכול להיות בכל מקום – יש מצב שהוא יהיה במסך קטן יחסית אבל זה שישתמש בוידג׳ט יבחר לתת לו 100 אחוז מהגודל ואז הוא יהיה יותר רחב יותר מ-400 פיקסלים. יש מצב שהוא דווקא יהיה במסך גדול אבל מי שישתמש בו יבחר לתת לו רק 20 אחוז מהגודל ואז הרוחב הכולל שלו יהיה קטן מ-400 פיקסלים. כלומר אני צריך לדעת מה הרוחב שלו.

עם container query אני יכול לעשות את זה ממש בקלות. אני אגדיר ש- global-widget הוא הקונטיינר שלי. אני אקרא לו בשם ואז אני יכול ליצור הגדרות של התנהגות לפי הרוחב שלו.

.global-widget {
  display: flex;
  justify-content: space-around;
  margin: 20px;
  container-type: inline-size;
  container-name: global-widget;
}
.box {
  text-align: center;
  margin: 10px;
}
.box img {
  width: 100%;
  max-width: 300px; 
  margin-bottom: 10px;
}

@container global-widget (width < 400px) {
  .box img {
    display: none
  }
}

בשורות:

  container-type: inline-size;
  container-name: global-widget;

אני מגדיר את global-widget כקונטיינר וקורא לו בשם. אני יכול לבחור איזה שם שאני רוצה (בלי תוים מיוחדים ורווחים אבל עם מקפים). השם שבחרתי הוא global-widget.

עכשיו אני יכול ליצור query – במקרה הזה – כל מה שבתוכו יקרה אם global-widget יהיה מתחת ל-400 פיקסלים.

ומי שרוצה להתנסות ולהשתעשע – מוזמן לדוגמה הזו ב-codepen, שמתי שם קונטיינר – נסו לשחק עם הגודל.

גם פה – כדאי להכיר במיוחד אם אני משתמש בצ׳אט GPT. למה? כי אם אני אבקש מצ׳אט ג׳יפיטי לפתור לי את הבעיה – אני אקבל תשובה טובה שעובדת – אבל הרבה הרבה פחות אלגנטית ועם הרבה יותר קוד.

https://chat.openai.com/share/439d682c-9761-4cfa-ad21-d900a57c83fd

סיכום

אני לא הולך להיות נביא ומטיף כנגד עולם הבינה המלאכותית מייצרת התוכן והקוד, ממש לא. אני אוהב לעבוד עם בינה מלאכותית והכלים ולפי דעתי כל מתכנת, אבל כל מתכנת, צריך להכיר את הכלים האלו ולהשתמש בהן בעבודתו. מדובר בכלים שמשדרגים כל מתכנת ומתכנתת.

א-ב-ל – חשוב להבין את המגבלות של הכלי החשוב הזה – הוא לא אדם אלא מכונה שנשענת על סטטיסטיקה ולמרות שזה כלי חזק מאד, כדאי שתהיה הבנה כדי שנוכל להנחות אותו באופן המתאים. זה נוגע לכל תחומי התכנות – גם תחומים מתוחכמים מאד הנוגעים לליבת המערכת וגם בפרונט אנד ואפילו בחלקים היותר פשוטים בפרונט אנד.

נכון, עוד 10-20 שורות ג׳אווהסקריפט בקומפוננטה באיזה פרויקט קטן לא יהרגו אף אחד. אבל אם אתם משחקים במגרש של הגדולים, עם הרבה קומפוננטות ומאות אלפי שורות קוד – הדברים האלו מצטברים והופכים להיות מאד משמעותיים. אפשר וצריך להשתמש בכלים האלו, אבל כשעובדים בסקייל כדאי מאד להכיר ולהבין במה שעושים וגם איך שהמודולים האלו עובדים – כדי להיות מתכנתים טובים יותר – לא משנה באיזה תחום או שפה אתם מתכנתים.