הפסיקו להשתמש בערכים שליליים עבור 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 הטקסט יוסתר ולא יופיע פס הגלילה.

Translations

• English: Stop using negative left or text indents for css hiding