• LinkedIn
  • GitHub
  • Google+
  • Twitter
  • RSS
  • email

Meir Kriheli

  • ראשי
  • מצגות
  • בלוג
  • תגים
  • ארגז כלים
  • קישורים
  • אודות
  • English
  • LinkedIn
  • GitHub
  • Google+
  • Twitter
  • RSS
  • email
‏ 14 באוקטובר 2012 01:32:31

הפסיקו להשתמש בערכים שליליים עבור left ו-text-indent להסתרה ב-css

שימוש בערכים שליליים להסתרה הוא מנהג ידוע . כדי להסתיר אלמנט, תוך שמירה על ה-layout שלו יש שמשתמשים במשהו כמו:

.popup {
    position: absolute;
    top: -1000px;
    left: -1000px;
}

שיטה נפוצה נוספת היא שימוש ב-text-indent שלילי להסתרת טקסט תוך הצגת תמונה (מה שגם עלול לפגוע בדירוג שלכם). לדוגמא:

.logo {
    text-indent: -9999px;
    background-image: url("bla bla");
    overflow: hidden;
    width: 200px;
    height:60px;
}

והבעיה ? הנ"ל גורם להופעת פס גלילה אופקי מכוער וארוך כאשר כיווניות המסמך היא מימין לשמאל.

כדי להוסיף חטא על פשע, יש שירותים (כגון ShareThis שמשמש כאן בבלוג) אשר קובעים ערכים אלו בסקריפט, מה שמקשה מאוד על עקיפתם בעזרת css. אני מסתיר את פס הגלילה בעזרת css, אך הרוחב עדיין קיים, כפי שתגלה גלילה אופקית באתר העברי.

קיימים פתרונות אחרים. עבור ‎.popup ניתן להשתמש ב-top שלילי מבלי לציין את ה-left, התוצאה תהיה זהה.

עבור ‎.logo אני מעדיף משהו בסגנון:

.logo {
    background-image: url("bla bla");
    line-height:800%;
    overflow: hidden;
    width: 200px;
    height:60px;
}

זה ימקם את הטקסט מתחת לגובה האלמנט. מאחר ו-overflow הוא hidden הטקסט יוסתר ולא יופיע פס הגלילה.

  • תגים:‏
  • קוד פתוח‏
  • css‏
  • דו-כיווניות‏
  • תרגומים:‏
  • Stop using negative left or text indents for css hiding
  • מצגת ההרצאה על Salt Stack
  • מצב התרגום לעברית של Django 1.5
blog comments powered by Disqus
התוכן תחת רישיון ייחוס-שיתוף זהה 3.0 התוכן תחת רישיון ייחוס-שיתוף זהה 3.0
HTML5 Powered with CSS3 / Styling, and Semantics