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

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

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

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

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

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

SSG עם next

אחרי שלמדנו במאמר הקודם מה זה SSR והבנו שלא מדובר בקליע כסף שפותר את כל הבעיות שלנו, נלמד על SSG שיכול להקל על כמה מהבעיות של SSR.

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