CSS3 Resize

הנה משהו ממש נחמד שיצא לי להשתמש בו לא מזמן בפרויקט מסוים – תכונת 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, אבל לכל השאר זה חסכון משמעותי של זמן בקוד אלגננטי ומודרני. טוב להכיר.

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (2 הצבעות, ממוצע: 4.50 מתוך 5)

תגיות: פורסם בקטגוריה: CSS3

אל תשארו מאחור! יש עוד מה ללמוד!