CSS3 Resize

כך משתמשים ב-Resize לאלמנטים ב-CSS3.

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

למשל, בואו ונחשוב שיש לי טופס מסוים ובו יש רשימה ארוכה למדי של Radio buttons, אני יכול לירוק את הרשימה הזו לדף, אבל אני יכול לתחום אותה באמצעות Div שיש לו overflow: hidden. למשל:

  • פריט מספר 1
  • פריט מספר 2
  • פריט מספר 3
  • פריט מספר 4
  • פריט מספר 5
  • פריט מספר 6
  • פריט מספר 7
  • פריט מספר 8
  • פריט מספר 9
  • פריט מספר 10
  • פריט מספר 11

התיבה שלעיל הוכנה על ידי הקוד הבא כמובן:


<div style="width: 250px; height: 150px; overflow-x: scroll; overflow-y: hidden; border: 1px solid black;">
<ul>
<li><input type="radio" name="whatever" />פריט מספר 1</li>
<li><input type="radio" name="whatever" />פריט מספר 2</li>
<li><input type="radio" name="whatever" />פריט מספר 3</li>
<li><input type="radio" name="whatever" />פריט מספר 4</li>
<li><input type="radio" name="whatever" />פריט מספר 5</li>
<li><input type="radio" name="whatever" />פריט מספר 6</li>
<li><input type="radio" name="whatever" />פריט מספר 7</li>
<li><input type="radio" name="whatever" />פריט מספר 8</li>
<li><input type="radio" name="whatever" />פריט מספר 9</li>
<li><input type="radio" name="whatever" />פריט מספר 10</li>
<li><input type="radio" name="whatever" />פריט מספר 11</li>
</ul>
</div>

כדי לתת למשתמש אפשר לבצע resize ובכך להקטין או להגדיל את תיבת הבחירה, אנו נשתמש בתגית resize שיכולה לקבל כמה ערכים: vertical לאפשרות שינוי בציר האנכי, horizontal לציר האופקי ו-both לשניהם. למשל:

בדוגמה שלהלן אני משתמש ב-resize: vertical כדי לאפשר הזזה אנכית של ה-div:

  • פריט מספר 1
  • פריט מספר 2
  • פריט מספר 3
  • פריט מספר 4
  • פריט מספר 5
  • פריט מספר 6
  • פריט מספר 7
  • פריט מספר 8
  • פריט מספר 9
  • פריט מספר 10
  • פריט מספר 11

וכך נראה הקוד כמובן, די זהה לקודם מלבד תוספת ה-resize


<div style="width: 250px; height: 150px; overflow-x: scroll; overflow-y: hidden; border: 1px solid black;resize: vertical">
<ul>
<li><input type="radio" name="whatever" />פריט מספר 1</li>
<li><input type="radio" name="whatever" />פריט מספר 2</li>
<li><input type="radio" name="whatever" />פריט מספר 3</li>
<li><input type="radio" name="whatever" />פריט מספר 4</li>
<li><input type="radio" name="whatever" />פריט מספר 5</li>
<li><input type="radio" name="whatever" />פריט מספר 6</li>
<li><input type="radio" name="whatever" />פריט מספר 7</li>
<li><input type="radio" name="whatever" />פריט מספר 8</li>
<li><input type="radio" name="whatever" />פריט מספר 9</li>
<li><input type="radio" name="whatever" />פריט מספר 10</li>
<li><input type="radio" name="whatever" />פריט מספר 11</li>
</ul>
</div>

על מנת לא לשבור את ה-layout לחלוטין ולא לאפשר למשתמש לצמצם את האלמנט לגודל קטן מדי או להגדיל אותו יותר מדי, אנו יכולים להגדיר גובה מינימלי וגובה מקסימלי באמצעות min-height ו-max width.

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

פוסטים נוספים שכדאי לקרוא

בינה מלאכותית

להריץ ממשק של open-webui על הרספברי פיי

להפעיל ממשק של צ׳אט ג׳יפיטי שאפשר לגשת אליו מכל מחשב ברשת הביתית על רספברי פיי עם מודל בשם tinydolphin שרץ על רספברי פיי.

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

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

ESP32 מאפס לילדים

מדריך ל-ESP32 לילדים ולהורים מאפס

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

גלילה לראש העמוד