Front-end Developer’ların hemen hemen hepsi -9999px hack’ini biliyorlardır sanırım. Uzun yıllar, hatta şu an bile kullanımı mevcut. Herhangi bi’ text elementinin içerisin imaj koymak istediğinizde bu yola başvurarak, text’in gözükmesini engelleyebiliyorsunuz.

See the Pen IAaBd by Ibrahim Nergiz (@phyesix) on CodePen.

//assets.codepen.io/assets/embed/ei.jsYukarıda bunun çok basit bir örneği de mevcut. Element içerisinde imaj gösterilmiş, yazı ise gözükmüyor. Basit ve etkili. Bunun yerine:

[code lang=“html”] .no-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } [/code]

Örneği ise:

See the Pen eEKtu by Ibrahim Nergiz (@phyesix) on CodePen.

//assets.codepen.io/assets/embed/ei.js //assets.codepen.io/assets/embed/ei.js

Yukarki css elemntini istediğiniz yerde kullanabilirsiniz. Kullanırken de aşağıdaki faydaları görmüş olacaksınız: + Performans olarak gözle görülür bir artış yaşanmakta. Geleneksel yöntemde -9999px’lik bi’ alan browser tarafından çiziliyor, burada bunu çizdirmiyoruz. Her ne kadar hepimizin bilgisayarları sıkıntısız olsa da özellikle de mobilde önemli bir hal alabiliyor. + Uzun yazılar içinde bulunduğu container’in dışına taşmıyor.